Box2D, Impulse, and JavaScript

Sponsor: Register today for New Game, the conference for HTML5 game developers. Learn from Mozilla, Opera, Google, Spil, Bocoup, Mandreel, Subsonic, Gamesalad, EA, Zynga, and others at this intimate and technically rich conference. Join us for two days of content from developers building HTML5 games today. Nov 1-2, 2011 in San Francisco. Register now!


So far we have been looking at worlds that interact merely from gravity, or motorized joints. The demos have been fairly calm. Time to add a bit more excitement with the introduction of Impulses. Using an impulse, we can immediately change a body's velocity.

Adding energy

Box2D has two seemingly similar ways to inject a little life into your bodies.
  1. ApplyImpulse : immediately change momentum. Think being hit by a bat.
  2. ApplyForce : change momentum over time. Think pushing something.
There's a lot of confusion over what the difference is between the two methods. If you need a quick obvious change, use ApplyImpulse. If you need to slowly change over time, use ApplyForce.


The demo above has a stand alone version and the source code is available.

As you can see, we have the beginnings of an Angry Birds clone. An impulse is applied to the circle which propels it through the air, eventually crashing into innocent blocks.

The object configuration is straight forward:

    var initialState = [
      {id: "ground", x: ctx.canvas.width / 2 / SCALE, y: ctx.canvas.height / SCALE, halfHeight: 0.5, halfWidth: ctx.canvas.width / SCALE, color: 'yellow'},
      {id: "ball", x: 2, y: ctx.canvas.height / SCALE - 2, radius: 0.5},
      {id: "b1", x:17, y: ctx.canvas.height / SCALE - 1, halfHeight: 2, halfWidth: 0.10},
      {id: "b2", x:17, y: ctx.canvas.height / SCALE - 5, halfHeight: 0.25, halfWidth: 2}

Control your impulses

Both force and impulse require a vector, specifically a b2Vec2, for direction and magnitude. The following code is an easy way to create an impulse:

bTest.prototype.applyImpulse = function(bodyId, degrees, power) {
    var body = this.bodiesMap[bodyId];
    body.ApplyImpulse(new b2Vec2(Math.cos(degrees * (Math.PI / 180)) * power,
                                 Math.sin(degrees * (Math.PI / 180)) * power),

To compute the vector for the impulse, the direction (in terms of degrees) and power (an arbitrary multiplier provided by me to test different powers) are combined.

The impulse is launched from the center of mass of the circle. The impulse can be launched from any point on the object, which creates a torque on the object.


Box2D allows you to add force and impulses to bodies. Adding an impulse is like hitting a body with a hard bat. Adding force over time is like pushing on a body.

Next Up

Please continue to follow along and learn about Box2D, Collision detection, and Damage.

Thanks for continuing to follow along. Your comments help, let me know what other topics you're looking for.

Popular posts from this blog

Converting Array to List in Scala

Lists and arrays in Dart

Null-aware operators in Dart