p2.js
2D rigid body physics engine written in JavaScript. Includes collision detection, contacts, friction, restitution, motors, springs, advanced constraints and various shape types.
Demos | Examples | Documentation | Download | CDN | Wiki
Featured projects using p2.js
- Google I/O 2015 Experiment by Instrument
- PixiLights, a Christmas Experiment by Mat Groves
- More...
Demos
These demos use the p2 Demo framework, which provides rendering and interactivity. Use mouse/touch to throw or create objects. Use the right menu (or console!) to tweak parameters. Or just check the source to see how to programmatically build the current scene using p2.
- Buoyancy
- Car
- CCD
- Circle container
- Collision tests
- Compound objects
- Concave objects
- Constraints
- DistanceConstraint
- Fixed rotation
- Fixed XY
- Friction
- Gear constraint
- Heightfield
- Island solver
- Kinematic body
- Lock constraint
- Piston
- Prismatic constraint
- Ragdoll
- Sensor
- Restitution
- Sleep
- Segway
- Sleep
- Springs
- Surface velocity
- Suspension
- Tearable constraints
- TopDownVehicle
Examples
Examples showing how to use p2.js with your favorite renderer.
- Canvas: Asteroids game
- Canvas: Box on plane
- Canvas: Character demo
- Canvas: Circle on plane
- Canvas: Interpolation
- Canvas: Mousejoint
- Canvas: Raycasting
- Canvas: Rayreflect
- Canvas: Sensors
- Canvas: Sensors 2
- Pixi.js: Box on plane
Sample code
The following example uses the World, Circle, Body and Plane classes to set up a simple physics scene with a ball on a plane.
// Create a physics world, where bodies and constraints livevar world = gravity:0 -982; // Create an empty dynamic bodyvar circleBody = mass: 5 position: 0 10; // Add a circle shape to the body.var circleShape = radius: 1 ;circleBody; // ...and add the body to the world.// If we don't add it to the world, it won't be simulated.world; // Create an infinite ground plane.var groundBody = mass: 0 // Setting mass to 0 makes the body static;var groundShape = ;groundBody;world; // To get the trajectories of the bodies,// we must step the world forward in time.// This is done using a fixed time step size.var timeStep = 1 / 60; // seconds // The "Game loop". Could be replaced by, for example, requestAnimationFrame.;
Install
Browser
Download either p2.js or the minified p2.min.js and include the script in your HTML:
If you would like to use ordinary Array
instead of Float32Array
, define P2_ARRAY_TYPE
globally before loading the library.
Node.js
npm install p2
Then require it like so:
var p2 = ;
Supported collision pairs
Circle | Plane | Box | Convex | Particle | Line | Capsule | Heightfield | Ray | |
---|---|---|---|---|---|---|---|---|---|
Circle | Yes | - | - | - | - | - | - | - | - |
Plane | Yes | - | - | - | - | - | - | - | - |
Box | Yes | Yes | Yes | - | - | - | - | - | - |
Convex | Yes | Yes | Yes | Yes | - | - | - | - | - |
Particle | Yes | Yes | Yes | Yes | - | - | - | - | - |
Line | Yes | Yes | (todo) | (todo) | - | - | - | - | - |
Capsule | Yes | Yes | Yes | Yes | Yes | (todo) | Yes | - | - |
Heightfield | Yes | - | Yes | Yes | (todo) | (todo) | (todo) | - | - |
Ray | Yes | Yes | Yes | Yes | - | Yes | Yes | Yes | - |
Note that concave polygon shapes can be created using Body.fromPolygon.
Unit testing
Tests are written for Nodeunit. Run the tests with the command grunt test
.
Contribute
Make sure you have git, Node.js, NPM and grunt installed.
git clone https://github.com/schteppe/p2.js.git; # Clone the repo
cd p2.js;
npm install; # Install dependencies
# (make changes to source)
grunt; # Builds build/p2.js and build/p2.min.js
The most recent commits are currently pushed to the master
branch. Thanks for contributing!