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 *