Interactive 360 Degree Circuit Documentation

25 September, 2010

One of the classic problems in documenting physical computing projects is taking pictures of the circuits that actually allow you to tell where things were plugged in. Even with a good camera and adequate lighting all the crossing wires can get confusing very quickly. Here's a case in point, picked nearly at random from a rich set of options in my own Flickr stream:

Arduino MIDI solenoid snare drum

Recently, the ITP pcomp site switched to Fritzing diagrams instead of top-down photos to document its circuits out of an attempt to avoid just this problem. Here's an example from the transistor lab:

While this is obviously much clearer, it can take quite a while to put together a Fritzing diagram for a circuit. And further, there's nothing that guarantees that your diagram will correspond with the circuit you actually built and got working. There's nothing like a photograph for documenting what was actually plugged into your breadboard and arduino for those few minutes that your project was working correctly.

This week Rune Madsen, Zeven Rodriguez, and I set out to do something about this quandry: to figure out a system for documenting circuits that provided the ease, immediacy, and realism of photography with the clarity of something like a Fritzing diagram.

We were inspired towards a possible solution by Apple's HTML5 360 degree demo. Having the ability to rotate around a photographic image like this eliminates the problems of a traditional photograph. Can't tell what pins those wires go into? Just rotate the image around until the pins are in the foreground and get a better view.

So, our goal became: how to make it super easy for students to create these kinds of interactive 360 views? After some discussion with Jeff Howard we hit upon the idea of sticking the circuit on a thrust bearing (i.e. a lazy susan) and then shooting a short piece of video while revolving the bearing with a stepper motor. Then, all we'd have to do to create the 360 interface would be to scrub the video forward and back with the horizontal position of the mouse.

After some experimenting, we were able to create a prototype that proved the idea would work. Instead of a stepper motor, we just had Zeven smoothly rotating the bearing and we prototyped the interface in Open Frameworks. Here was the result (keep an eye on the cursor to get a sense of the interaction):

Arduino 360 Rotate UI test from Rune Madsen on Vimeo.

The screen capture makes the results seem a lot jerkier than they were; the effect actually worked quite smoothly.

Our next step will be to experiment with the HTML5 video tag and ways of controlling it with javascript so we can reproduce this effect in a webpage. After that, we'll work on automating the process by adding a motor to the thrust bearing as well as creating a good lighting setup and backdrop. Eventually we want to experiment with the idea of adding annotations as well so you'd be able to click around and indicate, for example, one of the circuit's components which would then cause a floating label to rotate around with the component as the user spun things around.

I'll report back on progress on all of these axes as we make it. In the meantime, if anyone knows a anything about the video tag or about javascript libraries for interacting with it, please do drop a line in the comments.