Coding - Javascript

Introduction to PhysicsJS

If you are someone who works with JavaScript projects on a regular basis, there are good chances that you will often be asked to create animations. Such JavaScript animations, in general, are pretty simple to begin with and hardly require Physics.

However, just in case you do need that extra bit of Physics in your JavaScript animations, allow me to introduce you to PhysicsJS, a JavaScript library that lets you add Physics to your JavaScript animations within minutes and without any adverse effect on download time.

Introduction to PhysicsJS

Major Features

PhysicsJS is still in Alpha, but it already boasts of a heavy list of features, such as:

  • MIT License.
  • PhysicsJS is modular, so that you only need to load the stuff that you actually intend to use. The core library is just 31 KB minified.
  • It is highly extendable, so you can tweak and play around with it as much as you like.
  • Written in native JavaScript, the library features a syntax familiar for JavaScript developers (it isn’t C compiled into JS, you know).
  • PhysicsJS uses an AMD module or global namespace.
  • Furthermore, it is not tied to a specific renderer in particular.
  • Lastly, PhysicsJS comes with a plethora of extensions that support points, circles, arbitrary convex polygons, constant gravity, newtonian gravity, collisions and verlet constraints.

PhysicsJS primarily focuses on 2D Physics engines, albeit it might be possible to create a 3D fork if needed. The fact that PhysicsJS is specially made for 2D animations further enforces faster browser rendering.

Usage-related Info

You can use PhysicsJS as either an AMD module (using RequireJS) or as a CommonJS module, or as a regular browser global.

If you decide to use PhysicsJS as an AMD module, you will first need to inform RequireJS where to find the PhysicsJS source:

 baseUrl: './',
 // ...
 packages: [
 name: 'physicsjs',
 location: 'path/to/physicsjs',
 main: 'physicsjs-0.5.1.min'

Thereafter, you just need to deal with the dependencies:

 'physicsjs/bodies/circle' // will mix into the PhysicsJS library
 ], function( Physics ){

// function body

Alternatively, if you intend to use PhysicsJS as a browser global, simply include the library in your HTML, as follows:

<script src="scripts/physicsjs/physicsjs-VER.min.js"></script>

Just remember that since PhysicsJS is modular, any core functionality is separated from non-core functionality. Thus, you will need to include the non-core functionality separately, as per your requirements. If that seems tedious or boring to you, you can use the full version of the script with all the non-core functionality, as follows:

<script src="scripts/physicsjs/physicsjs-full-VER.min.js"></script>

For further info as well as sample ‘Hello World’ programs, you should consider checking out the official website.


PhysicsJS lets you work with 2D animations in your JavaScript projects. However, it is still in Alpha, and thus, may perform eerily worse or better than expected. Obviously, it is going to be a great script once it leaps out of Alpha, but for now, you should not expect impeccable performance.

Furthermore, the documentation is not much to talk about. There are some odd tutorials and a detailed description is available on Github, but overall, a better documentation is surely needed.

Yet, PhysicsJS is an impressive resource. Just in case you are wondering about its abilities, check out this spaceship.

If you have used or are planning to use PhysicsJS, be sure to share your experiences with us in the comments below!

About the author

Writer; coffee-lover; best-selling author; editor of The Globe Monitor; blogs at Code Carbon. Learn more about my works, follow me on Facebook or Google+.

Share this post

1 Comment

  1. Note from the creator: I’m looking for development/documentation help. The more hands I can get doing small jobs, the faster we can get it out of alpha!

Leave a Comment

Subscribe To Our Newsletter