Getting Started with Box2D in JavaScript
Written by David Conrad   
Friday, 20 January 2012
Article Index
Getting Started with Box2D in JavaScript
Define a Fixture
A Box For a Ball

 

The complete page is gathered in one place to make it easy for you to copy and paste is:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Box2D 1</title>
<script type="text/javascript"
src="/Box2dWeb-2.1.a.3.min.js">
</script>
<script>
var world;
function boxdrop() {
var  b2Vec2 = Box2D.Common.Math.b2Vec2
, b2BodyDef = Box2D.Dynamics.b2BodyDef
, b2Body = Box2D.Dynamics.b2Body
, b2FixtureDef = Box2D.Dynamics.b2FixtureDef
, b2Fixture = Box2D.Dynamics.b2Fixture
, b2World = Box2D.Dynamics.b2World
, b2MassData =
Box2D.Collision.Shapes.b2MassData
, b2PolygonShape =
Box2D.Collision.Shapes.b2PolygonShape
, b2CircleShape =
Box2D.Collision.Shapes.b2CircleShape
, b2DebugDraw = Box2D.Dynamics.b2DebugDraw
;
world = new b2World(new b2Vec2(0, 10),
true );
var bodyDef = new b2BodyDef;
bodyDef.type = b2Body.b2_dynamicBody;
bodyDef.position.x = 10;
bodyDef.position.y =0;

var fixDef = new b2FixtureDef;
fixDef.density = 1.0;
fixDef.friction = 0.5;
fixDef.restitution = 0.5;
fixDef.shape = new b2CircleShape(1);

world.CreateBody(bodyDef).
CreateFixture(fixDef);
setupDebugDraw();
window.setInterval(update, 1000 / 60);
}
function update() {
world.Step(1 / 60  , 10 , 10 );
world.DrawDebugData();
world.ClearForces();
};
function setupDebugDraw() {
var b2DebugDraw = Box2D.Dynamics.b2DebugDraw;
var debugDraw = new b2DebugDraw();
debugDraw.SetSprite(
document.getElementById("canvas").
getContext("2d"));
debugDraw.SetDrawScale(30.0);
debugDraw.SetFillAlpha(0.3);
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(
b2DebugDraw.e_shapeBit |
b2DebugDraw.e_jointBit);
world.SetDebugDraw(debugDraw);
};
</script>
</head>
<body onload="boxdrop();">
<canvas id="canvas"
width="600"
height="400">
</canvas>
</body>
</html>

Something to stop the fall

So far this isn't very impressive.

Let's add a fixed object so that our falling circle has something to bounce on. The construction follows the standard pattern - create a body definition, create a fixture definition and use these to create a body and its fixture:

bodyDef.type = b2Body.b2_staticBody;
bodyDef.position.x = 5;
bodyDef.position.y = 12;
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(10, 0.2);
world.CreateBody(bodyDef).
CreateFixture(fixDef);

In this case, the only real difference is that we are defining the shape to be a rectangle 20 meters long and 0.4 meters thick. Note that we specify the half-width and half-height in the function call. 

If you add this to the program just before the end then you will see the ball fall from the "sky" and bounce a few times on the "ground".

fallingcircle2

 

Make sure that you understand what is going on. Try changing the restitution to see how it affects the way the ball bounces.

You can also try giving the body an initial velocity:

var body=world.CreateBody(bodyDef);
body.CreateFixture(fixDef);
body.SetLinearVelocity(new b2Vec2(2,2));

Now you will see it move sideways bounce and then move off to the left. Notice that the "ball" picks up rotational motion from the collisions as it would in real life.

You can also add some side walls to constrain the circle to stay withing a region:

 

bodyDef.position.x = 0.2;
bodyDef.position.y = 0;  
fixDef.shape.SetAsBox( 0.2,12);
world.CreateBody(bodyDef).
CreateFixture(fixDef);
bodyDef.position.x = 20-0.2;
bodyDef.position.y = 0;  
world.CreateBody(bodyDef).
CreateFixture(fixDef);

Now you can experiment with giving the ball different initial velocities and see how it bounces. You might also like to add multiple copies of the ball with different random velocities.

 

fallingcircle3

 

You can download the complete program from the CodeBin (note you have to register first).

Next Time: More complex bodies

 

espbook

 

Comments




or email your comment to: comments@i-programmer.info

 

To be informed about new articles on I Programmer, subscribe to the RSS feed, follow us on Google+, Twitter, Linkedin or Facebook or sign up for our weekly newsletter.

 

Banner



Last Updated ( Thursday, 05 January 2017 )