The Nature of Code

Shiffman teaches at NYU ITP/IMA, co-founded the Processing Foundation, and runs The Coding Train, which is how a huge chunk of people first learn creative coding without a CS degree. The Nature of Code (No Starch / Penguin, 2024) is the JavaScript and p5.js reboot of the 2012 Processing edition. Same mission: simulate natural systems in software so algorithms stop feeling like black boxes. The through-line that matters for anyone adjacent to AI work is that he builds all the way up to neural networks and neuroevolution in the browser, from vectors and forces, without asking you to treat a pretrained model as magic.

The book tells a three-part story. Part 1: inanimate objects that move under math you can name. Part 2: life-ish systems (agents, cellular automata, fractals). Part 3: intelligence (evolution, neural nets, neuroevolution). If you only want the ML chapters, you can jump there. You will understand them better if you earned the physics first.

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.

Chapter by chapter

Introduction

Sets expectations: this is a survey that also wants to feel like a narrative, not a random grab bag of demos. Shiffman explains the move from Processing to p5.js, what you need to know coming in (basic programming comfort helps; you do not need a physics degree), and how the book pairs with Coding Train videos. He sketches the three-part arc and the recurring “Ecosystem Project”: keep extending one simulated world as chapters add mechanics.

The pedagogical claim is quiet and strong. Simulation is a way to learn both nature metaphors and code craft. For people drowning in LLM APIs, that claim is a useful counterweight: understanding comes from implementing the loop yourself.

Chapter 0: Randomness

Random walks, probability distributions, Gaussian noise, accept-reject sampling, and Perlin noise for smooth randomness. You build a Walker class and watch how different random processes look on screen. Uniform noise looks like static; Perlin looks like weather.

This is the right first chapter for simulation and for ML intuition. Stochastic processes are not “AI,” but if you cannot tell a uniform draw from a structured noise field, later talk about sampling and exploration is fog. Shiffman makes the difference visible.

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

Chapter 1: Vectors

p5.Vector as the vocabulary of motion: add, subtract, multiply, magnitude, normalize. Velocity and acceleration replace ad-hoc x = x + 1 hacks. Examples escalate from bouncing balls to mouse-seeking acceleration.

Vectors are the shared language between games, robotics, and a lot of classical ML feature geometry. The chapter is not linear algebra theater. It is “make the ball go where you mean.” That practical framing is why artists finish it.

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

Chapter 2: Forces

Newton’s laws as code: force accumulation, mass, friction, fluid resistance, gravitational attraction, n-body sketches. Multiple movers under shared force fields. The point is composition: many small force functions stacked into believable motion.

Anyone building agent sims, physics-informed toys, or even toy RL environments needs this muscle. Forces are how you encode “the world pushes back” without a full commercial engine.

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

Chapter 3: Oscillation

Angles, angular velocity, trigonometry, polar vs Cartesian coordinates, simple harmonic motion, waves, springs. Objects that rotate to face their velocity. Oscillators as reusable objects.

This is the chapter where sketches stop feeling like slides and start feeling like instruments. It also sneaks in the math that shows up later in periodic features, signal-ish visuals, and creature locomotion.

Chapter 4: Particle Systems

Hundreds or thousands of short-lived objects managed as one system. Emitters, inheritance and polymorphism for varied particle types, forces applied to whole systems. Smoke, fireworks, fountains: the classic demoscene vocabulary, taught cleanly.

Systems-of-objects thinking is the bridge to agents and to training loops that manage batches of entities. Pedantically useful OOP in a context where you can see when your design is wrong (the frame rate collapses).

Chapter 5: Autonomous Agents

Steering behaviors in the Reynolds tradition: seek, flee, arrive, wander, path following, group behaviors, flocking (separation, alignment, cohesion). Emergent “life” from local rules. The chapter is the emotional center of the book for a lot of readers: boids that suddenly look intentional.

If you work on multi-agent systems or want a visceral demo of emergence without a neural net, this is the chapter to assign. It also inoculates against magical thinking about “swarm intelligence” marketing. You can see every rule.

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

Chapter 6: Physics Libraries

When from-scratch force code is not enough: Matter.js and Toxiclibs.js for constraints, collisions, more elaborate bodies. The tradeoff is explicit. Libraries buy sophistication; you lose some pedagogical transparency.

Useful meta-lesson for AI tooling culture: know when to drop to a library and what understanding you are outsourcing when you do.

Chapter 7: Cellular Automata

Grid worlds, elementary CAs, Game of Life, more elaborate CA patterns. Local neighborhood rules, global structure. Wolfram-adjacent ideas without requiring you to buy a metaphysics.

CAs are a clean on-ramp to “simple update rules, complex outcomes,” which is half of what people mean when they gesture at complexity science or artificial life. Also a reminder that not all interesting computational behavior is 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));
      }
    }
  };
};

Chapter 8: Fractals

Recursion as geometry: Cantor sets, Koch curves, trees, L-systems. Branching structures that look organic because the rule is self-similar. The visual payoff is high; the conceptual load is mostly recursion comfort.

Generative artists live here. For ML-adjacent readers, it is a good place to feel the difference between hand-authored recursive structure and learned structure.

Chapter 9: Evolutionary Computing

Genetic algorithms: fitness, selection, crossover, mutation. Evolve designs or behaviors toward a goal. Smart rockets and related demos. Evolution as an optimization strategy you can watch generation by generation.

This is the overture to the ML ending. Evolutionary search is not deep learning, and Shiffman does not pretend otherwise. It is still one of the most teachable ways to show optimization under a fitness function, including how badly a bad fitness function steers you.

Chapter 10: Neural Networks

Perceptrons, multilayer networks, feedforward passes, training as adjusting weights from error. Classification and simple learning demos implemented so you can step through the math in code. No giant framework: the network is a thing you built.

This is the chapter people mean when they say Shiffman has an “ML book” inside the Nature of Code. It will not replace a proper deep learning course. It will make backpropagation stop feeling like a spell. For artists and engineers who only ever called an API, that demystification is the whole point.

Exercise

Train a perceptron boundary

Train a 3-weight perceptron (x, y, bias) to separate points above/below a hidden line. 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);
  };
};

Chapter 11: Neuroevolution

Combine chapters 9 and 10: evolve neural network weights (and sometimes topologies) with genetic algorithms instead of (or alongside) classical gradient training. Agents that learn to act in a simulated environment through selection pressure.

Neuroevolution is niche in industry ML and pedagogically gold. You see learning as a search process with population dynamics. It also connects cleanly to the book’s creature/ecosystem thread: brains and bodies co-evolve in a toy world you control.

Appendix: Creature Design Tutorial

A practical design appendix for building creatures that use the book’s mechanics. Less theory, more “assemble the parts into something that feels alive.” It is the studio handout at the end of the lecture.

Where I’d push back

This is not a machine learning textbook. Chapters 10 and 11 are excellent first-principles labs, not coverage of modern architectures, training infrastructure, evals, or the social stack around contemporary AI. Readers who need transformers, alignment, or production ML should treat NoC as intuition training, then move on. The p5.js choice is also a trade: maximum accessibility in the browser, less transfer to Python-native ML stacks without extra work.

Next to Christian’s The Alignment Problem, Shiffman is the opposite genre: you implement tiny learners instead of reading about lab-scale ones. Next to my own teaching notes on curriculum under model-speed decay, NoC is a reminder that some foundations (vectors, forces, simple nets) stay durable even when the frontier model card changes weekly.

For artists, educators, and engineers who want to see simulation and learning mechanics instead of only prompting them, this is still one of the best friendly technical books available. Read it with the site examples open; the book is built for that.