Autostereograms in JavaScript

Posted at 8:07 pm on November 7th, 2010

Filed in:

Autostereograms have interested me since the mid-’90s, and they were the first thing I thought of trying to do when Apple introduced the HTML Canvas element with Safari.

How many years has it been? I finally wrote it: an Online Autostereogram Builder in JavaScript.

The part that actually builds the image was remarkably simple, but I guess that’s easy for me to say, since the algorithm isn’t mine. I ported it from William Andrew Steer’s C program here.

The UI gave me a chance to play with HTML 5’s local file access. In Firefox and Google Chrome, you can import your depth map and texture by dragging the files directly onto the page. In Safari, you’ll have to put your images online and enter the URLs. It won’t work at all in Internet Explorer. No canvas, and data URIs are limited to 32KB. I haven’t tried Opera.

Chrome is the fastest browser at producing the final image. On my computer, using the default autostereogram settings, and the example images, Chrome takes about 0.4 seconds. Safari is half as fast, taking about 0.8 seconds on average. Firefox just crawls along, finishing only after 8 whole seconds. I’m curious why, and I’d love to promise that I’ll investigate, but let’s be honest: speed optimizations are probably not something I’m going to get around to. I suspect array access is the culprit, but I haven’t tested that hypothesis.

Instead, I’m already spending the time I could be wasting on speed optimizations, writing an online pattern designer. Look for that in March of 2017.

Leave a Comment

  • Formatting
    • No HTML. Any code you enter will display as that code.
    • If you are putting code in your reply in order to present the code itself, you can use these special HTML comments for formatting:
      Inline: <!--code-->...<!--/code-->
      Block: <!--pre-->...<!--/pre-->

© Thomas Peri