Growing Wild Gardens from The Nature of Code

I have been rereading Daniel Shiffman’s The Nature of Code and it is my favorite coding book ever. I have been watching Schiffman’s channel “Coding Train” for years on YouTube, and I love the way he brings code to life and makes it fun!

This is a fun sketchpad for playing with the ideas in the chapters of the book.

I’m working on a documentary poetry library for a project for the Processing Foundation, and wanted a way to play around with algorithms for visualization to find more inspiration for poetic computation.

Open the Emergence Atlas playground

A fun project: Emergence Atlas

Emergence Atlas is a way of treating a textbook as a landscape. Each chapter of The Nature of Code is a territory: randomness, vectors, forces, oscillation, particles, agents, physics, automata, fractals, evolution, neural networks. An atlas does not reproduce the territory, it simply interprets it. Each sketch here takes a chapter’s central mechanism and lets it run past the point where the exercise usually stops.

Randomness is hardly ever raw, and true randomness is hard to reproduce. Instead, what we think of as randomness is often shaped by Gaussian distributions, Lévy statistics, Perlin fields, and selection pressure. What we might think of as chaos is actually highly ordered processes in beautiful and complex patterns that aren’t immediately decipherable.

Chapter 0: Randomness

This chapter illustrates the random walker and the Gaussian distribution. In my expansion here, I make the walker’s step sizes themselves follow interesting distributions, and let the walk accumulate into a drawing.

Chapter 0’s point is that the distribution of steps changes the picture, not just “random vs not.” A uniform walker wanders evenly. A Gaussian walker stays local most of the time (randomGaussian for step size). A Lévy-style walk is the next distribution, generally keeping small Gaussian steps, but every once in a while (here about 1% probability), drawing a much larger leap. On screen you get dense clusters where the walker lingered and faint lines where it jumped. This illustrates the heavy-tail lesson Shiffman is setting up before introducing Perlin noise. In the sketch each walker also gets its own leap probability, a shared noise() current drags all the dust the same way, and a territory grid makes walkers that cross another’s cluster trade a fraction of their color.

Exercise

Dust Gardens

Fourteen walkers, each with its own leap probability: hermits grind out dense clusters, restless ones scatter. A shared noise current drags all the dust one way, and stepping onto another walker’s territory trades a fraction of color both ways.

Solution code

return function (p) {
  const CELL = 10, GRID = 50;
  let walkers = [], owner;

  p.setup = function () {
    p.createCanvas(500, 500);
    p.background(250, 249, 245);
    owner = new Array(GRID * GRID).fill(-1);
    let palette = ['#d97757', '#6a9bcc', '#788c5d', '#c9a227'];
    for (let i = 0; i < 14; i++) {
      walkers.push({
        id: i,
        x: p.random(p.width), y: p.random(p.height),
        a: p.random(p.TWO_PI),
        // personality in one parameter: hermits vs wanderers
        leapProb: p.random(0.002, 0.03),
        col: p.color(palette[i % palette.length])
      });
    }
  };

  p.draw = function () {
    p.noStroke();
    for (let w of walkers) {
      for (let k = 0; k < 8; k++) {
        w.a += p.randomGaussian(0, 0.5);
        if (p.random() < w.leapProb) {
          let leap = p.random(40, 120);
          p.stroke(20, 20, 19, 30);
          p.line(w.x, w.y, w.x + p.cos(w.a) * leap, w.y + p.sin(w.a) * leap);
          p.noStroke();
          w.x += p.cos(w.a) * leap;
          w.y += p.sin(w.a) * leap;
        } else {
          let s = p.abs(p.randomGaussian(1.6, 1));
          w.x += p.cos(w.a) * s;
          w.y += p.sin(w.a) * s;
        }
        // shared slow current from one noise field
        let ca = p.noise(w.x * 0.002, w.y * 0.002, p.frameCount * 0.001) * p.TWO_PI * 2;
        w.x += p.cos(ca) * 0.5;
        w.y += p.sin(ca) * 0.5;
        w.x = (w.x + p.width) % p.width;
        w.y = (w.y + p.height) % p.height;
        // territory grid: stepping on another walker's claim trades color
        let gi = p.floor(w.x / CELL) + p.floor(w.y / CELL) * GRID;
        let prev = owner[gi];
        if (prev !== -1 && prev !== w.id) {
          let other = walkers[prev];
          w.col = p.lerpColor(w.col, other.col, 0.2);
          other.col = p.lerpColor(other.col, w.col, 0.05);
        }
        owner[gi] = w.id;
        p.fill(p.red(w.col), p.green(w.col), p.blue(w.col), 25);
        p.circle(w.x, w.y, p.abs(p.randomGaussian(2.2, 1.4)));
      }
    }
  };
};

To push it further:

Track how many grid cells each color owns and plot the census over time.
Make leap probability heritable: split a walker when its cluster grows, and mutate the children.
Replace the noise current with real wind data from the Open-Meteo API.

Chapter 1: Vectors

This chapter introduces vector addition using p5.Vector. You can create a vector, subtract to get a direction (point - pole), scale with setMag / magnitude, rotate, and add several vectors into one.

The book uses this for one mover seeking the mouse. Here I do the same thing for five moving poles at once. Each pole contributes a repulsion or attraction vector. I rotate it a bit for swirl, then v.add(...) stacks them. The summed vector is the local “velocity.”

Each frame I drop random points and step them a few times along that velocity (x += v.x), drawing the path. So the sketch illustrates vector addition and magnitude control applied as a field instead of as a single ball. The first pole is mapped to the mouse and the swirl angle is modulated by noise(), so you can steer the field directly and watch calm regions (cool) and turbulent regions (warm) trade places.

Exercise

Compass Meadow

Five charged poles, one of them your cursor. Streamlines are colored by field strength (calm blue, turbulent orange) and the swirl term breathes on noise. Move the mouse to comb the meadow yourself.

Solution code

