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 playButton = findById('play');
var canvas     = document.getElementById("canvas");
var context    = canvas.getContext("2d");
var width      = canvas.width  = window.innerWidth;
var height     = canvas.height = window.innerHeight;
var animation  = new Framerat.Player(render); // instantiate animation loop

Instantiate 2 collision scenes to handle collisions between rigid bodies .

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

Create few particles

var particleQty    = 300;
// class for a particle
var particle = {
  create : function( positionX, positionY, velocityX, velocityY, size, weight, color ){
    var obj     = Object.create(this);
    obj.physics = new Bump.Physics( positionX, positionY,
                                    velocityX, velocityY,
                                    size, size,
                                    weight,
                                    0.8,
                                    0.7,
                                    'circle'
                                  );
    obj.physics.setGravity( 0, 400 );
    obj.color   = color;
    return obj;
  },
  // compute the position of a particle at each frame
  update: function(){
    this.physics.updatePosition( Type6.Time.millisecondToSecond(animation.clock.delta) );
  },
  
  draw: function(){
    this.physics.draw( 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].physics );
}

Create floor

// class for rectangle floor
var rectangle = {
  create : function( positionX, positionY, sizeX, sizeY ){
    var obj     = Object.create(this);
    obj.physics = new Bump.Physics( positionX, positionY,
                                    0.0, 0.0,
                                    sizeX, sizeY,
                                    0.0,
                                    0.0,
                                    0.7,
                                    'rectangle');
    return obj;
  },
  
  draw : function(){
    this.physics.draw( 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.newFrame();
}

Contact me

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