Generative Assets · Field notes
Making Fickian
A drop of dye released into still water spreads by pure random walk. FICKIAN solves that field live and draws it as blooming iso-concentration contours — the sharp edge you release softening, inevitably, into a smooth Gaussian.
The concept
FICKIAN is a fictional instrument for the collection's Unseen wave — sites that give a body to a field you cannot see. Here the field is concentration, and the invisible force is diffusion: no current, no stirring, only molecules taking a blind walk down their own gradient. The page's single job is to make that slow, statistical spread legible and beautiful in one glance.
The audience is anyone who has watched ink bleed through water and wondered what law governs it. The answer — Fick's, 1855 — is drawn, not stated: release a drop anywhere and watch two plumes overlap and sum.
Palette — argued from still water
Deep, cold still-water blues so the dye reads as luminous the way ink does under a dark lamp. The bright blue is reserved for lines and marks — contours, glyphs, rules; body copy uses a derived light ink that clears 4.5:1 on the ground.
The dye blue would fail as small text on the ground (~3:1), so it never sets copy — exactly the ink/line split the collection learned to bake in.
Type
Newsreader — a Google serif with true optical sizing and a fluid italic — carries the display. Set at large optical sizes its italic has the wet, unhurried grace of ink itself; the wordmark Fickian is that italic at full size, the site's one moment of typographic bravery. Space Mono handles every readout, eyebrow and equation — the instrument's measured, technical voice against the serif's flow.
Technique — the signature
The tank is a single <canvas>. Behind it a coarse concentration grid (cell ≈ 6.4 px, capped for performance) holds the field as a Float32Array. Each frame it advances one step of the diffusion equation by explicit finite differences — every cell relaxes toward the average of its four neighbours, c += K·∇²c, with K held under the stability limit and a whisper of decay so the field breathes rather than washing flat.
Rendering is two layers. The field itself is written to a tiny off-screen image and drawn up to full size with smoothing on, so the coarse grid becomes a seamless Gaussian glow; a second lighter pass blooms the bright core. Over it, marching squares walks the grid at six concentration levels and traces the iso-concentration contours — the nested loops you watch bloom outward and space themselves evenly, the fingerprint of a spreading Gaussian.
A drop is just a Gaussian bump added to the field; because diffusion is linear, releasing two drops literally sums the fields — no collision, only overlap. A live cross-section through the peak, drawn in the readout bar, shows the actual bell flattening in real time. The resting state is a mature plume seeded and pre-diffused before the first paint, so the page reads premium the instant it loads.
Three iteration passes
The first build spread too fast: by the 7-second thumbnail settle the peak concentration had collapsed from 0.84 to 0.09 — below most contour levels — so the plume washed to a faint, structureless haze. Not a premium resting frame.
- Slowed the physics: dropped the diffusion coefficient and substeps, softened the decay. The live peak now holds ~0.30–0.39 through the whole thumbnail window, keeping every nested contour alive.
- Re-timed the auto-release to every 3.4 s with a centre bias every third drop, so the resting field stays replenished and luminous instead of thinning out.
- Tuned the contour levels and glow ramp so the dye reads bright at the core and the outer isopleths stay faint — a legible depth gradient.
Enriched the signature and added the second-read detail.
- Added a live cross-section through the peak in the readout bar — a bell curve drawn straight from the field's peak row that you watch flatten as the plume spreads. It states the whole concept in one small graph.
- Wired an honest readout: peak concentration, spread
σ = √2Dtcomputed from the field's real second moment, drop count, and livecunder the cursor. - Gave the marching-squares contours a per-level colour and alpha ramp (dye → glow) plus a soft additive bloom, so the core genuinely glows rather than just being lighter blue.
Made it robust and removed one ornament.
- 375 px: verified no real overflow (scrollWidth = 375, zero offenders); the readout bar wraps and the profile goes full-width.
- Reduced motion: a CSS media query plus a
matchMediaguard in JS — no rAF loop, no auto-drops. A single settled mature plume (peak ≈ 0.93) is drawn, and clicks still repaint statically so the field stays interactive. - Canvas discipline: devicePixelRatio capped at 2, grid re-allocated and re-seeded on resize, and the loop cancelled on
visibilitychangewhen the tab is hidden. - Chanel rule: cut the resting seed from four Gaussian lobes to a clean central bell plus one soft off-centre lobe — a more canonical Gaussian, less noise.
- Headless Chrome (puppeteer-core, 7 s settle): zero console errors, one visible
<h1>, passive two-frame liveness and drive-then-diff both positive, drop counter increments.
Commission work like this
FICKIAN is one of the Generative Assets — a collection of self-contained, procedurally-rendered sites built by Sapience Analytics to show what considered web craft looks like: no stock images, no templates, every pixel argued from the subject.
If you want an instrument, a landing page, or a data experience built to this standard, start at the collection index.