Flow Fields: Gradient Noise + Particles

An invisible wind map

A flow field assigns a direction θ(x, y) to every point on the canvas — an invisible wind map that tells a particle passing through which way to turn. Drop enough particles into that wind and let them run, and the aggregate of their paths reveals the field's hidden structure: swirls, ridges, braided streams. The technique, popularised by generative artists like Tyler Hobbs on top of Processing/p5.js, is short enough to build from scratch in plain Canvas 2D in under an hour. It looks organic rather than random because it's built on continuous, spatially-correlated noise: nearby points get similar angles, so particles that start close together drift together for a while before the field pulls them apart — the same qualitative behaviour you see in smoke, wind-blown sand, or a river's current lines.

From Perlin noise to a vector field

The angle function needs to vary smoothly across space, so Perlin noise — continuous, in roughly [−1, 1], no grid artefacts — is the classic choice, scaled into a range of turns: θ(x, y, t) = noise(x·s, y·s, t·s_t) · 2π · n, where s is the spatial noise scale, s_t the time scale, and n the number of full rotations the noise range maps to. Adding the time term means the field itself slowly evolves, so a particle that would otherwise settle into a closed loop keeps discovering new territory — without it, the animation freezes into a static picture within seconds. Each particle then moves with x += cos(angle)·speed, y += sin(angle)·speed every frame, wrapping or respawning when it drifts off-screen.

θ(x, y, t) = noise(x·s, y·s, t·s_t) · 2π · n
x += cos(θ) · speed;  y += sin(θ) · speed
Trail fade: ctx.fillStyle = "rgba(10,10,20,0.03)"; ctx.fillRect(0,0,w,h)

The trick is what you don't clear

The signature look comes from not fully clearing the canvas each frame: instead of ctx.clearRect(), paint a near-transparent rectangle over the whole canvas before drawing new particle positions. A low alpha (0.01–0.02) leaves long ghostly streaks; a higher alpha (0.08–0.15) leaves short comet tails that show the instantaneous field shape more clearly — this single parameter is the biggest visual lever in the whole sketch. Colour usually comes from the local field angle mapped to hue (hue = angle/(2π)·360), literally making the invisible vector field visible; 3,000–5,000 particles at 60fps is comfortable for Canvas 2D on most laptops, with noise scale, time scale, particle count, trail alpha and speed each trading off density, liveliness and frame rate against one another.

Frequently asked questions

Try it live

Everything above runs in your browser — open Flow Fields, tune noise scale, particle speed and trail fade, and save your composition as a PNG. Nothing is installed, nothing is uploaded.