A live magic eye picture: a turning 3D sculpture hidden in colorful noise.
Every frame, a ray marcher renders the depth of a slowly turning signed distance field sculpture (a ringed planet, linked rings, a twisted cube, a gyroid coral, or a word you type), and that depth map is hidden in a patterned texture with the Thimbleby, Inglis and Witten algorithm. A point at depth z is seen by the two eyes through two pixels a distance (1 - mu z) E / (2 - mu z) apart, so those pixels are linked to share a color; links form chains along each scanline, hidden surface removal drops links that one eye could not see, and every chain takes its color from the texture where it starts. The texture repeats every half eye separation, so the background is a seamless wallpaper and the sculpture floats in front of it. A diagonal wipe now and then reveals the shaded depth render for anyone who cannot free-view: wherever a silhouette, an occlusion edge or a crease crosses a cell of the coarse depth grid, a fresh ray is cast for every pixel, and a ray that misses still knows how close it passed, which antialiases the outline.
Try it. Relax your eyes and look through the screen until the two dots at the top become three. Drag to spin the sculpture (it keeps the momentum), use the chips or arrow keys to change the shape and the texture, and press Reveal or Space to see the depth render. Type any word to hide it on a tilting card.
Thimbleby SIRDS algorithm with hidden surface removal
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a live autostereogram (a "magic eye" random dot stereogram) 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 an 800 by 500 canvas with one canvas pixel per screen pixel: the effect depends on exact pixel distances.
- Write depth(x, y): 0 for the far background, up to 1 for the nearest point. Start with a sphere: 0.3 + 0.7 * sqrt(1 - d * d) inside radius R, where d is the distance from the center over R.
- Implement the Thimbleby, Inglis and Witten algorithm row by row with E = 200 (eye separation in pixels) and mu = 1/3. For each x, s = round((1 - mu z) E / (2 - mu z)), and pixels left = x - s/2 and right = left + s must match. Record links in same[] (same[left] = right, following existing links as the paper does), then color the row right to left: unlinked pixels get a random color, linked ones copy the pixel they point to.
- Draw two small dots at the top, E / 2 pixels apart, as a viewing aid: look through the screen until they become three.
Once that works, make it beautiful:
- Replace random colors with a colorful texture that repeats every E / 2 pixels, such as noise or confetti dots.
- Add hidden surface removal: skip a link when something nearer blocks one eye's line of sight.
- Animate the shape (a pulsing sphere or a rotating torus computed analytically) and redraw every frame.
- Add a key that shows the depth map in grayscale for people who cannot free-view.
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 marching a signed distance field for the depth, hiding a word the user types, or a cross-eyed version that swaps the roles of near and far.
