The Problem Perlin Solved
In 1983, Ken Perlin was working on the film Tron and needed to generate natural textures — clouds, smoke, terrain — that feel organic rather than mechanical. random() wasn't enough: pure random values create white noise, with no spatial coherence.
His solution: coherent pseudo-random noise. Two nearby points have nearby values. The value space is continuous, not chaotic. Perlin received a Scientific Academy Award for this invention.
The Mental Image
Think of random() as rolling a die at each step: each value is independent of the previous. Think of noise() as the temperature curve of a day: variations are gentle, continuous, predictable in the short term but never identical from one day to the next.
How It Works (Without Maths)
noise(x) takes a position argument and returns a value between 0 and 1. The key: if x varies slowly, the value varies slowly.
3 Fundamental Uses in p5.js
1. Animated position
let t = 0;
function draw() {
t += 0.005;
let x = noise(t) * width;
let y = noise(t + 100) * height; // offset: avoid x and y moving the same way
ellipse(x, y, 10, 10);
}
2. Vector field
function draw() {
for (let p of particles) {
let angle = noise(p.x * 0.005, p.y * 0.005, frameCount * 0.003) * TWO_PI * 2;
p.x += cos(angle) * 1.5;
p.y += sin(angle) * 1.5;
}
}
3. 2D terrain
for (let x = 0; x < width; x++) {
let h = noise(x * 0.008, frameCount * 0.005) * height;
line(x, height, x, height - h);
}
The Hidden Parameter: Scale
The multiplier applied to x (0.005, 0.008…) determines noise scale. Small factor = slow transitions = large patterns. Large factor = fast transitions = tight patterns.
3 Rules Summary
1. Vary the noise() argument slowly for slow movement
2. Use different offsets for independent dimensions
3. Play with the scale factor to control pattern density