return function (p) {
  let poles = [];

  p.setup = function () {
    p.createCanvas(500, 500);
    for (let i = 0; i < 5; i++) {
      poles.push({
        r: p.random(50, 200),
        speed: p.random(0.002, 0.008) * (p.random() < 0.5 ? -1 : 1),
        phase: p.random(p.TWO_PI),
        charge: p.random() < 0.5 ? -1 : 1
      });
    }
  };

  function polePos(po, i) {
    // the first pole is your cursor
    if (i === 0 && p.mouseX > 0 && p.mouseX < p.width && p.mouseY > 0 && p.mouseY < p.height) {
      return [p.mouseX, p.mouseY];
    }
    return [p.width / 2 + p.cos(po.phase + p.frameCount * po.speed) * po.r,
            p.height / 2 + p.sin(po.phase + p.frameCount * po.speed * 1.3) * po.r];
  }

  function field(x, y) {
    let v = p.createVector(0, 0);
    // the swirl term breathes on noise
    let swirl = 0.5 + (p.noise(p.frameCount * 0.004) - 0.5) * 1.6;
    for (let i = 0; i < poles.length; i++) {
      let pp = polePos(poles[i], i);
      let d = p.createVector(x - pp[0], y - pp[1]);
      let m = d.magSq() + 900;
      d.setMag(poles[i].charge * 9000 / m);
      d.rotate(swirl);
      v.add(d);
    }
    return v;
  }

  p.draw = function () {
    p.background(250, 249, 245, 40);
    p.noFill();
    for (let i = 0; i < 200; i++) {
      let x = p.random(p.width), y = p.random(p.height);
      let pts = [], m0 = 0, steps = 0;
      for (let s = 0; s < 12; s++) {
        pts.push([x, y]);
        let v = field(x, y);
        let m = v.mag();
        if (m < 0.001) break;
        m0 += m; steps++;
        v.setMag(3);
        x += v.x;
        y += v.y;
      }
      if (steps === 0) continue;
      // calm streamlines draw cool, turbulent ones warm
      let c = p.lerpColor(p.color('#6a9bcc'), p.color('#d97757'), p.constrain(m0 / steps * 1.2, 0, 1));
      c.setAlpha(60);
      p.stroke(c);
      p.beginShape();
      for (let q of pts) p.vertex(q[0], q[1]);
      p.endShape();
    }
  };
};

To push it further:

Add arrowheads at streamline ends so direction reads at a glance.
Give poles finite charge that decays and respawns, so the field reorganizes itself.
Release chapter 0 walkers into the field and let dust pile up in the calm regions.

Chapter 2: Forces

This chapter is about force accumulation. Each mover has mass. You sum forces into acceleration, then update vel and pos. The book’s gravity example is with one attractor.

Here in my example, every body attracts every other body (n-body): for each pair, dir = b.pos - a.pos. Force scales like mass / r², then a.acc.add(...) and equal-and-opposite on b. I clamp magSq so that close approaches do not explode, and add a weak pull toward the canvas center so that nothing flies off forever. Stroke color is mapped from vel.mag() (slow = cool, fast = warm). The drawing shows a trail of that integration loop. Clicking adds a low-mass comet with tangential velocity, and any close pass strikes a burst of sparks at the midpoint.

Exercise

Orbital Calligraphy

Six bodies under mutual gravity. Close passes strike sparks at the midpoint, and clicking drops a low-mass comet in with tangential velocity. See how long your comet survives.

Solution code

return function (p) {
  let bodies = [], sparks = [];

  p.setup = function () {
    p.createCanvas(500, 500);
    p.background(250, 249, 245);
    for (let i = 0; i < 6; i++) {
      let a = p.random(p.TWO_PI), r = p.random(60, 190);
      let pos = p.createVector(p.width / 2 + p.cos(a) * r, p.height / 2 + p.sin(a) * r);
      bodies.push({
        pos: pos, prev: pos.copy(),
        vel: p.createVector(-p.sin(a), p.cos(a)).mult(p.random(1, 1.8)),
        mass: p.random(0.7, 2.2)
      });
    }
  };

  // click to launch a low-mass comet with tangential velocity
  p.mousePressed = function () {
    if (p.mouseX < 0 || p.mouseX > p.width || p.mouseY < 0 || p.mouseY > p.height) return;
    if (bodies.length >= 12) bodies.shift();
    let pos = p.createVector(p.mouseX, p.mouseY);
    let toC = p.createVector(p.width / 2 - pos.x, p.height / 2 - pos.y);
    bodies.push({
      pos: pos, prev: pos.copy(),
      vel: toC.copy().rotate(p.HALF_PI).setMag(1.8),
      mass: 0.4
    });
  };

  p.draw = function () {
    p.background(250, 249, 245, 6);
    for (let b of bodies) b.acc = p.createVector(0, 0);
    for (let i = 0; i < bodies.length; i++) {
      for (let j = i + 1; j < bodies.length; j++) {
        let a = bodies[i], b = bodies[j];
        let dir = p5.Vector.sub(b.pos, a.pos);
        let d2raw = dir.magSq();
        let d2 = p.constrain(d2raw, 400, 60000);
        let f = 90 / d2;
        dir.normalize();
        a.acc.add(p5.Vector.mult(dir, f * b.mass));
        b.acc.sub(p5.Vector.mult(dir, f * a.mass));
        // a close pass strikes sparks at the midpoint
        if (d2raw < 900 && p.frameCount % 3 === 0) {
          let mx = (a.pos.x + b.pos.x) / 2, my = (a.pos.y + b.pos.y) / 2;
          for (let k = 0; k < 3; k++) {
            let sa = p.random(p.TWO_PI);
            sparks.push({ x: mx, y: my, vx: p.cos(sa) * p.random(2), vy: p.sin(sa) * p.random(2), life: 1 });
          }
        }
      }
    }
    for (let b of bodies) {
      b.acc.add(p5.Vector.sub(p.createVector(p.width / 2, p.height / 2), b.pos).mult(0.0001));
      b.vel.add(b.acc);
      b.prev.set(b.pos);
      b.pos.add(b.vel);
      let speed = b.vel.mag();
      p.stroke(p.lerpColor(p.color('#6a9bcc'), p.color('#d97757'), p.constrain(speed / 3.5, 0, 1)));
      p.strokeWeight(p.constrain(b.mass, 0.6, 2.5));
      p.line(b.prev.x, b.prev.y, b.pos.x, b.pos.y);
    }
    p.noStroke();
    for (let i = sparks.length - 1; i >= 0; i--) {
      let s = sparks[i];
      s.x += s.vx; s.y += s.vy; s.life -= 0.04;
      if (s.life <= 0) { sparks.splice(i, 1); continue; }
      p.fill(217, 119, 87, s.life * 180);
      p.circle(s.x, s.y, 2.5 * s.life);
    }
  };
};

To push it further:

Make one body enormously massive and watch others begin to orbit around like planets around stars.
Add drag proportional to velocity squared and see the pattern settle into stable loops.
Record positions and replay the whole dance backwards.

Chapter 3: Oscillation, expanded into a Harmonograph Choir

This chapter covers simple harmonic motion. My expansion is the Victorian harmonograph: a pen driven by two decaying pendulums at once, x by one sine, y by another.

This happens through detuning. If the frequency ratio were exactly 2:3 the pen would retrace the same Lissajous curve forever. Nudge one frequency by a fraction of a percent and the curve precesses slowly, filling in a shimmering braided band. Exponential damping makes each drawing spiral gracefully inward before the pen resets. Three detuned pens drawing at once make a choir singing close harmony. I also added the rotary third pendulum term, and mapped mouse x to the detune amount, so you can sweep from a locked Lissajous figure to a slowly precessing band.

Exercise

Harmonograph Choir

Three pens driven by two detuned pendulums plus a rotary term. Mouse x controls the detune: far left locks the Lissajous figure, right makes it precess into a braided band.

Solution code

