hermes-sync/skills/creative/p5js/references/visual-effects.md

# Visual Effects

## Noise

### Perlin Noise Basics

```javascript
noiseSeed(42);
noiseDetail(4, 0.5);  // octaves, falloff

// 1D noise — smooth undulation
let y = noise(x * 0.01);  // returns 0.0 to 1.0

// 2D noise — terrain/texture
let v = noise(x * 0.005, y * 0.005);

// 3D noise — animated 2D field (z = time)
let v = noise(x * 0.005, y * 0.005, frameCount * 0.005);
```

The scale factor (0.005 etc.) is critical:
- `0.001` — very smooth, large features
- `0.005` — smooth, medium features
- `0.01` — standard generative art scale
- `0.05` — detailed, small features
- `0.1` — near-random, grainy

### Fractal Brownian Motion (fBM)

Layered noise octaves for natural-looking texture. Each octave adds detail at smaller scale.

```javascript
function fbm(x, y, octaves = 6, lacunarity = 2.0, gain = 0.5) {
  let value = 0;
  let amplitude = 1.0;
  let frequency = 1.0;
  let maxValue = 0;
  for (let i = 0; i < octaves; i++) {
    value += noise(x * frequency, y * frequency) * amplitude;
    maxValue += amplitude;
    amplitude *= gain;
    frequency *= lacunarity;
  }
  return value / maxValue;
}
```

### Domain Warping

Feed noise output back as input coordinates for flowing organic distortion.

```javascript
function domainWarp(x, y, scale, strength, time) {
  // First warp pass
  let qx = fbm(x + 0.0, y + 0.0);
  let qy = fbm(x + 5.2, y + 1.3);

  // Second warp pass (feed back)
  let rx = fbm(x + strength * qx + 1.7, y + strength * qy + 9.2, 4, 2, 0.5);
  let ry = fbm(x + strength * qx + 8.3, y + strength * qy + 2.8, 4, 2, 0.5);

  return fbm(x + strength * rx + time, y + strength * ry + time);
}
```

### Curl Noise

Divergence-free noise field. Particles following curl noise never converge or diverge — they flow in smooth, swirling patterns.

```javascript
function curlNoise(x, y, scale, time) {
  let eps = 0.001;
  // Partial derivatives via finite differences
  let dndx = (noise(x * scale + eps, y * scale, time) -
              noise(x * scale - eps, y * scale, time)) / (2 * eps);
  let dndy = (noise(x * scale, y * scale + eps, time) -
              noise(x * scale, y * scale - eps, time)) / (2 * eps);
  // Curl = perpendicular to gradient
  return createVector(dndy, -dndx);
}
```

## Flow Fields

A grid of vectors that steer particles. The foundational generative art technique.

```javascript
class FlowField {
  constructor(resolution, noiseScale) {
    this.resolution = resolution;
    this.cols = ceil(width / resolution);
    this.rows = ceil(height / resolution);
    this.field = new Array(this.cols * this.rows);
    this.noiseScale = noiseScale;
  }

  update(time) {
    for (let i = 0; i < this.cols; i++) {
      for (let j = 0; j < this.rows; j++) {
        let angle = noise(i * this.noiseScale, j * this.noiseScale, time) * TWO_PI * 2;
        this.field[i + j * this.cols] = p5.Vector.fromAngle(angle);
      }
    }
  }

  lookup(x, y) {
    let col = constrain(floor(x / this.resolution), 0, this.cols - 1);
    let row = constrain(floor(y / this.resolution), 0, this.rows - 1);
    return this.field[col + row * this.cols].copy();
  }
}
```

### Flow Field Particle

```javascript
class FlowParticle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.prev = this.pos.copy();
    this.maxSpeed = 2;
    this.life = 1.0;
  }

  follow(field) {
    let force = field.lookup(this.pos.x, this.pos.y);
    force.mult(0.5);  // force magnitude
    this.acc.add(force);
  }

  update() {
    this.prev = this.pos.copy();
    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed);
    this.pos.add(this.vel);
    this.acc.mult(0);
    this.life -= 0.001;
  }

  edges() {
    if (this.pos.x > width) this.pos.x = 0;
    if (this.pos.x < 0) this.pos.x = width;
    if (this.pos.y > height) this.pos.y = 0;
    if (this.pos.y < 0) this.pos.y = height;
    this.prev = this.pos.copy();  // prevent wrap line
  }

  display(buffer) {
    buffer.stroke(255, this.life * 30);
    buffer.strokeWeight(0.5);
    buffer.line(this.prev.x, this.prev.y, this.pos.x, this.pos.y);
  }
}
```

