这个给力！HTML5 Canvas 模拟衣服撕扯动画

[prettyflyer]

今天看到一个很酷的HTML5动画，用鼠标撕扯那块布，关键是用力就能撕破它，不知道是什么原理，大家知道么？这是那个动画的地址：
http://www.html5tricks.com/demo/html5-cloth-tear/index.html

[tedd]

omg, 太玄了

[609761871]

这个超赞！

[abelyao]

牛逼！

[xiaou]

撕完，会掉到地上不停的弹

[superbear]

@xiaou 还可以继续撕。。。

[wdlth]

说好的衣服呢？人与人最基本的信任在哪里？
http://antigravitygoogle.com/，这个也差不多。

[whwei]

怎么实现的？

[surftheair]

光有一张布，至少要有个美女披着布让我们撕吧

[palxex]

cellular automata?

[lazybios]

好逼真的效果~

[sethverlo]

看到「模拟衣服撕扯动画」就进来了…发现只是一块儿布…

[coolicer]

前2年就看到了

[young]

挺流弊
貌似很早之前就看到过...

[rrfeng]

对啊，这个最少已经三四年前就有了……我还在上学的时候

[loading]

你们 G 点太低！

请看性感舞步：
http://www.codersgrid.com/2013/06/05/making-webgl-dance/

来源： http://v2ex.com/t/71278

[wvidc]

太酷了~

[jprovim]

原版, http://codepen.io/suffick/pen/KrAwx

[greatdk]

裤子都脱了你就给我看这个？

开个玩笑，效果确实挺炫的

[tabris17]

我以为衣服撕开里面会有什么东西

[ruchee]

Cool

[jacob]

@tabris17 有nothing啊

[soli]

酷！

[Mutoo]

http://subprotocol.com/verlet-js/

[Mutoo]

原理是用 verlet 积分模拟粒子运动。然后用距离约束限制粒子距离。然后生成一个二维粒子阵，对相邻的粒子进行约束。撕裂的效果只要在距离上增加一个阀值，超过后删除该约束就行了。

上面是一个开源的 javascript verlet 库

[CosWind]

好早之前看过了。

[openroc]

cool~