Wiggle stereoscopy – a new approach

1. Introduction

If you’re never come across Wiggle Stereoscopy before, you should go straight over to Jim Gasperini’s web site. I first came across his images via BoingBoing a couple of years ago, but was reminded of it the other day by a link on Blog-Fu.

The technique gives an illusion of 3D by showing two images in rapid alternation: one from a left eye, and one from a right-eye perspective. Essentially it is separating the two pictures in time instead of space as is normally the case. You don’t need to wear special glasses to see the effect, and the illusion of dimensionality can be quite striking.

All of the 3D wiggle images I’ve seen on the web have either been animated GIFs, or Flash movies. These techniques have some disadvantages, though: animated GIFs are limited to a 256-colour palette, and using GIF compression for photos can result in large file sizes. Also, you need special programs to produce animated GIFs and Flash movies–you can’t just use plain ol’ Microsoft Paint.

However, I have come up with a new technique for showing wiggle stereograms on web pages, using only standard JPEG images, and a little sprinkling of Javascript. Using JPEGs gets around all of the limitations noted above, although it does introduce a few of its own. See for yourself if you think it’s worthwhile.

2. Wiggle it…with Javascript

The first step is to obtain a stereoscopic pair of photographs: two pictures of the same subject, taken a couple of inches apart. (I’ll describe how to make such a pair of photos with an ordinary digital camera in section 3.)

Alex image: right eye  Alex image: left eye

Next, using any graphics program you like, stitch these two pictures together side-by-side in a composite image of the same height, but exactly twice as wide as the originals. Then save this as a JPEG file.

Stitching two images together

In your web page, reference the composite image as you would any other picture, but give it a class attribute of “wiggle”:

<img src="http://www.sunpig.com/martin/images/2005/12/wiggle-alex-composite.jpg" class="wiggle" alt="Alex stereogram" />

Next, download the script file wiggle.js (version 1.2), and reference it in the head of your web page:

<title>Wiggly example<title>
<link rel="stylesheet" type="text/css" href="css/styles-site.css" />
<script language="javascript" type="text/javascript" src="js/wiggle.js"><script>

When executed, the wiggle script runs through the web page looking for images with the “wiggle” class. If it finds any, it replaces each one with a <div> element that is exactly half as wide as the composite image. It then uses the composite image as the background image for the <div>, so that you only see one half:

Replacing the composite image with a div

To perform the animation, the script simply switches the position of the background image every 120 milliseconds so that the visible part becomes hidden, and vice versa. (I chose 120 milliseconds because watching the effect at this speed felt right to me. There is no special significance to this frequency.)

Toggling the background image position

Assuming you have Javascript enabled in your browser, the finished product looks like this:

Alex in 3D!

Update (27 Dec 2005): Because of some problems with how Internet Explorer deals with background images, I have changed the underlying code slightly. Using the script is still just a matter of dropping it into your HTML page as described above, though. The new version (1.2) is available here.

The advantages of this method over using animated GIFs or Flash movies are:

  • No additional software required. Any image program that produces JPEGs will do.
  • You can use a full colour palette.
  • The file size will generally be smaller than the equivalent animated GIF. How much smaller depends on the compression settings you apply to the composite JPEG.

The disadvantages are:

  • It is Javascript-dependent. Without Javascript, you will just see the composite image, not the animation. This means that you won’t see the animation show up in any RSS feeds. Also, although I’ve tested it on modern versions of Firefox, IE, Opera, and Safari, the script will inevitably be incompatible with some browsers.
  • If there are lots of animations on the page, of if your browser is taking up a lot of memory and/or CPU time doing other things, the animation may judder.
  • Depending on your connection speed, you may see the composite images before the script kicks in and converts them to animations. There are ways around this, but for the benefit of simplicity, I’m presenting the wiggle script just the way it is.

Whether this trade-off is worth it, is up to you.

3. Some notes on taking stereoscopic pictures

It doesn’t take much hunting around on the web to find custom 3D camera solutions that you can either buy or build yourself. The traditional cheap-ass, lo-fi alternative is to find a stable resting point, and move your camera a couple of inches between snaps. However, if you have a camera with a high-speed continuous shooting mode, you have yet another option: hold the shutter button down, and let the camera take a stream of pictures while you gently move sideways.

The sideways slide

Better, though, is to move the camera in a slight arc, so that you keep a central point in focus:

The curved sideways slide

In ultra-high-speed continuous shooting mode, our Konica Minolta A200 takes 10 frames per second at a resolution of 640 x 480 (for up to 4 seconds). This produces up to 39 pairs of images (more if you also consider non-adjacent pictures), and often some of them are suitable for using as stereoscopic pairs. It’s not a particularly reliable method, but it’s an option. It can be quite useful if you’re trying to photograph moving targets (e.g. children) that are likely to zip half-way around the room in the time it takes you to reposition your camera for a second shot.