## Particle Systems

### Basic Physics Particle

```javascript
class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = p5.Vector.random2D().mult(random(1, 3));
    this.acc = createVector(0, 0);
    this.life = 255;
    this.decay = random(1, 5);
    this.size = random(3, 8);
  }

  applyForce(f) { this.acc.add(f); }

  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
    this.life -= this.decay;
  }

  display() {
    noStroke();
    fill(255, this.life);
    ellipse(this.pos.x, this.pos.y, this.size);
  }

  isDead() { return this.life <= 0; }
}
```

### Attractor-Driven Particles

```javascript
class Attractor {
  constructor(x, y, strength) {
    this.pos = createVector(x, y);
    this.strength = strength;
  }

  attract(particle) {
    let force = p5.Vector.sub(this.pos, particle.pos);
    let d = constrain(force.mag(), 5, 200);
    force.normalize();
    force.mult(this.strength / (d * d));
    particle.applyForce(force);
  }
}
```

### Boid Flocking

```javascript
class Boid {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = p5.Vector.random2D().mult(random(2, 4));
    this.acc = createVector(0, 0);
    this.maxForce = 0.2;
    this.maxSpeed = 4;
    this.perceptionRadius = 50;
  }

  flock(boids) {
    let alignment = createVector(0, 0);
    let cohesion = createVector(0, 0);
    let separation = createVector(0, 0);
    let total = 0;

    for (let other of boids) {
      let d = this.pos.dist(other.pos);
      if (other !== this && d < this.perceptionRadius) {
        alignment.add(other.vel);
        cohesion.add(other.pos);
        let diff = p5.Vector.sub(this.pos, other.pos);
        diff.div(d * d);
        separation.add(diff);
        total++;
      }
    }
    if (total > 0) {
      alignment.div(total).setMag(this.maxSpeed).sub(this.vel).limit(this.maxForce);
      cohesion.div(total).sub(this.pos).setMag(this.maxSpeed).sub(this.vel).limit(this.maxForce);
      separation.div(total).setMag(this.maxSpeed).sub(this.vel).limit(this.maxForce);
    }

    this.acc.add(alignment.mult(1.0));
    this.acc.add(cohesion.mult(1.0));
    this.acc.add(separation.mult(1.5));
  }

  update() {
    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }
}
```

## Pixel Manipulation

### Reading and Writing Pixels

```javascript
loadPixels();
for (let y = 0; y < height; y++) {
  for (let x = 0; x < width; x++) {
    let idx = 4 * (y * width + x);
    let r = pixels[idx];
    let g = pixels[idx + 1];
    let b = pixels[idx + 2];
    let a = pixels[idx + 3];

    // Modify
    pixels[idx] = 255 - r;       // invert red
    pixels[idx + 1] = 255 - g;   // invert green
    pixels[idx + 2] = 255 - b;   // invert blue
  }
}
updatePixels();
```

### Pixel-Level Noise Texture

```javascript
loadPixels();
for (let i = 0; i < pixels.length; i += 4) {
  let x = (i / 4) % width;
  let y = floor((i / 4) / width);
  let n = noise(x * 0.01, y * 0.01, frameCount * 0.02);
  let c = n * 255;
  pixels[i] = c;
  pixels[i + 1] = c;
  pixels[i + 2] = c;
  pixels[i + 3] = 255;
}
updatePixels();
```

### Built-in Filters

```javascript
filter(BLUR, 3);        // Gaussian blur (radius)
filter(THRESHOLD, 0.5); // Black/white threshold
filter(INVERT);          // Color inversion
filter(POSTERIZE, 4);    // Reduce color levels
filter(GRAY);            // Desaturate
filter(ERODE);           // Thin bright areas
filter(DILATE);          // Expand bright areas
filter(OPAQUE);          // Remove transparency
```

## Texture Generation

### Stippling / Pointillism

```javascript
function stipple(buffer, density, minSize, maxSize) {
  buffer.loadPixels();
  for (let i = 0; i < density; i++) {
    let x = floor(random(width));
    let y = floor(random(height));
    let idx = 4 * (y * width + x);
    let brightness = (buffer.pixels[idx] + buffer.pixels[idx+1] + buffer.pixels[idx+2]) / 3;
    let size = map(brightness, 0, 255, maxSize, minSize);
    if (random() < map(brightness, 0, 255, 0.8, 0.1)) {
      noStroke();
      fill(buffer.pixels[idx], buffer.pixels[idx+1], buffer.pixels[idx+2]);
      ellipse(x, y, size);
    }
  }
}
```

