Inspired by this guy, I just got a fresh batch of business cards from moo.com. There’s not really enough space on a business card to explain yourself in any detail so I thought I’d extend it using augmented reality. I recorded a short video bio and created a 3D grid of coloured planes. These planes are updated with the colours from the video and extruded depending on the level of brightness.
***EDIT***
This is now online for all to enjoy. First print out this (or open it on you’re phone). Then go here to play with it.
***EDIT 2***
Mac users with iSight camera who are experiencing a black screen might be able to get around this by Following these steps:
Right click on the app and select settings. Then click on the camera tab. There should be a drop-down menu. Select USB Camera.
Failing that apparantly it won’t work if you have any other apps that use the iSight open at the same time, so close PhotoBooth, Quicktime etc.
Thanks to JereDog and Bish for these workarounds.
***EDIT 3***
I’m using the following AS3 libraries in this project
FLARToolkit
FLARManager
Papervision The new version now uses the FP10 native 3D capabilities
TweenMax
***EDIT 4***
I’ve temporarily had to take the application down as I’ve had a huge amount of traffic which will undoubtedly cost a horrendous amount of money. Check back next week when things have calmed down a bit.
***EDIT 5***
OK the application is back up now. Big thanks to my agency Skive who are hosting it until the madness subsides.
***EDIT 6***
I’ve made quite a few changes to the applciation recently. The main change is that it no longer uses Papervision but is now run using the new Flash Player 10 3D capabilities. This has sped things up slightly. The app is now built using the PureMVC framework. There are also many optimisations and tweaks to make the app behave faster and better. If you click the link above it will now open the new version.
Wow! Did you know about our little video competition?
http://www.moo.com/blog/2009/06/03/life-as-a-graphic-designer-maestro-the-music-please/
Just thought I should mention it – it’s a great video
Hey James, really cool,
I was thinking too in this class of implementation.
I would like to make experiment in this way with video, do you can give me ein paar links about video and PV3D.
Thanks in advance and cool for shared it.
Best,
Guillermo
@Denise – thanks for letting me know. I’ve submitted it.
@Guillermo – there are plenty of tutorials here:
http://papervision2.com/
but more specifically if you are interested in working with 3D and video there is plenty of info on testures here:
http://www.insideria.com/2008/05/textures-wireframe-bitmap-movi-1.html
Compared to your inspiration (the business card guy) you are in a different league. Love your video!
somehow the demonstration doesn’t work for me. Although it asks for access to my webcam, the webcam doesn’t activate and the screen stays black. any suggestions ?
@Madcom Thanks very much although the business card guy is in a league of/on his own.
@Steffen It works fine for me on every computer I’ve tried it on. What webcam do you have? And are you able to use other flash applications that access the webcam?
Hey James, that’s super cool. It’s great to see such implementations with flash.
Great work.
Cheers,
Bhavik
This was incredible. I’ve seen AR posted about recently and never quite understood it, but this was a fantastic example. Thanks!
James,
You should turn this into a side business for folks wanting AR business cards and make a killing. Your first customer should be the ‘business card guy’. Your second can be me. Great, practical application of AR.
Regards,
Rob T.
That’s so cool! I’d love to build something like that too!
Amazing demo. Well done.
But like Steffen, I’m not able to view the working demo. I’m on a 24″ intel iMac (with a built-in iSight cam), and have been able to use other AR demos using my webcam in the past. I (and my coworker with a similar setup) only get as far as the ‘allow” dialog, and then am shown a black swf.
Thought you should know.
TRULY INSPIRING.
camera does not work for me either. it asks for camera permission – then just goes black once you click Allow.
same problem as Delaney
Thanks for the great comments guys
@rt Thanks mate. if you’re serious, email me on me@jamesalliban.co.uk
@Nasdaf Are you also using a mac with the built-in iSight? If its a mac problem There’s not a great deal I can do about it as I don’t have regular access to a mac.
This is incredible! I’m just learning ActionScript and Flash right now. I never would have thought of something like this as an application for Flash! Simply incredible!
As far as the cam not working: I have a MacBook. When I started the app it initially went to black as well. Right click on the app and select settings. Then click on the camera tab. There should be a drop-down menu. I got my iSight Cam to work by selecting USB Camera. I hope that helps.
Now what you need to do is to use a QR code as the pattern that’s tracked instead of that random symbol. You could possibly have a custom augmented reality message depending on which business card you’d handed out. Or they could use a QR reader to find the website that has the flash. Although I don’t know that many people who have QR-reading software on their laptops, I suppose that’s more of a phone thing, and even at that it’s still pretty rare. Although combining the two could open up a bunch of possibilities.
Thanks JereDog. I’ve added that to the post.
Good work!
Well, you beat me to it damn it! I’m still working on my AR business card so I’ll just have to do something more ambitious now – just to make it worthy
Nicely done – a good use of AR for self-promotion and adding life to the business card (the reason I’m developing something like this for mine too). I do like the depth you’ve added by extruding the planes!
I need know how can i create a business card like this .
please send-me information about where i can get more information, developertools, library and all i need to create this
regards
@Denilson As long as you don’t straight copy it
It’s a Flash appliaction I build using FDT. I’m using the following libraries:
FLARToolkit
FLARManager
Papervision
TweenMax
Have you used Flash before? Or done any programming? If not you might find it a bit tricky for your first project.
Any chance you will be sending/giving away/selling any of these cards? I just printed the image out to test it, awesome!
So I wanted to try this out, but i was a little lazy and skipped the step of priniting out the boarder. Instead I just took a picture of it with my iPhone and it still worked!
Very cool!
@Delaney I have it working on 24″ iMac with internal cam. I got the black screen first, but if you go into the flash settings (right click the black square) I had to change the camera it defaulted to.
This is unbelievably impressive, you could make a real killing with a business of selling these things I would definitely buy a couple hundred. There are some phenomenal UK business card makers, you would instantly become the best. BRILLIANT!
Cheers
Bryan
Truly awesome stuff, just got to steal your concept and learn how to make my own now!
Other Mac users note – it won’t work if you have any other apps that use the iSight open at the same time, so close PhotoBooth, Quicktime etc. That ought to get it working.
You don’t really need to print it out… just visit the page on an iphone etc and point it at your isight. Interesting idea, well executed.
Ummm – looks interesting. But I don’t understand how this works at all. How is pointing a black and white picture at an iSight that’s not powered up going to make a video pop up? Where is the video embedded?
please make in available again
Blimey, good work sir!
@Bish Thanks for the tip. I’ve put that in the post.
@cinemec Thanks I’ll put that in the post too
@Curt Its called augmentd reality – more info here – http://en.wikipedia.org/wiki/Augmented_reality
@Paddy Sorry mate but I had to do it. Check back in a few days time when this madness dies down a bit
@Neale Cheers mate. Good to hear from you.
please put the download up again soon! It looks really cool.
OK guys that link is up again.
http://www.virtuosoarts.com. The site http://virtuosoarts.ning.com/ will be re routed soon. I was wondering if you could volunteer some of your time to the cause? Anything you can do to help will and be greatly appreciated. I know the basics about AR and am hoping to make virtuoso art’s a houshold name for AR in the future. You can take and hold whatever term you want “Chief Editor” or something like that if it pertains to what you are doing? Im not sure im just starting out =). I think this website is a good opportunity to give the AR community a place to go. As you can see the site will contain blogs, chat, forum, events, photos, video’s and all sorts of other things. Please e-mail me back with your opinion and help spread the word!
Thank You for your time,
-Johnny, Mr. Virtuoso Art’s
Hi James,
Wow, that is so cool! Would you like to make a video for my band?
http://genadry.com/colour-noise/colour-noise-videos
Please can you contact me!!!
Thank you!
Gena
Hi
I am a director / writer for TV & theatre and am currently costing a proposal for the Soho Theatre. They are interested in one of my blue tooth propogated multi media shows using actors placed around a location.Was really impressed with your stuff.Please send me an e mail with your contact details if you are interested.
Best,
Charles
That is amazing and such a great idea. Can’t wait till they are cheap enough for us to get a box of 250 for a good price.
You need to build an app so if someone hands me a card like this, I can just point the iPhone camera at it and get the video on my iPhone screen. And I suppose you’ll have to put some bar code type thing in the square picture on the cards so that it automatically finds the correct video for that card.
Really cool idea, man! I look forward to seeing it at full functionality and effectiveness. Bless!
Really cool! I post you video in my blog.
WOw.. it working yeah its working….
it works for me, very nice!! how can i make my own card with AR? can you show by a tutorial, step by step? or send me link with tutorial. i use mac and want to use a simple video from potobooth. sorry for my english.
Kamu mang benar
that is sooooo sexy
Very cool …. Thanks
Hi,
It is really cool and interesting and works well for me.
Thanks again.
yeshhh It’s very exsited. How it work?
can you tell me?
technique? Not code
pls.
i want technique for my siminar.
@Technicial>>computer There should be enough info in the post. I should be doing a tutorial on how to build it over the comming months.
Wow, that’s a really awesome effect you’ve got going there. I would love to learn how to do stuff like this.
When SWF loads it crashes all the browser.
(http://go2.wordpress.com/?id=725X1342&site=jamesalliban.wordpress.com&url=http%3A%2F%2Faugmatic.co.uk%2Fprojects%2Far_bus_card%2Farbus.html)
It doesn’t work. What am I making wrong?
sorry! It was due to the Flash Player Privacy Settings and some capture device drivers not supported by Flash Player
Very neat! I’m too lazy to turn my printer on so just drew the basic shape with a marker on a piece of paper. High tech.
Yes….I Like post you,.,
Hi James,
This is real great stuffs. I have been looking at markerless stuffs that are happening with other program but not flash as far as I know. Is there anything happening with flash that it could detect picture instead of marker (like http://www.metaio.com)? Just wondering if i missed anything. Also with the marker, what’s the smallest size can you make out of it as my design would be dependent by that. Also can i have my marker design on black background and white marker just invert color or other color? Please advice me. Thanks very much in advance.
-Robert
Hi Robert. Look at the Flare lib by imagination.at. The red bulletin magazine application was made using it. 5cm is the lowest marker size I recommend. You can invert the marker colours. Lee Brimelow did a tutorial on gotoandlearn.com. I tried it and found it wasn’t as effective though.
Best of luck