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

L-System

Advanced Lindenmayer system with rule X → F+[[X]-X]-F[-FX]+X. String rewriting produces recursive fractal plant geometry; turtle graphics (push/pop matrix stack) renders it. Wikipedia

const rules = {
  X: 'F+[[X]-X]-F[-FX]+X',
  F: 'FF',
};

// Expand axiom N times
function generate(s) {
  return s.split('').map(c => rules[c] ?? c).join('');
}

// Turtle interpretation
for (const c of sentence) {
  if (c === 'F') {
    // draw forward
    p.line(cx, cy, nx, ny);
    cx = nx; cy = ny;
  } else if (c === '+') angle += delta;
  else if (c === '-') angle -= delta;
  else if (c === '[') stack.push({ x:cx, y:cy, angle });
  else if (c === ']') {
    const s = stack.pop();
    cx = s.x; cy = s.y; angle = s.angle;
  }
}