### Halftone

```javascript
function halftone(sourceBuffer, dotSpacing, maxDotSize) {
  sourceBuffer.loadPixels();
  background(255);
  fill(0);
  noStroke();
  for (let y = 0; y < height; y += dotSpacing) {
    for (let x = 0; x < width; x += dotSpacing) {
      let idx = 4 * (y * width + x);
      let brightness = (sourceBuffer.pixels[idx] + sourceBuffer.pixels[idx+1] + sourceBuffer.pixels[idx+2]) / 3;
      let dotSize = map(brightness, 0, 255, maxDotSize, 0);
      ellipse(x + dotSpacing/2, y + dotSpacing/2, dotSize);
    }
  }
}
```

### Cross-Hatching

```javascript
function crossHatch(x, y, w, h, value, spacing) {
  // value: 0 (dark) to 1 (light)
  let numLayers = floor(map(value, 0, 1, 4, 0));
  let angles = [PI/4, -PI/4, 0, PI/2];

  for (let layer = 0; layer < numLayers; layer++) {
    push();
    translate(x + w/2, y + h/2);
    rotate(angles[layer]);
    let s = spacing + layer * 2;
    for (let i = -max(w, h); i < max(w, h); i += s) {
      line(i, -max(w, h), i, max(w, h));
    }
    pop();
  }
}
```

## Feedback Loops

### Frame Feedback (Echo/Trail)

```javascript
let feedback;

function setup() {
  createCanvas(800, 800);
  feedback = createGraphics(width, height);
}

function draw() {
  // Copy current feedback, slightly zoomed and rotated
  let temp = feedback.get();

  feedback.push();
  feedback.translate(width/2, height/2);
  feedback.scale(1.005);  // slow zoom
  feedback.rotate(0.002); // slow rotation
  feedback.translate(-width/2, -height/2);
  feedback.tint(255, 245);  // slight fade
  feedback.image(temp, 0, 0);
  feedback.pop();

  // Draw new content to feedback
  feedback.noStroke();
  feedback.fill(255);
  feedback.ellipse(mouseX, mouseY, 20);

  // Show
  image(feedback, 0, 0);
}
```

### Bloom / Glow (Post-Processing)

Downsample the scene to a small buffer, blur it, overlay additively. Creates soft glow around bright areas. This is the standard generative art bloom technique.

```javascript
let scene, bloomBuf;

function setup() {
  createCanvas(1080, 1080);
  scene = createGraphics(width, height);
  bloomBuf = createGraphics(width, height);
}

function draw() {
  // 1. Render scene to offscreen buffer
  scene.background(0);
  scene.fill(255, 200, 100);
  scene.noStroke();
  // ... draw bright elements to scene ...

  // 2. Build bloom: downsample → blur → upscale
  bloomBuf.clear();
  bloomBuf.image(scene, 0, 0, width / 4, height / 4);  // 4x downsample
  bloomBuf.filter(BLUR, 6);  // blur the small version

  // 3. Composite: scene + additive bloom
  background(0);
  image(scene, 0, 0);           // base layer
  blendMode(ADD);               // additive = glow
  tint(255, 80);                // control bloom intensity (0-255)
  image(bloomBuf, 0, 0, width, height);  // upscale back to full size
  noTint();
  blendMode(BLEND);             // ALWAYS reset blend mode
}
```

**Tuning:**
- Downsample ratio (1/4 is standard, 1/8 for softer, 1/2 for tighter)
- Blur radius (4-8 typical, higher = wider glow)
- Tint alpha (40-120, controls glow intensity)
- Update bloom every N frames to save perf: `if (frameCount % 2 === 0) { ... }`

**Common mistake:** Forgetting `blendMode(BLEND)` after the ADD pass — everything drawn after will be additive.

### Trail Buffer Brightness

Trail accumulation via `createGraphics()` + semi-transparent fade rect is the standard technique for particle trails, but **trails are always dimmer than you expect**. The fade rect's alpha compounds multiplicatively every frame.

