Introducing PhysicsJS

A lot of us create JavaScript animations in our projects, these animations are usually simple and require no physics whatsoever.

PhysicsJS aims to change that by making it easy for us to add physics to our JavaScript animations without slowing download time.

This library is modular, that means you only need to load what you want to use, and the core files are just 31kb.

Why use this library ?

One of the reasons is its modular workflow. This has the advantage of removing the clutter you don’t need and only loads what you need in your project, it’s also an extendable library in which you can replace methods to add a unique touch to your animations.

It’s also written in native JavaScript rather than being compiled into it, which means that all the syntax is very familiar to us already.

This library has the additional benefit that it has been specifically made for 2D animations which means fast browser rendering.

Using PhysicsJS

The first thing we need to do in order to get PhysicsJS up and running is install it and there are two ways to doing that: you can either install it as an AMD module using RequireJS or just install it globally as you would any JavaScript plugin.

The preferred method is the former, so in order to install it as an AMD module we need to have this in our JavaScript file:

require.config({
     baseUrl: './',
     packages:[
         {
           name:'physicsjs',
           location: 'path/to/physicsjs',
           main: 'physicsjs-0.5.1.min'
         }
     ],
 });

This installs the core files of PhysicsJS but since this is a modular physics engine we now should install the dependencies we need, and to do that we use:

require([
'physicsjs',
'physicsjs/bodies/convex-polygon' _// will be added
], function( Physics ){
// write your code here
});

Now that we have PhysicsJS installed we can start setting up our world and we will start by creating a function and defining the renderer parameters. This will be where the animation will be placed and also how the animated object will look:

Physics(function(world){
var renderer = Physics.renderer('canvas', {
el: 'physics',
width: 500,
height: 500,
styles: {
// set colors for the circle
circle' : {
fillStyle: '#3F768A',
}
}
});
world.add( renderer );

Here we define where our animation will take place, in this example it will be a canvas element with the id of physics, then we set the width and height and styles applied to the circle itself. In the final line we add this renderer to the world.

Now we have our renderer set up but we still need it to tell it to render on each step and for that we add:

world.subscribe('step', function(){
world.render();
});

The next step is to add the bounds of the window so that our objects will be constrained to that boundary:

var viewportBounds = Physics.aabb(0, 0, 500, 500);
world.add(Physics.behavior('edge-collision-detection', {
aabb: viewportBounds,
restitution: 1,
cof: 5
}));

First we set up our bounds and added collision detection so that our circle will hit them instead of just going by them. We also added restitution and this is what makes the ball bounce, with a value of 0 the ball will not bounce. cof is sort of like the rotation of the circle, 0 makes the circle not rotate and a number such as 5 makes it rotate a lot.

Now we need to add our circle to the canvas:

world.add(
Physics.body('circle', {
x: 0,
y: 0,
vx: 0.3,
vy: 0.3,
radius: 40
})
);

As you can see the values are pretty straight forward, the x and y coordinates, then we place the x and y velocity of our circle and the radius.

Now we add a line to make sure that the object will bounce when it collides with the boundaries and then we just add the gravity.

world.add( Physics.behavior('body-impulse-response') );
world.add( Physics.behavior('constant-acceleration') );

With this done we can now run the code to start our animation with:

Physics.util.ticker.subscribe(function( time, dt ){
world.step( time );
});
Physics.util.ticker.start();

If you would like to see a demo you can see this pen I created.

Now you can try to add some physics to your animations and play arround with this physics engine.

Have you used PhysicsJS? What are its best features? Let us know in the comments.