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

Interaction

IntermediatemouseX / mouseY cursor follower, click-spawned ripple rings, and keyPressed() pulse — the three core interaction hooks. p5.js Docs

// Cursor follower
p.ellipse(p.mouseX, p.mouseY, 40, 40);

// Spawn ripples on click
p.mousePressed = () => {
  for (let i = 0; i < 5; i++) {
    ripples.push({
      x: p.mouseX, y: p.mouseY,
      r: i * 8, alpha: 80 - i * 10
    });
  }
};

// Update ripples each frame
for (const rp of ripples) {
  p.ellipse(rp.x, rp.y, rp.r * 2, rp.r * 2);
  rp.r += 3;
  rp.alpha -= 2;
}

// Key events from anywhere
p.keyPressed = () => {
  ripples.push({
    x: p.width / 2, y: p.height / 2,
    r: 0, alpha: 90
  });
};