Thursday, February 19th, 2009
Box2D Ported to JavaScript Using Canvas
<>p>Robert Kieffer recently told us about Box2DJS, an automated port of the popular Box2D physics library to JavaScript using <canvas> for the rendering.
Using Box2DJS, you can create a flatland-esque 2D world that obeys Newtonian physics:
JavaScript:
-
-
var worldAABB = new b2AABB();
-
worldAABB.minVertex.Set(-1000, -1000);
-
worldAABB.maxVertex.Set(1000, 1000);
-
var gravity = new b2Vec2(0, 300);
-
var doSleep = true;
-
var world = new b2World(worldAABB, gravity, doSleep);
-
and then you can add in your own objects and make them do interesting things. Here's a simple example of adding a circular into the world created above:
JavaScript:
-
-
var circleSd = new b2CircleDef();
-
circleSd.density = 1.0;
-
circleSd.radius = 20;
-
circleSd.restitution = 1.0;
-
circleSd.friction = 0;
-
var circleBd = new b2BodyDef();
-
circleBd.AddShape(circleSd);
-
circleBd.position.Set(x,y);
-
var circleBody = world.CreateBody(circleBd);
-
There's a bunch of examples of Robert's site, and of course you can refer back to Box2D for more. Interesting use of canvas!
Related Content:
4.9 rating from 29 votes
This is so cool. I can play all day with this one. :)
Very smart! More Kudos++
Where’s Robert’s site? I’m iterested in his bunch of examples.
Robert Kieffer here. I think there’s been a bit of a misunderstanding. I don’t have any affiliation with this project. I just brought it to the attention of our hosts here at Ajaxian. I’ve asked them to correct it.
The only demos I’ve found are the ones that you access by right clicking in the canvas element on the main Box2DJS page.
hasn’t this been around for like 2 years in javascript form? old news..
The developer here;-) I see. Thanks Robert.