Bump.js

An open source 2D physics engine written in Javascript.

About

The purpose of this library is to provide a simple and easy to use physics engine.

Check Example and Code section for more information on how to use Bump.js. There is also a documentation if you need to go deeper.

You can help develop Bump.js on Github.

Example

Code

Javascript (main.js)

Instantiate a HTML5 canvas

var canvas    = document.getElementById("canvas");
var context   = canvas.getContext("2d");
var width     = canvas.width  = window.innerWidth;
var height    = canvas.height = window.innerHeight;
var animation = FRAMERAT.create(render); // instantiate animation loop

Instantiate 2 collision scenes to handle collisions between rigid bodies .

//create collision scenes
var collisionScene1 = BUMP.Scene.create();
var collisionScene2 = BUMP.Scene.create();
collisionScene1.setIteration(3);
collisionScene2.setIteration(3);

Create few particles

var particleQty    = 400;
// class for a particle
var particle = {
  create : function( positionX, positionY, velocityX, velocityY, size, weight, color ){
    var obj     = Object.create(this);
    obj.physics = BUMP.Physics.create(  
                                TYPE6JS.Vector2D.create( velocityX, velocityY ),
                                TYPE6JS.Vector2D.create( size, size ),
                                weight,
                                0.8,
                                0.8,
                                positionX, positionY, size, size
                              );
    obj.color   = color;
    return obj;
  },
  // compute the position of a particle at each frame
  update: function(){
    this.physics.updatePosition( animation.getDelta() );
  },
  
  draw: function(){
    this.physics.drawBody( context, this.color, null, null );
  }
};

// create a bunch of particles
var particles = [];
for( var i = 0 ; i < particleQty; i++ ){
  var radius   = TYPE6.Random.float( 0, 140 ); //120
  var angle    = TYPE6.Random.float( 0, TYPE6.Trigonometry.TWOPI );
  var particleRadius = TYPE6.Random.integer( 3, 6 );
  particles[i] = particle.create(
                    width * 0.5,
                    height * 0.25,
                    TYPE6.Trigonometry.cosineEquation( radius, angle, 0, 0 ),
                    TYPE6.Trigonometry.sineEquation( radius, angle, 0, 0 ),
                    particleRadius,
                    particleRadius,
                    '#555555'
                 );
  collisionScene2.addBody( particles[i] );
}

Create floor

// class for rectangle floor
var rectangle = {
  create : function( positionX, positionY, sizeX, sizeY ){
    var obj     = Object.create(this);
    //obj.body    = TYPE6.Geometry.Rectangle.create( positionX, positionY, sizeX, sizeY );
    obj.physics = BUMP.Physics.create(  TYPE6.Vector2D.create(),
                                        0.0,
                                        0.0,
                                        0.2,
                                        'rectangle', positionX, positionY, sizeX, sizeY 
                                      );
    return obj;
  },
  
  draw : function(){
    this.physics.drawBody( context, '#cccccc', null, null );
  }
  
};
// create the floor
var floor = rectangle.create( width * 0.5, height, width * 0.5, 200 );
// add the floor to the collision scene
collisionScene1.addBody( floor );

Animation

function draw() {
  floor.draw();
  
  for( i = 0 ; i < particleQty ; i++ )
    particles[i].draw();
  
}

function updatePositions(){
  for( var i = 0 ; i < particleQty ; i++ )
    particles[i].update();
}

function testCollisions(){
    collisionScene2.test();//test collisions between particles
    collisionScene2.testScene(collisionScene1);//test collisions between floor and particles 
}

function clearFrame(){
  context.clearRect( 0, 0, width, height );
}

function render(){
  updatePositions();
  testCollisions();
  clearFrame();
  draw();
  animation.drawConsole( context );
  animation.newFrame();
}

Contact me

Feel free to ask me about my work, give me suggestions, or just to say hi.