Design notes · Sheet 185
A fictional territorial survey with one job: make a mathematical idea — Lloyd's relaxation driving a Voronoi tessellation toward equal shares — legible as a live map. The audience is anyone who has ever argued over how to cut a cake, a paddock, or an electorate; the page shows geometry settling the argument on its own, then tearing the map up to settle it again.
Unfairness is temperature: parcel fills interpolate from a faint calm blue wash (fair) to the warm accent at |deviation| ≥ 45%, and starved parcels additionally carry a fine diagonal hatch — two encodings, one story.
Bricolage Grotesque (650, optical size 96) for the wordmark and the big deviation figures — a grotesque with surveyor's confidence and just enough eccentricity to keep the sheet from reading as a government form. IBM Plex Mono for everything measured: field notes, legend, graticule labels, parcel captions. On a map, mono is honesty — every annotation looks like it was stamped by the same instrument.
Everything is canvas 2D, no libraries. Each frame the Voronoi diagram is computed exactly, not
rasterised: every seed starts with the viewport rectangle and clips it against the perpendicular-bisector
half-plane of every other seed (O(n²) polygon clipping, ~54 parcels, comfortably 60 fps).
The shoelace formula gives each cell's area and centroid; Lloyd's relaxation then eases every seed
toward its centroid with a frame-rate-normalised lerp, so borders visibly breathe rather than snap.
The deviation meter reads σ/μ of parcel areas and falls as the map converges; when deviation and mean
displacement both drop under threshold the survey holds for 2.6 s, certifies each parcel's area in
hectares, then re-seeds — old seeds glide to new random claims under a cubic ease while the borders flash
warm, and the cycle begins again. Clicking claims a new parcel and knocks the meter back up.
prefers-reduced-motion gets a genuinely settled artefact: 26 synchronous Lloyd steps run at
load and a single mid-relaxation frame is drawn, no animation loop at all.
Pass 1 · Craft
Found text-transform: uppercase mangling the σ/μ label into "Σ/M" — isolated the fraction
from the transform. The map read finished at the 7-second mark (deviation already 8.6%), so the Lloyd
lerp was slowed ~3× until the rest state is honestly mid-relaxation (~20%), with the warm wash deepened
to match. Replaced the rAF-frame STEP counter with a wall-clock figure after headless Chrome ran at
240 Hz and showed step 1650 in seven seconds. Deleted the left-edge latitude labels that collided
with the masthead.
Pass 2 · Depth
Added hover inspection — a nearest-seed query (a Voronoi lookup in itself) outlines the parcel under
the cursor with a live caption: PARCEL 17 · 2.4 ha · +9.3%. At settle, every large parcel
fades in its certified area in hectares, calibrated to the 500 m scale bar. The re-seed morph now
blends the boundary ink toward the warm accent at peak speed, so the tearing-up of the map reads as an
event rather than a glitch.
Pass 3 · Hardening
Fenced the worst-parcel caption out of the masthead and readout zones. Chanel rule: removed the protocol line under the promise — the masthead was four layers deep and the legend already says it. Verified at 375 px (note and legend fold away, masthead and readout never overlap, zero horizontal scroll), reduced-motion static frame, DPR capped at 2, rAF paused on hidden tabs, seeds rescaled on resize. Headless run drove the signature end-to-end: deviation fell 45% → fair, the re-seed cycle fired into survey 02, a click added parcel 55, zero console errors.
Designed & built by Sapience Analytics — part of the Generative Assets collection. Return to the map.