Basic Box2DWeb Example

Box2DWeb: https://code.google.com/p/box2dweb/ Based on: https://www.youtube.com/watch?v=tQRiuxJZ_d0

HTML

<script src="http://box2dweb.googlecode.com/svn/trunk/Box2d.min.js"></script>
<script src="https://raw.githubusercontent.com/hecht-software/box2dweb/master/Box2d.min.js"></script>
<canvas id="playground" width="500" height="200" ></canvas>
<button id="stop">stop</button>

CSS

button#stop {
  display: block;
}

JavaScript

var b2Vec2 = Box2D.Common.Math.b2Vec2,
    b2BodyDef = Box2D.Dynamics.b2BodyDef,
    b2Body = Box2D.Dynamics.b2Body,
    b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
    b2World = Box2D.Dynamics.b2World,
    b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape,
    b2CircleShape = Box2D.Collision.Shapes.b2CircleShape,          
    b2DebugDraw = Box2D.Dynamics.b2DebugDraw;

var world = new b2World(
  new b2Vec2(0, 10), //gravity vector
  true
);

// Box2D Fixture
var fixDef = new b2FixtureDef;
fixDef.shape = new b2PolygonShape;
fixDef.density = 1.0;
fixDef.friction = 0.5;
fixDef.restitution = .5;

// Triangle shape
fixDef.shape.SetAsArray([
  new b2Vec2(-1, 0),
  new b2Vec2(0, -1),
  new b2Vec2(1, 0)],3
);

// Create triangle body and add to world
var bodyDef = new b2BodyDef;
bodyDef.type = b2Body.b2_staticBody;    
bodyDef.position.Set(7, 7);
world.CreateBody(bodyDef).CreateFixture(fixDef);

var ballCount = 0;
function dropBall() {
  bodyDef.type = b2Body.b2_dynamicBody;
  fixDef.shape = new b2CircleShape(.5); // circle shape
  bodyDef.position.Set(7,0);
  var body=world.CreateBody(bodyDef);
  body.CreateFixture(fixDef);
  body.ApplyImpulse(new b2Vec2(ballCount++%2?0.5:-0.5, 0), body.GetWorldCenter());
}


(function() {
  var debugDraw = new b2DebugDraw();
  debugDraw.SetSprite(
    document.getElementById("playground").getContext("2d"));
  debugDraw.SetDrawScale(20.0);
  debugDraw.SetFillAlpha(0.5);
  debugDraw.SetLineThickness(1.0);
  debugDraw.SetFlags(b2DebugDraw.e_shapeBit);
  world.SetDebugDraw(debugDraw);
    
  var ballDrop = setInterval(function(){
    dropBall();
  }, 750);
    
  var simLoop = setInterval(function(){
    world.Step(1 / 60, 10, 10);
    world.DrawDebugData();
    world.ClearForces();
  }, 1000/60);
    
  $('canvas#playground').on('click', function() {
    dropBall();
  });
    
  $('button#stop').on('click', function() {
    clearInterval(simLoop);
  });
})();