The Nature of Code

Shiffman teaches at NYU ITP/IMA, co-founded the Processing Foundation, and runs The Coding Train, which is how a lot of people, including myself, first discover the joy of creative coding! The Nature of Code (No Starch / Penguin, 2024) is the JavaScript and p5.js reboot of the 2012 Processing edition.

Online edition and examples: natureofcode.com. Below, several chapters include a short runnable exercise (p5.js in the page): try the prompt yourself, then reveal a solution sketch.

Each chapter summary in this post also embeds a live expansion sketch from my Emergence Atlas playground (write-ups in Growing Wild Gardens), plus a Make it real strategy for pointing that chapter’s ideas at real data from a keyless public API.

Chapter by chapter

Introduction

Shiffman sets the book up as a single story told in three acts:

Inanimate motion under named forces
Life-like systems (agents, automata, fractals)
The phenomena of seeming intelligence (evolution, neural nets, neuroevolution)

The recurring homework in the book is an “Ecosystem Project”, a simulated world you can keep extending as each chapter adds a new mechanism. I love this beautiful structure!

Basic programming comfort helps with the Javascript version of Processing used in this book. A physics degree is absolutely not required. The Coding Train videos on Daniel’s YouTube channel are great to watch alongside the exercises in each of the chapters.

Chapter 0: Randomness

The book starts with coding out a random walk. At each step a walker picks a displacement \(\Delta \vec{x}\) from some distribution and adds it: \(\vec{x}_{t+1} = \vec{x}_t + \Delta \vec{x}\). Change the distribution and the picture changes. Draw \(\Delta x\) and \(\Delta y\) from a uniform interval.

If you draw them from a Gaussian, the walker stays local most of the time, the same way pollen on water jitters under Brownian motion without suddenly teleporting across the dish:

\[ P(\Delta x) = \frac{1}{\sigma\sqrt{2\pi}}\, e^{-\Delta x^{2}/(2\sigma^{2})}. \]

Rare large jumps need a heavy-tailed family instead: a Lévy-style step where \(P(|\ell|) \propto |\ell|^{-(1+\alpha)}\) for \(\alpha \in (0,2)\). Most steps are tiny; every so often one is enormous. That is how some foraging animals actually search, and how earthquake magnitudes pile up under Gutenberg-Richter. The canvas suddenly shows dense clusters linked by faint long leaps.

Then Shiffman introduces Perlin noise: a smooth, coherent field \(n(x,y,t)\) instead of independent draws. Uniform randomness is static. Perlin noise is what we see in weather, wood grain, the slow drift of clouds.

Building a Walker class and swapping only the sampling rule allows you to visualize these patterns. You can see the difference between unstructured noise and structured stochasticity, which is the intuition this chapter helps you develop.

Exercise

Biased random walker

Build a point that takes a random step each frame, but prefers moving right (about 40% of steps). The other three cardinal directions should share the remaining probability. Watch the trail drift instead of staying centered like a fair walk.

Solution code

return function (p) {
  let x, y;

  p.setup = function () {
    p.createCanvas(420, 200);
    p.background(248, 249, 242);
    p.strokeWeight(2);
    x = p.width / 2;
    y = p.height / 2;
  };

  p.draw = function () {
    p.stroke(30, 126, 52, 90);
    p.point(x, y);

    // Prefer right (40%); other three directions share the rest.
    const r = p.random(1);
    if (r < 0.4) x += 1;
    else if (r < 0.6) x -= 1;
    else if (r < 0.8) y += 1;
    else y -= 1;

    x = p.constrain(x, 0, p.width - 1);
    y = p.constrain(y, 0, p.height - 1);
  };
};

My own expanded sketch: Dust Gardens (write-up in Growing Wild Gardens).

Make it real: Random walks get more interesting when the step sizes come from the real world. Fetch the USGS feed of the past month’s earthquakes (https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson, keyless and CORS friendly, so loadJSON works straight from the browser). Magnitudes follow the Gutenberg-Richter power law, the same heavy-tailed family as a Levy flight. Drive your walker’s step length with successive real magnitudes (something like step = pow(10, mag - 4)) and compare the trail against the Gaussian version. The difference between static and rare catastrophic jumps is the whole lesson of heavy tails, drawn by real seismicity.

