Code

p5.js

Sketch Basics

setup() / draw() loop — shapes, fill, stroke, background, frameRate

Color & Typography

Color modes, lerpColor, text, textSize, textAlign, and font styles

Interaction

Mouse tracking, click events, keyPressed() — reactive sketches

Perlin Noise

noise() for organic motion — noise terrain, Lissajous cloud, animated paths

Pixel Array

loadPixels() / updatePixels() — per-pixel colour manipulation in real time

Physics

Gravity, velocity, and elastic collisions — a bouncing ball simulation

L-System

Lindenmayer system — turtle graphics that draw recursive fractal plants

Generative Art

Noise-displaced grid of circles with hue cycling — emergent organic patterns

Perlin Noise

Intermediatenoise(x, y, z) produces smooth organic randomness. Used here for undulating terrain lines and a noise-field that steers particle worms. p5.js Docs

p.noiseSeed(42);
p.noiseDetail(3, 0.5);

// Terrain: sample noise along X, offset by row + time
for (let x = 0; x < p.width; x += 4) {
  const n = p.noise(x * 0.006, row * 0.4 + zOff);
  const y = yBase + (n - 0.5) * 60;
  p.vertex(x, y);
}

// Noise-field worm: angle = noise(xOff, yOff, zOff)
const angle = p.noise(w.xOff, w.yOff, zOff) * p.TWO_PI * 4;
w.x += Math.cos(angle) * 2;
w.y += Math.sin(angle) * 1.5;
w.xOff += 0.004;  // advance through noise space

// Advance time slice each frame
zOff += 0.004;