return function (p) {
  let pens = [];

  p.setup = function () {
    p.createCanvas(500, 500);
    p.background(250, 249, 245);
    let ratios = [[2, 3], [3, 4], [3, 5], [4, 5]];
    for (let i = 0; i < 3; i++) {
      let r = p.random(ratios);
      pens.push({
        baseFx: r[0], baseFy: r[1],
        sign: p.random() < 0.5 ? -1 : 1,
        fr: p.random(0.05, 0.35), // rotary third pendulum
        px: p.random(p.TWO_PI), py: p.random(p.TWO_PI), pr: p.random(p.TWO_PI),
        amp: p.random(110, 190),
        damp: p.random(0.00005, 0.0001),
        t: 0, last: null,
        col: p.random([p.color('#d97757'), p.color('#6a9bcc'), p.color('#788c5d')])
      });
    }
  };

  p.draw = function () {
    p.background(250, 249, 245, 3);
    // mouse x sets the detune: far left locks the curve, right makes it precess
    let detune = p.constrain(p.map(p.mouseX, 0, p.width, 0, 0.008), 0, 0.008);
    if (p.mouseX === 0 && p.mouseY === 0) detune = 0.002;
    for (let pen of pens) {
      let fx = pen.baseFx + detune * pen.sign;
      let fy = pen.baseFy - detune * pen.sign;
      for (let k = 0; k < 25; k++) {
        pen.t += 0.01;
        let e = p.exp(-pen.damp * pen.t * 600);
        if (e < 0.05) { pen.t = 0; pen.last = null; continue; }
        let x = p.width / 2 + e * (pen.amp * p.sin(fx * pen.t + pen.px) + 45 * p.sin(pen.fr * pen.t + pen.pr));
        let y = p.height / 2 + e * (pen.amp * p.sin(fy * pen.t + pen.py) + 45 * p.cos(pen.fr * pen.t + pen.pr));
        if (pen.last) {
          pen.col.setAlpha(50);
          p.stroke(pen.col);
          p.line(pen.last.x, pen.last.y, x, y);
        }
        pen.last = { x: x, y: y };
      }
    }
  };
};

To push it further:

Add mechanical slop: a little phase noise per cycle, like a worn bearing on a real machine.
Map the frequency ratios to actual musical intervals and play the chord while it draws.
Let damping vary with distance from center so the drawing decays from the outside in.

Chapter 4: Particle Systems

Chapter 4 is about managing a particle array plus an emitter: spawning many short-lived objects, applying forces to each one every frame, and removing them when their lifespan hits zero.

Here, three spawn points along the bottom push out new particles with an upward vy and a small Gaussian vx. Each frame I add a constant downward acceleration (gravity) plus a sideways acceleration from noise(x, y, t), so the force field varies in space and time (Chapter 0’s Perlin noise used as wind).

Lifespan decays by a fixed amount per frame; when life <= 0 the particle is spliced out of the array. While it is alive, life scales the fill alpha and circle radius, and the fill color comes from lerpColor between warm and cool, indexed by 1 - life, so each particle cools as it dies. Two additions push it past the book: a dying ember sometimes spawns two smaller children (tuned just under replacement, so lineages flare but always die out), and clicking fires a radial burst of fifty sparks.

Exercise

Ember Fountain

Embers with descendants: a dying ember sometimes leaves two children, tuned just under replacement, so lineages flare and still die out. Fireworks fire on their own now and then; click to set one off yourself.

Solution code

return function (p) {
  let embers = [];

  p.setup = function () {
    p.createCanvas(500, 500);
    p.background(250, 249, 245);
  };

  function spawn(x, y, gen) {
    embers.push({
      x: x, y: y,
      vx: p.randomGaussian(0, 0.4), vy: p.random(-4.5, -2.5) * (gen ? 0.5 : 1),
      life: 1, decay: p.random(0.005, 0.012), gen: gen
    });
  }

  function burst(x, y) {
    for (let k = 0; k < 50; k++) {
      let a = p.random(p.TWO_PI), s = p.random(1, 4);
      embers.push({ x: x, y: y, vx: p.cos(a) * s, vy: p.sin(a) * s, life: 1, decay: p.random(0.01, 0.03), gen: 2 });
    }
  }

  // click to set off a firework yourself
  p.mousePressed = function () {
    if (p.mouseX >= 0 && p.mouseX <= p.width && p.mouseY >= 0 && p.mouseY <= p.height) {
      burst(p.mouseX, p.mouseY);
    }
  };

  p.draw = function () {
    p.background(250, 249, 245, 26);
    for (let i = 0; i < 8; i++) {
      spawn(p.width * p.random([0.25, 0.5, 0.75]) + p.randomGaussian(0, 5), p.height, 0);
    }
    if (p.random() < 0.008) {
      burst(p.random(p.width * 0.2, p.width * 0.8), p.random(p.height * 0.2, p.height * 0.5));
    }
    p.noStroke();
    for (let i = embers.length - 1; i >= 0; i--) {
      let e = embers[i];
      e.vx += (p.noise(e.x * 0.006, e.y * 0.006, p.frameCount * 0.01) - 0.5) * 0.35;
      e.vy += 0.02;
      e.x += e.vx; e.y += e.vy;
      e.life -= e.decay;
      if (e.life <= 0) {
        // a dying ember sometimes leaves two children: 0.45 * 2 = 0.9 offspring
        // on average, just under replacement, so every lineage still dies out
        if (e.gen < 2 && p.random() < 0.45) {
          spawn(e.x, e.y, e.gen + 1);
          spawn(e.x, e.y, e.gen + 1);
        }
        embers.splice(i, 1);
        continue;
      }
      let c = p.lerpColor(p.color('#d97757'), p.color('#6a9bcc'), 1 - e.life);
      c.setAlpha(e.life * 160);
      p.fill(c);
      p.circle(e.x, e.y, (3 - e.gen * 0.8) * e.life + 1);
    }
    if (embers.length > 2500) embers.splice(0, embers.length - 2500);
  };
};

To push it further:

Put the child-spawn probability on a slider and hunt for the exact edge of extinction.
Color bursts by launch height for a fuller firework grammar.
Drive the spawn rate from microphone volume with p5.AudioIn.

Chapter 5: Autonomous Agents

This chapter covers Reynolds-style steering and ends with flocking: separation, alignment, and cohesion, each computed from neighbors within a radius, summed into a steering force, with velocity clamped by a max speed.

My sketch adds two things. First, a falcon that actually hunts: it steers toward the nearest boid, eats it on contact, and the flock replenishes from the edges, so the counter in the corner is a small predator-prey model. Any boid near the falcon gets a flee force, and because neighbors react to each other, the panic spreads through the flock the way it does in real starling murmurations. A quarter of the boids are a second tribe with weaker cohesion and a higher speed limit, so the two groups continually shear past each other. Second, each boid counts its neighbors while computing the three rules, and that count sets its color with lerpColor: green for few neighbors, orange for crowded. Boids wrap at the edges, and each one is drawn as a short line from pos back along vel, so heading is visible without rotating a shape.

