#javascript-physics-index.htm / htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Box2DJS - Physics Engine for JavaScript</title> <!--=============================--> <!-- Copy this part to your app. --> <!-- START --> <!--=============================--> <!-- libs --> <!--[if IE]><script type="text/javascript" src="javascript-physics-lib-excanvas.js"></script><![endif]--> <script src="javascript-physics-lib-prototype-1.6.0.2.js"></script> <!-- box2djs --> <script src='javascript-physics-js-box2d-common-b2Settings.js'></script> <script src='javascript-physics-js-box2d-common-math-b2Vec2.js'></script> <script src='javascript-physics-js-box2d-common-math-b2Mat22.js'></script> <script src='javascript-physics-js-box2d-common-math-b2Math.js'></script> <script src='javascript-physics-js-box2d-collision-b2AABB.js'></script> <script src='javascript-physics-js-box2d-collision-b2Bound.js'></script> <script src='javascript-physics-js-box2d-collision-b2BoundValues.js'></script> <script src='javascript-physics-js-box2d-collision-b2Pair.js'></script> <script src='javascript-physics-js-box2d-collision-b2PairCallback.js'></script> <script src='javascript-physics-js-box2d-collision-b2BufferedPair.js'></script> <script src='javascript-physics-js-box2d-collision-b2PairManager.js'></script> <script src='javascript-physics-js-box2d-collision-b2BroadPhase.js'></script> <script src='javascript-physics-js-box2d-collision-b2Collision.js'></script> <script src='javascript-physics-js-box2d-collision-Features.js'></script> <script src='javascript-physics-js-box2d-collision-b2ContactID.js'></script> <script src='javascript-physics-js-box2d-collision-b2ContactPoint.js'></script> <script src='javascript-physics-js-box2d-collision-b2Distance.js'></script> <script src='javascript-physics-js-box2d-collision-b2Manifold.js'></script> <script src='javascript-physics-js-box2d-collision-b2OBB.js'></script> <script src='javascript-physics-js-box2d-collision-b2Proxy.js'></script> <script src='javascript-physics-js-box2d-collision-ClipVertex.js'></script> <script src='javascript-physics-js-box2d-collision-shapes-b2Shape.js'></script> <script src='javascript-physics-js-box2d-collision-shapes-b2ShapeDef.js'></script> <script src='javascript-physics-js-box2d-collision-shapes-b2BoxDef.js'></script> <script src='javascript-physics-js-box2d-collision-shapes-b2CircleDef.js'></script> <script src='javascript-physics-js-box2d-collision-shapes-b2CircleShape.js'></script> <script src='javascript-physics-js-box2d-collision-shapes-b2MassData.js'></script> <script src='javascript-physics-js-box2d-collision-shapes-b2PolyDef.js'></script> <script src='javascript-physics-js-box2d-collision-shapes-b2PolyShape.js'></script> <script src='javascript-physics-js-box2d-dynamics-b2Body.js'></script> <script src='javascript-physics-js-box2d-dynamics-b2BodyDef.js'></script> <script src='javascript-physics-js-box2d-dynamics-b2CollisionFilter.js'></script> <script src='javascript-physics-js-box2d-dynamics-b2Island.js'></script> <script src='javascript-physics-js-box2d-dynamics-b2TimeStep.js'></script> <script src='javascript-physics-js-box2d-dynamics-contacts-b2ContactNode.js'></script> <script src='javascript-physics-js-box2d-dynamics-contacts-b2Contact.js'></script> <script src='javascript-physics-js-box2d-dynamics-contacts-b2ContactConstraint.js'></script> <script src='javascript-physics-js-box2d-dynamics-contacts-b2ContactConstraintPoint.js'></script> <script src='javascript-physics-js-box2d-dynamics-contacts-b2ContactRegister.js'></script> <script src='javascript-physics-js-box2d-dynamics-contacts-b2ContactSolver.js'></script> <script src='javascript-physics-js-box2d-dynamics-contacts-b2CircleContact.js'></script> <script src='javascript-physics-js-box2d-dynamics-contacts-b2Conservative.js'></script> <script src='javascript-physics-js-box2d-dynamics-contacts-b2NullContact.js'></script> <script src='javascript-physics-js-box2d-dynamics-contacts-b2PolyAndCircleContact.js'></script> <script src='javascript-physics-js-box2d-dynamics-contacts-b2PolyContact.js'></script> <script src='javascript-physics-js-box2d-dynamics-b2ContactManager.js'></script> <script src='javascript-physics-js-box2d-dynamics-b2World.js'></script> <script src='javascript-physics-js-box2d-dynamics-b2WorldListener.js'></script> <script src='javascript-physics-js-box2d-dynamics-joints-b2JointNode.js'></script> <script src='javascript-physics-js-box2d-dynamics-joints-b2Joint.js'></script> <script src='javascript-physics-js-box2d-dynamics-joints-b2JointDef.js'></script> <script src='javascript-physics-js-box2d-dynamics-joints-b2DistanceJoint.js'></script> <script src='javascript-physics-js-box2d-dynamics-joints-b2DistanceJointDef.js'></script> <script src='javascript-physics-js-box2d-dynamics-joints-b2Jacobian.js'></script> <script src='javascript-physics-js-box2d-dynamics-joints-b2GearJoint.js'></script> <script src='javascript-physics-js-box2d-dynamics-joints-b2GearJointDef.js'></script> <script src='javascript-physics-js-box2d-dynamics-joints-b2MouseJoint.js'></script> <script src='javascript-physics-js-box2d-dynamics-joints-b2MouseJointDef.js'></script> <script src='javascript-physics-js-box2d-dynamics-joints-b2PrismaticJoint.js'></script> <script src='javascript-physics-js-box2d-dynamics-joints-b2PrismaticJointDef.js'></script> <script src='javascript-physics-js-box2d-dynamics-joints-b2PulleyJoint.js'></script> <script src='javascript-physics-js-box2d-dynamics-joints-b2PulleyJointDef.js'></script> <script src='javascript-physics-js-box2d-dynamics-joints-b2RevoluteJoint.js'></script> <script src='javascript-physics-js-box2d-dynamics-joints-b2RevoluteJointDef.js'></script> <!--=============================--> <!-- Copy this part to your app. --> <!-- END --> <!--=============================--> <!-- demos --> <script src='javascript-physics-demos-draw-world.js'></script> <script src='javascript-physics-demos-demo-base.js'></script> <script src='javascript-physics-demos-top.js'></script> <script src='javascript-physics-demos-stack.js'></script> <script src='javascript-physics-demos-compound.js'></script> <script src='javascript-physics-demos-pendulum.js'></script> <script src='javascript-physics-demos-crank.js'></script> <script src='javascript-physics-demos-demos.js'></script> <script src='javascript-physics-style-prettify.js'></script> <link href="javascript-physics-style-prettify.css" rel="stylesheet" type="text/css" /> <script>Event.observe(window, 'load', function() {prettyPrint()});</script> <link href="javascript-physics-style-distant-planet.css" rel="stylesheet" type="text/css" /> <link href="javascript-physics-style-box2d.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="CONTAINER"> <div id="HEADER"> <h1>Box2D<br/><b>JS</b></h1> </div> <div id="NAVIGATION"> <div class="Nav"> <span class="links"> <a href="http://sourceforge.net/projects/box2d-js/">Home</a> - <a href="http://sourceforge.net/project/showfiles.php?group_id=227549">Download</a> - <a href="#about">About</a> - <a href="#howto">Howto</a> - <a href="#links">Links</a> - <a href="#contact">Contact</a> </span> </div> </div> <div id="BODYBOX"> <div class="LEFT"></div> <div class="MIDDLE"> <canvas id="canvas" width='500' height='300' style="top:260px; left:125px;"></canvas> <div id="spacer"> </div> <p style="text-align:center"> <span class="key">Left-click</span> to create an object. <span class="key">Right-click</span> to show next example. </p> <a name="about"></a> <h1>What's this</h1> <p> Box2DJS is a JavaScript port of <a href="http://www.box2d.org/">Box2D Physics Engine</a>. To tell the truth, this is converted from <a href="http://box2dflash.sourceforge.net/">Box2DFlashAS3</a>_1.4.3.1 in an automatic manner. (The reason why not Box2DFlashAS3_2.0.0 based is simply because I overlooked the renewal.) </p> <a name="howto"></a> <h1>How to use</h1> <p> Because this libray does not have a lazy-loading system now, you should load all classes before starting your simulation. To make things worse, each library has a bit complecated dependency each other so that loading libraries in wrong order may cause a fatal error. To avoid such a trouble, it is strongly recomended to copy the header part of this file or `index.html' including the downloaded zip file. </p> <p> Concerning the Box2D APIs of the library, they are completely same as Box2DFlashAS3. Please google information about it. </p> <h2>Sample code</h2> <h3>Create a world</h3> <pre class="prettyprint">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); </pre> <h3>Create a circle body</h3> <pre class="prettyprint">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);</pre> <h3>Create a revolute joint</h3> <pre class="prettyprint">var jointDef = new b2RevoluteJointDef(); jointDef.anchorPoint.Set(250, 200); jointDef.body1 = world.GetGroundBody(); jointDef.body2 = circleBody; world.CreateJoint(jointDef);</pre> <h3>Step a world</h3> <pre class="prettyprint">world.Step();</pre> <a name="dependencies"></a> <h1>Dependencies</h1> <ul> <li><a href="http://www.prototypejs.org/">prototype.js</a></li> <li><a href="http://sourceforge.net/projects/iecanvas">IECanvas</a> (when you use a canvas tag to display the result of your physics simulation)</li> </ul> <a name="links"></a> <h1>Links</h1> <ul> <li><a href="http://sourceforge.net/projects/box2d-js/">Project Page (SF)</a></li> <li><a href="http://sourceforge.net/project/showfiles.php?group_id=227549">Download Page (SF)</a></li> <li><a href="http://www.box2d.org/">Box2D</a></li> <li><a href="http://box2dflash.sourceforge.net/">Box2DFlashAS3</a></li> <li><a href="http://www.kyucon.com/doc/box2d/">API Doc (Box2DFlashAS3)</a></li> </ul> <a name="contact"></a> <h1>Contact</h1> <p> If you have some requests or find any bugs, please tell me about them.<br /> <div class="contact"> E-mail: andyjpn _at_ gmail _dot_ com<br /> Blog: <a href="http://d.hatena.ne.jp/technohippy/">http://d.hatena.ne.jp/technohippy/> (written in Japanese) </div> </p> </div> <div class="RIGHT"></div> <div id="FOOTER"> <div class="footertext"><span class="links">©Copyright 2008 ANDO Yasushi - <a href="http://www.rankrover.com">Website Design & SEO by RankRover</a></span></div> </div> </div> </div> </body> </html>
(C) Æliens 20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.