p5 generative spikes

picked by CodePen in January 2025

This generative artwork is built using p5.js, layering 50 jagged waves with randomized distortions to create an abstract, glitchy terrain. Each layer is drawn using Perlin noise and a key part of this effect comes from the function drawLayer(), where each wave’s peaks and valleys are mapped with noise(xOff, noiseOffset), producing natural variations. The layers are drawn from back to front, with slight rotations applied every few layers that I got from here, introducing subtle imperfections for a more organic look.

One of the most effective details comes from this line:

let baseY = map(noise(xOff, noiseOffset), 0, 1, height - yOffset - 50, height - yOffset);

This code determines the vertical position of each wave by mapping Perlin noise values to the canvas height. The result is a series of flowing, semi-random distortions that feel cohesive rather than chaotic. Combined with vertex()calls, these mapped values create skewed peaks and valleys, giving each layer its own unique silhouette while maintaining an overall structured form.

Another essential piece of logic is in sumRandomOffsets(), which ensures each layer stacks properly:

for (let i = 0; i <= index; i++) { totalOffset += randomOffsets[i]; }

This function accumulates random spacing values, shifting each new layer slightly downward so they don’t overlap. It’s a simple but crucial step in maintaining the depth and layering effect of the final composition. Without it, the waves would appear too uniform, losing the illusion of a shifting landscape.

Like a carefully layered collage, this piece blends structured randomness with controlled distortions, showing how just a few well-placed lines of code can create a visually striking, unpredictable effect.

Click here to see codepen