Kilobytes a second for each viewer, upper estimates
	Raw JSON	Binary	Compressed WebSocket
60 updates a second	65	17	11
20 a second, smoothed	38	8.6	5.6

Line 4: a factory in one file

Line 4, the running factory: belts, robot arms, a paint booth, lifts and the status panel

The route through the talk

2 / 28

The route through the talk

2 / 28

The route through the talk

2 / 28

The route through the talk

2 / 28

The route through the talk

2 / 28

The route through the talk

2 / 28

The route through the talk

2 / 28

The route through the talk

2 / 28

One page, no build, nothing from elsewhere

6,983

lines in one HTML file

~2,400

boxes drawn each frame

0

libraries, requests or build steps

3 / 28

One page, no build, nothing from elsewhere

6,983

lines in one HTML file

~2,400

boxes drawn each frame

0

libraries, requests or build steps

3 / 28

One page, no build, nothing from elsewhere

6,983

lines in one HTML file

~2,400

boxes drawn each frame

0

libraries, requests or build steps

3 / 28

One page, no build, nothing from elsewhere

6,983

lines in one HTML file

The rules of a factory page

It runs from file://, on GitHub Pages and as a claude.ai artifact, whose content security policy blocks every request to elsewhere.

Accessibility is part of the work

The canvas is an image with a written description, the figures are output elements, and the table of machines is the keyboard route to every action.

Physical correctness first

Nothing passes through anything else. An impossible move is flagged and counted, never hidden.

4 / 28

One page, no build, nothing from elsewhere

6,983

lines in one HTML file

The rules of a factory page

It runs from file://, on GitHub Pages and as a claude.ai artifact, whose content security policy blocks every request to elsewhere.

Accessibility is part of the work

The canvas is an image with a written description, the figures are output elements, and the table of machines is the keyboard route to every action.

Physical correctness first

Nothing passes through anything else. An impossible move is flagged and counted, never hidden.

4 / 28

One page, no build, nothing from elsewhere

6,983

lines in one HTML file

The rules of a factory page

It runs from file://, on GitHub Pages and as a claude.ai artifact, whose content security policy blocks every request to elsewhere.

Accessibility is part of the work

The canvas is an image with a written description, the figures are output elements, and the table of machines is the keyboard route to every action.

Physical correctness first

Nothing passes through anything else. An impossible move is flagged and counted, never hidden.

4 / 28

Every thing is a box

  function B(x0, y0, z0, x1, y1, z1, c, extra) {
    const b = { x0, y0, z0, x1, y1, z1, c, tag: TAG };
    if (extra) {
      Object.assign(b, extra);
      // the render cache recognises a box by position, size, colour, a, ns and stripes; a box
      // carrying anything else that might affect drawing is never cached, just drawn live
      for (const k in extra) if (k !== 'a' && k !== 'ns' && k !== 'stripes') { b.nocache = true; break; }
    }
    boxes.push(b);
    return b;
  }

5 / 28

Every thing is a box

  function B(x0, y0, z0, x1, y1, z1, c, extra) {
    const b = { x0, y0, z0, x1, y1, z1, c, tag: TAG };
    if (extra) {
      Object.assign(b, extra);
      // the render cache recognises a box by position, size, colour, a, ns and stripes; a box
      // carrying anything else that might affect drawing is never cached, just drawn live
      for (const k in extra) if (k !== 'a' && k !== 'ns' && k !== 'stripes') { b.nocache = true; break; }
    }
    boxes.push(b);
    return b;
  }

5 / 28

A hexagon is three slabs

6 / 28

When no order is possible

7 / 28

Draw only what changed

45

frames unchanged before a box is cached

32 px

tiles, redrawn whole

8 / 28

Draw only what changed

45

frames unchanged before a box is cached

32 px

tiles, redrawn whole

8 / 28

Two arms, one belt

Rocky

Bullwinkle

Each takes a whole layer and sets it on belt A1, a row in each lane
Neither moves into the other: a 3D check of every part, 5 cm to spare
Only one works over the belt and the rack at a time
Each picks the most downstream pallet it can reach first

