Skip to content

tigerleapgorge/p2.js

 
 

Repository files navigation

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

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.

Examples

Examples showing how to use p2.js with your favorite renderer.

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 live
var world = new p2.World({
    gravity:[0, -9.82]
});

// Create an empty dynamic body
var circleBody = new p2.Body({
    mass: 5,
    position: [0, 10]
});

// Add a circle shape to the body.
var radius = 1;
var circleShape = new p2.Circle(radius);
circleBody.addShape(circleShape);

// ...and add the body to the world.
// If we don't add it to the world, it won't be simulated.
world.addBody(circleBody);

// Create an infinite ground plane.
var groundBody = new p2.Body({
    mass: 0 // Setting mass to 0 makes the body static
});
var groundShape = new p2.Plane();
groundBody.addShape(groundShape);
world.addBody(groundBody);

// 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.
setInterval(function(){

    // The step method moves the bodies forward in time.
    world.step(timeStep);

    // Print the circle position to console.
    // Could be replaced by a render call.
    console.log("Circle y position: " + circleBody.position[1]);

}, 1000 * timeStep);

Install

Browser

Download either p2.js or the minified p2.min.js and include the script in your HTML:

<script src="p2.js" type="text/javascript"></script>

If you would like to use ordinary Array instead of Float32Array, define P2_ARRAY_TYPE globally before loading the library.

<script type="text/javascript">P2_ARRAY_TYPE = Array;</script>
<script src="p2.js" type="text/javascript"></script>
Node.js
npm install p2

Then require it like so:

var p2 = require('p2');

Supported collision pairs

Circle Plane Rectangle Convex Particle Line Capsule Heightfield Ray
Circle Yes - - - - - - - -
Plane Yes - - - - - - - -
Rectangle Yes Yes Yes - - - - - -
Convex Yes Yes Yes Yes - - - - -
Particle Yes Yes Yes Yes - - - - -
Line Yes Yes (todo) (todo) - (todo) - - -
Capsule Yes Yes Yes Yes Yes (todo) Yes - -
Heightfield Yes - Yes Yes (todo) (todo) (todo) (todo) -
Ray Yes Yes Yes (todo) - (todo) (todo) (todo) -

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!

Packages

No packages published

Languages

  • JavaScript 91.9%
  • HTML 7.7%
  • CSS 0.4%