Identical twins become a giant and a child inside a room that only looks square.
Every point of an ordinary rectangular room is slid along its own sight line from the peephole by a perspective collineation, X' = E + (X - E) / (1 + w . (X - E)), a projective map that fixes every ray through the eye and keeps planes flat. From the peephole the picture is identical to the rectangular room, but the real room is a skewed trapezoid whose left corner is twice as far away as its right. The room is ray cast per pixel: each ray is clipped against the six wall planes, and the hit point is mapped back through the inverse collineation so the checkerboard, wallpaper and windows are painted in rectangular coordinates. The twins are real people on the real sloped floor, so their size on screen tells the truth the room hides. Outside, the solid outline is the real room and the dashed one, with ghost figures, is what your eye reports.
Try it. Drag either twin across the floor and watch them grow and shrink. Drag the background or press P to step outside the peephole and orbit the room. Distort buttons (or [ and ]) change how skewed the room is.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an Ames room illusion with JavaScript and the HTML canvas element: through a peephole two identical people look like a giant and a child in an ordinary room, and stepping outside reveals the room is warped. 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:
- Define a normal rectangular room (say 4 wide, 2.8 tall, 4.4 deep) and a peephole eye point E just in front of its front wall.
- Distort it with a perspective collineation that slides every point along its own sight line from E: X' = E + (X - E) / (1 + w . (X - E)), with w = (0.2, 0, 0). Explain in a comment why this keeps the view from E identical: every ray through E maps to itself and planes stay planes.
- Write a small perspective camera (position, look-at, project) and draw the distorted room's floor and walls as filled polygons, sorted back to front, with a checkerboard floor made of many small quads mapped through the same function.
- Put two identical stick people of the same real height in the back-left and back-right corners of the distorted floor, standing straight up, and draw them by projecting their feet and heads.
- Put the camera exactly at E: the room should look rectangular and the people very different in size.
Once that works, make it beautiful:
- Add wallpaper stripes and windows on the back wall by mapping rectangular-room points through the distortion, so they look perfectly rectangular from the peephole.
- Let the mouse drag a person along the back wall and watch them grow and shrink.
- Add a button that smoothly flies the camera out of the peephole to orbit the room and shows its true trapezoid outline.
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 ray casting the room per pixel with the inverse map for crisp textures, drawing the rectangular room your brain reports as a dashed ghost, or adding a slider for how strongly the room is skewed.
