Animating vertices in Papervision3D
Rotating cubes, planes and spheres in 3D is fun. However this time, I thought that I’d try something less basic when it comes to 3D animation. So here’s the idea: the Papervision3D universe is composed of triangles. Each object is a structure formed of one or more of them. The points where the triangles meet are called vertices (plural for vertex). A vertex, represented by the class Vertex3D, is basically a point in the 3D space with a ‘x’, ‘y’ and ‘z’ coordinates. The interesting part is that each of those vertices can be manipulated separately.
Click on the image above to view a demo. Once I grasped the basic idea that vertices can be manipulated, such effect was pretty simple to acheive. First I create a plane, I add a bitmap texture, and then I access the vertices of the plane one by one and manipulate their ‘z’ property.
For the animation I create a small bitmapData object and apply the perlinNoise on it at each frame with different settings to create this illusion of wavy movement. Then I translate the color value of each pixel to the ‘z’ property of each vertex in the 3D plane. Later I multiply this value by stage.mouseX, so the effect will vary in intensity depending on the mouse position… And voilà! I have a waving flag, a small piece of a stormy sea, a rodeo-style magic carpet or whatever.
Move your mouse cursor around from the right to the left side of the screen. Click anywhere to switch between a bitmap texture and a wireframe texture. In the wireframe mode the movement of the vertices is much easier to spot and understand.
BTW. I created a project on Google Code because I needed an SVN account for personal use, but I discovered that the code browser is also pretty cool for sharing stuff and it even formats AS3 in a nice way! So, if you are interested in the source for this example, it is here.
[...] The interesting part is that each of those vertices can be manipulated separately.” View the demo and download source file [...]
Very cool! I just happened across your site. This animation is very nice. It looks so fluid and beautiful. Now I’m going to have to see what else you got here…
Hi Bartek,
I can not thank you enough for putting this up. I was able to create a 3D plotter using this code. The address is below
http://nkuflc.org/sincplot/
I acknowledged your work at the bottom of the project and linked back to this site. When I get it up on Youtube and Google Code I will put the link here.
Thank you so so much for your incredible work on this!!!
@Dan. Thanks. The blog is pretty new so you won’t find much now, but I will try to post new stuff on a more-or-less-regular basis.
@Mike. I am glad that my code was helpful to you, and thanks for the acknowledgement. I release all my sources under the MIT license, so you are free to use it anyway you want (just so you know…)
Thanks so much!
My Google Code is at
http://code.google.com/p/flex3cookbook1/downloads/list
and the YouTube videos are at
3D Plotter in Papervison3D and Flex 3 (1 of 2)
http://www.youtube.com/watch?v=YlFLT9YA444
3D Plotter in Papervison3D and Flex 3 (2 of 2)
http://www.youtube.com/watch?v=TvpIFLLLKp8
Another application of this is to use it as a terrain builder for games.
Once again, thanks so much - I didn’t have a clue on how to do this
until your video.
Best Regards,
Mike Lively
[...] http://www.everydayflash.com/blog/index.php/2008/05/05/vertex-animation-papervision3d/ http://www.everydayflash.com/blog/index.php/2008/05/16/road-trip-papervision3d/ [...]
Excellent work, Im not too bad on Papervision but this has saved me loads of time as youve already done it, and it runs nice. just what I needed to animate some flags, Hope I can help you out some day, thanks again.
Super code, also thanks to mike for adding additional functionality.
wicked stuff.
wondering if there is a way to tap into a collada object, like you’ve done with a plane?
Cheers,
Al
[...] http://www.everydayflash.com/blog/index.php/2008/05/05/vertex-animation-papervision3d/ [...]
very nice, thanks for the post! The demo is amazing.
nice
Nice. On a related note:
http://www.zeropointnine.com/blog/3d-sine-wave-study-w-papervision3d
Thanks,
Lee
Really awesome. Could you tell me how would you modify the code to disable the increase in movement as you move the cursor from left to right?
Thanks
Just to clarify, I’m trying to figure out how to keep the object moving - unaffected by mouse movement.
Thanks!
Anyone know how to disable the mouse interaction? I’m new to this and have no idea what piece of code I need to take out or change. Help please? Pretty please?
@Jason to remove the mouse interaction element, you need to modify line 111 in the source code: http://code.google.com/p/barteksplayground/source/browse/trunk/src/com/everydayflash/pv3d/PerlinCarpet.as
Just replace the (mouseX / stage.stageWidth) with a number of your choice. For best effect use a value between 0 and 1, but you can experiment with any other number too.
Thanks soooo much bartek! May I ask, I know you release all your sources under the MIT license, but I’m not enritely sure of my rights - may I use a modified version of this script on a website?
Thanks.
@Jason Yes, you can! :)
nice