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

Color & Typography

BeginnerlerpColor() for smooth colour transitions, animated textSize(), textStyle(), textAlign(), and drop-shadow layering. p5.js Docs

// Smooth background transition
const bgA = p.color(20, 20, 60);
const bgB = p.color(60, 10, 40);
p.background(p.lerpColor(bgA, bgB, (Math.sin(t) + 1) / 2));

// Colour swatches
for (let i = 0; i < cols; i++) {
  const c = p.lerpColor(
    p.color(255, 80, 120),
    p.color(80, 200, 255),
    i / (cols - 1),
  );
  p.fill(c);
  p.rect(i * sw, 0, sw, 28);
}

// Animated text
p.textAlign(p.CENTER, p.CENTER);
p.textSize(48 + Math.sin(t * 3) * 8);
p.textStyle(p.BOLD);

// Shadow layer
p.fill(shadowColor);
p.text(word, p.width / 2 + 3, p.height / 2 + 3);

// Foreground layer
p.fill(fgColor);
p.text(word, p.width / 2, p.height / 2);