Введение в Verlet.js

verlet-js — это легкий физический движок, созданный Sub Protocol , который вы можете использовать в своих сетевых играх. Если вы увлекаетесь наукой и техникой, вы также можете использовать ее в своих симуляциях. Как следует из названия, verlet-js основан на итеративном методе, называемом интеграцией Verlet, который используется для вычисления поведения объектов в его двумерном мире.

В этом уроке я собираюсь научить вас всему, что вам нужно, чтобы знать, как эффективно использовать этот физический движок в ваших проектах.

Настроить

Для начала загрузите последнюю версию verlet-js с GitHub и включите ее в свою веб-страницу с помощью тега script

 <script src="verlet-1.0.0-min.js"><script>

Поскольку 2D-мир этого физического движка нарисован на canvas

 <canvas width="800" height="300" id="canvas"></canvas>

Инициализация 2D мира

Чтобы инициализировать 2D-мир — вы также можете назвать это симуляцией — вы должны вызвать конструктор verlet-js, который называется VerletJS() Этому конструктору вы передаете размеры canvascanvas

 var world;

function initializeWorld() {
   world = new VerletJS(800, 300, document.getElementById("canvas"));
}

Рендеринг мира

Чтобы нарисовать 2D-мир, вы должны повторно вызывать функцию frame()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);

Первый параметр указывает координаты начала координат формы, а второй параметр определяет радиус (расстояние от начала координат до всех других точек формы). Третий параметр — это количество сегментов, составляющих форму. Последние два параметра определяют жесткость ограничений.

С этим утверждением вы получите следующий результат:

 world.tire(new Vec2(100,100), 100, 4, 1, 1);

 world.lineSegments([new Vec2(100,100), new Vec2(150,150)], 1);

 world.cloth(new Vec2(100,100), 200, 200, 10, 3, 1);

 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);

 // pins the first particle
triangle.pin(0, new Vec2(100,100));

 world.gravity = new Vec2(0.2, 0.2);