← Back to the street
Field notes

Drunkard

Diffusion is not a smooth fluid law handed down from above — it is a crowd of coin-flips. This page records how the street was built.

01 The concept

Drunkard is a fictional demonstration bench for one idea: the heat equation, the thing that governs how ink bleeds and heat leaks and smells travel, is nothing but statistics on a mob of aimless walkers. Hundreds of them leave a single lamppost; each takes an independent left/right coin-flip every tick. The audience is anyone who was told "diffusion spreads as the square root of time" and wants to watch that √t happen. The page's single job: make the macroscopic bell curve visibly assemble itself out of microscopic randomness — no one path predictable, the whole crowd inevitable.

02 Palette

Argued entirely from the subject — a gas-lit street after midnight, violet walkers, one amber lamp holding the mean.

Lamplit street#161320Ground. A cold near-black with a violet cast, so the walkers read as lit, not drawn.
Walker violet#9A8CD0LINE / MARK only. Every stumbler, trail and histogram bar. Too low-contrast for body copy — reserved for strokes.
Mean amber#E0B24AThe lamp. The mean axis, the analytic Gaussian and the √t envelope — the deterministic law inside the noise.
Cobble ink#DCD8E4Body ink, ~12:1 on the ground. Secondary #ADA6C2 derived for labels, still ≥7:1.

03 Type

Display — Spectral 500
Drunkard

A literary serif with a slight lamplit warmth. It carries the wordmark, the stat values and every heading — the human, deterministic voice against the mono noise.

Data — IBM Plex Mono 400/500
σ = √t · ℓ

Tabular figures for the ticking readouts and labels. Monospace reads as instrumentation — the lab, not the marketing.

04 Technique

One <canvas>, no libraries. Two layers: an off-screen accumulation buffer paints the space-time cone, an on-screen overlay redraws the live geometry each frame.

05 Iteration log

Pass 1 — Craft

Timing, the lattice comb, honest layout

Drove the pour and read the rendered frame. First fault: the loop was fast, so the 7-second resting state was caught early — a stubby cone. Slowed the pour to ~26s and pre-warmed to 62% so rest always reads as a deep, developed bell. Second: a strict ±1 lattice printed vertical striations in the cone and a parity comb in the histogram (every other bin empty). Gave each walker a sub-pace starting offset at the lamp base — the mean and √t are untouched, but cone and bell now read smooth. Then pinned the histogram baseline with a hairline, moved the stat values to Spectral with tabular figures, and lifted the field note and legend clear of the histogram tails where the baseline had read as strikethrough.

Pass 2 — Depth

The lamp made literal, the paradox made numeric

Added a soft amber radial glow at the origin so the lamppost the crowd leaves is a real light, not just a dot. Ran a second σ band (±1σ / 68%) inside the ±2σ envelope, and wired the #00 traced walker to a live mean displacement readout — a returning viewer catches the joke that this one stumbler reels blocks from home while the average never leaves the lamp. Added a quiet micro-interaction: click the street to send the crowd out again from step zero.

Pass 3 — Hardening

375px, reduced motion, focus, one fewer ornament

At 375px the field shortens, the note and legend hide, and the readouts drop into a two-by-two grid tucked between the cone and the bell — verified the wordmark and nav sit inside the viewport with a clean scrollWidth. Confirmed the reduced-motion branch paints a full mid-convergence bell and starts no loop, tab-hidden pauses the rAF with a clamped delta on resume, and resize rebuilds the buffer at the DPR-2 cap. Removed the inner ±1σ band added in Pass 2 (Chanel rule) — unlabelled, it competed with the traced trails, and the ±2σ curve plus the histogram's σ-ticks already carry the law. Final copy read end to end.

Designed & built by Sapience Analytics — part of the Generative Assets collection. View the site →