Magic Eye
look past the screen
Magic Eye
What it is
Magic Eye posters were everywhere in the 1990s: a page of coloured noise that turns into a floating 3D shape once you relax your eyes and look past the screen. This is one generated live in the browser rather than printed - a single-image stereogram, or autostereogram, built from a depth map you can swap, and paint on, while you are looking at it. It renders at device resolution up to a budget of 1.5 million pixels, so the grain is per pixel on a phone as well as a laptop.
The solver is the algorithm from Thimbleby, Inglis and Witten's 1994 paper on single-image random dot stereograms. For each pixel in a row, the depth z there fixes the stereo separation s(z) = (1 - uz)E / (2 - uz), with u = 1/3: the distance between the two points on screen that your two eyes must fuse to see that point in space. Those two pixels are therefore constrained to be the same colour. A hidden-surface test throws away any link whose sightline is blocked by nearer geometry, so a steep edge does not smear. The constraints are merged into a same[] array and resolved in a single right-to-left sweep, and only the rightmost pixel of each chain - the root - gets a free colour. Over flat background the roots land exactly one separation apart, which is why colouring them from a seamless strip one background separation wide tiles the whole poster into 90s wallpaper instead of TV static.
Four hidden shapes ship: a sphere hovering over a rippled floor, a ripple, a torus, and the word MONTE, which is rasterised to an offscreen canvas and box-blurred three times so the blurred edge becomes a chamfer. Dragging on the poster paints depth with a soft round brush - Raise pushes the surface toward you, Lower away - and only the rows the stroke actually touched are re-linked, so sculpting stays interactive rather than rebuilding the frame. There are three wallpapers: blobs and marble veins are generated from fractal value noise made seamless in x, and the third is plain random dots. All of them are inked from a palette walked around the hue wheel from the site's own accent colour, so the poster is re-inked when you change the theme.
Not everyone can fuse a stereogram, so Reveal exists: it crossfades to the same depth map shaded as a lit relief, Lambert against the gradient of the height field, which is the shape you were meant to see - and it is also the view your brush strokes show up in. Two dots sit above the image exactly one background separation apart; when relaxing your eyes turns them into three, you are converged at the right distance and the shape lifts out. Cross-eyed flips the depth sign for people who fuse the other way, and Drift slides the strip phase slowly so the shape appears to hover. It is all one 2D canvas - no WebGL and no rendering libraries - and unless Drift is running, the frame is redrawn only when the depth, the texture or the theme changes.
How to use it
- Relax your eyes past the screen until the two dots above merge into three.
- Swap the hidden shape: Sphere, Ripple, Torus or MONTE.
- Drag on the poster to sculpt your own depth - Raise toward you, Lower away.
- Cycle the wallpaper with Blobs / Marble / Dots; Drift slides it slowly.
- Hit Reveal to see the depth map as a lit relief, or Cross-eyed to flip it.
More experiments
- Chladni Plate — canvas, physics, simulation
- Marble Ink — canvas, generative, computational-geometry
- Two Lights — canvas, colour, illusion