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

Generative Art

Expert A noise-displaced grid of circles — each cell's radius and hue are driven by two independent noise() samples that drift through time, creating an endlessly breathing organic field. p5.js Docs

p.colorMode(p.HSB, 360, 100, 100, 100);
p.noiseSeed(7);

// Grid of COLS × ROWS cells
for (let col = 0; col < COLS; col++) {
  for (let row = 0; row < ROWS; row++) {
    const cx = (col + 0.5) * cellW;
    const cy = (row + 0.5) * cellH;

    // Two independent noise samples
    const n1 = p.noise(col * SCALE, row * SCALE, t);        // → radius
    const n2 = p.noise(col * SCALE + 100, row * SCALE + 100, t * 0.7); // → hue

    const r   = n1 * maxR;
    const hue = (n2 * 280 + t * 60 + col * 4) % 360;

    p.fill(hue, 60 + n1 * 40, 70 + n2 * 30, 55 + n1 * 45);
    p.ellipse(cx, cy, r * 2, r * 2);
  }
}

t += 0.008;  // advance through noise space