Microphone controlled animation in Papervision3D
This time I have something less mind-twisting then the bend modifier and all that math. The idea was to create an animation of leaves flying around, propelled by wind controlled with the microphone. This little experiment was also a good occasion to work with some new Papervision3D features.
Effects. The Papervision3D team decided to merge the Effects branch with Great White earlier this month. All the detailed information about that can be found on by Andy Zupko’s blog. There is a lot of cool stuff, so be sure to check it out. One of those is a new property of the DisplayObject3D called ‘useOwnContainer’. When set to true, all the classic bitmap effects can be applied directly to a mesh. In this case I used the BlurFilter, and the ColorMatrixFilter for the depth-of-field effect. The inspiration came from the really cool depth-of-field experiments by Mr.doob.
SimpleLevelOfDetail. With this one, the idea is that the further an object is from the camera, the less faces it has. That way we can get an important performance gain without sacrificing the quality too much. I tried to implement it, but I ran into some trouble. Later, after a brief discussion on the PV3D forum, Andy Zupko added the ‘SimpleLevelOfDetail’ class that implements this concept. I used it here. Thanks a lot, Andy!
Bend modifier. Finally, I use the Bend class to give the leaves a slightly more natural look.
Now, the fun part. The leaves react to the activity level of the microphone, so if you take yours and start to blow into it, they will take off and fly around. Be careful, if you blow too hard you will get a head rush! :)
If you do not have a microphone use your mouse wheel to create wind. Keep in mind however that it isn’t as much fun as with a mic. Also, on Windows, the microphone volume settings are really tricky and well hidden in multiple places, so if something is not working – double check those in the first place.
Last but not least, here’s the source code (updated Dec 17th 2008 to work with latest PV3D trunk).
woho! sweet!
a good combination of techniques.really nice!
Really, really nice. Thanks.
Lee
very cool use of the new stuff! very fun to play with and looks awesome!
you made my day man.
pretty cool !!!
and thanks for the source – there are lots of things to learn from it.
Great work man. It looks awsome and is very fun.
really great, awesome experience.
May I add a little suggestion?
Freeze the rotationY of the leaf as soon as it touches the ground; each leaf would stop rotating at a different time. Also, I would have the leaves closer to the screen (smallest Z) to rotate a bit faster than the ones away when the mic is blown. Great nevertheless!
@barret I updated the demo in the direction you mention, and it looks better now. Thanks for the tips!
Nice effect! :D
Hello!I got the most reliable knowledge about Animation is the process of linking a series of slightly different drawings especially, cartoons together to simulate movement.Thanks!
Hello,
I’m in the as3 learning process and can’t seem to make it compile right, wether with flashdevelop or flash…i keep gettin Error #1007. Is it the embed of the external png? it seems the flex sdk allows things that flash don’t like… thanks for any help
wow, beautiful and inspiring
Very very nice. Bravo !
Bro’, you’re nuts! :)
You forgot to include mask.png?
@chris Thanks for noticing that, I updated the ZIP file.
can i have fla file for this plz
@julie unfortunately there is no FLA file for this project – it was done with FlashDevelop and compiled with a Flex compiler. I wrote a short note about this technique here: http://www.everydayflash.com/blog/index.php/2008/07/01/flash-on-free-software-flashdevelop-flex-sdk/
[...] http://www.paperskate3d.com/ http://www.everydayflash.com/blog/index.php/2008/06/24/microphone-animation-papervision3d/ [...]
Hi, I can’t find BasicView, how to find it. :)
@neil If you do not have the BasicView class in your PV3D sources, that means you are probably using an old version of Papervision (1.5?). Get the newest 2.0 version here:
http://papervision3d.googlecode.com/files/Papervision3D_2.0_beta_1_src.zip
Hi. I have compiled this in both FlashDevelop and the Flash IDE. I have correctly linked to all Classpaths too. I get no errors and a blank window. What am I missing?
Sorry, to add to my comment above:
I do get the “Camera and Microphone Access” window. My output panel gives me:
TypeError: Error #1007: Instantiation attempted on a non-constructor.
at com.everydayflash.pv3d.leaf::LeafMaterialFactory()
at com.everydayflash.pv3d.leaf::LeafDemo()
@SimplicIT It won’t run correctly with Flash IDE due to the way I embed bitmaps – using [Embed]. Try to compile that with the Flex SDK compiler. Here’s a short note I wrote about how to start with:
http://www.everydayflash.com/blog/index.php/2008/07/01/flash-on-free-software-flashdevelop-flex-sdk/
[...] http://www.everydayflash.com/blog/index.php/2008/06/24/microphone-animation-papervision3d/ [...]
Hi,
It’s awesome! Can you explain how to use it in flex 3 (IDE)?
Thanks.
NOTHING IS HAPPENING WHEN I TRIED????
it is very lovely!!!
Does anyone have all the classes you need for this compiled in one location that they can share… ie. the gskinner stuff, Tweener, ect…
Hi,
i’ve found all the class you need to compile but still have error before compilation…
in DepthOfField, l.87 , new instance of ColorMatrix need an argument (array)
and in Operator.as, l.22, new instance of DisplayObject3D require 2 arguments but there ‘s more in the code…
@SILENTYPER @Jim_Nastiq Things change very quickly in the open source world, and the code uses features that are no longer available.
I’ve done a quick update of the sources: http://www.everydayflash.com/flash/pv3d/leaves/leaves-demo-2.zip
This should work with latest pv3d version from SVN (as of Dec 18th 2008). As for the ColorMatrix class – I have included my old version in the sources now.
Hope that helps!
I’ve finally compile it and make it work ;-)
great job, and thx for sources!
I really love your website and the things u do! :)
I tried to make this thing work, seems like im still missing some of the frameworks, where can i find a thing called arthropod, i get this error and what does it do?
col: 36 Error: Definition com.carlcalderon.arthropod:Debug could not be found.
import com.carlcalderon.arthropod.Debug;
Great example and thanks for sharing the code!
I use the Flash IDE and perfer not to use windows if I don’t have to, so didn’t want to use the FlashDevelop app. But running it in flash is pretty straight forward. Here’s how if want to:
Create a new .fla and save it in the src folder. Set the document class to “com.everydayflash.pv3d.leaf.LeafDemo” You will probably want to up the default fps and change the doc size.
Import mask.png and myleaf-single.png into your library. On each one, click info and in that panel select “Export for ActionScript”. Flash doesn’t allow dashes in class names so you will want to change the class name. I will use myleaf_single_png and mask_png
Now a couple of minor code changes:
LeafMaterialFactory.as:
change:
texture = new BitmapMaterial((new LeafTexture() as Bitmap).bitmapData);
to:
texture = new BitmapMaterial(new myleaf_single_png(128,180));
LensMask.as:
change:
alphaMask = new Mask() as Bitmap;
to:
alphaMask = new Bitmap(new mask_png(400,300));
Also it was giving me errors related to refernecing the stage from the resize event. Probably a difference in Flex/Flash. At any rate, the following change will prevent error in Flash.
HelpPanel.as:
change:
x = Math.round(stage.stageWidth / 2 – w / 2);
y = Math.round(stage.stageHeight / 2 – h / 2);
to:
var stageRef = (stage) ? stage : e.target
x = Math.round(stageRef.stageWidth / 2 – w / 2);
y = Math.round(stageRef.stageHeight / 2 – h / 2);
That’s it. Enjoy.
And thanks again Bartek, for this (and your other) examples and source.
@Scott Hill Thanks a lot for this comment! A lot of people have been asking how to run it from Flash IDE and you provided them with a complete answer.
I tried to add Interactivity to the leaves, but without succes.
Changed th createLeaf Method:
private function createLeaf():void {
var mat:MaterialObject3D = matFactory.getMaterial();
mat.interactive = true;
var leaf:Leaf = new Leaf(mat);
scene.addChild(leaf);
leaf.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, function (e:Event) {trace(‘click’)});
leaves.push(leaf);
numLeaves++;
}
but it does not work.
changed:
useOwnContainer = false;
in the Leaf Class, but still does not work…..
dows anyone have an idea, i dont see it.
greets
[...] cool microphone controlled animation of leaves flying around created using [...]
@Selectah make sure that the view is set to be in interactive mode. LeafDemo.as, line 36 says:
super(stage.stageWidth, stage.stageHeight);
change it to:
super(stage.stageWidth, stage.stageHeight, true, true);
- the second “true” sets the interactive mode. Look into the comments in the pv3d code for details.
[...] Check it out — so cool! [...]
Cool: http://tinyurl.com/3gx88p
Hi, that’s pretty cool!
Let me share some that I’ve done at Firstborn a while ago, related to microphone stuff:
http://iuqo.awardspace.com/experiments/particles
(Works better with an external mic)
Not sure if it’s on my end or not, but my Apple Mighty Mouse scroll ball isn’t activating the leaves…
I followed Scott Hill’s directions and Selectah and when I run it I get:
1017: The definition of base class BasicView was not found.
5000: The class ‘com.everydayflash.pv3d.leaf.LeafDemo’ must subclass ‘flash.display.MovieClip’ since it is linked to a library symbol of that type.
I am such a newbie here but I think this might be easy for you guys. Any advice?
Very nice coding and beautyfull result!
I was wondering what are the differences between the example swf and the source code? I got the feeling the wind/paper interaction works differently in the example (much smoother and the papers have better movement). Could you please send me the source of the example swf?
Thanks in advance!
btw, I compiled with Flex 3.3 using FlexBuilder.
Like sn3p above said… The source code gives a complete different result than the example swf above. What could be the reason for this?
Hey, thanks for this tutorial…
I have a big problem…
ReferenceError: Error #1065: Variable LeafMaterialFactory_LeafTexture is not defined.
ReferenceError: Error #1065: Variable LensMask_Mask is not defined.
ReferenceError: Error #1065: Variable LeafDemo is not defined.
Hi,
Awesome code!! really surprised by this quality of animation!! I work on it since several days to include mouse interaction with leaves. Like Selectah in previous post, it doesn’t work, but no error generated. Some suggestions? thx
Great work man. I really appreciate sharing the source code for this. Great idea with great techniques.
can i use this in flartoolkit ??
@octagono Yeah, technically it should not be a problem. I would remove the depth-of-field effect for performance reason (and also it hardly makes sense with a webcam) and avoid adding too many leaves.
very good I like this effect very much,and I want to use it in my next project.
That is really cool.
@BLOCK_LETTERS ça me rappelle un vieil article pv3d http://bit.ly/ZiIru ;)
Fantastic :D
[...] el blog de everyday3d.com podemos encontrar esta ingeniosa animación en Papervision 3D que interactúa con el micrófono. [...]