Keeping the camera moving in a graceful horizontal curve with no vertical travel is the really hard part. I’ve found that I get a steadier stream of images if I put the camera strap around my neck, and hold the camera out with both hands until the strap is taut: this stabilises the camera by anchoring it to my body, rather than just relying on my shaky hands.

Whichever method you use for getting your stereoscopic pairs, here’s a tip for producing images with the most striking 3D effect with the Wiggle technique. Try to capture a scene with three layers: foreground, centre, and background.

In the diagram below, points A and B are in the foreground, C is at the centre, and D and E are in the background.

Capturing a scene: foreground, background, and centre

When taking your pictures, try to angle the camera so that the central point stays fixed at the centre of the image:

Capturing a scene: holding the centre fixed

By keeping the central point fixed, the foreground and background points will be parallax-shifted in opposite directions: the background will appear to have moved from left to right, and the foreground will appear to have moved from right to left.

Capturing a scene: parallax effects

In the image below, the trees and fence are in the background, the white rose is in the foreground, and the dying fuchsia bush is at the central point:

Our back garden

Having the foreground and background move in opposite directions seems to be key to the visual effect: your brain somehow perceives this as “correct”, and compensates appropriately for the lack of real dimensionality. Also, an object at the central point provides an “anchor” for the entire image. Stereoscopic pairs where the central point is unoccupied (even though, geometrically, it is still present in the picture) don’t seem to be quite as vivid.

4. Wrapping it up

I’ve had great fun playing with this technique over the weekend. I hope I’ve shown that producing this neato 3D effect can be done with nothing more than a digital camera and the basic graphics programs that are (most likely) built in to your computer’s operating system. If you decide to play about with it yourself, leave a comment below so I can come and have a look at your pictures!

New Apple gear

  • New iMac, with built-in iSight camera, media centre features, and a remote control. Yum.
  • iTunes 6, with video store. Buy music videos, films, and TV shows–presumably all at an iPod-appropriate resolution (320 x 240). (Can it rip DVDs, though, is the big question? I’m in the process of installing now to find out…) Whatever–yum.
  • New iPods WITH VIDEO. 30GB and 60GB models. YUM YUM YUM.

new iPod with video

I’ve had my Mac Mini for a month now, and I’m liking it enough to say that I could definitely see myself buying another Mac in the future. But the iPod video? HOLY CRAP I WANT ONE NOW.

(Probably not, though, with my birthday and Christmas not too far away. Hi, Abi! I love you honey!)

Updates 12 Oct at 20:57 :

  • It looks like the UK iTunes Music Store is lagging somewhat behind the US one…the selection of music videos on offer for purchase is slim, and there appear to be no TV shows on offer–yet.
  • Music videos also appear to be more expensive in the UK vis-a-vis the American store, as compared to music tracks. (£1.89 / $1.99 for a music video as opposed to £0.79 / $0.99 for a song.)
  • You need Quicktime 7.0.3 to play purchased tracks, but Apple hasn’t made this available from their Software Update site yet. (It’s there now.)
  • I can’t see any option to rip DVD movies directly into iTunes, and thence onto the iPod. (Maybe this will be available with QT 7.0.3? Or will you need something like Quicktime Pro to do the encoding? Hmm. Seems like they’re missing an integration trick here.)

Just cruisin’

Not doing much work on the Mac Mini right now. I’m mostly doing some much-needed maintenance on my archive files and backups: reorganizing folders, deleting duplicates, burning DVDs, that sort of thing. Boring, but it’s laying the groundwork for sharing my iTunes and iPhoto libraries between Mac and PC, and that automatic nightly backups will run smoothly. Gotta have the backups.

I’ve also been playing a little Ratchet & Clank 3. I never finished the game last year, and with R&ampC 4 due out soon, that’s an oversight that just has to be remedied. I haven’t done much gaing in ages, and I’m finding it a nice break from incessantly worrying away at the computers.

Mac Switching update, Sun 25 Sep

I’ve been using the tutorial at MacZealots.com as a guide to getting Movable Type up and running on the Mac Mini. I’ve deviated from their setup by using MySQL as the backend database, though.

To make this work, you need a few Perl packages that aren’t installed as standard with OS X Tiger, such as DBI and DBD::MySQL. You can download these packages from CPAN (or use the cpan command-line tool), but installing them doesn’t work straight-away because Tiger doesn’t have make or a gcc compiler available by default. You get these by installing the “Developer Tools” from the Tiger install disks: pop in the first installation disk, go to the folder “Xcode Tools” and install the package XcodeTools.mpkg.

It’s all one big long chain of dependencies…

Mac Switching update, Sat 24 Sep

I finally figured out the biggest problem I was having with the MS Digital Media Pro keyboard: it was the positioning of the Zoom Slider just to the left of the keys. What it touted as a useful feature, was actually destroying my ability to type properly.

