Perlin Noise Flow Field
Steer many particles along Perlin-noise-derived direction vectors sampled from a fixed grid, producing organic curved-line drawings.
What it is
A flow field is a grid of direction vectors that many particles get pushed through, tracing curved paths as they go — that general loop is the flow field technique. This entry fixes one thing: direction at every grid point comes from sampling Perlin noise, not independent randomness. Sighack, writing up this construction, frames the canvas as “a two-dimensional force field,” and is explicit about why noise replaces randomness: “to give a more organic feel to the randomness, Perlin noise is used instead in determining the directions of forces.” Sighack also notes the construction is “sometimes referred to as perlin flow fields or vector fields.” The corpus records two further names for it: “Flow field” (from The Coding Train) and “Perlin Noise Fields” (from sighack.com).
How it works
- Lay a grid over the canvas and give every cell one direction vector, as in the general flow field loop.
- Fill it by sampling Perlin noise at each cell’s coordinates instead of choosing the angle independently at random. Because the noise function is continuous, nearby cells land on nearby noise values and get nearly the same angle, so the field bends smoothly instead of jittering.
- Release particles onto that field and move each one by the vector wherever it sits — sighack: “the next step is to release some particles onto the canvas and simulate their movement as effected by the underlying forces.” (Flow field describes this same step as advecting particles through the grid.)
- To animate the field across frames without resampling an unrelated field every frame — which would make particles jump instead of flow — sample one dimension further into the noise and increment it a little each frame.
Parameters & tuning
- Direction source: random-per-cell vs. Perlin-sampled. The one knob that separates this technique from a generic flow field. Pull the direction from independent randomness and neighbouring cells agree on nothing, so every path reads as jittery, decorrelated scribble — exactly what sighack frames Perlin noise as fixing: “to give a more organic feel to the randomness, Perlin noise is used instead in determining the directions of forces.” Sample from Perlin noise instead and nearby cells land on nearby noise values, so the field bends smoothly and paths read as wind or current.
- z-offset per frame. One phrase in The Coding Train’s materials for this construction is “Add zoff,” with no elaboration attached; the plain reading for a noise-based field is sampling one extra dimension and incrementing it a little each frame, rather than reseeding a fresh field from scratch. None of the sources here say what too small or too large looks like on screen; from noise’s own continuity, a tiny increment should read as near-frozen and a large one like a fresh reseed — verify by eye, it’s not documented.
- Spatial scale of the noise. How coarsely Perlin noise gets sampled for direction is also a tuning knob, moving the field between tight scribbles and long, sweeping lines — sighack’s write-up documents this separately as the scale of the Perlin noise.
- The particle loop’s own behaviour once you have a direction field — step length, particle count — belongs to the general flow field technique.
Where it’s been used
Sighack’s post builds the identical construction described above; the quotes throughout this page are drawn from it. Sighack also maintains a Processing repository, sighack/perlin-noise-fields, described on GitHub as “Repository of Processing sketches exploring creative uses of Perlin noise fields,” and MIT-licensed. Materials from The Coding Train (linked below) use the phrases “Flowfield array,” “Random angle,” “N-dimensional perlin noise,” “Have particles be affected by vectors,” and “Add zoff” for pieces of this construction — quoted here as vocabulary, not as a stated order or mechanism.
Variants & neighbours
The flow field page is the loop this technique specializes: build a grid of vectors, advect particles through it, draw the paths. Nothing about that loop changes here — only where each grid point’s angle comes from is fixed, to a Perlin-noise sample.
Sighack’s write-up catalogues further rendering variations on top of that same particle loop, among them: stroke cap for the lines to square switches a line’s cap from round to square for a charcoal-pencil texture; a lifetime-driven saturation fade fades a particle’s stroke from full saturation to white over its life while narrowing its width, like a flame burning out; a comet-tail particle trail lengthens a particle’s trailing mark while lowering its opacity as it ages; and layered particle compositing groups particle sets into ordered layers, simulating each before drawing the next.
The same write-up also describes perpendicular stroke offset, easy to mistake for one of those rendering variations but a different move: it rotates each mark to be perpendicular to the particle’s heading via translate and rotate, instead of drawing along it. Its golden ratio color generator has nothing to do with the field or particle loop — it steps the colour wheel by the golden ratio to generate a sequence of distinct hues.
Go deeper
- Sighack’s post building this construction
- sighack/perlin-noise-fields — a Processing repository by sighack, described on GitHub as “Repository of Processing sketches exploring creative uses of Perlin noise fields,” MIT-licensed.
- The Coding Train’s materials for this construction
Connected to
Variant of: Flow field
Try it yourself
One phrase in The Coding Train's materials for this construction is 'Random angle' — the phrase itself gives no elaboration, but the plain reading for a flow field is an independent random direction per cell, with no relationship to its neighbours. Predict, without running anything, what a field built that way looks like once particles are drawn through it, and why sampling from Perlin noise instead fixes it.
Read that way, there's no relationship between one cell and its neighbour, so particles crossing from cell to cell keep getting yanked in unrelated directions — the paths would read as jittery, hairy scribble rather than a current. Perlin noise is continuous, so cells that are close together in the grid sample nearby noise values and get nearly the same angle; the field bends smoothly instead of jittering, which is exactly the 'organic feel' sighack describes trading the pure randomness for.
One phrase in The Coding Train's materials for this construction is 'Add zoff' — the phrase alone doesn't say what it does, but the plausible reading for a noise-based field is sampling one extra noise dimension (a 'z' value) and incrementing it a little every frame, rather than resampling a fresh field from scratch. Working from that reading: what would you expect to see if you reseeded from scratch every frame instead of incrementing z?
Perlin noise's continuity only helps if you keep sampling near the last point you sampled, so incrementing z by a small step each frame keeps every frame's field nearly identical to the last, which is what makes the animation drift rather than jump. Reseeding from scratch every frame throws that away — each frame's field would be uncorrelated with the last, so particles would appear to jump or flicker between unrelated flow patterns rather than drift.