Perlin Waves

A stack of lines, each one tracing a path through the same field of Perlin noise. Every line samples the field a little further along than the one before it, so the stack drifts in and out of alignment as the field scrolls past.

What you are looking at

Perlin noise is a way of generating randomness that varies smoothly: nearby inputs give nearby outputs, so the result wanders rather than jumping about the way raw random numbers do. That smoothness is what makes the curves look like something physical - a current, a contour map, a length of fabric - instead of noise.

Each frame samples the field at a slightly later position, which is what produces the motion. Nothing is precomputed and no frame is stored; the whole image is rebuilt from the noise field every tick.

The controls

• Noise scale sets how far apart the samples are. Small values zoom in on the field and give long, lazy curves; large values zoom out and give tight, busy ones.
• Noise speed is how fast the sampling window travels through the field each frame.
• Lines is the number of curves in the stack, each offset one noise-scale step from its neighbour.
• Amplitude scales the vertical swing, from a flat band up to the full height of the frame.
• Sample step is the horizontal distance between points on a curve. Smaller steps trace the field more faithfully and cost more to draw.

Settings

Built with

p5.js, drawing to a single full-window canvas. Source lives in perlin.html - the sketch is about sixty lines.