JSFiddle - React, Tailwind, and code Playground

by Sourav Lahoti

HTML

<script src="http://wellcaffeinated.net/PhysicsJS/examples/physicsjs-full.js"></script>
<canvas id="viewport" width="300" height="300">
    <div id="myEL" style="width:50px;height:50px;background-color:red;"></div>
</canvas>

JavaScript

/**
 * PhysicsJS by Jasper Palfree <wellcaffeinated.net>
 * http://wellcaffeinated.net/PhysicsJS
 *
 * Simple Spin example for PhysicsJS
 */
Physics(function(world){
    
    var viewWidth = 500;
    var viewHeight = 300;
    
    var renderer = Physics.renderer('canvas', {
        el: 'viewport',
        width: viewWidth,
        height: viewHeight,
        meta: false, // don't display meta data
        styles: {
            // set colors for the circle bodies
            'circle' : {
                strokeStyle: 'hsla(60, 37%, 17%, 1)',
                lineWidth: 1,
                fillStyle: 'hsla(60, 37%, 57%, 0.8)',
                angleIndicator: 'hsla(60, 37%, 17%, 0.4)'
            }
        }
    });
    
    // add the renderer
    world.add( renderer );
    // render on each step
    world.subscribe('step', function(){
        world.render();
    });
   
    var nail = Physics.body('circle', {
        x: 250,
        y: 200,
        radius: 5,
        mass: 1,
        fixed: true
    });
    world.add(nail);


    var shelf = Physics.body('convex-polygon', {
        x: 250,
        y: 200,
        vertices: [{
            x: -100,
            y: -10
        }, {
            x: 100,
            y: -10
        }, {
            x: 100,
            y: 10
        }, {
            x: -100,
            y: 10
        }],
        mass: 100,
        restitution: 0.5
    });
    world.add(shelf);

    var ball = Physics.body('circle', {
        x: 175,
        y: 50,
        radius: 20,
        mass: 10
    });
    world.add(ball);
    var ball = Physics.body('circle', {
        x: 2305,
        y: 150,
        radius: 20,
        mass: 10
    });
    world.add(ball);
    var ball = Physics.body('circle', {
        x: 375,
        y: 450,
        radius: 520,
        mass: 100
    });
    world.add(ball);
     world.add(Physics.integrator('verlet', {
        drag: 0.003
    }));


    world.add(Physics.integrator('verlet', {
        drag: 0.003
    }));

   ...