玻璃碎裂的效果

http://www.cnblogs.com/bmate/archive/2011/06/24/2088957.html

当时是心血来潮想做个爆炸效果。就是那种哐啷一声一块玻璃被切成一片片散落的样子。例子可以参考FFX的战斗切换，以及DMC3关卡结束的切换动画。
这个效果其它部分都很简单，难点在于切割。碎裂的方式是随机的，首先是创建一堆随机的点，然后三点组合成三角形，问题就在于如何组合。三角形当然是 不能交叠的，所以你需要将接近的点组合成三角形，而且保证它们不会叠在一起，问题就转变为“什么样的点才叫接近的点”。这个算法倒是在哪看到过，不过我不 记得就是了……
查也查不到，所以我就找个了近似方案代替。这里关键的问题在于点的随机性，只要点不是随机的，组合三角形就可以用((0,0),(0,1),(1,0)),((0,1),(1,0),(1,1))这个约定的组合，然后保证随机的时候不会交叉就可以了。
首先是创建出不考虑随机的状况，差不多就像下面这样，平均切成矩形，矩形再分成两个三角形。此时顶点到三角形的组合规律是固定的。

把这个作为原始状态，再调整顶点的位置，可以看到，即使将各个顶点分开移动，每个顶点只要还在矩形范围内活动，三角形就不会交叠。

其结果就是这样，虽然不是完全随机，但基本可以符合要求。

除去必须在边缘上的点之外，中间自由活动的点的坐标可以这样简单地求出来

x = dx * (i + Math.random()) 
y = dy * (j + Math.random()) 

其中dx,dy是分割的小矩形的长宽，i,j是顶点的x,y序号。

换个思路，就有新的方向。先创建顶点再组合三角形，和创建三角形再调整顶点，难易程度就会完全不同。