绑定js物理引擎的书画模型

 

HTML5提供的canvas绘图具备较高的执行性能，可与javascript物理引擎结合，实现可响应外界输入扰动的响应动画。由于动画的每一帧都是实时运算获得，并且取决于扰动的输入，和模型之间的相互约束。因此它具有不确定性，伴随这种不确定性的趣味性，是传统由确定的连续帧组成的动画所无法带来的。

物理模型接近现实世界的响应，可以让用户观看到不同的输入，所引发的熟悉的各种响应。这种与预期一致的不确定性使用户获得愉悦的交互体验。ios界面的滑动惯性、愤怒的小鸟的重力和碰撞模型都具有此特点。

 

下面看看本作的视频效果：

http://v.youku.com/v_show/id_XODMyNzk3NTM2.html 

 

基本实现思路如下：

1. 采用verlet.js的角度约束作为基本约束；
2. 允许对每条线段编辑宽度、约束权重，编辑结果可以保存到json（toJSON），也可以从json加载（fromJSON）；
3. 根据线宽和角度对原始图进行切片（切图）；
4. 离线将切片扣去背景；
5. 将切片与约束进行绑定（载图）；
6. 进入仿真模式，观看扰动效果（仿真）。

基本操作截图如下：

 

 

源码参见附件，下载后解压缩到web server下，

访问：http://localhost/vl/

就可试试效果了。