2D Cloth Simulation with Canvas

Gets pretty interesting if you Firebug that select box and ramp the points to 50 or so...

EDIT: 100 points and some futzing created so much feedback I ended up with a little cyclone going for a while.

EDIT: pic -> http://i.imgur.com/qhsDnl.jpg

Nice. I played with a similar thing years ago: rigid bodies connected with various constraints. The simple solving for the acceleration of the point masses under the forces from the connections that this computation seems to do works fine as long as the cloth is elastic. If you try to compute the dynamics of points connected by rigid rods, the large forces makes the system really stiff and your integration time step drops precipitously. In that case you have to generate a large linear system of equations and solve for the global motion of the system. It's quite a bit trickier. It's also interesting how situations that are familiar from real life, like a drawer getting stuck diagonally in the slot, really are singularities in the equations.

I realized this was actually an area of research, and found a bunch of papers by this guy: http://www.cs.cmu.edu/~baraff/pbm/pbm.html

Canvas rendering is starting to really kick ass, yet I can't help but feel that it doesn't quite belong. Is this how early Web pioneers felt about the img tag in a Web of grey documents? I know there are practical applications, I can think of several off the top of my head. It just feels like we're overloading the browser with candy now.

Do we now expect browser vendors to support cutting-edge, hardware accelerated graphics along-side those bleeding-edge standards we whine about?

3d version:

http://gyu.que.jp/jscloth/

man, this is a cpu killer...

I like his other experiments too.