Penrose

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.