Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Tearable Cloth Simulation in JavaScript

codepen.io

Post reply on HN
Print view View original

21–30 of 159 posts

Re: Tearable Cloth Simulation in JavaScript

#21

Post by garretruh »

ochoseis wrote: post #15

This is awesome. I don't know what's more satisfying: actually tearing the cloth to pieces, or the fact that my 2009 13" macbook pro can run it smoothly without stressing the CPU.

Lucky you. It maxes out the CPU on an early 2008 (2.4 GHz w/ x3100) MacBook. I guess an actual GPU makes all the difference.

Re: Tearable Cloth Simulation in JavaScript

#22

Post by nthitz »

NathanKP wrote: post #19
laurentoget wrote: post #12

Is there any connection between this and http://subprotocol.com/verlet-js/ which was posted on HN a few days ago, or did you both happen to play with the same algorithm at the same time?

I'm actually not the developer. I just happened across it, enjoyed it a lot, and was surprised to find that it wasn't posted on HN yet.

Ah but it was: https://news.ycombinator.com/item?id=5481441

Re: Tearable Cloth Simulation in JavaScript

#23

Post by NathanKP »

nthitz wrote: post #22
NathanKP wrote: post #19

Earlier quoted context omitted.

I'm actually not the developer. I just happened across it, enjoyed it a lot, and was surprised to find that it wasn't posted on HN yet.

Ah but it was: https://news.ycombinator.com/item?id=5481441

Oh I did not see it the first time around. At any rate I'm glad it is getting more exposure this time.

Re: Tearable Cloth Simulation in JavaScript

#29

Post by efraim »

j2kun wrote: post #25

Can anyone speak to what's going on in these algorithms? I'm interested in the physics/math behind them. For example, how much about partial differential equations do I need to know to understand them?

It's very simple really. It's a grid of point masses with constraints between them (the lines you see) that says to keep the points at a constant distance from each other. Think of the constraints as springs that follow Hooks law[1], only infinitely stiff. You iterate through all the constraints and move the two points of each constraint apart if they are too close, or closer if they are too far apart. You need some basic linear algebra for the distance and direction calculations. It's common to use verlet integration to actually move the points because it's so easy do solve the constraints with it. Add some gravity and it looks very convincing.

To tear the "cloth", all you need to do is to remove those particular constraints from the list.

[1] http://en.wikipedia.org/wiki/Hooke%27s_law

Post reply on HN