Mixing a secret in public, honestly.

DIFFIE renders the 1976 Diffie–Hellman key exchange as paint: Alice and Bob each stir a private colour into a common yellow, swap the mixtures across a public channel that Eve copies in full, stir again — and both benches arrive at the same hue while Eve cannot unmix hers. The page's single job is to make "easy one way, infeasible back" feel physical, then show the identical trick in modular arithmetic directly beneath.

The honesty contract

The site's claims are measured, not scripted. The paint is a raw WebGL fluid: three pigment concentrations advected by a divergence-free vortex field and displayed through Beer–Lambert subtractive mixing, so every hue is an outcome. The hex under each pot is sampled from the rendered framebuffer with readPixels; the pour quantities are measured mid-sim by reading the lane's mean concentrations back from the GPU, and the pour stops when the measured fraction reaches its target; the modular arithmetic is computed live in the page; and Eve's brute-force counter genuinely computes every successive power of g. A state probe (window.__diffie) exposes all of it, and the QA harness drives the exchange end-to-end and asserts on the sampled results.

p = 2,027 · g = 5 (primitive root) · a = 1,489 (Alice, private) · b = 962 (Bob, private)
A = g^a mod p = 602 · B = g^b mod p = 1,150 · s = B^a = A^b = 1,948 both ways
cost: Alice 34 modular multiplications, Bob 30 · Eve's search: finds a after 1,489 guesses of at most 2,026
pours (measured): magenta 49.6% · teal 49.7% · then 33.1% · 33.1% of each pot
converged (sampled): alice #7D7C60 · bob #7C7C60 · Δ 2/255 at declaration, byte-identical once settled
eve (sampled): #928B54 — 15–30/255 away depending on sheen phase · her measured recipe ≈ 51% yellow, 24% magenta, 25% teal

The subtractive model predicts #7D7A60 for equal thirds of the three pigments; the simulation lands within a couple of counts of it — and the two benches land on each other exactly, which is the theorem.

Palette — argued from the analogy

#1D2024 · chalkboard charcoal: The lecture-hall ground the 1976 idea was drawn on. Everything sits on it.

#E3BE3A · common paint yellow: The public starting colour — and the line/mark accent for protocol UI.

#C2497B · Alice magenta: Her private colour. Used as a mark, never as small text — it fails 4.5:1 on charcoal.

#2E8C8C · Bob teal: His private colour. Same rule: dots, underlines and pigment only.

≈#7C7A60 · the shared secret: Not a token. Computed by the sim and sampled from the framebuffer — it lands where mixing lands it.

#C9CDD3 · body ink: Derived light-on-charcoal ink (≈10:1). The bright accents stay lines and marks per the collection's ink/line split.

Type

STIX Two Text

Display · body · captions

A mathematical serif bred from scientific typesetting — the closest living voice to the journals that carried "New Directions in Cryptography". Its italic does the phase captions, so the narration reads like a lecturer's aside.

Martian Mono

Protocol log · ledgers · counters

Wide, engineered, tabular — the wire's voice. Everything Eve can see (the log, p, g, A, B, the brute-force counter) is set in it, so "public" has a typeface of its own.

Techniques

Raw WebGL GLSL fluid, no libraries. A 384×216 RGBA8 ping-pong texture holds three pigment concentrations (yellow, magenta, teal). A fragment shader does RK2 semi-Lagrangian advection through an analytic sum of orbiting Gaussian vortices — divergence-free by construction — with the three vessels as flow-confined regions and reflective walls. Splat passes inject pigment; a display shader converts concentration fractions to colour with Beer–Lambert absorption (paint = base·e^(−K·f·density)), so mixing is genuinely subtractive and commutative — the whole point of the analogy.
Closed-loop pours. "Equal parts" is not assumed: while pouring, the engine reads the lane back from the GPU every couple of steps and stops when the measured pigment fraction hits 50.0% (then 33.3%). The protocol log prints the achieved figure.
The swap. The timeline waits on measured pour completion (never a clock), samples each pot's mean mixture, sweeps it into the other pot with a wavy fill front, flies comet streams across the public channel, and drips copies into Eve's divided tray. Her divider drops only after both benches hold their received mixtures.
Numerical honesty at 8 bits. Three defects found by measurement and fixed at the root: bilinear taps at region edges bled zero-concentration gutter into the pots (a mass leak — fixed with texel-inset reflective sampling); smooth gradients froze below the 8-bit quantisation step (fixed with ±½ LSB dither); and the dither's rounding bias drained mass slowly (fixed by relaxing toward the lane's own measured mean, captured once at convergence start — a long-wavelength diffusion term whose target comes from the sim itself).
State probe. window.__diffie exposes phase, sampled hexes, measured fractions, the arithmetic, and synchronous seek/advance/replay drivers, so QA gates on sim state rather than wall-clock seconds.
Guard rails. WebGL context failure falls back to a static CSS rendering of the exchange with the arithmetic still live; DPR capped at 2; the rAF loop pauses on document.hidden; reduced motion renders one settled, fully-converged frame.

Iteration log

Pass 1 · Craft

Driving the exchange end-to-end found the wave's classic silent failure: the swap fired on a fixed clock while Bob's pour was still running, and the incoming fill crushed his teal to a measured 1.5% — the whole theorem quietly false while "hero visible" passed. Timeline events now wait on measured pour completion. Also fixed: Eve's sample point was y-flipped (reading empty chalkboard, not her tray), a pale halo where bilinear sampling bled pot paint into the gutters, small-label contrast lifted from 2.7:1 to ≥6:1 by demoting the faint token to borders only, and the 375px masthead tightened.

Pass 2 · Depth

The depth work went into physical truth. Readbacks showed pot mass at 0.53 of its poured total and a magenta fraction drifting 0.33→0.20 — wall clamping was recycling stale rim paint and slowly eating whatever was poured last. Reflective walls with a texel inset, ±½ LSB dither to unfreeze sub-quantum gradients, and relaxation toward the measured reference brought the final recipes to 0.333 / 0.333 / 0.333 in both pots and the two benches to byte-identical sampled hexes. Second-read details: hovering any swatch reveals its measured pigment recipe (Eve's shows the double yellow that gives her away), and once the benches agree, the wordmark's interpunct quietly takes the agreed hue.

Pass 3 · Hardening

Headless sweep at 1440 and 375 on both pages: exactly one h1 each, zero console errors, no overflow, nav and wordmark inside the viewport. Reduced motion seeks straight to a settled converged frame with no animation loop; the two-frame liveness diff passes on the live sheen and swirl. The failure paths are driven, not assumed: a replay from zero walks all five phases and re-converges (Δ 0.7/255), and Eve's search is clicked for real — she recovers a = 1,489 after exactly 1,489 computed powers. Chanel rule: the chalkboard's top highlight ornament was removed.

Colophon

Designed & built by Sapience Analytics — part of the Generative Assets collection. See the site or return to the index.