Exercise

Murmuration

Two tribes of boids (green cohesive, blue loose and fast) flee a falcon that actually hunts and eats. The flock replenishes from the edges, and the counter tracks the toll.

Solution code

return function (p) {
  let boids = [];
  let falcon, falconV;
  let taken = 0;

  p.setup = function () {
    p.createCanvas(500, 500);
    p.background(250, 249, 245);
    for (let i = 0; i < 120; i++) boids.push(makeBoid(i % 4 === 0));
    falcon = p.createVector(p.width / 2, p.height / 2);
    falconV = p.createVector(1, 0);
  };

  function makeBoid(rebel) {
    return {
      pos: p.createVector(p.random(p.width), p.random(p.height)),
      vel: p5.Vector.random2D().mult(2),
      rebel: rebel // second tribe: weaker cohesion, higher speed limit
    };
  }

  p.draw = function () {
    p.background(250, 249, 245, 30);

    // the falcon hunts: steer toward the nearest boid, eat on contact
    let nearest = null, nd = 1e9;
    for (let b of boids) {
      let d = p.dist(b.pos.x, b.pos.y, falcon.x, falcon.y);
      if (d < nd) { nd = d; nearest = b; }
    }
    if (nearest) {
      falconV.add(p5.Vector.sub(nearest.pos, falcon).setMag(0.25)).limit(3.6);
      falcon.add(falconV);
      if (nd < 8) { boids.splice(boids.indexOf(nearest), 1); taken++; }
    }
    falcon.x = (falcon.x + p.width) % p.width;
    falcon.y = (falcon.y + p.height) % p.height;
    p.push();
    p.translate(falcon.x, falcon.y);
    p.rotate(p.atan2(falconV.y, falconV.x));
    p.noStroke();
    p.fill(20, 20, 19, 200);
    p.triangle(10, 0, -6, 5, -6, -5);
    p.pop();

    // the flock replenishes from the edges
    if (boids.length < 120 && p.frameCount % 20 === 0) {
      let b = makeBoid(p.random() < 0.25);
      b.pos = p.createVector(p.random() < 0.5 ? 0 : p.width, p.random(p.height));
      boids.push(b);
    }

    for (let b of boids) {
      let coh = p.createVector(), ali = p.createVector(), sep = p.createVector();
      let n = 0;
      for (let o of boids) {
        if (o === b) continue;
        let d = p5.Vector.dist(b.pos, o.pos);
        if (d < 40) {
          coh.add(o.pos); ali.add(o.vel); n++;
          if (d < 16) sep.add(p5.Vector.sub(b.pos, o.pos).div(d * d + 1));
        }
      }
      if (n > 0) {
        coh.div(n).sub(b.pos).mult(b.rebel ? 0.0015 : 0.004);
        ali.div(n).sub(b.vel).mult(0.05);
        b.vel.add(coh).add(ali);
      }
      b.vel.add(sep.mult(7));
      let flee = p5.Vector.sub(b.pos, falcon);
      if (flee.mag() < 90) b.vel.add(flee.setMag(0.9));
      b.vel.limit(b.rebel ? 3.6 : 3);
      b.pos.add(b.vel);
      b.pos.x = (b.pos.x + p.width) % p.width;
      b.pos.y = (b.pos.y + p.height) % p.height;
      let crowd = p.constrain(n / 12, 0, 1);
      let base = b.rebel ? p.color('#6a9bcc') : p.color('#788c5d');
      p.stroke(p.lerpColor(base, p.color('#d97757'), crowd));
      p.strokeWeight(1.5);
      p.line(b.pos.x, b.pos.y, b.pos.x - b.vel.x * 3, b.pos.y - b.vel.y * 3);
    }

    p.noStroke();
    p.fill(20, 20, 19, 120);
    p.textFont('monospace');
    p.text('taken ' + taken, 14, p.height - 14);
  };
};

To push it further:

Replace the O(n²) neighbor loops with a spatial grid so it scales to thousands of boids.
Hatch eaten boids back as eggs on a delay and plot the predator-prey cycle.
Give the falcon stamina, so every sprint has to be paid for with a glide.

Chapter 6: Physics Libraries, expanded into a Soft Loom

This chapter is about physics libraries (Matter.js and Toxiclibs). Instead of importing one, I implement the core integrator those libraries use: verlet integration. Each point stores its previous position instead of a velocity, so the update is next = pos + (pos - prev) * damping + accel.

The cloth is a grid of points connected by distance constraints between horizontal and vertical neighbors. Each frame I apply gravity and a noise(x, y, t) wind to every unpinned point, then run four relaxation passes: for each constraint, measure the current distance and move both endpoints half the error back toward the rest length. Every fourth point in the top row is pinned, which is why the cloth hangs in swags. Line color and weight come from strain, the difference between a constraint’s current length and its rest length, mapped through lerpColor. Constraints that stretch past 2.4 times their rest length are deleted, so the gusts (wind strength surges on a slow noise curve) can tear the cloth, and the mouse can grab and drag any point.

Exercise

Soft Loom

A verlet cloth in gusting wind. Threads color by strain and snap past 2.4x stretch, so strong gusts tear it. Drag any point with the mouse; pull hard enough and you rip it yourself.

Solution code

