Guide · Form No 176 · Aperiodic tiling P3
Making Penrose
One page, one job: make aperiodicity visible. A Penrose rhomb field grows by
golden-ratio deflation while the camera eases in, so the pattern deepens forever — and the
matching-rule arcs surface on a cycle to show why it can never repeat.
The concept
Penrose is a study page for the P3 rhombus tiling: two shapes — a fat 72° rhomb and a thin
36° one — that tile the whole plane yet never fall into a period. The audience is anyone who has
seen the pattern on a bathroom floor or a Nobel citation and wants to feel the mechanism, not
read a proof. The single job of the page is the hero: a live substitution tiling, four to five
generations deep at rest, deflating in real time under an infinite eased zoom.
Palette — the Darb-i Imam lineage
The colour argument comes from the girih tilework of the Darb-i Imam shrine (Isfahan, 1453),
whose strapwork shares the Penrose deep structure: gilt line on deep lapis ground, with dusty
rose reserved for the fat rhombs. The bright gilt is a line and mark token; body copy
sits in parchment ink so small text never rides the accent.
#131A2Cdeep lapis — the ground
#D4AF5Cgilt — edges, arcs, marks
#8A5A6Edusty rose — fat rhombs
#1B2648midnight lapis — thin rhombs
#E9E1CEparchment — body ink
#9FA8BFslate — secondary ink
Gilt on lapis measures ≈ 8.3:1 and parchment ≈ 13:1 — both clear the 4.5:1 body floor,
but gilt still stays reserved for rules, counters and italic accents.
Type
Cormorant Garamond carries the display voice — a Renaissance-blooded serif whose italic has
the calligraphic drift of girih strapwork; the hero wordmark is set italic at up to 164 px.
IBM Plex Mono runs the instrument panel: generation counter, rhomb tally and the fat:thin ratio
ticking toward φ. Two faces, two registers — geometry gets the serif's romance, measurement gets
the mono's neutrality.
Technique
- Substitution tiling · canvas 2D
- The field is built from Robinson half-rhomb triangles. Each generation, a fat half splits
into three children and a thin half into two, every edge shrinking by 1/φ — the classic P3
deflation. Triangles are batched into six Path2D fill buckets (three
shades per rhomb type), one gilt edge path and one arc path, so a frame stays at roughly a
dozen draw calls no matter how many thousand tiles are alive.
- The infinite zoom — a φ rebase
- The camera scale grows exponentially, one factor of φ every seven seconds. When it crosses
the threshold, the engine culls tiles outside a 2× viewport margin, subdivides the survivors
once, then rebases the world: every coordinate is re-scaled by φ about the camera and the zoom
divided by φ in the same frame. Nothing on screen moves, but coordinates and scale both return
to O(1) — so the zoom can run for hours without floating-point drift. The camera then eases
toward the centroid of whichever new triangle contains it, so the descent path is itself
aperiodic.
- Matching-rule arcs
- Each half-rhomb draws one circular arc about its apex at radius 1/φ² or 1/φ of the edge —
small at one corner of the rhomb, large at the opposite — the decoration Penrose used to state
the matching rules. The arc layer breathes on a thirteen-second cycle, surfacing to gilt and
sinking back, so the rule reads as a recurring revelation rather than permanent ornament.
- Second read
- One rhomb near the centre carries a faint gilt glow. It is a lineage: at every deflation
the glow passes to one of its children, so the highlighted tile survives the zoom forever —
the same rhomb, endlessly subdividing. On a fine pointer, hovering any tile names it in the
HUD (fat 72°/108° or thin 36°/144°) and lights its mirror half.
Iteration log
Pass 1 · Craft
- Drove the signature: asserted the generation counter ticks and the rhomb tally changes
across a real 8-second headless run, and that two frames 1.3 s apart differ.
- Rebalanced the field fills — the first build's thin-rhomb lapis sat too close to the
ground colour, so the tiling read as rose islands on darkness; lightened the midnight
triad so both rhomb families read at rest.
- Retuned the gilt edge weight against the 7-second settle screenshot: hairlines at
deep zoom were dissolving under DPR 2, so edge width now floors at 0.85 px.
Pass 2 · Depth
- Added the gilt lineage glow — one tile whose descendants stay lit through every
deflation — and exposed a lineage tally on the page's debug probe, asserting it stays
alive across successive deflations in the headless run.
- Added the hover micro-interaction: pointer finds the rhomb, lights both Robinson
halves, and the HUD names its angles; asserted the probe text appears under a scripted
mouse move.
- Slowed the arc cycle from 9 s to 13 s and eased its envelope so the arcs
surface, hold legibly, and sink — instead of pulsing.
Pass 3 · Hardening
- 375 px: verified no horizontal overflow and header links fully in-viewport; the
HUD hides on short small screens rather than colliding with the hero copy.
- Reduced motion: field renders a settled generation-seven frame with arcs held at half
strength, counters populated, no rAF loop — confirmed two frames hash identical under
emulated prefers-reduced-motion.
- Chanel rule: removed a planned second watermark φ from section one, keeping the single
ghost glyph in section three. DPR capped at 2, rAF pauses on hidden tabs, resize rebuilds
only when the viewport outgrows the culled margin.