Wednesday, March 3rd, 2010
Touching Cloth; Canvas Fu
Category: Canvas
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.
Related Content:
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 :)
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?
wow
After seeing that, I think we can definitely shutdown the internet.
Nice. I tried it with 100 points and it still ran pretty fast.
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.
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 :)
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.
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!
i dunno about IE6 support, but it definitely is borked in IE7. Lame.
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.
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.