Build a Flow Field in p5.js: A 30-Line Sketch and Six Seeds

The geometry behind a flow field

A flow field is a spatial arrangement of vectors. Each location has a direction and, optionally, a magnitude. A particle entering the field reads the vector at its current position, moves a short distance and reads another vector. Repeating this operation creates a path that follows the changing direction of the field. In generative art, these paths become the visible drawing: a collection of curves shaped by an invisible mathematical structure.

Perlin noise is useful because neighboring coordinates tend to produce related values. This continuity prevents the abrupt directional changes associated with independent random numbers. For a basic two-dimensional field, sample noise at x multiplied by a scale and y multiplied by the same scale. Map the resulting value to an angle between zero and TWO_PI, then use cosine and sine to construct the direction vector.

A compact p5.js implementation

The following sketch uses one particle and one direction lookup per frame. Its seed controls the noise field and its starting position, so the same settings reproduce the same drawing. The code favors readability over optimization: the vector is calculated directly from the particle's coordinates, and the particle leaves a continuous trail on the canvas.

The scale parameter determines how quickly the field changes across space. A value of 0.006 creates relatively broad directional regions on a 600-pixel canvas. Increase it to introduce tighter turns. The step parameter controls the distance traveled in each frame, while the frame limit prevents the sketch from drawing indefinitely.

• Canvas: 600 by 600 pixels.
• Noise scale: 0.006.
• Movement step: 2 pixels per frame.
• Particle count: 1.
• Seed: 17.
• Frame limit: 4,000.

The core sketch

This is a complete starting point. The particle begins at the center, follows the field and draws a line segment at each step. The background is established once, so the previous positions remain visible. A single particle is sufficient to explain the technique; additional particles can be introduced after the relationship between noise, direction and movement is clear.

• function setup() {
• createCanvas(600, 600);
• randomSeed(17);
• noiseSeed(17);
• background(248);
• stroke(25, 35, 55, 45);
• strokeWeight(0.8);
• let x = width / 2;
• let y = height / 2;
• for (let i = 0; i < 4000; i++) {
• let n = noise(x * 0.006, y * 0.006);
• let a = n * TWO_PI * 2;
• let nx = x + cos(a) * 2;
• let ny = y + sin(a) * 2;
• line(x, y, nx, ny);
• x = nx;
• y = ny;
• }
• }

Six seeds, six visual directions

A seed changes the arrangement of the noise field without changing the drawing rules. This makes it possible to explore a family of compositions while keeping the underlying system stable. For example, replace 17 in both seed functions with 31, 52, 89, 144 or 233. Each value establishes a different procedural arrangement. Keep the scale, step length and iteration count fixed while comparing the resulting path structures.

Seed variation is especially useful when choosing a composition for further development. A field with broad directional regions can create long, sweeping marks. Another may turn more frequently and produce a compact tangle. A third may carry the path toward the canvas edge. These differences are consequences of the spatial arrangement, not evidence that one seed is inherently better.

• 17: the reference composition.
• 31: an alternative field arrangement.
• 52: another directional arrangement.
• 89: a further procedural variation.
• 144: a new starting configuration.
• 233: an additional composition candidate.

Parameter changes that affect the image

The most important adjustment is noise scale. Lower values make the field change slowly across the canvas, producing broad directional regions. Higher values introduce smaller structures and more frequent turns. Step length has a different effect: a longer step makes the path advance farther between samples, which can create visible angular movement. A shorter step gives the curve a finer appearance but requires more iterations to cover the same distance.

The number of particles controls visual density. Instead of restarting the canvas for every particle, generate a collection of starting positions and let each particle follow the same field. Use a loop to initialize their positions and a separate update routine to advance them. Keep particle count and iteration count independent so density can be adjusted without changing the underlying geometry.

Reproducibility and the next experiment

A seed alone does not define a complete image. Canvas dimensions, noise scale, movement step, iteration count, stroke color, stroke weight and the random number generator all influence the result. Record these values together. When changing the sketch, alter one parameter at a time and retain the previous configuration so that visual differences remain understandable.

A flow field is also a useful foundation for more complex systems. Particles can wrap around canvas edges, disappear after a fixed lifetime or respond to several overlapping noise layers. The same directional field can drive brush-like strokes, contour-inspired drawings or paths intended for a plotter. Each extension introduces another design decision and another parameter worth recording.

Questions readers ask