AR Particle Beam

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to FurlAdd to Newsvine

So I thought it was about time I jumped on the augmented reality bandwagon. Rather than the obligitory 3D model I decided to make something a little different. I’ve used 3D lighting techniques and physics here to create this beam of light surrounded by strange celestial light particles.

If you would like to interact with it, first download and print out the marker here then go here for a live demo.

Big thanks to a few people. First and foremost Saqoosha, the clever chap who created the FLARToolkit library, a port of the C++ library ARToolkit. Mikko Haapoja for providing a fantastic introduction to using FLARToolkit. Eric Socolofsky for building the framework FLARManager which makes working with FLARToolkit a sinch.

Incidentaly while making this, John Lindquist started an augmented reality competition on the Papervision forum. I’ve decided to enter it (hence the Papervision Logo on my marker – rules of the comp, not sucking up) so please feel free to vote for me on the forum. :)

For those of you who are interested, you can download the source code here. It’s an FDT project but it shouldn’t be too difficult to convert it over to your favourite development environment.

**** UPDATE ****
Kristin Rohleder has written a Flex version of this application and kindly given it to me to share with whoever wants it. He’s used the latest version of FlarManager and TimelineMax for the animation so the performance is probably far better.

You can download the project here.

About these ads

70 Responses to “AR Particle Beam”


  1. 1 Mikko April 15, 2009 at 2:45 pm

    GJ dude. This for that FlarToolkit contest? Wish I woulda had some time to do something.

  2. 2 jamesalliban April 15, 2009 at 7:28 pm

    Thanks Mikko. And thanks again for your great tutorials and source code.

  3. 5 neelz April 22, 2009 at 8:57 am

    iam sorry, I dont get your source to work, not even in FDT!Proberly Iam too stupid :P but maybe you can upload it as an flashdevelope project or just for the normal flash environment…although its very nice!

  4. 6 jamesalliban April 22, 2009 at 4:47 pm

    Sorry but I’ve never used Flash Develop. With regards to Setting it up in Flash, I think you just need to remove the embed tag in App.as and use this as your document class. You also might have to download the various libraries I’ve used as Im not sure I’ve included them. They are FlarToolkit + Papervision (obviously), FLARManager and TweenMax.

  5. 7 Maudi April 23, 2009 at 11:26 am

    Hello, I’ve downloaded your source code.
    I’ve also installed FDT 3 on my pc.

    When I open .project file, I can only see project name, build name, natures and link resources. So how actually can I compile your file and test on my pc?

    P/S: I’ve never work on FDT before.

  6. 8 jamesalliban April 23, 2009 at 11:44 am

    Hi Maudi. Thanks for your interest in my work. Although FDT is the best Actionscript development environment available, it can be quite a process for new users to setup properly. I would suggest looking through the documentation:

    http://fdt.powerflasher.com/blog/wp-content/fdtuserguide.pdf

    I’m using ANT and the Flex 4 SDK to compile the project.

    Alternatively, if you’re using Flex, it shouldn’t be too dificult to set it up as an actionscript project (I don’t use Flex so can’t help you here).

  7. 9 specal faece April 24, 2009 at 10:22 am

    i like magic light from hand glow!

    you are wizard!

  8. 10 almog koren April 27, 2009 at 6:59 pm

    Hi James, this is very cool I download your source but really couldn’t understand anything I am using Saqoosha’s start kit so working with your source is a bit different any chance of getting some help. I am trying to get the trails to load with my base node. I think once I get that down then I should be good to go.
    Thanks
    Almog

  9. 11 jamesalliban April 27, 2009 at 7:14 pm

    Hi Almog. I’m using FLARManager – see link above. Are you using FDT? If so have you used it before? If so I might be able to help you. If not, you will need to get FDT set up using ANT and Flex 4 (or 3.3) SDK. If you are a Flex or FlashDevelop user you should be able to port the code across but I will not be able to help as I do not use these platforms.

  10. 12 Maudi April 29, 2009 at 6:35 pm

    Hello James..

    1.)How can I setup ANT in FDT?

    2.)And also Flex 4 SDK, I already follow the pdf that u recommended, but I can only find some SDK 3 in my options (sdk 3 pure, sdk 3 with AIR, etc.), but none of it was SDK 4. So can I import SDK 4 into the core libraries?

  11. 13 jamesalliban April 29, 2009 at 8:01 pm

    Just fished this out of my delicious – http://www.dopelogik.com/documents/actionscript_ant/ might be a bit outdated now.

    You can find information on setting up FDT for FP10 here – http://fdt.powerflasher.com/blog/?p=219 along with a link to download the latest releases of Flex SDK 4.

  12. 14 Maudi May 1, 2009 at 4:32 am

    Hello James,

    Heard that u won the AR competition. Impressive!
    Congratulations.

    Anyway, I’m still cant get your files working.. haha..
    I think there is something wrong with my setup and I havent figure it out yet..

    Again, congratulations.. = )

  13. 15 Karam May 4, 2009 at 10:47 am

    Hi,

    Thanks for providing the source code to you project!

    I’m having a little trouble getting it running in FDT. I followed all the instructions here http://fdt.powerflasher.com/blog/?p=219 to setup FDT with flex 4 sdk & flash player 10.

    I get an error when I load your project in FDT… it says
    Core library is undefined: AS3_FP10_beta

    Any help would be much appreciated. Thanks.

  14. 16 jamesalliban May 4, 2009 at 2:08 pm

    It sounds like you havn’t completed step 3 properly. Have you tried setting up a simple FP10 project in FDT? Just write one main class that contains a vector – var vect:Vector.; If this doesn’t work, try making a simple AS3 project to compile a swf.

  15. 17 dennis May 11, 2009 at 9:02 pm

    hello James,

    Impressive work you are showing!
    I’ve also been experimenting with flarmanager since a few weeks, but there are a few things that won’t work:
    In the example simplecubes.as, i want the cubes to display movieclips (movieassetmaterial), any way you can help me on the code?
    And I want to display a collada file, when a marker gets recognized, can you help me please?
    Thanks in advance,
    Dennis

  16. 18 holopaul June 10, 2009 at 9:49 pm

    hi james/and all others,

    can you please tell me how to compile this in flex?
    i can’t manage to do it.
    thank you very much

  17. 19 jamesalliban June 11, 2009 at 1:40 am

    Hi holopaul. Thanks for your interest. I don’t use Flex so I can’t help you. Best of luck though and if you get it working, please send me the project as I’ve had several people asking for a Flex version.

  18. 20 DjacK Height June 12, 2009 at 7:34 pm

    Beautiful work James! Stay creative my friend!

  19. 21 holopaul June 20, 2009 at 2:03 am

    hi again james,

    man, i have tried to compile it under fdt but i’m getting this error:

    “[java] command line: Error: unable to open ‘source/libs'”

    what “libs” folder are we talking about?

    thanks a million.

    paul

  20. 22 jamesalliban June 20, 2009 at 2:20 pm

    oops my mistake. That folder didn’t seem to make it into the zip file. It contains the assets which are wrapped up in a swc. Just uploaded a new version. Try it again.

    Also if you hadn’t already noticed, you will need to download several 3rd party libraries. These are Papervision 2.0 + FLARToolkit (obviously), TweenMax and FLARManager.

  21. 23 Tammy July 16, 2009 at 1:09 pm

    This looks wicked. Flash is amazing :)

  22. 24 D. Riggins July 24, 2009 at 7:49 pm

    Whatever happened to using.. oh I dunno… Flash Professional CS4 to compile flash projects?! Is it possible for me to throw your source into Adobe Flash CS4 and compile it??

  23. 25 jamesalliban July 24, 2009 at 10:57 pm

    Sorry D.Riggins but I’m araid that’s not possible (to my knowledge). It’s because you need to embed a few files at runtime. You’re just going to have to learn Flex or FDT.

  24. 26 mr. dr. July 29, 2009 at 8:23 pm

    hola! just wanted to drop a note and let you know that my visitors and i are super stoked about your work!

    AR is a field with many possibilities… watching you explore them is fascinating!

    keep doing big things!

    http://www.drseussjuice.com

  25. 27 jamesalliban July 29, 2009 at 8:39 pm

    Thanks Mr. And thanks for blogging me.

  26. 28 cpper August 25, 2009 at 5:21 pm

    Hi,james

    I download your sourcecode and compile in flexbuilder 3,
    but i can not find the class MarkerBack which is refered in Marker.as, can you tell me how to solve it?

  27. 29 jamesalliban August 25, 2009 at 10:59 pm

    Hi Cpper. MarkerBack is a Sprite embedded in source/libs/ar_particle_beam_assets.swc. You’ll have to add that file to your classpath.

  28. 30 Daniel September 2, 2009 at 4:14 am

    Hi jamesalliban!
    I am Daniel and i’m doing a few tutorials in spanish about Augmented Reality, however the tutorials are only with static elements, so, I have a question: can you show me the light? XD Can you show me the magic behind the video animations in FALRToolKit? I don’t know if, for example, you built the video in After Effects and after that you import data in FLEX or something like that. I really will apreciate your answer.
    Thank you and congratulations for your amazing video.

  29. 31 jamesalliban September 2, 2009 at 10:21 am

    Hi Daniel

    Thanks very much. Have you looked through the source code? It’s all in there. I didn’t do any post production in After Effects. The beams coming from the marker are images, the particles are vector graphics and the particle trails were built using code.

    Email me at me@jamesalliban.co.uk if you have any other questions.

    Cheers

    Jim

  30. 32 Sergio January 12, 2010 at 5:44 am

    Hi James! Amazing effect!
    I am seeing the code and I see a SWC, what is inside I how can create one?
    Thank you ;)

  31. 33 Sergio January 12, 2010 at 5:50 am

    Oops! Scrambled letters…
    *I am seeing the code and I see a SWC, what is inside and how can I create one?

  32. 34 James Alliban January 12, 2010 at 10:52 am

    Hi Sergio. I’ve used the swc here to contain assets but they are generally for packaging code libraries. You can create one from Flash. Just go to the publish settings and tick the ‘generate swc’ box.

    I believe you can only access them via Dlex/FDT/Flash Develop but don’t quote me on that :)

  33. 35 Sergio January 12, 2010 at 3:40 pm

    Many thanks James ;)

  34. 36 Mike January 14, 2010 at 8:01 pm

    Hi James! Sorry for my english. i need help. tell me please, where should i place required frameworks (such as flartoolkit, papervision, and so on…) in your project. I’ve never used FDT before, only flsh cs4. thanks :)

  35. 37 jamesalliban January 14, 2010 at 8:08 pm

    They should go in the lib folder on the root. Have a look inside the build.xml file. That should explain more about what is happening.

  36. 38 Mike January 14, 2010 at 8:40 pm

    i’ve placed com, org, gs directories (FLARManage, FlarToolkit and Papervision, TweenMax) into “ARParticleBeamClient\source\libs”. but as before, the same errors occures :(

  37. 39 Mike January 14, 2010 at 8:50 pm

    one more question :) in the project tree there is a CodeLibs folder (marked with red cross) how can i fix it?
    thanks

  38. 40 James Alliban January 14, 2010 at 9:02 pm

    Actually you should put the 3rd party libraries into the codelibs folder. Look in build.XML. It’s all in there.

  39. 41 Cindy January 23, 2010 at 11:26 am

    Hi James,

    I am able to see your wonderful work on Windows.

    But when I tried to show my friend from a mac, it just shows a black box, the video is not activated. Do you also get this or could there be a compatibility issue?

    Cindy

  40. 43 kristin February 14, 2010 at 3:39 pm

    Hi James,
    i’ve tried to transform your fdt-project into a flex-project. i imported all libaries without a problem. but i get a papervision-problem in the class ParticleBeam.as at the method onEnterFrame() with the line _renderer.render(). it say that there is a
    “TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at org.papervision3d.core.math::Matrix3D/calculateMultiply4x4():281]
    at org.libspark.flartoolkit.support.pv3d::FLARCamera3D/transformView():126]
    at org.papervision3d.core.render.project::BasicProjectionPipeline/project():29]
    at org.papervision3d.render::BasicRenderEngine/renderScene():162]
    at org.papervision3d.render::LazyRenderEngine/render():28]”

    and my debugger says, that the calculateMultiply4x4()-method get no projection-matrix.

    do you have any idea, what is wrong? or have anybody send you this fdt-project as a working flex-project?

    thanks for your help,
    kristin

  41. 44 jamesalliban February 15, 2010 at 3:43 am

    Sorry Kristin, I don’t use Flex. If you get it up and running, perhaps you could give it to me to offer others having trouble. I’ll give you a shout out and everything :)

  42. 45 BrandonEdley March 6, 2010 at 3:38 am

    Was a bitch to set up in flex. Note that tweenmax is version 10 not 11. 11 has some method changes that arent backwards compatible. The version of Flarmanager is an older version as well. The code being used manually sets up alot of stuff instead of using new features like “xml config file” etc. For the most part just copy files into src resources or assets folder. make sure you change your paths in the code. should work.

  43. 46 jamesalliban March 6, 2010 at 3:46 am

    Yeah this is quite an old project. My first in fact. I’ve come on quite a bit since :)

    It’s Great to hear you got it set up in Flex. It would be great if you could supply me with the project to offer to others. I’ll give you full credit.

  44. 47 Adam March 19, 2010 at 9:47 am

    That is just awesome. If anyone managed to convert it to FLEX or CS4 please let me know on
    a.forster@op.pl

  45. 48 Rahul April 5, 2010 at 6:55 am

    Dear James,

    Fantastic Work! This and the business cards are really gud projects ..Bravo!!

    I was wondering if u could help me understand something .I basically Want an object to be placed behind the marker (this object is a .dae)and I want the marker to be hidden.

    I understand that saqoosha’s hole effect would be used ,but any idea of how to project the model behind the marker?

    I hope that u can answer my qn as I m stuk on it for quite a long time ..

    Cheers!

    Rahul

  46. 49 jamesalliban April 5, 2010 at 2:49 pm

    Thanks Rahul. I noticed you also asked this on the FLARToolkit forum. I’ll answer it there so the rest of the community can benefit from the reply.

  47. 50 Leaf April 22, 2010 at 7:04 pm

    Hey James,

    this is fantastic :) I’m trying to get this up and running, and I am an absolute beginner, so please bare with me :)(I’m using Flashdevelop and Flex 4 sdk) I always get the error message “call to a possibly undefined method MainBeamAnim” in Beam.as, and every other file that needs something from the swc file. I have tried adding the swc file to the swc library in Flashdevelop, but no luck. Am I missing something? x.x

  48. 51 jamesalliban April 22, 2010 at 7:06 pm

    Sorry Leaf I don’t use FlashDevelop so can’t help you

  49. 52 jamesalliban April 22, 2010 at 7:06 pm

    Sorry Leaf I don’t use FlashDevelop so I can’t help you

  50. 53 Carolin June 28, 2010 at 4:19 pm

    Hello James,

    I wanted to ask you for permission for using part of your code here for a (very) small college project for learning purposes. I’m talking about the animation when the “paper” opens up. Slightly modified though. (it just wouldnt be the triangles and it would look more like a box, as the medium I am using is a cube with different markers on it) Of course I would give you credit :) That would be great :)
    Thank you,
    Carolin

  51. 54 Galih Mahendra September 23, 2010 at 7:33 am

    Hello james
    in the video that I saw was really good.
    but I can not try on the website and after I downloaded his example Soure.
    why do not you?

  52. 55 John3 January 3, 2011 at 7:26 am

    So far I think this is bullshit. I made the drawing and went for the live demo and nothing. Doesn’t work.

    Kids – if you are going to put this stuff out you need to give the rest of us in internet land some step by step procedures to reproduce this. You can’t just talk about this and that without giving some specifics. For all we know it’s strictly an animation program. It’s not augmented anything.

  53. 56 jamesalliban January 3, 2011 at 3:57 pm

    Well, I have to admit you got me there john3. I’m actually a little relieved that at last I can reveal to the world that I’m a massive fake. The 100s of positive comments posted on my blog have actually all been me bigging myself up. Thanks for outing me.

    By the way I’d love to see your drawing. Could you email it to me… if you can figure that out.

    Twat.

  54. 57 Rahul January 3, 2011 at 8:09 pm

    @John3,

    Dude Seriously,u really should mind ur words and get a life!

    U make comments like “I made the drawing and ….” and u call us kids :clap!

    @James:Here’s wishing u a happy new year and its best u dun listen 2 ppl like him

    Cheers!

  55. 58 Mike February 22, 2011 at 12:12 am

    Hi James!
    I try to test the Flex source code on Flex Builder 3 and 4 but it doesn’t work. Are you sure it works correctly?

    Thanks Regards

  56. 59 jamesalliban February 22, 2011 at 12:21 am

    I don’t use Flex. That project was contributed by someone else.

  57. 60 Mike February 22, 2011 at 9:02 am

    Ok.
    Is it possible to contact Kristin about it?

    Regards

  58. 61 James Alliban February 22, 2011 at 9:21 am

    I don’t have Kristin’s details.

  59. 62 tana March 10, 2011 at 5:43 pm

    hi james im currently creating a system using c# to develop augmented reality with silverlight ..im confuse with how to create pattern file, load 3d animation into the c#..is there any advice u can give me..thanks


  1. 1 Adobe Max 2009 – Jour 3 > FredCavazza.net Trackback on October 9, 2009 at 1:51 pm
  2. 2 The Business cARd « Brendan Mitchell Trackback on November 13, 2009 at 12:27 pm
  3. 3 Very impressive 3d business card with augmented reality | Trackback on December 15, 2009 at 8:56 am
  4. 4 Tarjeta de presentación con Realidad Aumentada | conecti.ca Trackback on December 16, 2009 at 8:06 pm
  5. 5 Impressive augmented reality business card in 3d (Video) | Latest electronics Trackback on December 31, 2009 at 12:40 pm
  6. 6 AR Particle Beam « James Alliban – http://jamesalliban.wordpress.com/2009/04/14/ar-particle-beam/ | Julien Ferla Trackback on April 11, 2012 at 11:19 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s












Tweets

Flickr Photos

Mesh study

Mesh study

Mesh study

More Photos

Follow

Get every new post delivered to your Inbox.

Join 62 other followers

%d bloggers like this: