绑定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/

就可试试效果了。

?

?

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。