Der Schmale – David Lenaerts’s blog

Flash Platform Experiments

Verlet + Newton + FP10 = Cloth Simulation

Tags: , , , , , , ,

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 :)

Share and Enjoy:
  • Digg
  • TwitThis
  • del.icio.us
  • Facebook
  • Reddit
  • Netvibes
  • Technorati
  • Google

Tags: , , , , , , ,

13 Responses to “Verlet + Newton + FP10 = Cloth Simulation”


  1. Prince
    on Feb 25th, 2009
    @ 9:34 pm

    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. Xavi
    on Feb 26th, 2009
    @ 12:35 am

    jaw-dropping :O


  3. Heav
    on Feb 26th, 2009
    @ 3:21 pm

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


  4. Piergiorgio Niero
    on Feb 26th, 2009
    @ 3:52 pm

    if that book inspired you such a great experiment i’ve definitely to check it out :)
    wonderful job,
    pigiuz


  5. makc
    on Feb 26th, 2009
    @ 10:53 pm

    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 ;)


  6. David
    on Feb 27th, 2009
    @ 9:07 am

    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 ;)


  7. bartekd
    on Mar 6th, 2009
    @ 11:26 am

    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! :)


  8. Flash Player 10 on the big screen! | Der Schmale - David Lenaerts's blog
    on Mar 19th, 2009
    @ 12:12 pm

    [...] I did was the same reason I decided to use Flash Player 10: a perfect excuse to work on the earlier 2D cloth simulation and turn it into stage curtains on a whopper public screen. Blatant self-exposure? Nah [...]


  9. hamid
    on Nov 15th, 2009
    @ 8:41 am

    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 ?


  10. David
    on Nov 15th, 2009
    @ 9:05 am

    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.


  11. Mr King
    on Jan 31st, 2010
    @ 2:48 am

    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


  12. David
    on Feb 2nd, 2010
    @ 10:05 am

    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.


  13. sander
    on Feb 25th, 2010
    @ 6:48 pm

    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’

Leave a Reply

© 2009 Der Schmale – David Lenaerts’s blog. All Rights Reserved.

This blog is powered by Wordpress and Magatheme by Bryan Helmig.