Thursday 1 April 2010

PV3D: Crumple primitives up

Here's something awesome that I got my head around recently: how to take a Papervision object and warp it so much that it looks like it's being screwed up into a ball (and, flattened back out again!) Like so:


Like with most Papervision unknown territory, I expected this to be hugely fiddly and difficult: in reality it's easy to accomplish in a few lines of code. All you need to do is apply this to your Papervision object (it will work for anything, but a flat image works best visually so you can really see it screw up). Note that this example uses TweenMax to animate, but once you've got it working you can do whatever you want with the shape. Check it out:

// Create vertex array 
public var vertex_array:Array = new Array();

// Write the vertices of myShape to the array
vertex_array = myShape.geometry.vertices;

// Loop through the array, and animate them (in this case firing them backwards)
for(var i:int = 0; i < vertex_array.length; i++)
{    
     // Cast each array entry explicitly to Vertex3D
     var v:Vertex3D = vertex_array[i] as Vertex3D;
     
     // First crumple
     var target:Number = Math.floor(Math.random()*600);
     TweenMax.to(v, 0.2, {z:target, ease:Back.easeOut});

     // Second crumple
     var target2:Number = Math.floor(Math.random()*400);
     TweenMax.to(v, 0.2, {z:target2, ease:Expo.easeOut, delay:0.1});
}

And that's it! Of course this is a hugely simplified example with hard-coded animation, but the possibilities are endless. I think my next step with this is to start messing with more complicated shapes; this will work great for extruding object faces and generally creating more involved and complex animations. More to come with this, definitely!

No comments:

Post a Comment