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

Pixel Array

AdvancedloadPixels() / updatePixels() give direct access to the RGBA pixel buffer. A classic plasma effect is produced by summing four sine waves per pixel. p5.js Docs

p.pixelDensity(1);  // disable HiDPI scaling for raw pixel work

p.draw = () => {
  p.loadPixels();

  for (let x = 0; x < p.width; x++) {
    for (let y = 0; y < p.height; y++) {
      // Plasma: four sine waves summed
      const v1 = Math.sin(x * 0.04 + t);
      const v2 = Math.sin(y * 0.04 + t * 0.7);
      const v3 = Math.sin((x + y) * 0.04 + t * 0.5);
      const v4 = Math.sin(Math.sqrt(cx*cx + cy*cy) * 12 + t);
      const v = (v1 + v2 + v3 + v4) / 4;  // range -1 … 1

      // Map to RGB via hue rotation
      const hue = (v + 1) / 2;
      const idx = (y * p.width + x) * 4;
      p.pixels[idx]     = Math.sin(hue * TWO_PI) * 127 + 128;
      p.pixels[idx + 1] = Math.sin(hue * TWO_PI + TWO_PI/3) * 127 + 128;
      p.pixels[idx + 2] = Math.sin(hue * TWO_PI + 2*TWO_PI/3) * 127 + 128;
      p.pixels[idx + 3] = 255;
    }
  }

  p.updatePixels();
  t += 0.04;
};