return function (p) {
  const COLS = 20, ROWS = 14, SPACING = 18;
  let pts = [], cons = [];
  let grabbed = null;

  p.setup = function () {
    p.createCanvas(500, 500);
    let ox = (p.width - COLS * SPACING) / 2;
    for (let j = 0; j <= ROWS; j++) {
      for (let i = 0; i <= COLS; i++) {
        let x = ox + i * SPACING, y = 50 + j * SPACING;
        pts.push({ x: x, y: y, px: x, py: y, pin: j === 0 && i % 4 === 0 });
      }
    }
    let idx = (i, j) => j * (COLS + 1) + i;
    for (let j = 0; j <= ROWS; j++) {
      for (let i = 0; i <= COLS; i++) {
        if (i < COLS) cons.push([idx(i, j), idx(i + 1, j)]);
        if (j < ROWS) cons.push([idx(i, j), idx(i, j + 1)]);
      }
    }
  };

  p.mousePressed = function () {
    let best = 40;
    grabbed = null;
    for (let pt of pts) {
      let d = p.dist(pt.x, pt.y, p.mouseX, p.mouseY);
      if (d < best) { best = d; grabbed = pt; }
    }
  };
  p.mouseReleased = function () { grabbed = null; };

  p.draw = function () {
    p.background(250, 249, 245);
    // gusts: the wind strength itself surges on slow noise
    let gust = 1 + 3 * p.pow(p.noise(p.frameCount * 0.003), 3);
    for (let pt of pts) {
      if (pt.pin) continue;
      let wind = (p.noise(pt.x * 0.004, pt.y * 0.004, p.frameCount * 0.01) - 0.45) * 0.5 * gust;
      let nx = pt.x + (pt.x - pt.px) * 0.98 + wind;
      let ny = pt.y + (pt.y - pt.py) * 0.98 + 0.15;
      pt.px = pt.x; pt.py = pt.y;
      pt.x = nx; pt.y = ny;
    }
    if (grabbed && !grabbed.pin) {
      grabbed.x = p.mouseX; grabbed.y = p.mouseY;
      grabbed.px = p.mouseX; grabbed.py = p.mouseY;
    }
    for (let k = 0; k < 4; k++) {
      for (let c of cons) {
        let a = pts[c[0]], b = pts[c[1]];
        let dx = b.x - a.x, dy = b.y - a.y;
        let d = p.sqrt(dx * dx + dy * dy) || 1;
        let diff = (d - SPACING) / d * 0.5;
        if (!a.pin) { a.x += dx * diff; a.y += dy * diff; }
        if (!b.pin) { b.x -= dx * diff; b.y -= dy * diff; }
      }
    }
    // tear: constraints stretched past 2.4x snap for good
    for (let i = cons.length - 1; i >= 0; i--) {
      let a = pts[cons[i][0]], b = pts[cons[i][1]];
      if (p.dist(a.x, a.y, b.x, b.y) > SPACING * 2.4) cons.splice(i, 1);
    }
    for (let c of cons) {
      let a = pts[c[0]], b = pts[c[1]];
      let strain = p.constrain(p.abs(p.dist(a.x, a.y, b.x, b.y) - SPACING) / 8, 0, 1);
      p.stroke(p.lerpColor(p.color('#6a9bcc'), p.color('#d97757'), strain));
      p.strokeWeight(0.8 + strain);
      p.line(a.x, a.y, b.x, b.y);
    }
  };
};

To push it further:

Add a repair mode: click two torn points to stitch the cloth back together.
Connect the points in a ring with an internal pressure force for a soft-body blob.
Color threads by accumulated stress history and try to predict where the next tear starts.

Chapter 7: Cellular Automata, expanded into Bloom Automata

This chapter covers elementary cellular automata and the Game of Life: a grid where each cell’s next state depends only on its eight neighbors (born on 3, survives on 2 or 3), with wraparound edges.

The rules here are standard Life. What I add is memory in the rendering. Alongside the cell array I keep an age array (how many generations a cell has been alive) and a ghost array (set to 1 when a cell dies, multiplied by 0.9 every generation after). Living cells are colored by age with lerpColor, so fresh growth at the chaotic frontier is warm and stable still-lifes drift toward green. Dead cells fade out as gray ghosts, which leaves visible trails behind gliders. It runs at frameRate(15) so the generations are readable. The grid is also split down the middle: the left half runs Conway’s B3/S23, the right half runs HighLife’s B36/S23, and clicking stamps a glider you can send across the rule border.

Exercise

Bloom Automata

A split world: the left half runs Conway’s rules, the right half runs HighLife (B36/S23). Cells tint by age, the dead leave ghosts, and clicking stamps a glider you can send across the border.

Solution code

return function (p) {
  const N = 80;
  let cells, age, ghost, cs;

  p.setup = function () {
    p.createCanvas(500, 500);
    cs = p.width / N;
    cells = Array.from({ length: N * N }, () => p.random() < 0.3 ? 1 : 0);
    age = new Array(N * N).fill(0);
    ghost = new Array(N * N).fill(0);
    p.frameRate(15);
  };

  // click to stamp a glider
  p.mousePressed = function () {
    let ci = p.floor(p.mouseX / cs), cj = p.floor(p.mouseY / cs);
    if (ci < 2 || cj < 2 || ci > N - 3 || cj > N - 3) return;
    let g = [[0, 1], [1, 2], [2, 0], [2, 1], [2, 2]];
    for (let d of g) cells[(cj + d[0]) * N + (ci + d[1])] = 1;
  };

  p.draw = function () {
    let next = new Array(N * N);
    for (let j = 0; j < N; j++) {
      for (let i = 0; i < N; i++) {
        let s = 0;
        for (let dj = -1; dj <= 1; dj++)
          for (let di = -1; di <= 1; di++)
            if (di || dj) s += cells[((j + dj + N) % N) * N + (i + di + N) % N];
        let k = j * N + i;
        // split world: left half plays Conway (B3/S23),
        // right half plays HighLife (B36/S23), home of the replicator
        let born = (s === 3) || (i >= N / 2 && s === 6);
        next[k] = cells[k] ? (s === 2 || s === 3 ? 1 : 0) : (born ? 1 : 0);
      }
    }
    for (let k = 0; k < N * N; k++) {
      if (next[k]) age[k] = cells[k] ? age[k] + 1 : 1;
      else { if (cells[k]) ghost[k] = 1; age[k] = 0; }
      ghost[k] *= 0.9;
      cells[k] = next[k];
    }
    p.background(250, 249, 245);
    p.stroke(20, 20, 19, 25);
    p.line(p.width / 2, 0, p.width / 2, p.height);
    p.noStroke();
    for (let j = 0; j < N; j++) {
      for (let i = 0; i < N; i++) {
        let k = j * N + i;
        if (cells[k]) {
          p.fill(p.lerpColor(p.color('#d97757'), p.color('#788c5d'), p.constrain(age[k] / 20, 0, 1)));
          p.circle(i * cs + cs / 2, j * cs + cs / 2, cs * 0.8);
        } else if (ghost[k] > 0.05) {
          p.fill(20, 20, 19, ghost[k] * 60);
          p.circle(i * cs + cs / 2, j * cs + cs / 2, cs * 0.5);
        }
      }
    }
  };
};

To push it further:

Reseed a small random patch whenever the population stops changing.
Try continuous cell states with a smooth activation curve, the direction SmoothLife and Lenia take.
Tint the descendants of your stamped gliders and follow your lineage through the world.

Chapter 8: Fractals, expanded into a Wind Grove

This chapter is about recursion: Cantor sets, Koch curves, and the branching tree, where each branch draws itself shorter and then calls itself at spread angles.

I split the recursion into two passes. branch() runs once in setup and builds each tree as data: every node stores a length, a small Gaussian angle offset, and two or three children scaled by random(0.66, 0.76). drawNode() then walks that structure every frame and adds a sway angle from noise(off + depth, t) at each node. The sway is scaled so the trunk barely moves while the twigs move the most, and because each tree has its own noise offset, gusts travel across the grove instead of locking every canopy to the same phase. Stroke weight comes from depth; leaf dots sit on the terminal nodes. Click the canvas to reseed the grove.

Exercise

Wind Grove

Four recursive trees on a ground line. Each frame, Perlin noise sways every branch (tips more than trunks). Click to plant a new grove.

Solution code

