p5.js Perlin Flow Field — Generative Canvas Background

A flow field is the classic piece of generative art, and it is worth building once because it demonstrates something counter-intuitive: thousands of particles that never communicate can still move as one system. There is no flocking logic here, no neighbor lookups, no shared state. Every particle independently asks the same invisible field which way to go, and coherence falls out for free.

Why Perlin noise and not Math.random()

Everything rests on the difference between random and *smooth* random:

var angle = p.noise(pt.x * noiseScale, pt.y * noiseScale, zoff) * p.TWO_PI * 2;

Math.random() has no relationship between consecutive values — sample it per particle and you get static. Perlin noise is spatially continuous: two nearby inputs return two nearby outputs. So a particle at (100, 100) and one at (102, 100) read almost the same value, get almost the same angle, and travel almost the same direction. Follow that across the canvas and the particles trace out smooth, continuous streams.

That is the entire algorithm. One noise sample becomes one angle, the angle becomes a unit vector via cos/sin, and the particle steps along it.

The third dimension is time

p.noise() is called with three arguments, and the third — zoff — is the interesting one. Rather than moving through a static 2D field, the particles are moving through a slice of a 3D noise volume, and incrementing zoff each frame slides that slice forward. The field itself morphs continuously.

This is why the drift control feels so different from a speed control. Speed would move particles faster through a fixed landscape; drift changes the landscape underneath them. At zero the field is frozen and particles settle into permanent channels; turn it up and the streams reorganize as you watch.

Noise scale is a zoom, not a strength

noiseScale multiplies the coordinates before sampling, so it controls how far apart in noise-space two adjacent pixels are:

- Small values (0.001) sample a tiny patch of noise stretched over the whole canvas — vast, sweeping currents. - Large values (0.02) sample a wide area compressed into the same space — tight, turbulent eddies.

Thinking of it as zoom rather than intensity makes the slider predictable. The other line worth knowing is p.noiseDetail(3, 0.5), which sets how many octaves of noise are layered and how quickly each contributes less. Fewer octaves means smoother, more abstract flow; more adds fine texture at the cost of computation.

The canvas is never cleared

p.fill(5, 6, 13, 9); p.rect(0, 0, p.width, p.height);

Each frame paints a nearly transparent rectangle over everything instead of clearing it. Old strokes fade a little more every frame and eventually disappear, so each particle leaves a tail — and thousands of overlapping tails accumulate into the visible field lines. The flow field is never drawn directly; it emerges from the record of where particles have been.

The alpha value is the single most sensitive number in the file. Higher, and trails vanish before they can build into structure. Lower, and the canvas saturates into a solid smear. Nine out of 255 is roughly a two-second memory.

Because the field only exists as accumulated paint, every control that changes the field also calls p.background() to wipe the canvas — otherwise the old field lines stay burned in underneath the new ones.

Particle lifespans, and why they matter

Each particle carries a life counter and respawns at a random position when it expires or leaves the canvas. Without lifespans, every particle eventually gets trapped in a noise attractor — a spot where the field converges — and after twenty seconds the canvas is a few bright dots and nothing else. Randomizing the initial life (p.random(60, 260)) staggers respawns so the field refreshes continuously rather than pulsing.

Instance mode

The sketch is written as new p5(function (p) { ... }, host) rather than p5's global mode. Global mode attaches setup, draw, and around 200 other names to window, which collides with almost anything else on a real page — text, line, and filter are all p5 globals. Instance mode namespaces everything behind p and mounts the canvas into a specific element, which is the only sane choice for a component embedded in an existing site.

Reusing it

The tunable numbers are COUNT, the step size of 1.6, and the background alpha. Lower COUNT on mobile — 3000 particles is comfortable on a desktop and heavy on a low-end phone. Hue is derived from the angle, so particles moving the same direction share a color and the field reads as banded rather than noisy. Compare with a particle network for connection-based motion, or physics balls when particles should collide rather than flow.