MarcPelland.com
Welcome at » Motion Tracking and Papervision
«
»

Motion Tracking and Papervision

A couple of days ago I posted my first attempt at motion tracking in AS3 using a webcam and promised that I would play a little bit more with it. Well, I got a little bit anxious and before refining the tracking code I decided to put it to use.

You may have seen the video of head tracking using the Nintendo Wii. That video inspired me to try my hand at the same concept using Flash, Papervision 3d, and my newly discovered love for trying to get motion tracking / facial recognition into Flash.

Motion Tracking and Papervision

As such, I have created this example which is my first step in creating some sort of tracking interaction with a 3d scene. if you would care to see a little bit more detail about what is going on, hit X to see the video and W to see the framerate. Stay tuned for more updates as I update the tracking code. Once again, I will post the source when it is a little further along.

** please note that you require a webcam to take advantage of the motion tracking, if you do not have a camera the scene’s camera is simply controlled by the mouse.

This entry was posted on Wednesday, May 7th, 2008 at 9:35 am and is filed under 3D, AS3, Experiments, Flash, Papervision. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Digg it | Bookmark at del.icio.us

96 Responses

  1. Posted on 19. June 2008 at 03:38 #comment-92

    MikeM




    This is amazing. Can’t wait to study it. Thanks! Keep it up

  2. Posted on 2. July 2008 at 02:45 #comment-107



    Sweet. Nice work.

  3. Posted on 22. July 2008 at 11:38 #comment-125



    Good site I “Stumbledupon” it today and gave it a stumble for you.. looking forward to seeing what else you have..later

  4. Posted on 12. August 2008 at 10:24 #comment-148



    I always read your blog in high spirits. Thanks :)

  5. Posted on 19. August 2008 at 15:23 #comment-153



    That’s the writing style that tickles me.

  6. Posted on 22. August 2008 at 13:15 #comment-170

    Steve




    Awesome. I’m getting a spot in line to get a look at the source code.

  7. Posted on 16. October 2008 at 17:05 #comment-477



    nice picture :)

  8. Posted on 2. November 2008 at 23:22 #comment-478



    yes, keen to see the source code as I had a similar idea… what res is the camera running at? perhaps it might be better to use coloured paper or LED’s mounted on saftey goggles like your wimote head tracking… you could then easily track the location of the two coloured LED’s as you would infra-red leds.

    heres an experiment I made a while ago with flash webcam… nothing to do with headtracking (yet)

    http://hydroplain.blogspot.com/2008/10/this-is-as3-time-slicing-demo-i-was.html

  9. Posted on 6. November 2008 at 17:05 #comment-479



    Wowww realy great flash animation :) I want to Macromedia flash for my new Güvenlik ve kamera sistemleri web pages. but havent got time

  10. Posted on 12. November 2008 at 15:07 #comment-480



    http://www.marcpelland.com/motion3dController.zip

  11. Posted on 19. January 2009 at 07:01 #comment-488



    Wow. Super!

  12. Posted on 9. March 2009 at 11:38 #comment-516

    velcro




    this could prolly be applied to an IR camera and IR leds. just a thought

  13. Posted on 9. March 2009 at 12:15 #comment-517



    I was thinking about using IR LEDs but I wanted to try and make it work with just a user and a webcam. I am trying to find more time to play with the idea, have been thinking about connecting Processing and Flash and using the OpenCV Face Detection Library to track the motion. So far, I have been unsuccessful but I am getting there

  14. Posted on 18. April 2009 at 11:17 #comment-539



    Thanks for these great tutorials!

  15. Posted on 2. May 2009 at 08:36 #comment-542

    joe




    its would be nice to show a way without always using he document class in the flash IDE. I find just using the document class is limiting in real world projects. Most times there are other elements in a flash website and this approach limits you.

  16. Posted on 7. May 2009 at 01:19 #comment-545

    rye




    thanks for this. I appreciate it! it’s a great orientation!

  17. Posted on 8. May 2009 at 13:04 #comment-546

    Freddy




    “its would be nice to show a way without always using he document class in the flash IDE. I find just using the document class is limiting in real world projects. Most times there are other elements in a flash website and this approach limits you.”

    I agree, and even more difficult when you have to work with a team of flash timeline only designers :(

    still, great tutorial!

  18. Posted on 8. May 2009 at 13:09 #comment-547



    it would be very easy to port most of the tutorial files over to pure AS3 (no document class). the only instance where it would become an issue is with the movieassetmaterial. however, i believe you could do something along the following:
    [Embed(source = "/materials.swf", symbol="sphereMaterial")]
    private var sphereMaterial:Class;

    from there you could just create an instance of that class as a clip and use it as a material.

  19. Posted on 8. May 2009 at 17:22 #comment-548

    Freddy




    Hi again, on Flash CS4, I got the “1084: Syntax error: expecting rightparen before 55

  20. Posted on 8. May 2009 at 18:17 #comment-549



    can’t help much without seeing the code that you are using or knowing which file you are working with.

    can you send me an email with a more detailed description of your issue?

  21. Posted on 20. May 2009 at 23:54 #comment-551

    ChicoPacoPancho




    “Hi again, on Flash CS4, I got the “1084: Syntax error: expecting rightparen before 55″

    Got the same. This is the line causing the problem:

    var planeMaterial:ColorMaterial = new ColorMaterial(0×55FF11);

    If you copy and paste the code I get an error because of the little ‘x’. Just retype the x and that should fix it.

  22. Posted on 22. May 2009 at 12:53 #comment-552



    Coot tutorial! Tenx!

  23. Posted on 25. May 2009 at 13:30 #comment-555



    Thank you so much. This was the first tutorial on Papervision that actually compiled. Not even the offical website’s sample code worked properly. You did a great job covering the essentials.

    A few suggestions:
    -Copying your sample code on the webpages inserted extra lines and “#” symbols. Oops.
    -A couple screenshots and trace messages from your compiled samples would have helped reaffirm my progress.

  24. Posted on 28. May 2009 at 16:22 #comment-557



    Anyone else get this error?

    ReferenceError: Error #1065: Variable sphereMaterial is not defined.

    I am using Flex Builder 3 and I am using the code in a new action script project.. am I missing an import?

    any help would be great

    thanks.

    Love the Tutorial :)

  25. Posted on 1. June 2009 at 10:05 #comment-558

    FCX




    I’m also getting

    ReferenceError: Error #1065: Variable sphereMaterial is not defined.

    Dunno what to do with it.

  26. Posted on 1. June 2009 at 10:11 #comment-559

    FCX




    using Flash CS4 with Papervision3D Public Alpha 3.0 – PapervisionX (18.09.08)

  27. Posted on 1. June 2009 at 10:19 #comment-560



    FCX have you created the sphereMaterial clip in your library? or created a bindable instance of it in your source if you are not in flash IDE? that needs to be created in order to avoid that error…

  28. Posted on 1. June 2009 at 10:33 #comment-561

    FCX




    No, I didn’t. Now works great!

    Amazing tutorial!

  29. Posted on 1. June 2009 at 20:28 #comment-562



    I know this is an old post, but I just wanted to say THANK YOU! This tutorial was so easy to follow, and I’m really excited to have my first Papervision demo working :) Thanks again!

  30. Posted on 2. June 2009 at 14:10 #comment-563

    jtalbea




    Awesome tutorial. I have a question though, I uploaded the source code and it loads great in firefox but not in IE6, do you know why? I can’t figure it out. Thanks!

  31. Posted on 4. June 2009 at 08:29 #comment-564

    Dom




    I’m a 3D animator who’s just been briefed in a hurry to create with Papervision, it’s crash course of note! I’m using FlashMX ver6 and have no Actionscript 3.0 settings in Flash EDIT/PREFERENCES as mentioned in the tut above?:

    ‘Once you are synced up with the repository I would recommend loading Flash and going to Edit > Preferences. Go to the ActionScript category and select ActionScript 3.0 Settings’.

    any help most appreciated?!

  32. Posted on 5. June 2009 at 02:52 #comment-565

    Jaibabu




    Can anyone please help me. How to draw the bar chart using Papervision with 3D effects(Multi dimension). Please give me some guidance and sample.

    Thanks

  33. Posted on 16. June 2009 at 00:34 #comment-566



    thanks for guiding my first pv3d steps

  34. Posted on 20. June 2009 at 17:15 #comment-567



    I very much appreciate the tutorial! I didn’t know I needed to make an .fla file of that class to compile it until I downloaded the source. Now I know. And so does everyone else ;^)

  35. Posted on 25. June 2009 at 11:31 #comment-568



    Nice work, i’m waiting for a next Chapter. I like ur portfolio, some many interesting projects.

    Dom, to run actionscript u need flash cs3. Older version only works with actionscript 1.0 and 2.0.

    Bye

  36. Posted on 25. July 2009 at 00:14 #comment-572



    As well as how to harness tools that have been created for you to build your own 3D experiences.For you, we are providing cheap age of conan power leveling for you, enjoy it.

  37. Posted on 31. July 2009 at 09:17 #comment-574

    Max




    Hello, I’m having an issue with the step two. FlashDevelop & Flash says: The Type HelloPrimitives does not match the file name:…

  38. Posted on 24. August 2009 at 08:16 #comment-579



    this could prolly be applied to an IR camera and IR leds. just a thought

  39. Posted on 24. August 2009 at 08:22 #comment-581



    I always read your blog in high spirits. Thanks

  40. Posted on 24. August 2009 at 08:24 #comment-583



    Dom, to run actionscript u need flash cs3. Older version only works with actionscript 1.0 and 2.0.

  41. Posted on 28. August 2009 at 07:03 #comment-584

    Skant




    How Can I work just with Adobe Flash Cs4?
    All tutorials worlks with Flex and I’m not freanly with this aplicattion,

    Need I change to these aplicattion?

    thanks!

  42. Posted on 28. August 2009 at 07:05 #comment-585

    Skant




    I always have the same error:

    “5008: El nombre de la definición ‘HelloPapervision’ no contiene la ubicación de este archivo. Cambie el nombre de la definición en este archivo, o cambie el nombre del archivo. K:\Documents and Settings\Cris\Escritorio\As3\Papervision3D_2.1.920\e01.as”

    ups, ! is in spanish! I hope the error number can show you whats going on?

  43. Posted on 28. August 2009 at 07:20 #comment-586

    Skant




    ok! done!
    I have to undestand more acurate AS3!

    Congratulations fot this tutorial,

    ;)

  44. Posted on 12. September 2009 at 07:26 #comment-589



    Thank you for sharing really worked to my jobs

  45. Posted on 17. September 2009 at 08:06 #comment-591

    divertoso




    hello

    cud you make a tutorial teach how to usin flartoolkit (wich webcam) and show a maya collada object in swf…

    tks!!!!

  46. Posted on 24. September 2009 at 12:22 #comment-592

    Gutza




    Awesome tutorial, this is something I was looking for to get me started with Papervision. One thing though: I get a “lookAt error” with the HelloClickability code…

  47. Posted on 5. October 2009 at 07:15 #comment-594

    Krodil




    Hey.. nice work.. :)

    I get the cam feed and such, but when I run I get error
    1017: the definition of base class ObjectContainer3D was not found..
    Any help…

  48. Posted on 5. November 2009 at 09:30 #comment-598



    Hi;
    I really like your papervision tutorial; it’s one of the few understandable beginners guides I could find!
    Anyway, I guess I have my FlashDevelop setup wrong. All I get when playing / publishing is a white background, instead of the primitives and stuff. FlashDevelop says “Build Succeeded”, but I’m not sure though.. Could you help me out?
    thanks in advance;
    Ruben

  49. Posted on 21. November 2009 at 16:40 #comment-599

    Ray




    Nicely done!

    Finally a tutorial for us mere mortals…

    Papervision3D is no joke…you’d better eat your Wheaties… :)

    Thanks much!

  50. Posted on 24. November 2009 at 22:34 #comment-600



    Hi,

    Thanks for uploading a great primer to Papervision3D! Really helped me get started on it =)

    Thanks!

  51. Posted on 30. November 2009 at 12:59 #comment-601

    andy




    ReferenceError: Error #1065: Variable sphereMaterial is not defined.
    This was a headache for me. I was hunting down trying to add the MovieAssetMaterial class into the library, trying to figure out the PV3D component to see if i can drag something to the library, etc. Nothing worked, till i went to the MovieAssetMaterial documentations.

    So,

    To clarify to noobish users such as myself, you’d need to create a new MovieClip in the Flash IDE library, name it sphereMaterial, then click on “Export for Actionscript”….

    It should now work fine.

    I have never worked with flashdevelop or flex before, i have been working with the Flash IDE itself, so i wish more things had been spelled out for me, like the jump from setting up FlashDevelop to actually making a new document. I didnt know Flash IDE had to be up and running for FlashDevelop to run, and I didnt know I had to create a .fla file like usual, set the HelloPapervision document class in Flash IDE so that i can run the HelloPapervision.as code.

    I came into this completely new to FlashDevelop or Flex, so the unspelled things provided me with hours of consulting other guides.

    I appreciate the guide so far, it has carried me further than any other ones online. Just my input so its more newbie friendly :) . Especially since i am not stuck in the actual coding part…but the actual setup of paths/classes/libraries part.

    thanks for the efforts!

  52. Posted on 16. December 2009 at 12:57 #comment-602



    Yeah – that “Error #1065: Variable sphereMaterial is not defined” threw me a bit too. I work in a combination of Flash IDE and Flex Builder 3, but unlike with FlashDevelop I can use Flex Builder to compile.

    MovieAssetMaterial needs to be passed the name of a MovieClip object in order to instantiate properly. So here’s how I did it…

    Drag a jpg into Flash (mine was of bricks) and create a MovieClip from it. Tick “Export for Actionscript” (if you don’t know where that is then learning Papervision is probably trying to run before you can walk), call the Class “Bricks” and subclass (“Base Class” they call it there) MovieClip – which should be the default.

    Now that you’ve created your MovieClip, publish the fla (ensuring you have “Generate SWC” ticked in your publish settings to create a SWC library along with the SWF.

    In Flex Builder > Project > Properties > Actionscript Build Path > Library Path, hit “Add SWC” and add your SWC in order to access your MovieClip with a jpg in it.

    You can then instantiate it using var bricks:Bricks = new Bricks() or whatever you called it. And then “sphereMaterial = new MovieAssetMaterial(“Bricks”)” will work.

    Anyway – that’s one way of doing it in Flex Builder 3, the important thing as far as I can see is that MovieAssetMaterial is passed a MovieClip object that it can use.

  53. Posted on 2. January 2010 at 06:58 #comment-605

    CharlesG




    Great tutorial, no “have you seen me” coding and great explanations!

    Thanks

  54. Posted on 25. January 2010 at 16:44 #comment-610



    Thanks for this!!!

  55. Posted on 15. February 2010 at 14:20 #comment-611

    san




    awesome tutorial.. thanks for your hard work!! :)

  56. Posted on 1. March 2010 at 07:54 #comment-614

    Marcos




    Thanks for the tutorial, mate. It is excellent: smooth to follow and right-to-the-point.

    We’ll be using papervision3D for nice projects at the university of Espírito Santo, Brazil, as part of the graphic design lab group.

    Thanks again!

  57. Posted on 14. March 2010 at 10:56 #comment-619



    It’s Great, Good Job.

    It’s very ease this form.

  58. Posted on 2. April 2010 at 03:56 #comment-621

    Mark Cabrera




    Thanks for the great tutorial! It was very easy to follow! :D

  59. Posted on 7. April 2010 at 16:10 #comment-622



    anakra kuaförler

  60. Posted on 8. April 2010 at 08:27 #comment-623



    All people deserve wealthy life time and credit loans or short term loan will make it much better. Just because freedom depends on money state.

  61. Posted on 16. April 2010 at 15:57 #comment-624



    I got the “x” error (resolved above) and also another error for these two lines:

    var rotY: Number = (mouseY – (stage.stageHeight / 2)) / (stage.height / 2) * 400;
    var rotX: Number = (mouseX – (stage.stageWidth / 2)) / (stage.width / 2) * -400;

    Similar to the “x” issue where I needed to delete the “x” and type another “x” there, although in this instance I had to delete the “-” and put a “-” in it’s place. Maybe this will help someone.

  62. Posted on 17. May 2010 at 08:47 #comment-625



    I can hardly wait to try it out. Great blog, thanks for it.

  63. Posted on 21. May 2010 at 22:39 #comment-626



    Hey there:

    This is simple and easy to follow, but, the typical 3D problems that I get.

    My browser’s displaying a blank white screen. The flash object is present in the web page.

    I swfdump the swf file and I see the shapes defined in the swf but they are not being displayed.

    I did not move the camera or anything. I have the same code.

    anyone had this??

    Thanks

    Duncan

  64. Posted on 27. May 2010 at 00:53 #comment-627

    akshay




    access to undefined property stage
    how to resolve this error?

  65. Posted on 29. May 2010 at 05:51 #comment-629



    Very nice! Thanks a lot!

  66. Posted on 4. June 2010 at 12:12 #comment-632

    Mark




    Hey there:

    This is simple and easy to follow, but, the typical 3D problems that I get.

    My browser’s displaying a blank white screen. The flash object is present in the web page.

    I swfdump the swf file and I see the shapes defined in the swf but they are not being displayed.

    I did not move the camera or anything. I have the same code.

    anyone had this??

    Thanks

    Duncan

    - I have the same problem, builds fine but just plain white screen with nothing inside. Ive tried everything to fix it the codes identical, no errors, the only thing I get is an output message saying the viewport autostage scale message like this:

    INFO: Papervision3D 2.0.0 (March 12th, 2009)

    INFO: Viewport autoScaleToStage : Papervision has changed the Stage scale mode.

    Please Help!!

    Mark

  67. Posted on 18. June 2010 at 08:44 #comment-634



    Thanks for the article ..

  68. Posted on 29. June 2010 at 10:14 #comment-635

    Virgilio




    Great tutorial to start, thank you very much Marc!

  69. Posted on 16. July 2010 at 16:19 #comment-636

    Asaf




    I could not get it to work with
    super(0, 0, true, true) in the HelloClickability class
    So I change it to:
    viewport.interactive = true; – taken from anther tut.

  70. Posted on 4. August 2010 at 07:06 #comment-638

    Sagar S. Ranpise




    Awesome tut!

    This is absolutely well written and very easy to understand!

    Thanks a lot for sharing!

    Looking forward to more PV stuffs!

    Thanks & Regards,
    Sagar S. Ranpise

  71. Posted on 10. August 2010 at 02:38 #comment-643

    tu




    thank you very much. It’s very interesting.

  72. Posted on 13. August 2010 at 00:29 #comment-644



    Really Cool … keep up!

  73. Posted on 25. August 2010 at 04:30 #comment-646



    could not get it to work with

  74. Posted on 4. September 2010 at 19:33 #comment-647



    thank you for sharing..

  75. Posted on 4. October 2010 at 03:27 #comment-648



    This is good article 3d. Thanks for sharing well information

  76. Posted on 16. October 2010 at 02:42 #comment-649



    Thanks for admin,very sharing..

  77. Posted on 22. October 2010 at 06:50 #comment-650



    Was a beautiful page. Thanks to the designers and managers.

  78. Posted on 23. October 2010 at 01:55 #comment-651



    This was a useful post and I think it is rather easy to see from the other comments as well that this post is well written and useful

  79. Posted on 4. November 2010 at 03:24 #comment-654



    Always good to see, this was a brilliant post. In theory I would like to write like this too.

  80. Posted on 4. November 2010 at 03:27 #comment-655



    You need time to creat that interesting and additionally real effort to make such a good article

  81. Posted on 4. November 2010 at 03:28 #comment-657



    Hello friend, I am very much happy to see your blog. But the problem is I can’t understand the language. Thanks for posting. All the best.

  82. Posted on 2. December 2010 at 11:06 #comment-661



    Thanks a lot. Good kick-start for a newbie in flash-3d stuff.

  83. Posted on 5. December 2010 at 02:47 #comment-663



    It’s really a nice and helpful piece of information. I’m glad that you shared this helpful info with us. Please keep us informed like this. I want to say it would supply up to !

  84. Posted on 6. December 2010 at 12:32 #comment-664



    I’m having an issue with the step two. FlashDevelop & Flash

  85. Posted on 7. December 2010 at 13:43 #comment-665



    Howdy

    Great tutorials and flash improvement here ;) .
    I click on you portfolio and sounds good to me how the thing works and is interactivity. I would like to know if you could publish the code you used on that.

    Cheers.

    Best Regards,
    Daniel from Portugal

  86. Posted on 15. December 2010 at 10:50 #comment-667



    thanks your sharing my dude

  87. Posted on 17. December 2010 at 12:28 #comment-668



    nice sharing..

  88. Posted on 22. December 2010 at 03:38 #comment-669



    I like this concept. I visited your blog for the first time and just been your fan. Keep posting as I am gonna come to read it everyday

  89. Posted on 5. January 2011 at 17:29 #comment-672



    This a nice tutorial and very detailed with matching table of contents. I like the way you elaborated each step since it is easy to follow. Even if those people who don’t have enough knowledge about programing would have an ease to follow each step.

  90. Posted on 28. January 2011 at 21:48 #comment-716



    would have an ease to follow each step.

  91. Posted on 30. January 2011 at 06:19 #comment-718



    Many thanks to the person who made this post, this was very informative for me. Please continue this awesome work. Sincerely…

    The article is very well!

  92. Posted on 16. March 2011 at 23:00 #comment-796



    MovieAssetMaterial needs to be passed the name of a MovieClip object in order to instantiate properly.

  93. Posted on 20. May 2011 at 08:03 #comment-1060



    Great post! Whole blog is very interesting when you are flash pasionate!

  94. Posted on 24. May 2011 at 06:21 #comment-1063



    thanks your sharing my dude

  95. Posted on 15. June 2011 at 00:52 #comment-1176



    Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I will be subscribing to your feed and I hope you post again soon. Thanks!

  96. Posted on 15. August 2011 at 03:20 #comment-1395



    thank you

Leave a Reply

Captcha
Enter the letters you see above.