FORMICARY · BUILD GUIDE
Build Guide — Colony 47

FORMICARY

A live ant colony that finds the shortest path between nest and seed using nothing but two pheromones, evaporation, and traffic — no planner, no map, no memory. This is how it was built.

The concept

FORMICARY is a fictional "stigmergy field station" — an instrument for watching an ant colony forage in real time. Its single job is to make one counter-intuitive idea legible in two seconds: a shortest path can appear with no one designing it. Two hundred near-blind agents lay scent, the ground forgets that scent at a fixed rate, and the route whose round trips close fastest is the one that survives. The visitor can drop crumb piles or wall off the direct line and watch the colony re-route.

Palette — soil, amber, leaf, sand

Drawn straight from an ant's world: dug earth, the warm glow of a well-worn trail, foliage, and dry seed husk. The bright amber is reserved for the pheromone marks and hairline rules only; small type gets a darker amber-ink so it clears 4.5:1 on the soil.

Soil
#2A211A
The ground and the page. Dug earth — warm, low, never pure black.
Trail amber
#E09A3C
Food-pheromone glow and rules. Lines and marks only — the trail you watch brighten.
Leaf green
#6E8B3D
Home-scent and scouts. The quieter second pheromone, kept faint under the amber.
Sand
#DED2BC
Body text and the seed. High contrast on soil, so copy stays readable.
Amber ink
#C9853A
Eyebrows and small labels — a darker amber so text clears contrast, per the W2 lesson.

Type — Spectral + IBM Plex Mono

Spectral is a screen-built serif with a naturalist, field-guide warmth — right for a subject that is half entomology, half computer science. IBM Plex Mono carries every instrument reading, label, and counter: it makes the telemetry feel like a real station panel and keeps numbers tabular. The one moment of bravery is the display line set in Spectral Light with an italic amber payoff — the path draws itself.

Display · 700
FORMICARY
Statement · 300/500 it
The path draws itself.
Instrument · mono 500
FORAGERS 148 · LADEN 62 · TRIPS 314

Techniques

No frameworks and no libraries — the whole page is inline HTML, CSS, and one plain <canvas> 2D script. Entrance choreography is CSS transitions staggered by transition-delay, gated on document.fonts.ready with a 700 ms fallback so nothing sits invisible if fonts stall. The step glyphs are hand-drawn inline SVG. Everything is procedural; there is not a single raster asset.

The signature element — a two-pheromone ant colony

The field runs a genuine agent simulation, not a scripted animation. Two Float32Array grids cover the canvas at 6-pixel cells: a home scent field and a food scent field. Each of ~210 ants is a position, a heading, and one bit of state — searching or laden. A searching ant follows the food field and drips home-scent; a laden ant follows the home field (nudged by a weak nest vector) and drips food-scent. Steering is the classic three-sensor sniff: sample the relevant field ahead-left, ahead, and ahead-right, turn toward the strongest, add a little wander. Deposit strength decays after each event, so scent is brightest near where a trip began. Every frame both grids diffuse slightly and evaporate by a fixed factor. That is the whole engine: because a shorter round trip re-deposits sooner than the ground forgets, its scent out-competes longer detours and the amber trail consolidates into the near-shortest route — decided by no planner. Obstacles are a Uint8Array that holds no scent and blocks movement, so a pebble wall forces the colony to re-route; dropped crumb piles are finite sources whose trail evaporates once emptied. The grids are rasterised to a small offscreen canvas and drawn twice — once soft for bloom, once crisp — with additive compositing over the soil.

Discipline around it: DPR capped at 2, canvas sized to its container with a debounced resize, the rAF loop paused on document.hidden, and a reduced-motion path that runs 520 steps synchronously then paints one settled frame — never a blank canvas. If a 2D context can't be acquired, a CSS fallback scene takes over.

Iteration log

Pass 1 — Craft
  • Contrast: eyebrows and small labels were set in full trail-amber (~3.1:1 on soil). Split off an --amber-ink #C9853A token for text and kept the bright amber for pheromone marks and hairlines only.
  • Type scale: tightened the display to a deliberate clamp and set the statement in Spectral Light with a single italic amber payoff, rather than one flat weight throughout.
  • Rhythm: unified section padding to a clamp() scale and standardised every border to the same --sand alpha tokens so rules read as one system.
  • Copy: rewrote filler into specific field-note figures ("600 loads", "80–120 trips") and named the two scents explicitly.
Pass 2 — Depth
  • Signature enrichment: added the second home pheromone (faint leaf-green) so outbound ants genuinely navigate back, instead of teleporting home — the emergence is now a true round-trip economy.
  • Second-read detail: ~6% of ants are long-range scouts, drawn in leaf-green with double the wander — you only notice them straying wide on a second look. Dropped crumb piles are finite, so a trail visibly thins and dies as a pile empties.
  • Micro-interaction: laden ants brighten to amber the instant they pick up a seed, so you can watch the return stream thicken the trail in real time.
  • Motion: deposit-strength decay and a light diffusion pass make trails coalesce smoothly rather than flicker cell-to-cell.
Pass 3 — Hardening
  • 375px: telemetry re-flows to a tight 2-column grid, the lede and hint hide, controls wrap without the wordmark or nav ever leaving the viewport box.
  • Reduced motion: runs 520 sim steps synchronously and paints a fully-formed static trail; interactions re-settle it instead of animating.
  • Robustness: capped DPR at 2, debounced resize re-seeds the grid, rAF pauses on tab-hide, wall-painting refuses to build over the nest, and crumb sources are capped at 10 to bound work.
  • Chanel rule: cut a per-frame full-grid pebble-top-highlight pass — a barely-visible edge on the wall that cost a whole grid scan every frame. The flat stone reads cleaner and scroll perf improved.

Elsewhere