An endless packing of kissing circles, each engraved with its exact integer curvature.
Start with four mutually tangent circles with integer curvatures such as (-1, 2, 2, 3), the outer one negative because it encloses the rest. Descartes' theorem gives exactly two circles tangent to any three, and its complex form (Lagarias, Mallows and Wilks) gives their centers too, so every new circle is one subtraction away: k' = 2(ka + kb + kc) - k, and the same for curvature times center. Every frame the packing is rebuilt from the root by a depth-first walk over the curved gaps, pruned when a gap's bounding circle is off screen or its largest circle is under a pixel, so zooming a billion times only ever builds what is visible. The curvatures stay exact integers, and the fills show their residues mod 24, which in an integral packing land in only a few classes. On its own the camera dives toward a random point of the limit set, so the engraved numbers climb into the hundreds of millions as new circles keep arriving from the edges.
Try it. Scroll to zoom at the cursor, drag to pan, and click a circle to fly into it. Hover any circle to see its Descartes quadruple: the three circles it was born tangent to, highlighted, and the identity they satisfy. Keys 1-6 switch between six integer gaskets, + and - zoom, 0 resets, and Space or the dive button toggles the endless dive.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an Apollonian gasket explorer with JavaScript and the HTML canvas element, where every circle is labeled with its integer curvature. 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 dark background.
- Represent each circle by its curvature k (1 / radius, negative for the outer circle) and k * z, where z is its center as a complex number.
- Start from the (-1, 2, 2, 3) gasket: k = -1 at 0, k = 2 at 1/2 and -1/2, and k = 3 at 2i/3.
- Use the reflection form of Descartes' theorem: if circles a, b, c are tangent to each other and to circle e, the other circle tangent to a, b, c has k = 2(ka + kb + kc) - ke, and the same holds for k * z.
- Recurse over gaps: each gap is (a, b, c | e). Make the new circle d, draw it, and recurse into (a, b, d | c), (a, c, d | b) and (b, c, d | a). Stop when the radius is under a pixel.
- Fill each circle with a muted color and write its curvature in the middle when it fits.
Once that works, make it beautiful and explorable:
- Add zoom with the mouse wheel (about the cursor) and drag to pan. Regenerate every frame, skipping gaps that are off screen.
- Draw the circles a hair smaller than their true radius so tangent circles show a thin dark seam where they kiss, and give the numbers an engraved look with a dark offset copy underneath.
- On hover, highlight the three circles a circle was born tangent to and show the four curvatures.
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 other starting quadruples like (-2, 3, 6, 7), coloring by curvature mod 24, or an automatic infinite zoom.
