Verlet + Newton + FP10 = Cloth Simulation

clothA project I’m currently involved in inspired me to completely rewrite my old Curtain class into something more stable and versatile.¬†Using a character physics method based on Verlet integration, and adding some properties for friction and gravity, it resulted in a 2D cloth simulation (at least after some updates I just did since I needed to get away from work for a bit). The curtain itself is drawn using the new drawTriangles API for Flash Player 10.

Anyone interested in Verlet integration (or scripted animation in general) should check out Keith Peters‘ book¬†AdvancED ActionScript 3.0 Animation.

On to the demo! Right-click to view source. Not commented due to lack of time, but it shouldn’t be too hard to figure out :)

18 thoughts on “Verlet + Newton + FP10 = Cloth Simulation

  1. OMG! You are amazing!!! I’m a designer with dreams of being an AS developer – but my Right Brain won’t accept Actionscript that easily. This is an incredible “demo”. I’m following you on twitter too – so I look forward to being inspired by you again in the future.

  2. Is there any way to obtain __AS3__.vec.Vector calsses? To be able to recompile and experiment with this demo?

  3. there is a classic article about cloth simulation by Hitman devs, http://www.teknikus.dk/tj/gdc2001.htm

    I especially like this quote: “Actually, in Hitman, the overall speed of the cloth simulation was limited mostly by how many triangles it was possible to push through the rendering system.” – sounds goddamn familiar ;)

  4. Prince, Xavi: Cheers! :)

    Heav: You can get the Flex 4 sdk here: http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4 . You’ll need to use Flex Builder or FDT to be able to use it, tho.

    Piergiorgio: Thanks! The book’s pretty good indeed, can’t wait until I have the time to read the rest of it :D

    Makc: Yup I’ve read that article as well. I believe Hitman was one of the first games to implement this kind of physics. And sadly, Hitman is able to push way more triangles through the pipeline than we are ;)

  5. This is very nice! I was thinking about creating a as3dmod modifier that simulates a cloth in a very similar way. If you have some time to help me on that, email me! :)

  6. Pingback: Flash Player 10 on the big screen! | Der Schmale - David Lenaerts's blog

  7. Hello David , thanks for writing this nice code

    I have a question : how I can find the original position of dragged vertex like that u and v properties of TestPoint2D method in ViewPort3D class in Papervision3D ?

  8. Hamid: It’s not supported, but you could easily hack it in. In the method “findClosestPoint” within the “if (dist < minDist) {" block, you could add: u = i*_bitmapData.width; v = j*_bitmapData.height; That should give you the bitmapData's coordinates of the vertex you're dragging.

  9. Can I use this somehow in Flash CS4?? Im just a flash CS4 user for a few years now and never attempted to try Flex.. Can someone please give me some advice because thank

  10. Mr King: Sure you can. You might want to get rid of the line “import __AS3__.vec.Vector;” in Curtains.as (it’s a Flex Builder 3 issue using FP10 Vectors). Just extract everything from the CurtainsDemo function in the main class and use your own BitmapData.

  11. Hi :)
    Did anyone successfully imported this into CS4 yet?
    I’m not sure how to do this using my own BitMapData.

    Thanks for your help!

    Sander’

  12. @Sander :

    var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
    loader.load(new URLRequest(“your image.jpg”));

    function onComplete(e:Event)
    {
    //– and there is your bitmap…
    var bmp:Bitmap = loader.content as Bitmap;
    }

  13. hi,

    is it possible to NOT FIX the top!?
    i need a simulation like DRAG CLOTH FROM A TABLE …

    would be great to get some hints ;)
    cheers
    claudio

  14. Claudio: You can probably achieve that by removing any special cases using “if (y == 0)” in the class Curtains.as. I don’t think the results will be very spectacular, though :)

  15. Hi,

    is there any way to increase the falling velocity without “damaging” the final shape of the cloth? I’ve tryied chaging the _gravity var, but somehow this seems to modify the final width of the cloth… Thank you!

  16. Albert: Not really, the implementation of the Verlet physics only uses 1 iteration for performance, to keep the distances between connections correct (and as such not deforming the cloth), more iterations would be necessary but it could easily get too slow.

Leave a Reply

Your email address will not be published. Required fields are marked *