return function (p) {
  const DEPTH = 8;
  let trees = [];

  p.setup = function () {
    p.createCanvas(500, 500);
    plant();
  };

  function plant() {
    trees = [];
    for (let i = 0; i < 4; i++) {
      trees.push({
        x: p.width * (0.14 + 0.24 * i) + p.randomGaussian(0, 12),
        off: p.random(1000),
        root: branch(DEPTH, p.random(55, 78))
      });
    }
  }

  function branch(depth, len) {
    let node = { len: len, a: p.randomGaussian(0, 0.06), kids: [] };
    if (depth > 0) {
      let n = p.random() < 0.85 ? 2 : 3;
      for (let i = 0; i < n; i++) {
        let spread = p.random(0.28, 0.55) * (i === 0 ? -1 : (i === 1 ? 1 : p.randomGaussian(0, 0.4)));
        let child = branch(depth - 1, len * p.random(0.66, 0.76));
        child.a += spread;
        node.kids.push(child);
      }
    }
    return node;
  }

  function drawNode(node, x, y, angle, depth, off, windT) {
    // Tips sway more than the trunk: scale by remaining depth.
    let sway = (p.noise(off + depth * 0.35, windT) - 0.5) * 0.55 * (1 - depth / (DEPTH + 2));
    let a = angle + node.a + sway;
    let x2 = x + p.cos(a) * node.len;
    let y2 = y + p.sin(a) * node.len;
    if (depth > 2) {
      p.stroke(40, 77, 54, 200);
    } else {
      p.stroke(10, 148, 200, 180);
    }
    p.strokeWeight(p.max(0.6, depth * 0.85));
    p.line(x, y, x2, y2);
    if (node.kids.length === 0) {
      p.noStroke();
      p.fill(232, 98, 26, 140);
      p.circle(x2, y2, 4);
    }
    for (let k of node.kids) drawNode(k, x2, y2, a, depth - 1, off + node.a, windT);
  }

  p.draw = function () {
    p.background(250, 250, 250);
    let windT = p.frameCount * 0.006;
    for (let tr of trees) {
      drawNode(tr.root, tr.x, p.height * 0.96, -p.HALF_PI, DEPTH, tr.off, windT);
    }
    p.stroke(40, 77, 54, 60);
    p.strokeWeight(2);
    p.line(0, p.height * 0.96, p.width, p.height * 0.96);
  };

  // Click to reseed the grove.
  p.mousePressed = function () {
    if (p.mouseX >= 0 && p.mouseX <= p.width && p.mouseY >= 0 && p.mouseY <= p.height) {
      plant();
    }
  };
};

To push it further:

Give each tree a different wind timescale so gusts arrive in sequence across the row.
Add a season loop: shed leaf dots as falling particles, then grow a new canopy.
Swap the hand-rolled recursion for an L-system grammar and mutate the rules each run.

Chapter 9: Evolutionary Computing, expanded into Selective Gardens

This chapter builds a genetic algorithm against a fixed target (the evolving-a-phrase example): fitness, selection, crossover, mutation.

My change is that the fitness target moves. Each of twenty flowers has a genome: petal count, radius, hue, and petal squish. The target genome is read from noise(t), so it drifts over time. Every 150 frames I score the population (negative distance between genome and target, field by field), keep the top two unchanged, and fill the rest by picking two parents from the top eight, doing per-gene crossover (random() < 0.5 ? ma[k] : pa[k]), and mutating each gene with some probability. Because the target never stops moving, the population never converges; you can watch it track the drift a few generations behind. Clicking flowers overrides all of that: liked flowers become the fitness function for the next generation, so you can breed the garden toward your own taste.

Exercise

Selective Gardens

Evolution with your taste as the fitness function: click flowers you like and the next generation breeds from them. Leave it alone and it falls back to chasing a drifting ideal.

Solution code

return function (p) {
  let pop = [], liked = [], gen = 0;

  p.setup = function () {
    p.createCanvas(500, 500);
    for (let i = 0; i < 20; i++) pop.push(randGenome());
    liked = new Array(20).fill(false);
  };

  function randGenome() {
    return {
      petals: p.floor(p.random(3, 12)),
      r: p.random(16, 40),
      hue: p.random(),
      squish: p.random(0.4, 0.8)
    };
  }

  // click flowers you like: your taste becomes the fitness function
  p.mousePressed = function () {
    if (p.mouseX < 0 || p.mouseY < 0 || p.mouseX >= p.width || p.mouseY >= p.height * 0.96) return;
    let i = p.min(p.floor(p.mouseX / 100), 4);
    let j = p.min(p.floor(p.mouseY / 120), 3);
    liked[j * 5 + i] = !liked[j * 5 + i];
  };

  function driftTarget() {
    let t = p.frameCount * 0.001;
    return {
      petals: 3 + p.noise(t, 1) * 9,
      r: 18 + p.noise(t, 2) * 22,
      hue: p.noise(t, 3),
      squish: 0.4 + p.noise(t, 4) * 0.4
    };
  }

  function fitness(g, T) {
    return -(p.abs(g.petals - T.petals) / 9 + p.abs(g.r - T.r) / 22 +
             p.abs(g.hue - T.hue) + p.abs(g.squish - T.squish) / 0.4);
  }

  function evolve() {
    let anyLiked = liked.some(v => v);
    let scored;
    if (anyLiked) {
      scored = pop.map((g, i) => ({ g: g, f: (liked[i] ? 1 : 0) + p.random(0.01) }));
    } else {
      let T = driftTarget();
      scored = pop.map(g => ({ g: g, f: fitness(g, T) }));
    }
    scored.sort((a, b) => b.f - a.f);
    let parents = anyLiked ? p.max(1, liked.filter(v => v).length) : 8;
    let next = [scored[0].g, scored[1].g];
    while (next.length < pop.length) {
      let ma = scored[p.floor(p.random(parents))].g;
      let pa = scored[p.floor(p.random(p.max(parents, 2)))].g;
      let child = {};
      for (let k of ['petals', 'r', 'hue', 'squish'])
        child[k] = p.random() < 0.5 ? ma[k] : pa[k];
      if (p.random() < 0.5) child.petals = p.constrain(child.petals + p.round(p.randomGaussian(0, 1)), 3, 13);
      if (p.random() < 0.5) child.r = p.constrain(child.r + p.randomGaussian(0, 4), 12, 44);
      if (p.random() < 0.5) child.hue = (child.hue + p.randomGaussian(0, 0.08) + 1) % 1;
      next.push(child);
    }
    pop = next;
    liked = new Array(20).fill(false);
    gen++;
  }

  function flower(g, cx, cy, isLiked) {
    p.push();
    p.translate(cx, cy);
    if (isLiked) {
      p.noFill();
      p.stroke(217, 119, 87, 200);
      p.strokeWeight(2);
      p.circle(0, 0, 96);
    }
    let c = p.lerpColor(p.color('#d97757'), p.color('#6a9bcc'), g.hue);
    c.setAlpha(150);
    p.fill(c);
    p.stroke(20, 20, 19, 40);
    p.strokeWeight(1);
    let petals = p.round(g.petals);
    for (let i = 0; i < petals; i++) {
      p.push();
      p.rotate(i / petals * p.TWO_PI);
      p.ellipse(g.r * 0.55, 0, g.r, g.r * g.squish);
      p.pop();
    }
    p.noStroke();
    p.circle(0, 0, g.r * 0.3);
    p.pop();
  }

  p.draw = function () {
    if (p.frameCount % 150 === 0) evolve();
    p.background(250, 249, 245);
    for (let i = 0; i < pop.length; i++) {
      flower(pop[i], (i % 5) * 100 + 50, p.floor(i / 5) * 120 + 60, liked[i]);
    }
    p.fill(20, 20, 19, 120);
    p.noStroke();
    p.textFont('monospace');
    p.text('generation ' + gen + ' · click flowers you like', 14, p.height - 10);
  };
};

