HTML5提供的canvas绘图具备较高的执行性能,可与javascript物理引擎结合,实现可响应外界输入扰动的响应动画。由于动画的每一帧都是实时运算获得,并且取决于扰动的输入,和模型之间的相互约束。因此它具有不确定性,伴随这种不确定性的趣味性,是传统由确定的连续帧组成的动画所无法带来的。
物理模型接近现实世界的响应,可以让用户观看到不同的输入,所引发的熟悉的各种响应。这种与预期一致的不确定性使用户获得愉悦的交互体验。ios界面的滑动惯性、愤怒的小鸟的重力和碰撞模型都具有此特点。
下面看看本作的视频效果:
http://v.youku.com/v_show/id_XODMyNzk3NTM2.html
基本实现思路如下:
- 采用verlet.js的角度约束作为基本约束;
- 允许对每条线段编辑宽度、约束权重,编辑结果可以保存到json(toJSON),也可以从json加载(fromJSON);
- 根据线宽和角度对原始图进行切片(切图);
- 离线将切片扣去背景;
- 将切片与约束进行绑定(载图);
- 进入仿真模式,观看扰动效果(仿真)。
基本操作截图如下:
源码参见附件,下载后解压缩到web server下,
访问:http://localhost/vl/
就可试试效果了。
相关推荐
蒂法3dmax模型,人物模型,带骨骼绑定
为开发的的代码加一层保护-绑定电脑物理地址,识别是否为想开发权限的物理地址,如果是,执行开发程序,如果不是,报错提示。
身体与Unity模型绑定同步动作体验源码,KinectSDK2.0,Unity3D5.x
电脑防止arp攻击绑定路由器物理地址批处理
角色绑定模型 bodymech_MegaPack
多模型绑定,最流行的ruby on rails 技术 开发效率远远高于java ,大约是ruby的十倍
| JavaScript编程语言的2D和3D物理引擎(官方绑定)。
腾讯的js模板引擎template.js 方便ajax请求的数据进行遍历和数据绑定。
Lua脚本绑定的鬼火(Irrlicht)引擎 包含使用实例
牧师模型(带骨骼绑定).zip
超酷炫铠甲战士MAX模型 含材质含贴图 带绑定;超酷炫铠甲战士MAX模型 含材质含贴图 带绑定;超酷炫铠甲战士MAX模型 含材质含贴图 带绑定;
Javascript.Net, .NET 引擎引擎的绑定 重新分配Noesis.Javascript.dll 需要 Microsoft Visual C 库。 你可以在生成时指定 MSVC 版本,请参见 below 。要检查所有内容是否正确: 在 Manifest 文件中指定的确切版本...
目前点击物体让物体单独变色还有问题,其他的都是自己敲的,欢迎下载指导
士兵模型 - 低多边形 - 未绑定 这是一款低多边形士兵模型,未绑定和无动画,只提供模型和纹理。支持FBX,OBJ和C4D(R13)格式,包括贴图(JPG)和法线贴图(PNG),共4068个三角形,2048x2048贴图尺寸。点击截图可以...
dukluv, duktape JS引擎的LibUV绑定 dukluvduktape JS引擎的LibUV绑定这个项目的目标是为小型设备制造一个超精简的node.js-like 环境。http://dukluv.io/先决条件Linux:$ sudo apt-get build
*原生JS双向数据绑定实现 *@author wall *@date 2018-06-20 *@desc 实现可配置属性的双向数据绑定 *使用说明: *1.声明全局对象:如 * var test = { * topInfo: { * name:"张三", * age:18, * width:400 ...
大男孩的人物模型,,带材质带绑定~~~学习使用,3Dmax格式
Go-V8 Go的V8 JavaScript引擎绑定。特征线程安全彻底仔细的测试布尔值,数字,字符串,对象,数组,正则表达式,函数编译并运行JavaScript 保存并加载预编译的脚本数据使用全局对象模板创建JavaScript上下文在Go中...
js回车事件绑定