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.
GJ dude. This for that FlarToolkit contest? Wish I woulda had some time to do something.
Thanks Mikko. And thanks again for your great tutorials and source code.
Very Impressive!
It’s so cool!!!:)
iam sorry, I dont get your source to work, not even in FDT!Proberly Iam too stupid
but maybe you can upload it as an flashdevelope project or just for the normal flash environment…although its very nice!
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.
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.
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).
i like magic light from hand glow!
you are wizard!
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
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.
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?
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.
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.. = )
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.
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.
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
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
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.
Beautiful work James! Stay creative my friend!
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
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.
This looks wicked. Flash is amazing
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??
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.
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
Thanks Mr. And thanks for blogging me.
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?
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.
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.
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
Hi James! Amazing effect!
I am seeing the code and I see a SWC, what is inside I how can create one?
Thank you
Oops! Scrambled letters…
*I am seeing the code and I see a SWC, what is inside and how can I create one?
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
Many thanks James
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
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.
i’ve placed com, org, gs directories (FLARManage, FlarToolkit and Papervision, TweenMax) into “ARParticleBeamClient\source\libs”. but as before, the same errors occures
one more question
in the project tree there is a CodeLibs folder (marked with red cross) how can i fix it?
thanks
Actually you should put the 3rd party libraries into the codelibs folder. Look in build.XML. It’s all in there.
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
The info in this post should help:
http://jamesalliban.wordpress.com/2009/06/03/ar-business-card/
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
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
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.
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.
That is just awesome. If anyone managed to convert it to FLEX or CS4 please let me know on
a.forster@op.pl
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
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.
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
Sorry Leaf I don’t use FlashDevelop so can’t help you
Sorry Leaf I don’t use FlashDevelop so I can’t help you
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
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?
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.
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.
@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!
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
I don’t use Flex. That project was contributed by someone else.
Ok.
Is it possible to contact Kristin about it?
Regards
I don’t have Kristin’s details.
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
I use this to create a .pat file:
http://flash.tarotaro.org/blog/2008/12/14/artoolkit-marker-generator-online-released/
Thanks very much!