Chapter 1: Vectors

A vector \(\vec{v} = (v_x, v_y)\) is an arrow: direction plus magnitude \(\lvert\vec{v}\rvert = \sqrt{v_x^{2} + v_y^{2}}\). Position, velocity, and acceleration are all the same kind of object, related by

\[ \vec{v} = \frac{d\vec{x}}{dt}, \qquad \vec{a} = \frac{d\vec{v}}{dt}. \]

In code that becomes Euler’s method on a canvas. Each frame is \(\vec{v} \leftarrow \vec{v} + \vec{a}\,\Delta t\) and \(\vec{x} \leftarrow \vec{x} + \vec{v}\,\Delta t\). Daniel teaches p5.Vector as the vocabulary for those operations: add, subtract, scale, normalize (\(\hat{v} = \vec{v}/\lvert\vec{v}\rvert\)), set magnitude. The mouse-seeking demo is just building a desired direction \(\vec{x}_{\text{mouse}} - \vec{x}\) and turning it into an acceleration.

This is the math of wind and current. A weather map is a vector field \(\vec{v}(x,y)\): an arrow at every point telling air which way to go. A salmon holding station in a river is continuously correcting against a flow vector.

Exercise

Accelerate toward the mouse

Give a mover a position and velocity. Each frame, set acceleration toward the mouse (p5.Vector.sub), limit speed, and draw a short line from the mover to the cursor so you can see the desired direction.

Solution code

return function (p) {
  let pos, vel, acc;

  p.setup = function () {
    p.createCanvas(420, 220);
    pos = p.createVector(p.width / 2, p.height / 2);
    vel = p.createVector(0, 0);
  };

  p.draw = function () {
    p.background(248, 249, 242, 40);
    const mouse = p.createVector(p.mouseX, p.mouseY);
    acc = p5.Vector.sub(mouse, pos);
    acc.setMag(0.35);
    vel.add(acc);
    vel.limit(6);
    pos.add(vel);

    p.stroke(30, 126, 52);
    p.fill(110, 184, 127);
    p.circle(pos.x, pos.y, 28);
    p.stroke(40, 80);
    p.line(pos.x, pos.y, p.mouseX, p.mouseY);
  };
};

My own expanded sketch: Compass Meadow (write-up in Growing Wild Gardens).

Make it real: A vector field is more compelling when it is today’s actual weather. Open-Meteo is keyless and CORS friendly: request wind_speed_10m and wind_direction_10m for a grid of lat/lon points around your city (https://api.open-meteo.com/v1/forecast?latitude=40.7&longitude=-74&hourly=wind_speed_10m,wind_direction_10m). Convert each speed and direction pair into a vector, interpolate between grid points, and drop walkers into the field. You get streamlines of the real forecast, and if you animate the hourly index you can watch tomorrow’s front comb the field.

Chapter 2: Forces

Newton’s second law is illustrated throughout this chapter:

\[ \vec{F}_{\text{net}} = m\vec{a} \quad\Rightarrow\quad \vec{a} = \frac{1}{m}\sum_i \vec{F}_i. \]

In each frame I accumulate forces (wind, gravity, friction, drag, attraction), divide by mass, to integrate into motion. Gravity near Earth is \(\vec{F}_g = m\vec{g}\). Between two bodies it is the prettier inverse-square law, which is why planets do not fall in straight lines and why a sketch.

A few attractors mapped out mathematically in motion can quickly simulate a tiny solar system:

\[ \vec{F}_{12} = G\,\frac{m_1 m_2}{r^{2}}\,\hat{r}_{12}. \]

Friction and fluid drag oppose velocity (\(F_d \propto -\lvert\vec{v}\rvert^{2}\) in the quadratic regime), which is why a feather and a hammer disagree in air and agree in vacuum.

What I love about this chapter is the way in which it teaches composition of multiple diverse objects. A leaf in a gust of wind is acted upon by gravity as well as drag by a noisy wind vector. An orbit is animated by continuous free-fall that keeps missing the ground.

Exercise

Wind + gravity on different masses

Simulate three balls of different mass. Each frame apply a shared wind force and a gravity force scaled by mass (F = m * g style), accumulate forces into acceleration, and bounce lightly at the floor and walls. Heavier balls should feel harder to shove sideways.

Solution code

return function (p) {
  let movers;

  function Mover(x, y, m) {
    this.mass = m;
    this.pos = p.createVector(x, y);
    this.vel = p.createVector(0, 0);
    this.acc = p.createVector(0, 0);
  }

  Mover.prototype.applyForce = function (force) {
    const f = p5.Vector.div(force, this.mass);
    this.acc.add(f);
  };

  Mover.prototype.update = function () {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
    if (this.pos.y > p.height - this.mass * 4) {
      this.pos.y = p.height - this.mass * 4;
      this.vel.y *= -0.7;
    }
    if (this.pos.x > p.width) {
      this.pos.x = p.width;
      this.vel.x *= -0.7;
    }
    if (this.pos.x < 0) {
      this.pos.x = 0;
      this.vel.x *= -0.7;
    }
  };

  Mover.prototype.show = function () {
    p.stroke(30, 126, 52);
    p.fill(110, 184, 127, 200);
    p.circle(this.pos.x, this.pos.y, this.mass * 8);
  };

  p.setup = function () {
    p.createCanvas(420, 220);
    movers = [
      new Mover(60, 40, 2),
      new Mover(160, 20, 4),
      new Mover(280, 10, 6),
    ];
  };

  p.draw = function () {
    p.background(248, 249, 242);
    const wind = p.createVector(0.08, 0);
    for (let i = 0; i < movers.length; i++) {
      const gravity = p.createVector(0, 0.25 * movers[i].mass);
      movers[i].applyForce(wind);
      movers[i].applyForce(gravity);
      movers[i].update();
      movers[i].show();
    }
    p.noStroke();
    p.fill(40, 120);
    p.textSize(12);
    p.text("wind →  +  gravity ↓  (force accumulation)", 10, 18);
  };
};

My own expanded sketch: Orbital Calligraphy (write-up in Growing Wild Gardens).

Make it real: Make a little solar system by seeding movers with real planetary masses and mean orbital velocities of the inner planets (constants from any ephemeris table). Scale to canvas units, and see whether your integrator can actually keep Mercury in orbit for more than a few minutes. (I can’t seem to do this!) Naive Euler will not actually keep planets in orbit, and this is a lesson in the book between abstract and real forces in the real world.

For live data, you can poll https://api.wheretheiss.at/v1/satellites/25544 (keyless, CORS friendly) every few seconds to draw the real ISS ground position beside your simulated Earth-satellite pair.

Chapter 3: Oscillation

Anything that repeats in time can be shown in simple harmonic motion:

\[ x(t) = A\sin(\omega t + \phi), \qquad \omega = 2\pi f, \]

with amplitude \(A\), angular frequency \(\omega\), and phase \(\phi\). A spring obeying Hooke’s law \(F = -kx\) produces exactly this (for small motion), with \(\omega = \sqrt{k/m}\). A pendulum under the small-angle approximation does the same, with \(\omega = \sqrt{g/L}\). Polar coordinates \((r,\theta)\) and the conversions \(x = r\cos\theta\), \(y = r\sin\theta\) show up constantly: heading, orbits, the way a creature should rotate to face its velocity.

The tides of the ocean are also sums of a few sinusoids (lunar semidiurnal near \(12.42\,\mathrm{h}\), solar near \(12.00\,\mathrm{h}\)). A heartbeat, a dripping faucet, a jellyfish bell, the sway of a skyscraper in wind: these can all be portrayed as oscillators, sometimes coupled or detuned.

My own expanded sketch: Harmonograph Choir (write-up in Growing Wild Gardens).

Make it real: Tides are the natural world’s Fourier series. NOAA’s CO-OPS API serves observed water levels for any US station without a key (https://api.tidesandcurrents.noaa.gov/api/prod/datagetter?date=latest&station=9414290&product=water_level&datum=MLLW&units=metric&time_zone=gmt&format=json). Plot 48 hours of real water level, then try to reproduce it with two or three of simple harmonic oscillators. The lunar semidiurnal constituent at 12.42 hours and the solar at 12.00 hours can get you surprisingly far, and sliders for amplitude and phase can turn the exercise into a harmonic model of the ocean.

Chapter 4: Particle Systems

A particle is a tiny Newton object with a lifespan. Birth starts with an emitter, with vector forces while alive, and decaying to death when life hits zero:

\[ \vec{x}_{t+\Delta t} = \vec{x}_t + \vec{v}\,\Delta t, \qquad \vec{v}_{t+\Delta t} = \vec{v}_t + \vec{a}\,\Delta t, \qquad \ell_{t+\Delta t} = \ell_t - \delta. \]

One particle is boring. A thousand particles with staggered \(\ell\), small random \(\vec{v}\), and a shared force field is how we have smoke, spray, sparks, and snow. The math in chapter 2 is amplified when you put these into an ensemble: manage birth and death rates, apply \(\vec{F}\) to the whole array, cull the dead without leaking memory. Inheritance lets sparks and embers share an update loop while drawing different patterns.

Nature runs particle systems like these constantly. Rain is an emitter in a cloud. A volcanic plume is hot particles under buoyancy and wind. Spore release, blood cells in a vessel, the glitter of a breaking wave: these are all populations of short-lived bodies under shared forces.

My own expanded sketch: Ember Fountain (write-up in Growing Wild Gardens).

Make it real: Give each emitter a city and let live pollution set its behavior. Open-Meteo’s air quality endpoint is keyless (https://air-quality-api.open-meteo.com/v1/air-quality?latitude=52.5&longitude=13.4&hourly=pm2_5). Map PM2.5 to spawn rate and particle opacity, reuse the previous chapter’s real wind vectors as the force pushing the plume, and you have a live smoke map built from your own particle system. Three cities side by side make air quality differences visceral in a way a bar chart never is.

Chapter 5: Autonomous Agents

Craig Reynolds’ steering model is almost embarrassingly small. Desired velocity points at a target; steering is the correction:

\[ \vec{v}_{\text{desired}} = \frac{\vec{x}_{\text{target}} - \vec{x}}{\lvert\vec{x}_{\text{target}} - \vec{x}\rvert}\, v_{\max}, \qquad \vec{F}_{\text{steer}} = \operatorname{clamp}\!\left(\vec{v}_{\text{desired}} - \vec{v},\, F_{\max}\right). \]

Seek, flee, arrive, wander, and path following are variations on that template. Flocking adds three local averages over neighbors inside a radius: separation (don’t crowd), alignment (match \(\langle\vec{v}\rangle\)), cohesion (move toward \(\langle\vec{x}\rangle\)).

Real flocks, schools, and herds run on the same kind of local rules. Each body only knows a neighborhood, and the wave of turns propagates through the body like a flock of birds, which seem to magically know how to navigate emergent change in a collective in flight.

Exercise

Seek the mouse

Implement Reynolds-style seek: desired velocity toward a target, steering force = desired minus current velocity, limited by maxForce. Draw the vehicle as a triangle oriented along its velocity. The orange dot is the target (your mouse).

Solution code

return function (p) {
  let vehicle;

  function Vehicle(x, y) {
    this.pos = p.createVector(x, y);
    this.vel = p.createVector(0, 0);
    this.acc = p.createVector(0, 0);
    this.maxSpeed = 3.5;
    this.maxForce = 0.2;
    this.r = 8;
  }

  Vehicle.prototype.seek = function (target) {
    const desired = p5.Vector.sub(target, this.pos);
    desired.setMag(this.maxSpeed);
    const steer = p5.Vector.sub(desired, this.vel);
    steer.limit(this.maxForce);
    this.applyForce(steer);
  };

  Vehicle.prototype.applyForce = function (force) {
    this.acc.add(force);
  };

  Vehicle.prototype.update = function () {
    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed);
    this.pos.add(this.vel);
    this.acc.mult(0);
  };

  Vehicle.prototype.show = function () {
    const theta = this.vel.heading() + p.PI / 2;
    p.fill(110, 184, 127);
    p.stroke(30, 126, 52);
    p.push();
    p.translate(this.pos.x, this.pos.y);
    p.rotate(theta);
    p.beginShape();
    p.vertex(0, -this.r * 2);
    p.vertex(-this.r, this.r * 2);
    p.vertex(this.r, this.r * 2);
    p.endShape(p.CLOSE);
    p.pop();
  };

  p.setup = function () {
    p.createCanvas(420, 220);
    vehicle = new Vehicle(p.width / 2, p.height / 2);
  };

  p.draw = function () {
    p.background(248, 249, 242);
    const target = p.createVector(p.mouseX, p.mouseY);
    p.noStroke();
    p.fill(232, 98, 26, 180);
    p.circle(target.x, target.y, 14);
    vehicle.seek(target);
    vehicle.update();
    vehicle.show();
  };
};

My own expanded sketch: Murmuration (write-up in Growing Wild Gardens).

Make it real: OpenSky’s states endpoint returns every ADS-B aircraft in a bounding box, anonymously and with CORS (https://opensky-network.org/api/states/all?lamin=45&lomin=5&lamax=48&lomax=11). Draw the real planes as triangles oriented by their true heading, then release your boids into the same sky with an added separation rule against the real traffic, refreshing every ten seconds. The flock threading itself through actual holding patterns is emergence negotiating with reality, and it exposes how conservative your separation radii need to be.

Chapter 6: Physics Libraries

Chapters 1 through 5 integrate \(\vec{F} = m\vec{a}\) by hand. Soft bodies, cloth, and stacking boxes want constraints: keep two points a fixed rest length \(\ell_0\) apart, or keep a joint at a fixed angle. Verlet integration stores position and previous position instead of an explicit velocity, then repeatedly projects each constraint back toward \(\lvert\vec{x}_j - \vec{x}_i\rvert = \ell_0\):

\[ \vec{x}_{t+\Delta t} = \vec{x}_t + (\vec{x}_t - \vec{x}_{t-\Delta t}) + \vec{a}\,(\Delta t)^{2}. \]

A grid of points plus distance constraints becomes like a cloth. Matter.js and Toxiclibs.js are used to show these points in motion.

Nature is full of constrained soft matter. A spider’s web is a tensegrity of threads under load. Skin, fascia, a jellyfish bell, a leaf in wind: these are networks of roughly fixed-length fibers that redistribute force when one region stretches.

My own expanded sketch: Soft Loom (write-up in Growing Wild Gardens).

Make it real: Turn the spring lattice into a seismograph. Take the same USGS earthquake feed from chapter 0, map each quake’s longitude to a horizontal position on a hanging verlet cloth, and apply an impulse scaled by magnitude (normalize pow(10, mag) against the largest event) at the moment its time-compressed timestamp arrives. A day of global seismicity replays as ripples through fabric, and strain coloring shows how the largest event dwarfs everything else.

Chapter 7: Cellular Automata

A cellular automaton is a grid where each cell’s next state depends only on a local neighborhood. For Conway’s Game of Life on a cell \(c\) with live-neighbor count \(n\),

\[ c_{t+1} = \begin{cases} 1 & \text{if } n = 3 \quad\text{(birth)}\\ c_t & \text{if } n \in \{2,3\} \quad\text{(survival)}\\ 0 & \text{otherwise (death by loneliness or overcrowding)}. \end{cases} \]

From this formula emerges still lifes, oscillators, gliders, and a simulation that never quite repeats! Life is both incredibly unique in its chaos, and also quite formulaic.

Elementary 1D automata (Wolfram’s rule space) are even smaller: three bits of neighborhood in, one bit out, \(2^8 = 256\) possible rules, some of which make nested triangles and some of which look like noise with structure hiding inside.

In nature, excitable heart tissue, Belousov-Zhabotinsky chemical waves, the advancing front of a forest fire or an invasive species, are all examples of this algorithm. Each patch only knows its neighbors. Yet, nevertheless, a coherent pattern travels across the field. (This is also a useful reminder that interesting computation does not have to be gradient descent.)

Exercise

Game of Life (click to reseed)

Implement Conway’s Game of Life on a toroidal grid: a dead cell with 3 neighbors is born; a live cell with fewer than 2 or more than 3 neighbors dies. Click the canvas to randomize the board again.

Solution code

return function (p) {
  let cols, rows, grid, next;
  const res = 10;

  function make2D(c, r) {
    const arr = new Array(c);
    for (let i = 0; i < c; i++) {
      arr[i] = new Array(r).fill(0);
    }
    return arr;
  }

  function countNeighbors(x, y) {
    let sum = 0;
    for (let i = -1; i <= 1; i++) {
      for (let j = -1; j <= 1; j++) {
        const col = (x + i + cols) % cols;
        const row = (y + j + rows) % rows;
        sum += grid[col][row];
      }
    }
    sum -= grid[x][y];
    return sum;
  }

  p.setup = function () {
    p.createCanvas(420, 220);
    p.frameRate(8);
    cols = p.floor(p.width / res);
    rows = p.floor(p.height / res);
    grid = make2D(cols, rows);
    next = make2D(cols, rows);
    for (let i = 0; i < cols; i++) {
      for (let j = 0; j < rows; j++) {
        grid[i][j] = p.floor(p.random(2));
      }
    }
  };

  p.draw = function () {
    p.background(248, 249, 242);
    for (let i = 0; i < cols; i++) {
      for (let j = 0; j < rows; j++) {
        const x = i * res;
        const y = j * res;
        if (grid[i][j] === 1) {
          p.fill(30, 126, 52);
          p.noStroke();
          p.rect(x, y, res - 1, res - 1);
        }
        const neighbors = countNeighbors(i, j);
        const state = grid[i][j];
        if (state === 0 && neighbors === 3) next[i][j] = 1;
        else if (state === 1 && (neighbors < 2 || neighbors > 3)) next[i][j] = 0;
        else next[i][j] = state;
      }
    }
    const tmp = grid;
    grid = next;
    next = tmp;
  };

  p.mousePressed = function () {
    for (let i = 0; i < cols; i++) {
      for (let j = 0; j < rows; j++) {
        grid[i][j] = p.floor(p.random(2));
      }
    }
  };
};

My own expanded sketch: Bloom Automata (write-up in Growing Wild Gardens).

Make it real: GBIF’s occurrence API is keyless and CORS friendly. Query an invasive species year by year (https://api.gbif.org/v1/occurrence/search?scientificName=Vespa%20velutina&year=2015&limit=300 for the Asian hornet in Europe). Rasterize each year’s coordinates onto your CA grid as live cells, then tune a probabilistic spread rule until the automaton’s year-over-year growth resembles the real invasion front. You are doing informal model calibration, which is what a lot of spatial ecology actually is.

Chapter 8: Fractals

A fractal here is a shape built by recursion, with self-similarity that obeys the same rule at every scale. For example, the Cantor set removes middle thirds forever. The Koch curve replaces each segment with four segments of length \(1/3\), and the limiting length diverges while the curve stays bounded. A binary tree is every engineer’s most familiar Leetcode algorithm visualized on a canvas:

\[ \text{branch}(L) \;=\; \text{line of length } L \;\text{ then }\; \text{branch}(r L) \text{ left and right}, \]

with \(r < 1\) until \(L\) is too small to draw. L-systems push the same idea into a rewriting grammar: a string of symbols expands by production rules, then a turtle interprets the string as drawing commands. Branching angle and contraction ratio become the genotype of a plant.

Tree limbs, bronchial airways, river networks, and lightning forks all approximate space-filling branching where a similar motif repeats at smaller scales. The coastline paradox (measured length grows as the ruler shrinks) is the same self-similarity biting surveyors.

My own expanded sketch: Wind Grove (write-up in Growing Wild Gardens).

Make it real: River basins are nature’s recursion. USGS Water Services returns live discharge for any gauge without a key (https://waterservices.usgs.gov/nwis/iv/?format=json&sites=09380000&parameterCd=00060). Pick a main-stem gauge plus gauges on its tributaries, build your recursive tree so each branch’s thickness scales with its gauge’s real-time discharge, and let the noise sway stand in for turbulence. The tree becomes a living hydrograph: after a storm upstream, one limb visibly fattens.

Chapter 9: Evolutionary Computing

A genetic algorithm treats candidate solutions as genomes in a population. In each generation:

evaluate fitness \(f(g)\) for every genome \(g\),
select parents with probability biased by fitness (roulette, tournament, rank),
recombine (crossover) and mutate to form children,
replace the population and repeat.

Mutation is usually a small random edit; for a real-valued gene, something like \(g_i \leftarrow g_i + \mathcal{N}(0,\sigma^{2})\). Crossover splices two parents so children inherit chunks of each. The “design” is whatever maximizes \(f\).

Darwin’s loop is illustrated here in nature’s algorithm. Beak depth is Darwin’s finches, antibiotic resistance, the way a virus explores sequence space. It’s selection on variation, iterated over and over again.

One thing that this chapter illustrates is how violently a bad fitness function can steer the population. Evolve toward the wrong target and the population gets brilliantly good at the wrong thing. That lesson transfers straight into reward design for learning systems.

My own expanded sketch: Selective Gardens (write-up in Growing Wild Gardens).

Make it real: Give the genetic algorithm a real optimization target. Fetch world capitals with coordinates from REST Countries (https://restcountries.com/v3.1/all?fields=capital,capitalInfo), pick fifteen, and evolve a tour: the genome is the visiting order, fitness is total haversine distance, crossover is ordered crossover, and mutation swaps two stops. Draw the best tour of each generation over a equirectangular projection. Watch the route untangle itself over real geography. This is the classic traveling salesman demo on a map!

Chapter 10: Neural Networks

The perceptron is a linear classifier with a threshold. For inputs \(\vec{x}\) and weights \(\vec{w}\) (plus bias \(b\)),

\[ \hat{y} = f\!\left(\vec{w}\cdot\vec{x} + b\right), \]

where \(f\) might be a step function or a smooth sigmoid \(\sigma(z) = 1/(1+e^{-z})\). Training nudges weights when the prediction is wrong. The classic perceptron update is

\[ \vec{w} \leftarrow \vec{w} + \eta\,(y - \hat{y})\,\vec{x}, \]

with learning rate \(\eta\). Stack layers are the same idea in a multilayer net. Each layer is an affine transform plus nonlinearity. An error at the output propagates backward through the chain rule (backpropagation). Shiffman builds this concept in simple arrays.

This is the mechanism at the center of a neural network for deep learning. However, do not confuse a three-weight perceptron with a neural cortex. This small demo shows how organisms tune response strengths to stimuli. Habituation, sensitization, the way a retina’s receptive field: these are all essentially weighted neighborhood of photoreceptors.

Exercise

Train a perceptron boundary

Train a 3-weight perceptron (x, y, bias) to separate points above/below a hidden line. For each frame, update weights with the classic perceptron learning rule. Green points are currently classified correctly; orange are wrong. The dark line is the decision boundary implied by the weights.

Solution code

return function (p) {
  let weights;
  let learningRate;
  let points;
  let trained;

  function train(inputs, target) {
    let sum = 0;
    for (let i = 0; i < weights.length; i++) sum += inputs[i] * weights[i];
    const guess = sum >= 0 ? 1 : -1;
    const error = target - guess;
    for (let i = 0; i < weights.length; i++) {
      weights[i] += error * inputs[i] * learningRate;
    }
    return guess;
  }

  function f(x) {
    // Target line: y = 0.4x + 0.3 (in normalized -1..1 space later mapped)
    return 0.4 * x + 0.3;
  }

  p.setup = function () {
    p.createCanvas(420, 240);
    weights = [p.random(-1, 1), p.random(-1, 1), p.random(-1, 1)];
    learningRate = 0.05;
    points = [];
    for (let i = 0; i < 120; i++) {
      const x = p.random(-1, 1);
      const y = p.random(-1, 1);
      const label = y > f(x) ? 1 : -1;
      points.push({ x: x, y: y, label: label });
    }
    trained = 0;
  };

  p.draw = function () {
    p.background(248, 249, 242);

    // Train a few points per frame
    for (let k = 0; k < 6; k++) {
      const pt = points[trained % points.length];
      train([pt.x, pt.y, 1], pt.label);
      trained++;
    }

    for (let i = 0; i < points.length; i++) {
      const pt = points[i];
      const px = p.map(pt.x, -1, 1, 0, p.width);
      const py = p.map(pt.y, -1, 1, p.height, 0);
      const guessSum = pt.x * weights[0] + pt.y * weights[1] + weights[2];
      const guess = guessSum >= 0 ? 1 : -1;
      p.stroke(30, 126, 52);
      if (guess === pt.label) p.fill(110, 184, 127);
      else p.fill(232, 98, 26);
      p.circle(px, py, 8);
    }

    // Decision boundary from weights
    // w0*x + w1*y + w2 = 0  => y = -(w0/w1)x - w2/w1
    if (p.abs(weights[1]) > 0.0001) {
      const x1 = -1;
      const y1 = -(weights[0] / weights[1]) * x1 - weights[2] / weights[1];
      const x2 = 1;
      const y2 = -(weights[0] / weights[1]) * x2 - weights[2] / weights[1];
      p.stroke(40, 90);
      p.strokeWeight(2);
      p.line(
        p.map(x1, -1, 1, 0, p.width),
        p.map(y1, -1, 1, p.height, 0),
        p.map(x2, -1, 1, 0, p.width),
        p.map(y2, -1, 1, p.height, 0)
      );
      p.strokeWeight(1);
    }

    p.noStroke();
    p.fill(40, 140);
    p.textSize(12);
    p.text("green = correct guess, orange = wrong · line = learned boundary", 8, 16);
  };
};

My own expanded sketch: Neural Lace (write-up in Growing Wild Gardens).

Make it real: Swap the synthetic points under the perceptron for real measurements. loadTable can pull the classic Iris dataset from a raw GitHub URL, or fetch a year of daily humidity and pressure from Open-Meteo’s archive endpoint (https://archive-api.open-meteo.com/v1/archive) and label each day by whether it rained. Train the same 3-weight perceptron on two features, draw the decision boundary over the real scatter, and notice which feature pairs are linearly separable and which need the multilayer step.

Chapter 11: Neuroevolution

Neuroevolution is actually chapters 9 and 10 braided together. The genome is the weight vector \(\vec{w}\) of a controller network (sometimes the topology too). Fitness is how well the agent behaves in a simulated environment: distance traveled, food eaten, time survived. Selection, crossover, and mutation search weight space without taking an analytic gradient.

\[ \vec{w}^{\star} \approx \arg\max_{\vec{w}}\; f\!\left(\text{agent}_{\vec{w}}\text{ in environment}\right). \]

That is actually machine learning as population dynamics! Gradients need a differentiable path from reward to weights. Evolution is roughly scored in the same way. In nature, nervous systems are shaped by selection on behavior \(\partial L/\partial w\): bird flight controllers, insect visuomotor loops, the tuning of a fish’s escape response. Brains and behaviors backpropagating through time and evolution.

Pedagogically I think this chapter is absolutely amazing! Even though current ML industry treats neuroevolution as a niche. PyTorch, JAX, CUDA kernels, mixed precision, distributed data-parallel training: all of these mechanisms are built around \(\partial L/\partial w\). However, neuroevolution algorithms require a massive parallel eval to determine fitness score and a lot of independent forward runs, which is not the most cost-efficient technique. It is still useful when fitness is non-differentiable or difficult to differentiate, such as in real robots with sparse rewards, or in AutoML architecture.

Make it real: Combine everything: build the real wind field from the chapter 1 idea, then evolve tiny neural steering brains (inputs: local wind vector and bearing to target; outputs: thrust and turn) for agents that must cross the map on a fuel budget. Selection pressure discovers tacking strategies appropriate to each day’s actual forecast. The next day’s weather silently changes which brains win.

Appendix: Creature Design Tutorial

The last chapter asks me to take many of these mechanisms together to make a little creature! I gave this a try for fun in this sketch of a jellyfish bell.

Exercise

Jellyfish bell

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);
  }
};

(Read my write-up for this exercise in Growing Wild Gardens.)