JSFiddle - React, Tailwind, and code Playground

by Thiago Figueiredo

HTML

<script src="http://anzol.biz/physicsjs-mpss/physicsjs-full.js"></script>
<canvas
    id="viewport"
    >
</canvas>

CSS

body {
    margin: 0;
}

JavaScript

var
    metre;

metre = 80;

Physics(function (world) {

    'use strict';

    var
        bodyImpulseResponse,
        ceiling,
        edgeBounce,
        gravity,
        gravityAcceleration,
        greenBall,
        greenBallInitialHeight,
        greenBallInitialHeightInMetres,
        greenBallRadius,
        greenBallRadiusInMetres,
        impactVelocity,
        metrePerSecond,
        mppsvi,
        renderer,
        timeToFall,
        viewHeight,
        viewportBounds,
        viewWidth;

    viewWidth = window.innerWidth;
    viewHeight = window.innerHeight;
    metrePerSecond = metre / 1000;
    gravityAcceleration = 9.807;

    greenBallInitialHeightInMetres = 40;
    greenBallRadiusInMetres = 1;
    greenBallInitialHeight = (greenBallInitialHeightInMetres * metre) + (greenBallRadiusInMetres * metre);
    greenBallRadius = greenBallRadiusInMetres * metre;

    ceiling = -(1000 * metre);

    timeToFall = Math.sqrt((greenBallInitialHeightInMetres * 2) / gravityAcceleration) * 1000;
    impactVelocity = Math.sqrt(greenBallInitialHeightInMetres * 2 * gravityAcceleration);

    // bounds of the window
    viewportBounds = Physics.aabb(0, ceiling, viewWidth, viewHeight);

    bodyImpulseResponse = Physics.behavior('body-impulse-response');

    // constrain objects to these bounds
    edgeBounce = Physics.behavior('edge-collision-detection', {
        aabb: viewportBounds,
        restitution: 0.25
    });

    gravity = Physics.behavior('constant-acceleration', {
        acc: {
            x: 0,
            y: gravityAcceleration
        }
    });

    // create green ball
    greenBall = Physics.body('circle', {
        x: viewWidth * 0.5,
        y: viewHeight - greenBallInitialHeight,
        radius: greenBallRadius,
        styles: {
            angleIndicator: '#000',
            fillStyle: '#41cd32'
        }
    });

    // metre per second squared verlet integrator
    mppsvi = Physics.integrator('metre-per-second-squared-verlet', {
      ...