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).
Demo:
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.
You should be able to easily use the “threshold” function for BitmapData to convert pixels to any color you like. The following will copy all non-white pixels to a blank BitmapData (you could then do your copyChannel if you like)
targetBitmapData.threshold(sourceBitmapData, sourceBitmapData.rect, new Point(0,0), “==”, 0xFFFFFFFF, 0x00FFFFFF, 0xFFFFFFFF, true);
Beautiful, Tom. Thank you for that. Threshold didn’t even occur to me – I was thinking maybe floodFill., but threshold would be better.
Very cool techn. it it possible to have a look at the source, would be cool to get a little bit wiser on AR??
[...] AR Simulator – http://blog.onebyonedesign.com/actionscript/real-drawing-to-augmented-reality/ [...]
RSS feed for comments on this post. / TrackBack URI