The 2023 aperiodic monotile, grown from its metatiles and morphed toward the spectre.
Every hat here comes from the published H, T, P, F metatile substitution of Smith, Myers, Kaplan and Goodman-Strauss: each generation glues 29 metatiles into a patch, reads four bigger supertiles off it, and the process repeats nine times. Hats are washed in the color of the metatile that holds them and the rare reflected hats are inked indigo; the count on screen settles near 1 in 7.85, the golden-ratio limit phi^4 + 1. Zooming out walks the same tree at coarser levels, so hats merge into metatiles and metatiles into supertiles that look just like the previous generation. Every hat edge is either short or long, so writing each corner as a sum of short and long edges lets the whole tiling morph without a seam through the Tile(a, b) family, past the spectre's polygon Tile(1, 1) (still with mirror images here; the true spectre tiling needs a different arrangement) to the turtle and the comet.
Try it. Click to inflate a generation with an animated zoom (shift-click or the down arrow deflates, and clicking past the fourth generation goes home). Drag to pan. Slide along the Tile(a, b) bar, or press S, T and H, to morph the tile into the spectre, the turtle and back. Left alone it morphs, inflates and returns.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an interactive picture of the "hat", the aperiodic monotile discovered in 2023, with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Use a warm paper-colored background.
- Define the hat as a 13-corner polygon on a hexagonal grid. A handy way is a helper hexPt(x, y) = (x + y / 2, y * sqrt(3) / 2) and the corners (0,0), (-1,-1), (0,-2), (2,-2), (2,-1), (4,-2), (5,-1), (4,0), (3,0), (2,2), (0,3), (0,2), (-1,2). Draw one hat with an ink outline to check it.
- Write a tiny affine matrix helper, including the similarity that maps one segment onto another.
- Implement the four metatiles from the paper by Smith, Myers, Kaplan and Goodman-Strauss: H (three hats and one reflected hat), T (one hat), P and F (two hats each), each with its outline polygon. Then implement one substitution step that glues metatiles into a patch and reads four bigger supertiles off it, following Craig Kaplan's open source reference implementation for the exact rules. Check for overlapping hats.
- Flatten three or four generations into a list of hats and draw them, centered and scaled to fill the screen.
Once that works, make it beautiful:
- Color each hat by the metatile it came from with soft watercolor tones, ink the reflected hats in a deep indigo, and add a faint paper grain.
- Count the hats and the reflected hats on screen and show the ratio; it should approach about 7.85.
- Let a click zoom out one generation with a smooth animation.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as drawing hats only when they are big enough and metatile polygons otherwise, morphing the tile through the Tile(a, b) family toward the spectre, or exporting a large SVG.
