Rb-phys2d NPM | npm.io

RbPhys2D

JavaScript and Typescript rigid body 2d physics engine primarily devised to create complex scenes involved various types of joints and shapes.

Examples

Features

Circle, Box, Ellipse, Capsule, Polygon
Continuous Collision Detection (only between convex shapes yet)
Concave Mesh Shape
Lifecycle Events
Distance, Prismatic, Revolute, Weld, Wheel, Spring, Mouse, Motor Joints
Physical Material Features: Restitution, Friction, Damping
Bodies Sleeping
World Islands
Force-Based Constraint Solver

Installation

Using npm package manager:

npm install rb-phys2d

Getting started

ESM

Install additional npm package for drawing world onto canvas element:

npm install rb-phys2d-renderer

Create world:

// gl-matrix is nessesary for vector/matrix operations
import { vec2 } from 'gl-matrix';
// include Box shape and world factory
import { Box, createWorld } from "rb-phys2d";
// stuff for rendering and interacting with world through canvas
import { createViewport, createWorldRenderer } from "rb-phys2d-renderer";

// world is main entry point for almost all api
const world = createWorld({ ... })

Fill world with bodies:

// create static floor
const floor = world.createBody({
  position: vec2.fromValues(0, -5),
  mass: Number.POSITIVE_INFINITY,
  inertia: Number.POSITIVE_INFINITY,
});
world.addCollider({ shape: new Box(10, 2), body: floor });

// create dynamic box
const box = world.createBody({ mass: 1 });
world.addCollider({ shape: new Box(1, 1), body: box });

Create viewport and promote world through main loop:

const canvas = document.getElementById('canvas');

const viewport = createViewport(canvas)
  .addMousePickingControl(world)
  .addViewportAdjustingControl();

const renderer = createWorldRenderer(viewport, world);

// it is frame duration in seconds
const dt = 0.0167;

const step = () => {
  // world simulation starts here
  world.step(dt);

  // here all rendering happen
  renderer.clear();
  renderer.render();

  requestAnimationFrame(step);
};

requestAnimationFrame(step);

See full source code and life demo here.

Browser

Include necessary bundles into html page

<script src="./node_modules/gl-matrix/gl-matrix.js"></script>
<script src="./node_modules/rb-phys2d/dist/bundle/rb-phys2d.js"></script>
<script src="./node_modules/rb-phys2d-renderer/dist/bundle/rb-phys2d-renderer.js"></script>