Box2D, Impulse, and JavaScript
Intro
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.
- ApplyImpulse : immediately change momentum. Think being hit by a bat.
- 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.
Example
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:
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:
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.
Summary
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.
Example
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),
body.GetWorldCenter());
}
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.
Summary
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.