Wednesday, March 3rd, 2010

Touching Cloth; Canvas Fu

Category: Canvas

Andrew Hoyer shows his canvas Fu with Cloth, a great experiment using nice physics.


What makes this simulation special is the speed at which everything is computed. Javascript (the language this is written in) is not exactly the most efficient language for this type of computation. This being said, much time was spent squeezing out every little detail that slows things down.

The most computationally expensive part is trying to satisfy the constraints. To do this requires the calculation of distance between two points. This is easy to do with a little math, but that often involves an expensive square root. This is something that cannot simply be thrown out either, so what do you do? You approximate it. There are lots of mathematical tools for approximating functions, in this case I chose the first couple terms of a taylor expansion.

Check out his fast vector, constraints, and finally the cloth itself.

Posted by Dion Almaer at 6:12 am

4.8 rating from 65 votes


Comments feed TrackBack URI

Mind. Officially. Blown.

That is just the coolest thing ever. I cannot believe this is all JS, and it runs smooth as silk in FF. Who needs PhysX when your browser can do all the cloth simulation you need, right :D

If you set it to 3 points, grab the point in the center and pull it up above the top 2 points you can “break”. 15 point cloth is flawless though, I was throwing it all over the screen and it just kept hanging in there :)

Comment by iliad — March 3, 2010

I wonder if you could make it even more efficient by using the new web workers API to do the number crunching in a background thread?

Comment by Yansky — March 3, 2010


Comment by BenGerrissen — March 3, 2010

After seeing that, I think we can definitely shutdown the internet.

Comment by ywg — March 3, 2010

Nice. I tried it with 100 points and it still ran pretty fast.

Comment by okonomiyaki3000 — March 3, 2010

This has been around for at least 6 months if I recall correctly. Hell my browser even displayed the link in the “previously visited” color.

Comment by tj111 — March 3, 2010

Nice article title Dion, though I guess either it doesn’t have any other meaning to non-UK readers, or everyone so far is far more mature than I am :)

Comment by jeromew — March 3, 2010

It’s very cool. I tried it with 50 points (thanks Firebug) but that seemed to make it rather too heavy, both physically (?) and in terms of processor use.

Comment by jeromew — March 3, 2010

doesn’t work for IE8 for me.
with 50 points it is heavy for firefox, but runs quite smoth in chrome. chrome js engine rulez!

spam alarm by the way!

Comment by Novalis — March 4, 2010

i dunno about IE6 support, but it definitely is borked in IE7. Lame.

Comment by getify — March 4, 2010

absolutely killer.

@getify+@Novalis, you’re missing the point. it’s an experiment. take it out of the sandbox and make some kind of framework out of it if IE is so important to you.

Comment by fernmicro — March 4, 2010

Making it work in IE is as simple as dropping in excanvas, but performance would be horrible. It would be interesting to know exactly how horrible.

Comment by Joeri — March 5, 2010

Leave a comment

You must be logged in to post a comment.