You see, on a normal keyboard, the resting position for my left hand has my pinkie and ring finger touching the side of the keyboard. My middle finger rests on the tab key, my index finger on or near the letter A, and my thumb on the Alt. With the Zoom Slider taking up about an inch of space, my left hand’s resting position was thrown off-balance, and suddenly my left fingers start striking keys off-center, and picking up the wrong keys altogether. Not good.

Luckily for me, Alan has given me a loan of an old MS Internet Pro keyboard he had sitting around in his garage, which is identical in layout (and feel!) to my old MS Internet (not Pro) keyboard, but with the added goodness of a USB connection. It didn’t quite work straight away:

  • The underlying keyboard layout must be slightly different from the MS Digital Media Pro, and so the .rsrc file I’d downloaded from Phil Gyford to remap keys didn’t work completely any more (some keys were still correctly mapped, byt the # and ~ had reverted). So I spent some time with Ukelele to create a new .keylayout XML file, and it does the job nicely.
  • The version of the MS Intellitype software I have (5.1?) isn’t fully backwards-compatible with this keyboard, and won’t toggle the Windows/Alt key mappings to match the Apple-standard layout. Fortunately Tiger has this option built-in to its own keyboard settings: just go to System Preferences -> Keyboard & Mouse -> Modifier Keys, and switch them around there.

So keyboard-wise, I think I’m finally all sorted.

Other stuff:

  • Now that I’ve been working with it for a week or so, I feel confident saying that the Mini (PowerPC G4 1.42GHz / 512MB / Radeon 9200) is definitely slower than my PC (Athlon 2500+ / 1GB / Radeon 9600 in the PC). At first I wasn’t sure if it was just the strageness of it all, but I think I’m over that now. Web pages load take more time to render, photos take more time to display. With the difference in CPU architecture, I wasn’t really sure what to expect, but I guessed that the Mini wouldn’t be as fast. Maybe giving it 1GB of memory instead of 512MB might make a difference, but I’m not really all that bothered, because it’s fast enough–at least, for now.
  • I’m still flipping back and forth between browsers. Safari seems to be faster than Firefox, but it doesn’t have all the Firefox extensions I am used to. Same for Camino, but with the added disadvantage that it doesn’t ask for confirmation when closing down multiple open tabs. (If anyone knows how to turn that alert on…let me know.) I haven’t given Opera a proper shake yet, but I’ll give it more of a try soon.
  • File transfers between the Mini and the PC over our wireless network (54G) are ridiculously slow. 64MB in 20 minutes is 54 kilobytes per second, not megabits. Rebooting the router temporarily brings everything back up to full speed, but that’s a stupid solution. PC-PC transfers over the network are unaffected, and as fast as they always have been. However, even if I can get the wireless connection working properly, I could do much better with a direct Mac-PC connection over Firewire. I hadn’t known that Firewire supports direct TCP/IP connections without the need for a router, but it does. That’s very cool, and will probably lead me to get a firewire hub, seeing as the Mini only has a single port.

Oh, and the Mini has acquired a proper name: Miles. My PC is called Frankenstein, or just Frank for short, because it was originally assembled from spare parts way back in 1995, and has been in continuous operation since then. (There isn’t a single original component left, though.) Abi’s laptop is called Clank, after the Ratchet & Clank videogame. “Miles” is a reference to Miles Vorkosigan, the diminutive hero of Lois McMaster Bujold’s Barrayar books. It’s a size thing.

Mac Switching update, Thu 22 Sep

  • I’m having trouble using MySQL Administrator to back up a remote database. I can specify all the backup options, and select the tables I want to grab, but it quits on me as soon as I try to actually start the backup.
  • I’m also having trouble using MySQL Administrator to restore a backup to my local instance. It just fails to open the .sql file with a non-informative “Error loading backup file”…
  • …and it won’t let me save the password for a connection…
  • …and it won’t let me save changes to any users after their initial creation…
  • …and overall, I’m coming to the conclusion that MySQL Administrator, despite looking gorgeous, is actually a pile of crap. I don’t mind doing all of my db admin from a command line; I just prefer not to. I’m open to the possibility that there’s just something fundamentally wrong with the way I’ve got MySQL Administrator (1.1.0) installed, but MySQL itself (4.1.14) is running perfectly.
  • I’ve installed Password Gorilla as a password management system. Main reason: it’s compatible with Password Safe for Windows, which is what I normally use. It does the job, but not spectacularly. Password Safe isn’t a particularly elegant app, but Password Gorilla makes it look like the belle of the ball. If you happen to know of any alternative password management utilities, let me know.
  • Minor note for the benefit of Google: After installing Password Gorilla according to the instructions, double-clicking the gorilla-1.2.kit file didn’t work. The Mac Mini’s installation of OS X Tiger comes with a 30-day trial of MS Office, and it Excel had already grabbed the .kit file association for itself. The way I got it working was to re-map the association to Launcher, an application that comes with the Tcl/Tk framework that is a prerequisite for Password Gorilla. (Right-click on the .kit file, and select “Open with”. Launcher sits in /Applications/Utilities)