【第一浅】Get Started
发布在九浅一深 verlet-js 物理引擎【完结撒花】2015年6月14日view:1953图形学,动画BrettBat物理引擎
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

准备工作

<canvas id="scratch" style="width: 800px; height: 500px;"></canvas>
window.onload = function () {
    var canvas = document.getElementById("scratch");

    // canvas dimensions 画布尺寸
    var width = parseInt(canvas.style.width);
    var height = parseInt(canvas.style.height);

    // retina 视网膜(显示屏)
    var dpr = window.devicePixelRatio || 1;    //设备像素比
    canvas.width = width*dpr;
    canvas.height = width*dpr;
    canvas.getContext("2d").scale(dpr, dpr);    //缩放

    /*
    * 【正文】才刚刚开始
    */
}

【正文】

// simulation 模拟器
var sim = new VerletJS(width, height, canvas);
sim.friction = 1;    //摩擦

// entities 实体
var segment = sim.lineSegments([new Vec2(20, 10)], 0.02);
var pin = segment.pin(0);

/*
*    这里可以添加更多【实体】
*/

// animation loop 动画循环
var loop = function() {
    sim.frame(16);
    sim.draw();
    requestAnimFrame(loop);
};

loop();

【实体】

var tire = sim.tire(new Vec(200, 50), 50, 30, 0.3, 0.9);
var min = Math.min(width, height)*0.5;
var segments = 20;
var cloth = sim.cloth(new Vec2(width/2, height/3), min, min, segments, 6, 0.9);
评论
发表评论
2年前
添加了一枚【评注】:实现逻辑的宏观体现就是,画布上新建一个模拟器,模拟器里创建 N 个实体
2年前
添加了一枚【评注】:使用 verlet-js 需要你有 canvas 的编程基础
2年前
添加了一枚【评注】:实体是个什么东西?可以去看一下专栏说明
2年前
添加了一枚【评注】:摩擦参数非必需
2年前
添加了一枚【评注】:你要是不知道引入 verlet-js 库的话,本专栏还是不要看了。
WRITTEN BY
Bolt_白衣苍狗
更多博文请登录http://bolt.h-won.com腾讯微博请@lc60005457
TA的新浪微博
PUBLISHED IN
九浅一深 verlet-js 物理引擎【完结撒花】

verlet-js 【译】

原文取自官方示例首页

转载请声明出处:[前端乱炖-Bolt 个人专栏]http://www.html-js.com/article/column/4527

About 关于

verlet-js,一个简单 verlet integration(混合) 物理引擎,javascript 实现,作者 Sub Protocol。Verlet 发音为 “ver-ley”。

Examples 示例

  1. Shapes(形状) (Hello world)
  2. Fractal(不规则碎片形) Trees
  3. Cloth(布)
  4. Spiderweb(蜘蛛网)

Features 特性

以下是 verlet-js 内部的可用实体分层:

  • 模拟器(Simulation):拥有复合实体,驱动所在一个场景内所有物理、动画的根对象
  • 复合材料(Composites):所在场景内的可用高阶对象(球,桥,布等)
  • 颗粒(Particles):仅仅是一个在空间内可以响应重力的点
  • 约束(Constraints):互相联结颗粒,这样他们就可以彼此互动
    1. 钉(Pin):将一个颗粒绑定在空间内的一个静态(static/fixes)位置上
    2. 距离(Distance):将两个颗粒互相固定在线性距离上
    3. 角(Angle):通过一个锐角彼此固定 3 个颗粒

License 许可证

你可以在非常宽松的 MIT 许可证下使用 verlet-js。

Source Code 源代码

[View project on GitHub](View project on GitHub)

版权声明

原文

Copyright 2013 Sub Protocol and other contributors.

http://subprotocol.com/

译文

原文取自官方示例首页

转载请声明出处:[前端乱炖-Bolt 个人专栏]http://www.html-js.com/article/column/4527

我的收藏