When I was a child, I can remember looking through a chain-link fence in the backyard and suddenly noticing it appeared weird. I found it fascinating, but didn’t know at the time what was occurring. Years later, I learned about autostereograms and realised that what was happening back then, was a convergence of repeated link patterns to form a 3d image. I must have inadvertently reduced my focal point to a distance closer than the actual fence. This can be reproduced using the attached image. By looking at it and slowly going cross-eyed until the links on the left merge with those on the right, a 3d version of the image will become visible. The metal wires will appear shinier than usual.

In the 90s, autostereograms became very popular and were produced as 2D art in books such as Magic Eye. These are based on the same principle of going partially cross-eyed to visually merge patterns. Once the patterns are sufficiently merged, a hidden image becomes visible. The images are produced by the use of ‘depth-maps’. These are grey-scale shapes or objects that resulted in a cut-out effect within the computer generated patterns, giving the appearance of an added dimension of depth.

Below is a JavaScript version using the same technique. The depth-map can be seen below the pattern as a series of small shapes on the right hand side. These are the shapes that will appear as different levels of depth within the image.

Clicking on the ‘Regenerate’ button or resizing the browser window will produce a new autostereogram and associated depth-map.

Note: Please refrain from continued attempts at this if you find it causes headaches or adversely affects vision.

The pattern below is randomly generated.
Use the Regenerate button below (or resize your browser) to produce a new image.
This text is displayed if your browser does not support HTML5 Canvas.

Autostereogram Credits:
I take no credit for the autostereograms produced on this page apart from a a few minor code changes to handle canvas resizing and the small depth-map image. Full credit goes to Ian Pearce and the code is released under the MIT Licence. Full source code and further information can be found on GitHub at https://github.com/peeinears/MagicEye.js