```javascript
// The fade rect alpha controls trail length AND brightness:
trailBuf.fill(0, 0, 0, alpha);
trailBuf.rect(0, 0, width, height);

// alpha=5  → very long trails, very dim (content fades to 50% in ~35 frames)
// alpha=10 → long trails, dim
// alpha=20 → medium trails, visible
// alpha=40 → short trails, bright
// alpha=80 → very short trails, crisp
```

**The trap:** You set alpha=5 for long trails, but particle strokes at alpha=30 are invisible because they fade before accumulating enough density. Either:
- **Boost stroke alpha** to 80-150 (not the intuitive 20-40)
- **Reduce fade alpha** but accept shorter trails
- **Use additive blending** for the strokes: bright particles accumulate, dim ones stay dark

```javascript
// WRONG: low fade + low stroke = invisible
trailBuf.fill(0, 0, 0, 5);     // long trails
trailBuf.rect(0, 0, W, H);
trailBuf.stroke(255, 30);       // too dim to ever accumulate
trailBuf.line(px, py, x, y);

// RIGHT: low fade + high stroke = visible long trails
trailBuf.fill(0, 0, 0, 5);
trailBuf.rect(0, 0, W, H);
trailBuf.stroke(255, 100);      // bright enough to persist through fade
trailBuf.line(px, py, x, y);
```

### Reaction-Diffusion (Gray-Scott)

```javascript
class ReactionDiffusion {
  constructor(w, h) {
    this.w = w;
    this.h = h;
    this.a = new Float32Array(w * h).fill(1);
    this.b = new Float32Array(w * h).fill(0);
    this.nextA = new Float32Array(w * h);
    this.nextB = new Float32Array(w * h);
    this.dA = 1.0;
    this.dB = 0.5;
    this.feed = 0.055;
    this.kill = 0.062;
  }

  seed(cx, cy, r) {
    for (let y = cy - r; y < cy + r; y++) {
      for (let x = cx - r; x < cx + r; x++) {
        if (dist(x, y, cx, cy) < r) {
          let idx = y * this.w + x;
          this.b[idx] = 1;
        }
      }
    }
  }

  step() {
    for (let y = 1; y < this.h - 1; y++) {
      for (let x = 1; x < this.w - 1; x++) {
        let idx = y * this.w + x;
        let a = this.a[idx], b = this.b[idx];
        let lapA = this.laplacian(this.a, x, y);
        let lapB = this.laplacian(this.b, x, y);
        let abb = a * b * b;
        this.nextA[idx] = constrain(a + this.dA * lapA - abb + this.feed * (1 - a), 0, 1);
        this.nextB[idx] = constrain(b + this.dB * lapB + abb - (this.kill + this.feed) * b, 0, 1);
      }
    }
    [this.a, this.nextA] = [this.nextA, this.a];
    [this.b, this.nextB] = [this.nextB, this.b];
  }

  laplacian(arr, x, y) {
    let w = this.w;
    return arr[(y-1)*w+x] + arr[(y+1)*w+x] + arr[y*w+(x-1)] + arr[y*w+(x+1)]
           - 4 * arr[y*w+x];
  }
}
```

## Pixel Sorting

```javascript
function pixelSort(buffer, threshold, direction = 'horizontal') {
  buffer.loadPixels();
  let px = buffer.pixels;

  if (direction === 'horizontal') {
    for (let y = 0; y < height; y++) {
      let spans = findSpans(px, y, width, threshold, true);
      for (let span of spans) {
        sortSpan(px, span.start, span.end, y, true);
      }
    }
  }
  buffer.updatePixels();
}

function findSpans(px, row, w, threshold, horizontal) {
  let spans = [];
  let start = -1;
  for (let i = 0; i < w; i++) {
    let idx = horizontal ? 4 * (row * w + i) : 4 * (i * w + row);
    let brightness = (px[idx] + px[idx+1] + px[idx+2]) / 3;
    if (brightness > threshold && start === -1) {
      start = i;
    } else if (brightness <= threshold && start !== -1) {
      spans.push({ start, end: i });
      start = -1;
    }
  }
  if (start !== -1) spans.push({ start, end: w });
  return spans;
}
```

## Advanced Generative Techniques

### L-Systems (Lindenmayer Systems)

Grammar-based recursive growth for trees, plants, fractals.