9 / 28

Two arms, one belt

Rocky

Bullwinkle

Each takes a whole layer and sets it on belt A1, a row in each lane
Neither moves into the other: a 3D check of every part, 5 cm to spare
Only one works over the belt and the rack at a time
Each picks the most downstream pallet it can reach first

9 / 28

Two arms, one belt

Rocky

Bullwinkle

Each takes a whole layer and sets it on belt A1, a row in each lane
Neither moves into the other: a 3D check of every part, 5 cm to spare
Only one works over the belt and the rack at a time
Each picks the most downstream pallet it can reach first

9 / 28

Two arms, one belt

Rocky

Bullwinkle

Each takes a whole layer and sets it on belt A1, a row in each lane
Neither moves into the other: a 3D check of every part, 5 cm to spare
Only one works over the belt and the rack at a time
Each picks the most downstream pallet it can reach first

9 / 28

One arm over the shared floor

  // The floor both depalletizers reach over: the belt where the layers go down and the rack beside
  // it. Only one works over it at a time: a move that takes the head over it waits until the other
  // has gone (sharedBy). With heads a layer wide, their paths to the belt and the rack cross, and
  // waiting step by step for each other there left both stuck. (The lowest slot on the leg, which
  // they both pick from too, isn't in it: what they go for there is reserved, and one holding a
  // layer over it while the belt is full would keep the other from the rack.)
  const SHARED = [[2.4, 1.6, 4.9, 5.0]];
  const inShared = p => SHARED.some(([x0, y0, x1, y1]) => p[0] > x0 && p[0] < x1 && p[1] > y0 && p[1] < y1);
  const overShared = (arm, a, b) => { for (let k = 0; k <= 1.0001; k += 0.1) if (inShared(turnLerp(arm, a, b, k))) return true; return false; };

10 / 28

One arm over the shared floor

  // The floor both depalletizers reach over: the belt where the layers go down and the rack beside
  // it. Only one works over it at a time: a move that takes the head over it waits until the other
  // has gone (sharedBy). With heads a layer wide, their paths to the belt and the rack cross, and
  // waiting step by step for each other there left both stuck. (The lowest slot on the leg, which
  // they both pick from too, isn't in it: what they go for there is reserved, and one holding a
  // layer over it while the belt is full would keep the other from the rack.)
  const SHARED = [[2.4, 1.6, 4.9, 5.0]];
  const inShared = p => SHARED.some(([x0, y0, x1, y1]) => p[0] > x0 && p[0] < x1 && p[1] > y0 && p[1] < y1);
  const overShared = (arm, a, b) => { for (let k = 0; k <= 1.0001; k += 0.1) if (inShared(turnLerp(arm, a, b, k))) return true; return false; };

10 / 28

When each waits for the other

    const stuck = () => {
      if (!(o.waiting && arm.waiting)) return false;
      if (!sim.armYield) {
        const who = going(arm) !== going(o) ? (going(arm) ? o : arm) : arm.zoneWait !== !!o.zoneWait ? (arm.zoneWait ? arm : o) : Math.random() < 0.5 ? arm : o;
        sim.armYield = { arm: who, t: sim.t }; sim.armDeadlocks = (sim.armDeadlocks || 0) + 1;
      }
      return sim.armYield.arm === arm;
    };

A rule of the line

If each is waiting for the other, one moves out of the way, round to its rest, and carries on from there.

11 / 28

When each waits for the other

    const stuck = () => {
      if (!(o.waiting && arm.waiting)) return false;
      if (!sim.armYield) {
        const who = going(arm) !== going(o) ? (going(arm) ? o : arm) : arm.zoneWait !== !!o.zoneWait ? (arm.zoneWait ? arm : o) : Math.random() < 0.5 ? arm : o;
        sim.armYield = { arm: who, t: sim.t }; sim.armDeadlocks = (sim.armDeadlocks || 0) + 1;
      }
      return sim.armYield.arm === arm;
    };

