JSFiddle - React, Tailwind, and code Playground

by Eugene Krevenets

HTML

<script src="https://raw.github.com/kripken/box2d.js/master/box2d.js"></script>
<script src="http://www.iforce2d.net/embox2d/embox2d-helpers.js"></script>
<script src="http://www.iforce2d.net/embox2d/embox2d-html5canvas-debugDraw.js"></script>
<script src="http://www.iforce2d.net/embox2d/embox2d-html5canvas-testbed.js"></script>
<canvas id="playground" width="400" height="300" ></canvas>
<div>
    <b>Strange Box2D Lifting block on Prismatic Joint</b>
    <p>Lifting block on prismatic joint (b2PrismaticJointDef) on upper point gives impulse to the dynamic body that lays on lifting block surface even if lifting block doesn't move at all.</p>        
</div>

JavaScript

var b2Vec2 = Box2D.b2Vec2,
    b2BodyDef = Box2D.b2BodyDef,
    b2Body = Box2D.b2Body,
    b2FixtureDef = Box2D.b2FixtureDef,
    b2World = Box2D.b2World,
    b2PolygonShape = Box2D.b2PolygonShape,
    b2CircleShape = Box2D.b2CircleShape,
    b2DebugDraw = Box2D.b2DebugDraw,
    b2PrismaticJointDef = Box2D.b2PrismaticJointDef;

(function() {  
    var world = buildWorld();
    var debugDraw = buildDebugDraw(world);
    
    setInterval(function(){
        world.Step(1 / 60, 10, 10);
        world.DrawDebugData();
        world.ClearForces();
    },1000/60);
})();

function buildWorld() {    
    return new Box2D.b2World(
        new b2Vec2(0, 10), //gravity vector
        true
    );
}

function buildDebugDraw(world) {
    var myDebugDraw = getCanvasDebugDraw();            
    myDebugDraw.SetFlags(Box2D.e_shapeBit | Box2D.e_jointBit);
    world.SetDebugDraw(myDebugDraw);
}

/*


function buildBlock(state) {
    var shape = new b2PolygonShape();
    shape.SetAsBox(state.width / 2, state.height / 2);
    
    var fixDef = new b2FixtureDef();
    fixDef.set_shape(shape);
    fixDef.set_density(1.0);
    fixDef.set_friction(0.5);
    fixDef.set_restitution(.5);
    
    var bodyDef = new b2BodyDef;
    bodyDef.set_type(state.static?Box2D.b2_staticBody:Box2D.b2_dynamicBody);
    bodyDef.set_position(new b2Vec2(state.x, state.y));
    var body = state.world.CreateBody(bodyDef);
    body.CreateFixture(fixDef);
    return body;
}

(function() {    
    var world = buildWorld();
    
    var leftBlock = buildBlock({world: world, x: 2, y: 8, width: 2, height: 12, static: true});
    var rightBlock = buildBlock({world: world, x: 12, y: 8, width: 2, height: 12, static: true});
    var bottomBlock = buildBlock({world: world, x: 7, y: 13, width: 8, height: 2, static: false});
    var box = buildBlock({world: world, x: 7, y: 10, width: 2, height: 2, static: false});
    
    var joint = buildPrismaticJoint({world: world, 
                                     anchorA: new...