To push it further:

Run two gardens with different mutation rates on the same clicks and see which one tracks your taste faster.
Add a symmetry gene and watch lopsided mutants occasionally take over.
Plot mean fitness over generations in a corner to see how far behind the target the population runs.

Chapter 10: Neuroevolution, expanded into Neural Lace

The final chapters cover neural networks and neuroevolution: a perceptron, then multilayer networks, then evolving weights instead of training them.

Here the network is a pattern generator instead of a controller, which is the CPPN idea from the NEAT line of work. A small fixed network (4 inputs, 12 tanh hidden units, 2 outputs) gets each grid cell’s x, y, distance from center, and sin(t) as inputs. One output picks the color via lerpColor; the other sets alpha and circle size. Because the network composes smooth functions, the output is a smooth pattern, and every random initialization of the weights gives a different one. Each frame I nudge every input weight with a tiny randomGaussian and multiply by 0.9998 so the weights cannot blow up. That is evolution with no fitness function, just drift. The mouse position is wired in as two extra inputs, so the whole pattern warps under your cursor, and clicking reinitializes the weights into a new species.

Exercise

Neural Lace

A small network paints the canvas with the mouse wired in as two extra inputs, so the pattern warps under your cursor. Click for a completely new species.

Solution code

return function (p) {
  const HIDDEN = 12;
  let w1 = [], b1 = [], w2 = [], b2 = [];

  p.setup = function () {
    p.createCanvas(500, 500);
    newSpecies();
  };

  function newSpecies() {
    w1 = []; b1 = []; w2 = []; b2 = [];
    for (let i = 0; i < HIDDEN; i++) {
      w1.push([p.randomGaussian(0, 1.2), p.randomGaussian(0, 1.2), p.randomGaussian(0, 1.2),
               p.randomGaussian(0, 1.2), p.randomGaussian(0, 0.8), p.randomGaussian(0, 0.8)]);
      b1.push(p.randomGaussian(0, 0.5));
    }
    for (let o = 0; o < 2; o++) {
      w2.push(Array.from({ length: HIDDEN }, () => p.randomGaussian(0, 1)));
      b2.push(p.randomGaussian(0, 0.4));
    }
  }

  // click for a completely new species
  p.mousePressed = function () {
    if (p.mouseX >= 0 && p.mouseX <= p.width && p.mouseY >= 0 && p.mouseY <= p.height) newSpecies();
  };

  function evalNet(x, y, t, mx, my) {
    let inputs = [x, y, Math.sqrt(x * x + y * y), Math.sin(t), mx, my];
    let hidden = [];
    for (let i = 0; i < HIDDEN; i++) {
      let s = b1[i];
      for (let k = 0; k < 6; k++) s += w1[i][k] * inputs[k];
      hidden.push(Math.tanh(s));
    }
    let out = [];
    for (let o = 0; o < 2; o++) {
      let s = b2[o];
      for (let i = 0; i < HIDDEN; i++) s += w2[o][i] * hidden[i];
      out.push(Math.tanh(s));
    }
    return out;
  }

  p.draw = function () {
    // weights drift each frame: no fitness function, just a slow random walk
    for (let i = 0; i < HIDDEN; i++)
      for (let k = 0; k < 6; k++)
        w1[i][k] = w1[i][k] * 0.9998 + p.randomGaussian(0, 0.003);
    p.background(250, 249, 245);
    p.noStroke();
    let cell = 10;
    // the mouse is two extra inputs: the pattern warps under your cursor
    let mx = (p.mouseX / p.width - 0.5) * 2;
    let my = (p.mouseY / p.height - 0.5) * 2;
    for (let y = 0; y < p.height; y += cell) {
      for (let x = 0; x < p.width; x += cell) {
        let out = evalNet((x / p.width - 0.5) * 2.4, (y / p.height - 0.5) * 2.4,
                          p.frameCount * 0.01, mx, my);
        let c = p.lerpColor(p.color('#6a9bcc'), p.color('#d97757'), (out[0] + 1) / 2);
        c.setAlpha(40 + (out[1] + 1) / 2 * 200);
        p.fill(c);
        p.circle(x + cell / 2, y + cell / 2, cell * (0.4 + (out[1] + 1) / 2 * 0.7));
      }
    }
    p.fill(20, 20, 19, 120);
    p.textFont('monospace');
    p.text('move to warp · click for a new species', 14, p.height - 14);
  };
};

To push it further:

Add a fitness function such as contrast or symmetry and hill-climb the weights instead of drifting.
Give the network extra inputs like sin(5x) or atan2(y, x) to get stripes and mandalas.
Breed two networks by averaging weights and render parent, parent, child side by side.

Appendix: Build a Creature

The book closes with a creature design appendix. Instead of introducing a new mechanic, it asks you to assemble the ones you already have into something that reads as alive. Here is mine: a jellyfish built with principles from five of the chapters in the book.

The locomotion is the part I like most (from Chapter 3). A phase variable drives sin(ph), and thrust is only added during the contraction quarter of each cycle, while the bell is squeezing. The rest of the cycle it coasts against water drag (vel.mult(0.965)), which produces the pulse-and-glide rhythm real jellyfish have. The contraction also reshapes the body: the bell narrows, the dome stretches, and the glow layers brighten with the squeeze.

Steering (from Chapter 5) turns the heading at most 0.02 radians per frame toward the nearest plankton, with a small noise() wobble, so it drifts in lazy curves instead of driving straight at food. Seven tentacles hang from the mouth rim, each a constraint chain (from Chapter 6) whose anchor point is recomputed from the bell geometry every frame; a per-link noise() sway keeps them from stacking into straight lines. The plankton are chapter 0 random walkers, and eating one bursts a few particles (from Chapter 4).

No single part makes it feel alive. But the combination feels like it has some kind of free will! The jellyfish thrusts only happens while the bell squeezes. The tentacles always lag a beat behind the body. And the glow rises and falls with the pulse.

Exercise

A Jellyfish from Five Chapters