A rule of the line

If each is waiting for the other, one moves out of the way, round to its rest, and carries on from there.

11 / 28

When each waits for the other

    const stuck = () => {
      if (!(o.waiting && arm.waiting)) return false;
      if (!sim.armYield) {
        const who = going(arm) !== going(o) ? (going(arm) ? o : arm) : arm.zoneWait !== !!o.zoneWait ? (arm.zoneWait ? arm : o) : Math.random() < 0.5 ? arm : o;
        sim.armYield = { arm: who, t: sim.t }; sim.armDeadlocks = (sim.armDeadlocks || 0) + 1;
      }
      return sim.armYield.arm === arm;
    };

A rule of the line

If each is waiting for the other, one moves out of the way, round to its rest, and carries on from there.

11 / 28

When each waits for the other

    const stuck = () => {
      if (!(o.waiting && arm.waiting)) return false;
      if (!sim.armYield) {
        const who = going(arm) !== going(o) ? (going(arm) ? o : arm) : arm.zoneWait !== !!o.zoneWait ? (arm.zoneWait ? arm : o) : Math.random() < 0.5 ? arm : o;
        sim.armYield = { arm: who, t: sim.t }; sim.armDeadlocks = (sim.armDeadlocks || 0) + 1;
      }
      return sim.armYield.arm === arm;
    };

A rule of the line

If each is waiting for the other, one moves out of the way, round to its rest, and carries on from there.

11 / 28

Book the floor before you move

12 / 28

The reservation table

  const RES = new Map();                       // mover -> { list, x0, y0, x1, y1, t0, t1, l }
  const FOREVER = 1e9;
  const RES_PAD = 0.15;                        // s either side of every window: setting off a frame late, rounding
  const PIECE = 0.25, LEG_SLACK = 0.04, LATE = 0.3, HORIZON = 300, MAX_LEGS = 10;
  const levelsAt = z => z < 0.5 ? 1 : z > 1.3 ? 2 : 3;

13 / 28

The reservation table

  function resHit(m, b, m2) {
    let hit = null;
    for (const [who, r] of RES) {
      if (who === m || who === m2 || !(r.l & b.l) || r.t1 <= b.t0 || b.t1 <= r.t0 || !boxesMeet(r, b)) continue;
      for (const q of r.list) if ((q.l & b.l) && q.t0 < b.t1 && b.t0 < q.t1 && boxesMeet(q, b) && (!hit || q.t1 > hit.t1)) hit = { who, t0: q.t0, t1: q.t1, q };
    }
    return hit;
  }

14 / 28

The reservation table

  function resHit(m, b, m2) {
    let hit = null;
    for (const [who, r] of RES) {
      if (who === m || who === m2 || !(r.l & b.l) || r.t1 <= b.t0 || b.t1 <= r.t0 || !boxesMeet(r, b)) continue;
      for (const q of r.list) if ((q.l & b.l) && q.t0 < b.t1 && b.t0 < q.t1 && boxesMeet(q, b) && (!hit || q.t1 > hit.t1)) hit = { who, t0: q.t0, t1: q.t1, q };
    }
    return hit;
  }

14 / 28

The reservation table

  function resHit(m, b, m2) {
    let hit = null;
    for (const [who, r] of RES) {
      if (who === m || who === m2 || !(r.l & b.l) || r.t1 <= b.t0 || b.t1 <= r.t0 || !boxesMeet(r, b)) continue;
      for (const q of r.list) if ((q.l & b.l) && q.t0 < b.t1 && b.t0 < q.t1 && boxesMeet(q, b) && (!hit || q.t1 > hit.t1)) hit = { who, t0: q.t0, t1: q.t1, q };
    }
    return hit;
  }

14 / 28

When a plan runs into someone

Someone idle steps aside, waits a moment, and goes back
Someone busy: after 3 s, go round them, or another way
Failing both, go round firmly: the idle step aside on arrival
Failing all, walk as far as you can and try again
Lifts nose to nose: the one with less far to go backs off

~3%