How it was made

Notes on a map with no mapmaker.

PLASMODIUM is a real Physarum polycephalum agent simulation — thousands of filaments sharing one pheromone field, self-organising into the leanest vein network that connects the food you place. No frames are scripted; everything you see is emergent. This guide records the build.

01 — ConceptThe single job

A fictional biology lab's public demo of slime-mould computation. Its one job: let a visitor drop three crumbs and watch a brainless single cell compute the shortest network between them — the Tokyo-rail experiment, running live in a canvas. Everything else on the page stays quiet so the plate carries the whole show.

02 — PaletteIntensity is colour

The whole palette is a single gradient: pheromone intensity mapped from dark substrate up through sage and mould-yellow to chalk. What you read as a colour scheme is literally the trail map's value ramp. The bright mould yellow is reserved for veins and marks; body text uses chalk so it clears 4.5:1 over the dark field.

Substrate#0C0E0AUntouched agar — the dark the cell hasn't visited.

Spore sage#8FA85BFaint scent; exploratory drift. Eyebrows & accents.

Mould yellow#D8C24AA committed vein. Lines, marks, one hero word.

Chalk#E7E4D6Saturation, and all body text. #E7E4D6 on #0C0E0A ≈ 15:1.

03 — TypeA blunt sans, a lab monospace

Archivo's grotesque density carries the display; JetBrains Mono runs every readout, label and code block — the voice of the instrument, not the organism. The typographic bravery is the hero: Archivo Black set enormous and tight, one word pulled into mould-yellow.

Aa Gg 900

Archivo

Grotesque · 400–900

Set at 900 with −0.02em tracking for the hero, 800 for section heads. Wide apertures hold up at 7rem without feeling decorative.

01 · Aa

JetBrains Mono

Monospace · 400 / 500 / 700

All labels, the live HUD (filaments / crumbs / step), the eyebrow, and the algorithm block. Tabular figures keep the counters from jittering.

04 — TechniqueThe signature: a real Physarum sim

One HTML canvas, no libraries. A Float32 trail map holds pheromone; thousands of agents in typed arrays read and write it. Each frame every agent samples the trail at three points ahead (left/centre/right), steers a few degrees toward the strongest, steps forward and deposits scent. The whole field is then blurred by a separable 3×3 box and multiplied by a decay factor — so routes survive only if traffic keeps outrunning decay. Food "crumbs" pump scent into a soft radius each frame; the diffused gradient is what pulls distant filaments in, and their reinforcement is what fuses the network. The trail map is rendered through a 256-entry colour LUT to a small offscreen buffer, then drawn up with bilinear smoothing plus a faint additive pass for the glow. That emergent balance — reach every crumb, waste as little tube as possible — is the entire signature; nothing about the vein network is drawn by hand.

every frame, per agent:
  fL,fC,fR = trail.sample(pos + heading±SA · SO)   # taste 3 ways
  if   fC > fL and fC > fR: keep heading
  elif fL > fR:            heading += RA            # lean to richer
  elif fR > fL:            heading -= RA
  else:                    heading += random ± RA
  pos += heading · SS                             # step (torus wrap)
  trail[pos] += DEP                             # deposit scent

every frame, whole field:
  trail = boxBlur3x3(trail) · DECAY            # diffuse + fade

05 — Iteration logThree passes

Pass 1 · Craft

Colour balance & a broken anchor

The veins were washing to pure white: a render gain of 1.55 plus a 0.30 additive bloom pushed every busy cell straight to chalk, losing the yellow the concept is built on. Dropped gain to 1.28 and the bloom to 0.17 — veins now sit in the mould-yellow band with chalk only at saturated cores.
The footer's "Back to the plate ↑" linked to #top, which didn't exist — a silent dead scroll. Added id="top" to the hero.
Tightened the HUD to tabular figures so the live counters stop shifting width as they climb.

Pass 2 · Depth

Reliable connection, a living pulse, a coaxing cursor

Distant crumbs were sometimes left stranded at the 7s mark. Widened the food scent radius (13→15) and the initial agent disc (0.34→0.42 of the field) so the diffused gradient reaches further and the whole triangle fuses in time.
Second-read detail: the crumb nodes now breathe — a slow sine pulse on their halo ring — so on a second look the food reads as alive, not as static UI dots.
Micro-interaction: moving the cursor over the plate lays a faint transient scent, so filaments drift toward where you hover — you can gently coax a tendril before you ever drop a crumb. A mould-yellow ripple now marks each drop.

Pass 3 · Hardening

375px, performance, and one thing removed

At 375px the wordmark and nav collided on one row — a defect the scrollWidth probe passed clean (the W2 false-pass trap). Fixed by dropping the third nav link and the wordmark text below 400px to the glyph alone; added an explicit brand/nav collision assertion to the QA probe.
Scroll performance: an IntersectionObserver now suspends the whole simulation once the plate scrolls out of view, so reading the copy below stays smooth.
Chanel rule — removed one ornament: the animated "Scroll" cue at the hero foot. The full-bleed sim already invites exploration; the cue was templated noise.
Confirmed the reduced-motion path renders a settled, warmed-up static network (never blank), DPR is capped at 2, resize re-seeds while keeping crumbs in normalised coords, and the loop clamps its delta on tab-resume.