Perlin noise flow field — live canvas animation example

motion & easing8+
trig, angles & vectors8+
collision detection11+
numbers in motion7+
geometry & shapes8+
generative showpieces13-
handy helpers7+
particles:600speed:2.5zoom:3trail:40
🌊 Perlin Flow Field — What's going on? Each particle follows an invisible "wind map" made of Perlin noise. PERLIN NOISE is a way to make smooth random numbers. Unlike pure random (which jumps around chaotically), Perlin noise changes gradually — nearby points get similar values. That's what makes it look organic and natural. HOW THE FIELD WORKS: 1. Divide the canvas into an invisible grid 2. At each grid point, compute a noise value → turn it into an angle (0–2π) 3. Each particle reads the angle at its position and steers that direction 4. The noise slowly "flows" over time (z-offset), so the whole field evolves THE MATH: angle = perlin2(x * scale, y * scale + time) × 4π vx += cos(angle) × force vy += sin(angle) × force The permutation table is the key trick: Ken Perlin (1983) shuffled 0–255 into a lookup table so gradient directions could be computed cheaply without storing them explicitly. Real-world uses: cloud/terrain generation in games, smoke/fire VFX, procedural textures, organic animation paths.