verlet-js是由Sub Protocol创作的轻量级物理引擎,可在基于Web的游戏中使用。 如果您热衷于科学和工程,也可以在模拟中使用它。 顾名思义,verlet-js基于一种称为Verlet集成的迭代技术,用于计算对象在其二维世界中的行为。
在本教程中,我将教您所需的一切,以了解如何在项目中有效使用此物理引擎。
设定
首先, 从GitHub下载最新版本的verlet-js,并使用script
标签将其包含在您的网页中:
<script src="verlet-1.0.0-min.js"><script>
在canvas
上绘制此物理引擎的2D世界时,您必须在网页上添加一个:
<canvas width="800" height="300" id="canvas"></canvas>
初始化2D世界
要初始化2D世界(也可以将其称为模拟),您必须调用称为VerletJS()
的verlet-js构造函数。 向此构造方法传递canvas
的尺寸以及对canvas
本身的引用:
var world;
function initializeWorld() {
world = new VerletJS(800, 300, document.getElementById("canvas"));
}
渲染世界
要绘制2D世界,您必须重复调用执行所有物理计算的frame()
函数和绘制所有属于2D世界的粒子和约束的draw()
函数。 您每秒调用这些功能的频率决定您世界的帧速率:
// The frame rate of the world
var fps = 32;
function renderWorld() {
world.frame(16);
world.draw();
setTimeout(renderWorld, 1000 / fps);
}
激活世界
现在您已经具有初始化和渲染世界的功能,让我们添加在页面加载时调用它们的代码:
window.addEventListener("load", function() {
initializeWorld();
renderWorld();
});
此时,如果您尝试在浏览器中一起运行这些代码片段,则canvas
元素中将不会发生任何事情,因为您的世界没有任何东西。
向世界添加物品
用verlet-js创建的世界只能包含粒子。 但是,您可以在粒子之间创建约束,以限制粒子彼此相对移动的方式。 例如,使用距离约束,可以强制两个粒子之间始终保持固定的距离。 同样,使用角度约束,可以强制三个粒子始终保持固定角度。
只需一点点创造力,您就可以使用粒子和约束来创建复杂的形状和行为。
形状
verlet-js具有一个名为tire()
的辅助函数,使您可以快速创建简单的形状(由粒子和约束组成),而不必自己定义粒子或约束。 要创建一个三角形,可以将以下代码添加到initializeWorld
函数中:
world.tire(new Vec2(100,100), 100, 3, 1, 1);
第一个参数指定形状原点的坐标,而第二个参数指定半径(从原点到形状的所有其他点的距离)。 第三个参数是组成形状的线段数。 最后两个参数指定约束的刚度。
使用此语句,您将获得以下结果:
请参阅CodePen上的SitePoint( @SitePoint )提供的Pen GJvXwV 。
这是使用tire()
的另一个示例,向您展示了如何创建正方形:
world.tire(new Vec2(100,100), 100, 4, 1, 1);
这是您获得的结果的实时演示:
请参阅CodePen上的SitePoint( @SitePoint )提供的Pen ZGJMVX 。
请记住,传递给tire()
的第三个参数指定了构成形状的三角形线段的数量,而不是形状具有的边的数量。
线数
要创建由两个粒子组成的线段,可以使用lineSegments()
函数。 它接受一个Vec2
对象数组,该数组包含形成线段的粒子的位置,以及一个数字,用于指定粒子之间的距离约束的刚度。
这是创建端点在(100,100)和(150,150)的线段的方法:
world.lineSegments([new Vec2(100,100), new Vec2(150,150)], 1);
前面的语句为您提供以下结果:
请参阅CodePen上的SitePoint( @SitePoint )提供的Pen xGLamJ 。
布料
verlet-js提供的另一个帮助器函数称为cloth()
。 它使您可以创建一组行为类似于布的粒子和约束。 以下代码显示了如何使用它:
world.cloth(new Vec2(100,100), 200, 200, 10, 3, 1);
此函数接受很多参数。 以下列表描述了所有这些:
- 第一个参数指定原点的坐标
- 第二个和第三个参数指定布料的宽度和高度。
- 第四个参数指定布料每一行和每一列中的段数
- 第五个参数(如果非零)指定应固定哪些粒子
- 最后一个参数指定所有粒子之间约束的刚度
运行上一条语句的结果如下所示:
请参阅CodePen上的SitePoint( @SitePoint )的Pen PqKdVw 。
创建自定义形状
可以使用Composite
类创建更复杂的形状(那些不能使用辅助函数创建的形状)。 Composite
对象具有两个数组:一个包含粒子的数组(称为particles
,另一个包含约束的对象( constraints
。 要将粒子或约束添加到Composite
对象,必须使用适当数组的push()
函数。
以下代码显示了如何使用三个粒子和三个距离约束来创建三角形:
var triangle = new world.Composite();
triangle.particles.push(new Particle(new Vec2(100,100)));
triangle.particles.push(new Particle(new Vec2(100,200)));
triangle.particles.push(new Particle(new Vec2(200,100)));
triangle.constraints.push(
new DistanceConstraint(triangle.particles[0], triangle.particles[1],2)
);
triangle.constraints.push(
new DistanceConstraint(triangle.particles[0], triangle.particles[2],2)
);
triangle.constraints.push(new DistanceConstraint(
triangle.particles[1], triangle.particles[2],2)
);
准备好形状后,使用以下代码将其添加到您的世界中:
world.composites.push(triangle);
如您所见,world对象具有一个称为composites
的数组,该数组用于保存所有Composite
对象。 在下面,您可以看到通过本节描述的摘录获得的结果:
请参阅CodePen上的SitePoint( @SitePoint )提供的Pen WvEgPG 。
使用图钉
创建布料时,您已经看到固定销在起作用。 顾名思义,是用别针将粒子固定到canvas
。 这意味着固定的粒子将不受重力影响,因此,除非您拖动它,否则它将不会移动。
例如,以下代码固定组成刚创建的三角形的粒子之一:
// pins the first particle
triangle.pin(0, new Vec2(100,100));
通过固定粒子,可以获得以下演示中所示的效果:
请参阅CodePen上的SitePoint( @SitePoint )提供的Pen MwvqLv 。
改变重力
默认情况下,您2D世界中的对象会向下掉落。 但是,您可以通过更改gravity
值(世界的属性)来更改此行为。 例如,要更改世界,使重力向下和向右拉,可以将以下代码添加到initializeWorld
函数中:
world.gravity = new Vec2(0.2, 0.2);
这样,您可以获得以下结果:
请参阅CodePen上的SitePoint( @SitePoint )提供的Pen xGLaMJ 。
结论
感谢这篇介绍性文章,现在您知道如何使用verlet-js。 正如我们所说,它是一个轻量级的物理库,用于创建由粒子和约束组成的弹性和交互式2D世界。 要了解更多信息,您可以在GitHub上 阅读 其代码和示例,或阅读Sub Protocol提供的指南 。
您如何看待这个图书馆? 你曾经用过吗? 你创造了什么? 让我们开始讨论。
From: https://www.sitepoint.com/an-introduction-to-verlet-js/