Math, Physics, and Animation - HTML5 Canvas - page 441

x = e . clientX + document . body . scrollLeft +
document . documentElement . scrollLeft ;
y = e . clientY + document . body . scrollTop +
document . documentElement . scrollTop ;

}
x -= theCanvas . offsetLeft ;
y -= theCanvas . offsetTop ;

mouseX = x ;
mouseY = y ;
var var ballDef = new new b2BodyDef ;

ballDef . type = b2Body . b2_dynamicBody ;
var

var ypos = mouseY / scaleFactor ;
var var xpos = mouseX / scaleFactor ;

var var size = 7 / scaleFactor ;

ballDef . position . Set ( xpos , ypos );
var var ballFixture = new new b2FixtureDef ;

ballFixture . density = 30.0 ;
ballFixture . friction = 0.6 ;
ballFixture . restitution = . 2 ;
ballFixture . shape = new

new b2CircleShape ( size );

var var newBall = world . CreateBody ( ballDef )

newBall . CreateFixture ( ballFixture );
var var xVelocity = 15 ;

var

var yVelocity = 0 ;
newBall . SetLinearVelocity ( new new b2Vec2 ( xVelocity , yVelocity ))

balls . push ( newBall );

}

var var theCanvas = document . getElementById ( 'canvasOne' );

var

var context = theCanvas . getContext ( '2d' );

var var theCanvasTwo = document . getElementById ( 'canvasTwo' );

var var context2 = theCanvasTwo . getContext ( '2d' );

theCanvas . addEventListener ( "mouseup" , createBall , false false );

var var scaleFactor = 30 ;

var 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