```javascript
class LSystem {
  constructor(axiom, rules) {
    this.axiom = axiom;
    this.rules = rules;  // { 'F': 'F[+F]F[-F]F' }
    this.sentence = axiom;
  }

  generate(iterations) {
    for (let i = 0; i < iterations; i++) {
      let next = '';
      for (let ch of this.sentence) {
        next += this.rules[ch] || ch;
      }
      this.sentence = next;
    }
  }

  draw(len, angle) {
    for (let ch of this.sentence) {
      switch (ch) {
        case 'F': line(0, 0, 0, -len); translate(0, -len); break;
        case '+': rotate(angle); break;
        case '-': rotate(-angle); break;
        case '[': push(); break;
        case ']': pop(); break;
      }
    }
  }
}

// Usage: fractal plant
let lsys = new LSystem('X', {
  'X': 'F+[[X]-X]-F[-FX]+X',
  'F': 'FF'
});
lsys.generate(5);
translate(width/2, height);
lsys.draw(4, radians(25));
```

### Circle Packing

Fill a space with non-overlapping circles of varying size.

```javascript
class PackedCircle {
  constructor(x, y, r) {
    this.x = x; this.y = y; this.r = r;
    this.growing = true;
  }

  grow() { if (this.growing) this.r += 0.5; }

  overlaps(other) {
    let d = dist(this.x, this.y, other.x, other.y);
    return d < this.r + other.r + 2;  // +2 gap
  }

  atEdge() {
    return this.x - this.r < 0 || this.x + this.r > width ||
           this.y - this.r < 0 || this.y + this.r > height;
  }
}

let circles = [];

function packStep() {
  // Try to place new circle
  for (let attempts = 0; attempts < 100; attempts++) {
    let x = random(width), y = random(height);
    let valid = true;
    for (let c of circles) {
      if (dist(x, y, c.x, c.y) < c.r + 2) { valid = false; break; }
    }
    if (valid) { circles.push(new PackedCircle(x, y, 1)); break; }
  }

  // Grow existing circles
  for (let c of circles) {
    if (!c.growing) continue;
    c.grow();
    if (c.atEdge()) { c.growing = false; continue; }
    for (let other of circles) {
      if (c !== other && c.overlaps(other)) { c.growing = false; break; }
    }
  }
}
```

### Voronoi Diagram (Fortune's Algorithm Approximation)

```javascript
// Simple brute-force Voronoi (for small point counts)
function drawVoronoi(points, colors) {
  loadPixels();
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      let minDist = Infinity;
      let closest = 0;
      for (let i = 0; i < points.length; i++) {
        let d = (x - points[i].x) ** 2 + (y - points[i].y) ** 2;  // magSq
        if (d < minDist) { minDist = d; closest = i; }
      }
      let idx = 4 * (y * width + x);
      let c = colors[closest % colors.length];
      pixels[idx] = red(c);
      pixels[idx+1] = green(c);
      pixels[idx+2] = blue(c);
      pixels[idx+3] = 255;
    }
  }
  updatePixels();
}
```

### Fractal Trees

```javascript
function fractalTree(x, y, len, angle, depth, branchAngle) {
  if (depth <= 0 || len < 2) return;

  let x2 = x + Math.cos(angle) * len;
  let y2 = y + Math.sin(angle) * len;

  strokeWeight(map(depth, 0, 10, 0.5, 4));
  line(x, y, x2, y2);

  let shrink = 0.67 + noise(x * 0.01, y * 0.01) * 0.15;
  fractalTree(x2, y2, len * shrink, angle - branchAngle, depth - 1, branchAngle);
  fractalTree(x2, y2, len * shrink, angle + branchAngle, depth - 1, branchAngle);
}

// Usage
fractalTree(width/2, height, 120, -HALF_PI, 10, PI/6);
```

### Strange Attractors

```javascript
// Clifford Attractor
function cliffordAttractor(a, b, c, d, iterations) {
  let x = 0, y = 0;
  beginShape(POINTS);
  for (let i = 0; i < iterations; i++) {
    let nx = Math.sin(a * y) + c * Math.cos(a * x);
    let ny = Math.sin(b * x) + d * Math.cos(b * y);
    x = nx; y = ny;
    let px = map(x, -3, 3, 0, width);
    let py = map(y, -3, 3, 0, height);
    vertex(px, py);
  }
  endShape();
}

// De Jong Attractor
function deJongAttractor(a, b, c, d, iterations) {
  let x = 0, y = 0;
  beginShape(POINTS);
  for (let i = 0; i < iterations; i++) {
    let nx = Math.sin(a * y) - Math.cos(b * x);
    let ny = Math.sin(c * x) - Math.cos(d * y);
    x = nx; y = ny;
    let px = map(x, -2.5, 2.5, 0, width);
    let py = map(y, -2.5, 2.5, 0, height);
    vertex(px, py);
  }
  endShape();
}
```

