Verlet Physics Rigid Body

class Dot extends Phaser.Geom.Point {

constructor(scene, x, y, vx, vy) {

super(x, y);

this.scene = scene;

this.graphics = this.scene.graphics;

this.pos = new Phaser.Math.Vector2(x, y);

this.oldpos = new Phaser.Math.Vector2(x + (vx||0), y + (vy||0)); // velocity x, y

this.friction = 0.97;

this.groundFriction = 0.7;

this.gravity = new Phaser.Math.Vector2(0, 1);

this.radius = 5;

this.color = '0xe62a4f';

this.mass = 1;

}

update() {

let vel = this.pos.clone().subtract(this.oldpos);

vel.scale(this.friction);

// if the point touches the ground set groundFriction

if (this.pos.y >= CANVAS_HEIGHT - this.radius && vel.lengthSq() > 0.000001) {

var m = vel.length();

vel.x /= m;

vel.y /= m;

vel.scale(m * this.groundFriction);

}

this.oldpos.set(this.pos.x, this.pos.y);

this.pos.add(vel);

this.pos.add(this.gravity);

}

constrain() {

if (this.pos.x > CANVAS_WIDTH - this.radius) {

this.pos.x = CANVAS_WIDTH - this.radius;

}

if (this.pos.x < this.radius) {

this.pos.x = this.radius;

}

if (this.pos.y > CANVAS_HEIGHT - this.radius) {

this.pos.y = CANVAS_HEIGHT - this.radius;

}

if (this.pos.y < this.radius) {

this.pos.y = this.radius;

}

};

render() {

this.graphics.fillStyle(this.color);

this.graphics.fillCircle(this.pos.x, this.pos.y, this.radius)

}

}

class Stick {

constructor(scene, p1, p2, length) {

this.scene = scene;

this.graphics = this.scene.graphics;

this.startPoint = p1;

this.endPoint = p2;

this.stiffness = 2;

this.color = '#f5476a';

// if the length is not given then calculate the distance based on position

if (!length) {

this.length = Phaser.Math.Distance.BetweenPoints(this.startPoint.pos, this.endPoint.pos);

} else {

this.length = length;

}

}

update() {

// calculate the distance between two dots

let dx = this.endPoint.pos.x - this.startPoint.pos.x;

let dy = this.endPoint.pos.y - this.startPoint.pos.y;

// pythagoras theorem

let dist = Math.sqrt(dx dx + dy dy);

// calculate the resting distance betwen the dots

let diff = (this.length - dist) / dist * this.stiffness;

// getting the offset of the points

let offsetx = dx diff 0.5;

let offsety = dy diff 0.5;

// calculate mass

let m1 = this.startPoint.mass + this.endPoint.mass;

let m2 = this.startPoint.mass / m1;

m1 = this.endPoint.mass / m1;

// and finally apply the offset with calculated mass

if (!this.startPoint.pinned) {

this.startPoint.pos.x -= offsetx * m1;

this.startPoint.pos.y -= offsety * m1;

}

if (!this.endPoint.pinned) {

this.endPoint.pos.x += offsetx * m2;

this.endPoint.pos.y += offsety * m2;

}

}

render() {

this.graphics.lineStyle(1,this.color).lineBetween(this.startPoint.pos.x, this.startPoint.pos.y, this.endPoint.pos.x, this.endPoint.pos.y);

}

}

class Game extends Phaser.Scene {

constructor() {

super({key: "Game"});

this.dots = [];

this.sticks = [];

this.ITERATION = 100;

}

create() {

this.graphics = this.add.graphics();

// forming a BOX

this.dots.push(new Dot(this, 100, 100, (Math.random() - 0.5) * 100.0)); // x, y, vx, vy

this.dots.push(new Dot(this, 200, 100));

this.dots.push(new Dot(this, 200, 200));

this.dots.push(new Dot(this, 100, 200));

// sticks

this.sticks.push(new Stick(this, this.dots[0], this.dots[1]))

this.sticks.push(new Stick(this, this.dots[1], this.dots[2]))

this.sticks.push(new Stick(this, this.dots[2], this.dots[3]))

this.sticks.push(new Stick(this, this.dots[3], this.dots[0]))

this.sticks.push(new Stick(this, this.dots[3], this.dots[1]))

}

update(t, dt) {

this.graphics.clear()

// update

for (let i = 0; i < this.ITERATION; i++) {

for (let d of this.dots) {

d.constrain();

}

for (let s of this.sticks) {

s.update();

}

}

for (let d of this.dots) {

d.update();

d.render();

}

for (let s of this.sticks) {

s.update();

s.render();

}

}

}

Useful References

https://betterprogramming.pub/making-a-verlet-physics-engine-in-javascript-1dff066d7bc5