Physics Engines

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Wed Apr 10 2019 08:42:25 GMT-0400 (Eastern Daylight Time)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: Physics Engines
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: e1eb7fb69510347c67bd2bd314a68c92
Keywords: 

My Notes
--------
April 8, 2019

In this workbook I explore some JavaScript physics engines that I might want to use in Xholon.

To implement its physics animations, ref[1] below uses the following JS libraries:
box2d.js
physics.js  Custom code for probmods
plinko.js   shim for window.requestAnimFrame
jQuery v2.2.4
and maybe other libraries?

TODO
- test the two versions of the box2d library on their own (refs [7] and [8]

To Run a Xholon app:
-------------------
http://127.0.0.1:8888/Xholon.html?app=Physics%20Engines&src=lstr&gui=clsc&jslib=physics/Box2D
http://127.0.0.1:8888/Xholon.html?app=Physics%20Engines&src=lstr&gui=clsc&jslib=physics/Box2d.min

see also: Physics Engines - Planck.js

References
----------
(1) https://probmods.org/chapters/generative-models.html
    Example: Intuitive physics
    the examples in this section use the function: physics.animate()
    ex: physics.animate(1000, fallingWorld);
    these examples use the library: box2d.js

(2) https://box2d.org
  ) https://box2d.org/links/
    there are posrt to many other languages
    Javascript Port
      Box2DJS  http://box2d-js.sourceforge.net/
      box2dweb http://code.google.com/p/box2dweb/

(3) https://box2d.org/about/
    Box2D is an open source C++ engine for simulating rigid bodies in 2D.
    Box2D is developed by Erin Catto and has the zlib license.
    While the zlib license does not require acknowledgement, we encourage you to give credit to Box2D in your product.
    Box2D Features

(4) http://box2d.org/manual.pdf
    a comprehensive guide to the C++ version, and the concepts of a physics engine

(5) http://box2d-js.sourceforge.net/

(6) http://code.google.com/p/box2dweb/
  ) https://github.com/hecht-software/box2dweb
    Please notice that Box2dWeb is a physics engine.
    The graphics in the demo are generated by the b2DebugDraw-class, which is only available for debugging purposes.
    KSW  ref[1] uses b2DebugDraw to do its graphics

(7) https://github.com/hecht-software/box2dweb/blob/master/Box2D.js
    this is essentially the same code used in ref[1]
    Copyright (c) 2006-2007 Erin Catto http://www.gphysics.com

(8) https://github.com/kripken/box2d.js/
    Port of Box2D to JavaScript using Emscripten

(9) https://www.reddit.com/r/box2d/

(10) https://github.com/shakiba/planck.js
    2D JavaScript Physics Engine
    Planck.js is JavaScript rewrite of Box2D physics engine for cross-platform HTML5 game development.

(11) https://github.com/flyover/box2d.ts
    A TypeScript port of Box2D

(12) https://github.com/liabru/matter-js
    a 2D rigid body physics engine for the web
    perhaps the most popular physics engine right now
    KSW not based on Box2D ?
   ) http://brm.io/matter-js/

]]></Notes> 

<_-.XholonClass>
  <PhysicalSystem/>
  
  <Block/>
  
</_-.XholonClass>

<xholonClassDetails>
  
</xholonClassDetails>

<PhysicalSystem>
  <Block/>
</PhysicalSystem>

<Blockbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  // example from https://github.com/hecht-software/box2dweb/blob/master/example.html
  const Box2D = $wnd.Box2D;
  //console.log(Box2D);
  var xhcanvas = $doc.querySelector("#xhcanvas");
  //console.log(xhcanvas);
  xhcanvas.innerHTML = '<canvas id="canvas" width="600" height="400"></canvas>';
  //console.log(xhcanvas);
  
  var world;
  
  function init() {
    var b2Vec2 = Box2D.Common.Math.b2Vec2,
    b2BodyDef = Box2D.Dynamics.b2BodyDef,
    b2Body = Box2D.Dynamics.b2Body,
    b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
    b2Fixture = Box2D.Dynamics.b2Fixture,
    b2World = Box2D.Dynamics.b2World,
    b2MassData = Box2D.Collision.Shapes.b2MassData,
    b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape,
    b2CircleShape = Box2D.Collision.Shapes.b2CircleShape,
    b2DebugDraw = Box2D.Dynamics.b2DebugDraw;
    
    world = new b2World(
      new b2Vec2(0, 10),   // gravity
      true                 // allow sleep
    );
    
    var fixDef = new b2FixtureDef;
    fixDef.density = 1.0;
    fixDef.friction = 0.5;
    fixDef.restitution = 0.2;
    
    var bodyDef = new b2BodyDef;
    
    //create ground
    bodyDef.type = b2Body.b2_staticBody;
    bodyDef.position.x = 9;
    bodyDef.position.y = 13;
    fixDef.shape = new b2PolygonShape;
    fixDef.shape.SetAsBox(10, 0.5);
    world.CreateBody(bodyDef).CreateFixture(fixDef);
    
    //create some objects
    bodyDef.type = b2Body.b2_dynamicBody;
    for(var i = 0; i < 10; ++i) {
      if(Math.random() > 0.5) {
        fixDef.shape = new b2PolygonShape;
        fixDef.shape.SetAsBox(
          Math.random() + 0.1, //half width
          Math.random() + 0.1  //half height
        );
      } else {
        fixDef.shape = new b2CircleShape(
          Math.random() + 0.1 //radius
        );
      }
      bodyDef.position.x = Math.random() * 10;
      bodyDef.position.y = Math.random() * 10;
      world.CreateBody(bodyDef).CreateFixture(fixDef);
    }
    
    //setup debug draw
    var debugDraw = new b2DebugDraw();
    debugDraw.SetSprite($doc.getElementById("canvas").getContext("2d"));
    debugDraw.SetDrawScale(30.0);
    debugDraw.SetFillAlpha(0.3);
    debugDraw.SetLineThickness(1.0);
    debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
    world.SetDebugDraw(debugDraw);
    $wnd.setInterval(update, 1000 / 60);
  };
  
  function update() {
    world.Step(
      1 / 60,   //frame-rate
      10,       //velocity iterations
      10        //position iterations
    );
    world.DrawDebugData();
    world.ClearForces();
  };
  
  init();
//# sourceURL=Blockbehavior.js
]]></Blockbehavior>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Block</title>
    <rect id="PhysicalSystem/Block" fill="#98FB98" height="50" width="50" x="25" y="0"/>
    <g>
      <title>Block</title>
      <rect id="PhysicalSystem/Block" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
    </g>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>