Escher's Print Gallery effect: a painted harbor town that spirals into itself forever.
A harbor town is painted in code, with a gallery whose gilded window holds the whole picture shrunk five times, so it contains itself without end. In log coordinates that picture repeats along two directions, one zoom step and one full turn. Multiplying log z by 1 - i n log(5) / (2 pi) and taking the exponential sends one turn around the center onto one turn plus n zoom steps, the conformal map Lenstra and de Smit used to complete the empty center of Escher's Print Gallery. Each pixel stores its log radius and angle once, so a frame is a complex multiply, a fold into one annulus of the picture and a mipmapped texture lookup whose level follows the map's local stretch.
Try it. Drag up and down to zoom, sideways to turn. Drag the slider from plain Droste recursion to the full twist; in between, the two branches of the map are blended. Press 0 to 3 (or minus) for the number of spiral arms, N for a new town, Space to pause the zoom.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Recreate the mathematics of Escher's Print Gallery, the Droste spiral, 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:
- Paint a square picture into an offscreen canvas (say 1024 x 1024) using only canvas drawing: a sky gradient, a row of colorful houses, water, and a gold frame in the exact middle. Clear the inside of the frame so it is transparent; make that hole exactly s = 0.2 times the size of the picture.
- Treat the picture as covering [-1, 1] in both axes. Grab its pixels with getImageData.
- Render the screen per pixel into a smaller ImageData buffer and scale it up with drawImage. For each pixel, take z relative to the screen center, compute w = log z (log of the radius, plus i times the angle), and first just do z = exp(w) again. Fold the radius into the picture: multiply by s while the point is outside the square of half-size 1, divide by s while it is inside the hole. Sample the picture there. You should see the plain Droste effect: a picture inside itself, forever.
- Add a zoom by adding a slowly decreasing number to the log radius each frame.
Once that works, make it beautiful:
- Twist it: before exponentiating, multiply w by k = 1 - i log(1/s) / (2 pi). Now walking once around the center descends one level into the picture, and the town curls into a spiral that keeps every angle intact.
- Precompute the log radius and angle for every pixel once, so each frame is just a complex multiply and an exp.
- Use bilinear filtering, and blur or average the picture where the map shrinks it a lot, so the center does not sparkle.
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 several spiral arms, mipmapping by the map's local stretch, or using a photo from a file picker.
