Real Drawing to Augmented Reality

Augmented reality may prove to just be a flash in the pan trend in the Flash world, but let’s face it – it’s fun. So, that in mind, here’s a little something I was just fiddling around with: a small app that takes an actual drawing (as in pen and paper – you know – analog) and converts it into a 3d augmented reality thingamajig.

To give it a try below:

• Print out this marker (ignore the left hand / right hand bs. That was for another project and I was too lazy to create a new marker image).
• Make a small drawing on a piece of paper. You can use colours, but keep the contrast as high as possible (a black drawing on white paper will work best, but not be very interesting).
• Double click on the app below and allow webcam access. Hold your drawing up so that it fits nicely into the red square then hit the space bar.
• When the app tells you to, put down your drawing and hold up the marker you printed out to see your work of art hover in 3 dimensions in front of your face.
• Be amazed…
• If you don’t want to go through all that hassle, just check out the demo video down below using a picture of a scary Halloween jack-o-lantern I drew with my wife’s crayons (shhh.. don’t tell her I got ’em).

[kml_flashembed fversion=”9.0.0″ movie=”http://blog.onebyonedesign.com/wp-content/uploads/2009/10/drawtoar.swf” targetclass=”flashmovie” publishmethod=”static” width=”640″ height=”480″]

[/kml_flashembed]

Demo:

[kml_flashembed fversion=”10.0.0″ movie=”http://blog.onebyonedesign.com/wp-content/uploads/2009/10/d2arvid.swf” targetclass=”flashmovie” publishmethod=”static” width=”320″ height=”280″]

[/kml_flashembed]

THE GEEK SHITE:

For anyone interested, here’s what’s going on under the hood. When you hit the space bar, the app takes two quick pics: one “what you see is what you get”, the other, 100% black and white contrast using Quasimondo’s handy “automated threshold and edge detection” gadgetry. The white in the black and white image is converted to alpha (felt like I was coding like a caveman at this point – looping through the vector of pixel values and replacing each white pixel with a transparent pixel, one by one. If anyone knows a quicker/smarter way of converting white pixels to transparent in BitmapData, please post a solution). The alpha channel of the black and white image is then copied to the color image. A Bitmap instance is created from that BitmapData and then passed on to an image extruder like I rambled on about here. That 3d object is then passed on to a Papervision3d/FLAR scene and that’s that. Fun stuff.