### Poisson Disk Sampling

Even distribution that looks natural — better than pure random for placing elements.

```javascript
function poissonDiskSampling(r, k = 30) {
  let cellSize = r / Math.sqrt(2);
  let cols = Math.ceil(width / cellSize);
  let rows = Math.ceil(height / cellSize);
  let grid = new Array(cols * rows).fill(-1);
  let points = [];
  let active = [];

  function gridIndex(x, y) {
    return Math.floor(x / cellSize) + Math.floor(y / cellSize) * cols;
  }

  // Seed
  let p0 = createVector(random(width), random(height));
  points.push(p0);
  active.push(p0);
  grid[gridIndex(p0.x, p0.y)] = 0;

  while (active.length > 0) {
    let idx = Math.floor(Math.random() * active.length);
    let pos = active[idx];
    let found = false;

    for (let n = 0; n < k; n++) {
      let angle = Math.random() * TWO_PI;
      let mag = r + Math.random() * r;
      let sample = createVector(pos.x + Math.cos(angle) * mag, pos.y + Math.sin(angle) * mag);

      if (sample.x < 0 || sample.x >= width || sample.y < 0 || sample.y >= height) continue;

      let col = Math.floor(sample.x / cellSize);
      let row = Math.floor(sample.y / cellSize);
      let ok = true;

      for (let dy = -2; dy <= 2; dy++) {
        for (let dx = -2; dx <= 2; dx++) {
          let nc = col + dx, nr = row + dy;
          if (nc >= 0 && nc < cols && nr >= 0 && nr < rows) {
            let gi = nc + nr * cols;
            if (grid[gi] !== -1 && points[grid[gi]].dist(sample) < r) { ok = false; }
          }
        }
      }

      if (ok) {
        points.push(sample);
        active.push(sample);
        grid[gridIndex(sample.x, sample.y)] = points.length - 1;
        found = true;
        break;
      }
    }
    if (!found) active.splice(idx, 1);
  }
  return points;
}
```

## Addon Libraries

### p5.brush — Natural Media

Hand-drawn, organic aesthetics. Watercolor, charcoal, pen, marker. Requires **p5.js 2.x + WEBGL**.

```html
<script src="https://cdn.jsdelivr.net/npm/p5.brush@latest/dist/p5.brush.js"></script>
```

```javascript
function setup() {
  createCanvas(1200, 1200, WEBGL);
  brush.scaleBrushes(3);  // essential for proper sizing
  translate(-width/2, -height/2);  // WEBGL origin is center
  brush.pick('2B');  // pencil brush
  brush.stroke(50, 50, 50);
  brush.strokeWeight(2);
  brush.line(100, 100, 500, 500);
  brush.pick('watercolor');
  brush.fill('#4a90d9', 150);
  brush.circle(400, 400, 200);
}
```

Built-in brushes: `2B`, `HB`, `2H`, `cpencil`, `pen`, `rotring`, `spray`, `marker`, `charcoal`, `hatch_brush`.
Built-in vector fields: `hand`, `curved`, `zigzag`, `waves`, `seabed`, `spiral`, `columns`.

### p5.grain — Film Grain & Texture

```html
<script src="https://cdn.jsdelivr.net/npm/p5.grain@0.7.0/p5.grain.min.js"></script>
```

```javascript
function draw() {
  // ... render scene ...
  applyMonochromaticGrain(42);   // uniform grain
  // or: applyChromaticGrain(42); // per-channel randomization
}
```

### CCapture.js — Deterministic Video Capture

Records canvas at fixed framerate regardless of actual render speed. Essential for complex generative art.

```html
<script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script>
```

```javascript
let capturer;

function setup() {
  createCanvas(1920, 1080);
  capturer = new CCapture({
    format: 'webm',
    framerate: 60,
    quality: 99,
    // timeLimit: 10,    // auto-stop after N seconds
    // motionBlurFrames: 4  // supersampled motion blur
  });
}

function startRecording() {
  capturer.start();
}

function draw() {
  // ... render frame ...
  if (capturer) capturer.capture(document.querySelector('canvas'));
}

function stopRecording() {
  capturer.stop();
  capturer.save();  // triggers download
}
```