HILBERT8ⁿ−1

Guide · site 181 · wave 8, Form

How Hilbert was made

A single glowing filament threads a glass cube through Hilbert-curve orders 1 → 4 — 7 segments, then 63, 511, 4,095 — until the one-dimensional line visibly becomes a volume. The page has one job: make you watch a wire learn to be a solid.

01Concept

Hilbert is a fictional institute-plate for the 1891 space-filling curve, aimed at people who like their mathematics architectural: engineers, cartographers, database designers. Everything on the page is subordinate to one continuous line inside a scaffolded cube; the readout keeps the claim honest with the real arithmetic — 8ⁿ−1 segments, lattice fill of 16³ — while the thread re-threads itself between orders.

02Palette

Cold void, one electric filament, blueprint scaffolding. The cyan is reserved strictly for lines and marks — body copy sits in frost ink, secondary text in two derived inks, so the filament stays the brightest thing on the page.

Void
#0B0E14 — near-black blue; the cube floats in it.
Filament cyan
#6FE3FF — the line and marks only, never copy.
Scaffold blue
#24406B — cube edges, lattice grids, quiet structure.
Frost ink
#DDE8F0 — body copy; ~15:1 on void.
Ink, dim
#A6B6C7 — derived secondary ink for supporting copy.
Ink, faint
#75879B — labels and eyebrows only, never paragraphs.

03Type

Unbounded carries the display voice — a wide, geometric face whose letterforms already look like they were bent from one continuous strip, which is the whole subject. It is used sparingly: the wordmark with its 8ⁿ−1 superscript, the big order numeral, headings. Chivo Mono does everything else. A curve defined by recursion deserves a readout set in a face with fixed cells; tabular numerals keep the rolling segment counter from shivering.

04Techniques

Curve. The 3D Hilbert curve is generated by the classic recursive octant permutation. The raw recursion grows in extent with order (corners at ±(2−2¹⁻ⁿ)), so each order is normalised to the same half-extent before use — that is what lets four different orders live in one cube.

Signature — the re-thread. All four orders are resampled by arc length into a shared 4,096-sample parameterisation. Hilbert curves preserve locality across orders (the first eighth of order n+1 lives in the first octant of order n), so interpolating matched samples re-threads the line locally instead of scrambling it — measured maximum drift between matched samples falls from 1.04 to 0.34 cube-units as orders rise. The morph is staggered along the thread (eᵢ = smoothstep(t·(1+s) − s·uᵢ)), so the transformation travels head-first down the filament like a zip, with a faint glow riding the front.

Rendering. One Line2 fat line (4,095 instanced segments). Positions and vertex colours are written in place into the instanced interleaved buffers each frame — no reallocation — and the intro grow simply raises instanceCount. The composer renders into a half-float target with 4× MSAA, then a restrained UnrealBloomPass (strength .38, radius .12, threshold .78) with the base filament held just above threshold: a crisp emissive core with a travelling pulse that blooms, not organic haze. Scaffolding is plain LineSegments: cube edges plus one lattice grid per order on the three far walls, crossfaded by the live effective order.

Discipline. DPR capped at 2; the rAF loop pauses on document.hidden with a clamped delta; resize refits the camera by aspect; prefers-reduced-motion renders one settled frame — order 3, mid-thread to 4 — via both the CSS media query and a matchMedia gate; WebGL context loss (or a dead CDN) swaps in a static axonometric SVG of the order-2 thread.

05Iteration log