A wildly warped drawing that a chrome cylinder turns back into a picture.
Cylindrical anamorphosis, computed exactly. The visible face of the mirror is covered by a grid of points; for each one a ray from the design eye hits the cylinder, reflects about its normal and lands on the paper, while the same point projected into the eye's view says which pixel of the target picture belongs there. A small software rasterizer warps the picture onto the sheet triangle by triangle, so the arc visibly paints itself. The scene is then ray traced per pixel: paper with an analytic soft shadow, a walnut table, a spun steel cap, and the mirror, whose reflected rays are followed back down to the paper. From the sweet spot the cat, the balloon or the lettering snaps into place; walk away and it bends, and the inset shows the actual sheet from above.
Try it. Draw on the paper or right on the mirror: each stroke segment is cast through the cylinder onto the sheet, so a straight line in the mirror becomes a sweeping curve on the paper. Drag the table to walk around, and press Go to spot (or Space) to return. The chips change the picture, clear your drawing and cycle pen colors; you can also draw on the map inset. Arrow keys move the camera, N changes the picture, C clears and 1 to 5 pick a pen. Left alone, it strolls around the table and comes back to the spot with a new picture.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a cylindrical mirror anamorphosis with JavaScript and the HTML canvas element: a picture painted on paper as a warped arc around a chrome cylinder, which looks normal again in the cylinder's reflection. 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:
- Set up the geometry: the paper is the plane z = 0, a mirror cylinder of radius 1.4 and height 3 stands at the origin, and the eye sits at (0, -7, 7) looking at the cylinder.
- Draw a target picture on an offscreen canvas (a smiley face or big letters).
- For a grid of points on the half of the cylinder facing the eye (angle from -55 to 55 degrees, height 0 to 2.6), cast a ray from the eye to the point, reflect it about the surface normal with r = d - 2 (d . n) n, and intersect it with the paper. Map each grid point's angle and height to coordinates in the picture.
- Show a top-down view of the paper: for each grid cell, draw the corresponding piece of the picture as two textured triangles (use ctx.setTransform with the affine map between the triangles, then clip and drawImage).
Once that works, make it beautiful:
- Add a second view from the eye: ray trace each pixel against the cylinder and the paper, and when a ray hits the cylinder, reflect it and sample the paper where it lands. The picture should appear undistorted in the mirror.
- Let the mouse orbit the camera so you can watch the reflection break apart away from the sweet spot.
- Let people draw: map the mouse through the mirror onto the paper and paint there.
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 a conical mirror, an analytic soft shadow for the cylinder, or animating the paper being painted from the mirror outward.