A pulse-and-glide jellyfish: sine-driven contraction for thrust (chapter 3), gentle seek steering (chapter 5), tentacles as constraint chains (chapter 6), random-walk plankton (chapter 0), and spark particles when it eats (chapter 4).

Solution code

return function (p) {
  const TENT = 7, TLEN = 14, TLINK = 9;
  const R = 42; // relaxed bell radius
  let pos, vel;
  let heading;
  let ph = 0;   // pulse phase
  let tentacles = [];
  let plankton = [];
  let sparks = [];
  let eaten = 0;

  p.setup = function () {
    p.createCanvas(500, 500);
    pos = p.createVector(p.width / 2, p.height * 0.6);
    vel = p.createVector(0, -0.5);
    heading = -p.HALF_PI;
    for (let t = 0; t < TENT; t++) {
      let pts = [];
      for (let i = 0; i < TLEN; i++) pts.push({ x: pos.x, y: pos.y + i * TLINK });
      tentacles.push(pts);
    }
    for (let i = 0; i < 6; i++) plankton.push(spawnPlankton());
  };

  function spawnPlankton() {
    return { x: p.random(30, p.width - 30), y: p.random(30, p.height - 30), a: p.random(p.TWO_PI) };
  }

  p.draw = function () {
    p.background(250, 249, 245);

    // steering (chapter 5): turn the heading a little toward the nearest plankton
    let target = plankton[0], best = 1e9;
    for (let f of plankton) {
      let d = p.dist(pos.x, pos.y, f.x, f.y);
      if (d < best) { best = d; target = f; }
    }
    let want = p.atan2(target.y - pos.y, target.x - pos.x);
    let diff = want - heading;
    while (diff > p.PI) diff -= p.TWO_PI;
    while (diff < -p.PI) diff += p.TWO_PI;
    heading += p.constrain(diff, -0.02, 0.02) + (p.noise(p.frameCount * 0.005) - 0.5) * 0.02;

    // locomotion (chapter 3): thrust only while the bell is contracting
    ph += 0.055;
    let c = p.pow(p.max(0, p.sin(ph)), 1.4); // 0 relaxed, 1 fully squeezed
    let squeezing = p.sin(ph) > 0 && p.cos(ph) > 0;
    if (squeezing) vel.add(p.cos(heading) * 0.09, p.sin(heading) * 0.09);
    vel.mult(0.965); // water drag: pulse, then glide
    pos.add(vel);
    pos.x = p.constrain(pos.x, 40, p.width - 40);
    pos.y = p.constrain(pos.y, 40, p.height - 40);

    // eat
    if (best < R * 0.8) {
      eaten++;
      plankton[plankton.indexOf(target)] = spawnPlankton();
      for (let k = 0; k < 14; k++) {
        let a = p.random(p.TWO_PI);
        sparks.push({ x: target.x, y: target.y, vx: p.cos(a) * p.random(2), vy: p.sin(a) * p.random(2), life: 1 });
      }
    }

    // plankton are chapter 0 random walkers
    p.noStroke();
    for (let f of plankton) {
      f.a += (p.noise(f.x * 0.01, f.y * 0.01, p.frameCount * 0.005) - 0.5) * 0.4;
      f.x = p.constrain(f.x + p.cos(f.a) * 0.4, 20, p.width - 20);
      f.y = p.constrain(f.y + p.sin(f.a) * 0.4, 20, p.height - 20);
      p.fill(217, 119, 87, 190);
      p.circle(f.x, f.y, 6);
    }

    // spark particles (chapter 4)
    for (let i = sparks.length - 1; i >= 0; i--) {
      let s = sparks[i];
      s.x += s.vx; s.y += s.vy; s.life -= 0.03;
      if (s.life <= 0) { sparks.splice(i, 1); continue; }
      p.fill(106, 155, 204, s.life * 200);
      p.circle(s.x, s.y, 3 * s.life);
    }

    // bell geometry: contraction narrows the bell and stretches the dome
    let len = R * (1 + 0.30 * c);
    let bellR = R * (1 - 0.28 * c);

    // tentacles (chapter 6): constraint chains anchored to the mouth rim
    for (let t = 0; t < TENT; t++) {
      let along = p.map(t, 0, TENT - 1, -0.8, 0.8) * bellR;
      let pts = tentacles[t];
      pts[0].x = pos.x + p.cos(heading) * -2 - p.sin(heading) * along;
      pts[0].y = pos.y + p.sin(heading) * -2 + p.cos(heading) * along;
      for (let i = 1; i < TLEN; i++) {
        let a = pts[i], b = pts[i - 1];
        a.x += (p.noise(t * 7, i * 0.3, p.frameCount * 0.01) - 0.5) * 1.4;
        a.y += 0.2; // slight sink
        let dx = a.x - b.x, dy = a.y - b.y;
        let d = p.sqrt(dx * dx + dy * dy) || 1;
        a.x = b.x + dx / d * TLINK;
        a.y = b.y + dy / d * TLINK;
      }
      p.noFill();
      for (let i = 1; i < TLEN; i++) {
        let col = p.lerpColor(p.color('#6a9bcc'), p.color('#788c5d'), i / TLEN);
        col.setAlpha(160 * (1 - i / TLEN) + 30);
        p.stroke(col);
        p.strokeWeight(2.4 * (1 - i / TLEN) + 0.4);
        p.line(pts[i - 1].x, pts[i - 1].y, pts[i].x, pts[i].y);
      }
    }

    // bell: two translucent layers plus a halo that brightens on contraction
    p.push();
    p.translate(pos.x, pos.y);
    p.rotate(heading);
    p.noStroke();
    p.fill(106, 155, 204, 18 + 40 * c);
    p.circle(0, 0, (len + bellR) * 1.6);
    p.fill(106, 155, 204, 90 + 90 * c);
    bellShape(len, bellR);
    p.fill(120, 140, 93, 70 + 60 * c);
    bellShape(len * 0.62, bellR * 0.62);
    p.pop();

    p.noStroke();
    p.fill(20, 20, 19, 120);
    p.textFont('monospace');
    p.text('eaten ' + eaten, 14, p.height - 14);
  };

  // dome pointing along local +x, mouth notched at the back
  function bellShape(len, r) {
    p.beginShape();
    p.curveVertex(-r * 0.15, r);
    p.curveVertex(-r * 0.15, r);
    for (let a = p.HALF_PI; a >= -p.HALF_PI; a -= 0.3) {
      p.curveVertex(p.cos(a) * len, p.sin(a) * r);
    }
    p.curveVertex(-r * 0.15, -r);
    p.curveVertex(0, -r * 0.45);
    p.curveVertex(0, r * 0.45);
    p.curveVertex(-r * 0.15, r);
    p.endShape(p.CLOSE);
  }
};

To push it further:

Make it HUNGRY: shrink the jellyfish when it has not eaten recently, and grow its belly (head?) with each meal.
Add a second jellyfish with a separation force so the two have to negotiate the same plankton supply.
If the jellyfish touch one other, make them multiply!