JSFiddle - React, Tailwind, and code Playground

by dediggefedde

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="matter.min.js"></script>
    <title>Document</title>
  </head>

<body><h3>Kinetic Energy</h3><p id='En'></p></body>

</html>

JavaScript

var Engine = Matter.Engine,
  Render = Matter.Render,
  Runner = Matter.Runner,
  Composite = Matter.Composite,
  Composites = Matter.Composites,
  Common = Matter.Common,
  MouseConstraint = Matter.MouseConstraint,
  Mouse = Matter.Mouse,
  World = Matter.World,
  Bodies = Matter.Bodies,
  Body = Matter.Body,
  Events = Matter.Events;

// create engine
var engine = Engine.create(),
  world = engine.world;

world.gravity.y = 0;

// create renderer
var render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: 400,
    height: 400,
    background: "#00FFFF",

    wireframes: false,
    showAngleIndicator:true,
  }
});

Render.run(render);

// create runner
var runner = Runner.create();
Runner.run(runner, engine);

// border
var set = {
  isStatic: true,
  restitution: 1,
  friction: 0,
  frictionAir: 0,
  frictionStatic: 0,
  inertia: Infinity,
  render: {
    fillStyle: "#000000"
  }
};
World.add(world, [
  Bodies.rectangle(000, 400, 800, 1, set),
  Bodies.rectangle(000, 000, 800, 1, set),
  Bodies.rectangle(000, 000, 1, 800, set),
  Bodies.rectangle(400, 000, 1, 800, set)
]);

for (var i = 0; i < (new Date()).getMilliseconds(); ++i)Matter.Common.random(10, 30);

set.isStatic = false;
var stack = Composites.stack(10, 10, 5,5, 100, 100, function(x, y) {
  set.render.fillStyle = "#" + Math.floor(Math.random() * 16777215).toString(16);
  return Bodies.circle(x, y, Common.random(10, 30), set);
});
World.add(world, stack);

for (var o of Composite.allBodies(stack)) {
  Body.applyForce(o, o.position, {
    x: Common.random(-0.01, 0.01),
    y: Common.random(-0.01, 0.01)
  });
}

var baseSpeed = 0;
function adjustE(ball) {
return;
  if (baseSpeed == 0) baseSpeed = ball.speed;
  if (ball.speed != 0) {
    let speedMultiplier = baseSpeed / ball.speed // 11.241098900509593 == initial (starting) ball speed
    Body.setVelocity(
      ball, {
        x: ball.velocity.x * speedMultiplier,
        y: ball.velocity.y * speedMultiplier
      }
 ...