RENDERING

21
Jun
2012

Box2dweb is a Physics Engine. We are not going to see anything on the screen unless we render them on the screen. Box2dFlash provides such methods for debugging which are defined in the b2DebugDraw class. In Box2dWeb, a b2DebugDraw takes a canvas-context instead of a Sprite. Add the following code at last.

var debugDraw = new b2DebugDraw();
debugDraw.SetSprite ( document.getElementById ("canvas").getContext ("2d"));
debugDraw.SetDrawScale(30);
debugDraw.SetFillAlpha(0.3); //define transparency
debugDraw.SetLineThickness(1.0); //defines thickness of lines or boundaries
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
world.SetDebugDraw(debugDraw);
We must also define a "Canvas" Element within the body tag.

Scaling

debugDraw.SetDrawScale(30);
This line defines scale i.e. 30 pixels = 1 meter. This means a scale of 30 converts 600px to (600/30) = 20 meters & 420px to (420/30) = 14 meters. Thus (0,0) means top-left corner and (20,14) means bottom-right corner.

Set Flags

We can Set Flags to get more detailed drawings. If we want to render only shapes and joint connections and nothing else, we use
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
We can also set this flag to include the following: If we want to see all of above, use the below code.
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit | b2DebugDraw.e_aabbBit| b2DebugDraw.e_pairBit| b2DebugDraw.e_centerOfMassBit);

Updating the World

To update the world we need to call the "step" function. (1/60) seconds is the TimeStep. The next two parameters are the velocityIterations and positionIteration with 10 being the suggested count for each. Fewer iterations boosts performances but comes at the cost of accuracy.
function update() {
	world.Step(1 / 60, 10, 10);
For drawing the debug data that we set earlier.
	world.DrawDebugData();
We must clear the forces.
	world.ClearForces();
}
Now we just need to call the step function to simulate the objects. Here 1000/60 means 60 Frames per second (FPS). 60 Frames will be drawn each second.
window.setInterval(update,1000/60);

By administrator at 12:52:33 PM 5 Comment(s)

Comments

Cool man!

By administrator on 14 Dec, 2012 at 01:41:59 PM

But it ain't that time!

By administrator on 14 Dec, 2012 at 01:42:20 PM

Instead of using the setInterval in the very end, you should you requestAnimationFrame();
Seth Ladd (creater of the box2d-web port) has a good example here: http://blog.sethladd.com/2011/09/box2d-javascript-example-walkthrough.html

By Djonn on 24 Jan, 2013 at 05:08:01 PM

You're right Djonn. I've used requestAnimationFrame() in some of my demos but I forgot to change it here. I'll change it ASAP.

By administrator on 26 Jan, 2013 at 04:58:28 AM

I would really like to see an example of using straight forward canvas draw beginPath(), stroke, (etc) methods.
I have yet to find a well explained example, where there is not an additional library used, like Easel or JCanvas.

I want to render 2D vectors for part of my dissertation , so the debugDraw is the default example with box2dweb, however
styling the lines, deciding wether to render a body, based on some portion of the userData information. I cannot find any examples on how to do this.

By Marc on 1 Mar, 2013 at 01:10:12 AM

Add a Comment

Please enter the email address.Invalid format. (Won't be Displayed)
Notify me of followup comments
Enter the displayed Code: captcha