绑定js物理引擎的书画模型
浏览数：37 /
时间：2015年06月09日
?
HTML5提供的canvas绘图具备较高的执行性能，可与javascript物理引擎结合，实现可响应外界输入扰动的响应动画。由于动画的每一帧都是实时运算获得，并且取决于扰动的输入，和模型之间的相互约束。因此它具有不确定性，伴随这种不确定性的趣味性，是传统由确定的连续帧组成的动画所无法带来的。
物理模型接近现实世界的响应，可以让用户观看到不同的输入，所引发的熟悉的各种响应。这种与预期一致的不确定性使用户获得愉悦的交互体验。ios界面的滑动惯性、愤怒的小鸟的重力和碰撞模型都具有此特点。
?
下面看看本作的视频效果：
http://v.youku.com/v_show/id_XODMyNzk3NTM2.html?
?
基本实现思路如下：
- 采用verlet.js的角度约束作为基本约束；
- 允许对每条线段编辑宽度、约束权重，编辑结果可以保存到json（toJSON），也可以从json加载（fromJSON）；
- 根据线宽和角度对原始图进行切片（切图）；
- 离线将切片扣去背景；
- 将切片与约束进行绑定（载图）；
- 进入仿真模式，观看扰动效果（仿真）。
基本操作截图如下：
?
?
源码参见附件，下载后解压缩到web server下，
访问：http://localhost/vl/
就可试试效果了。
?
?
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
