JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.physicsandbox.com/assets/stylesheets/double_pendulum.css">
    <div class='sidebar'>
      <form id='set_variables_form'>
        <label for='mass1'>Mass1:</label>
        <input id='mass1' max='50' min='1' type='range' value='40'>
        <label for='mass2'>Mass2:</label>
        <input id='mass2' max='50' min='1' type='range' value='5'>
        <label for='Phi1'>Phi1 (in deg):</label>
        <input id='Phi1' max='90' min='0' type='range' value='50'>
        <label for='Phi2'>Phi2 (in deg):</label>
        <input id='Phi2' max='90' min='0' type='range' value='65'>
        <input class='submit-btn' type='submit' value='Start Simulation'>
      </form>
    </div>
    <canvas class='phys-canvas' height='600' id='myCanvas2' width='700'></canvas>
    <canvas class='phys-canvas' height='600' id='myCanvas' width='700'></canvas>

JavaScript

// Overlay the second canvas

var $canvas2 = $('#myCanvas2');
var canvas_pos = $canvas2.position();
$('#myCanvas').css({
    position: 'absolute',
    left: canvas_pos.left,
    top: canvas_pos.top
});


$('#set_variables_form').submit(function (e) {
  e.preventDefault();
  m1     = $('#mass1').val();
  m2     = $('#mass2').val();
  Phi1   = $('#Phi1').val()/180*(Math.PI);
  Phi2   = $('#Phi2').val()/180*(Math.PI);
  d2Phi1 = 0;
  d2Phi2 = 0;
  dPhi1  = 0;
  dPhi2  = 0;
  run();
});

function drawCircle(myCircle, context) {
  context.beginPath();
  context.arc(myCircle.x, myCircle.y, myCircle.mass, 0, 2 * Math.PI, false);
  context.fillStyle = 'rgba(0,0,0,1)';
  context.fill();
}

function drawTraceCircle(myCircle, context) {
  context.beginPath();
  context.arc(myCircle.x, myCircle.y, 1, 0, 2 * Math.PI, false);
  context.fillStyle = 'rgba(200,200,200,1)';
  context.fill();
}

function drawLine(myLine, context) {
  context.beginPath();
  context.moveTo(myLine.x0, myLine.y0);
  context.lineTo(myLine.x, myLine.y);
  context.strokeStyle = 'red';
  context.lineWidth = 5;
  context.stroke();
}

function animate(myCircle1, myCircle2, myLine1, myLine2, canvas, context, context2) {
  mu      =  1+m1/m2;
  d2Phi1  =  (g*(Math.sin(Phi2)*Math.cos(Phi1-Phi2)-mu*Math.sin(Phi1))-(l2*dPhi2*dPhi2+l1*dPhi1*dPhi1*Math.cos(Phi1-Phi2))*Math.sin(Phi1-Phi2))/(l1*(mu-Math.cos(Phi1-Phi2)*Math.cos(Phi1-Phi2)));
  d2Phi2  =  (mu*g*(Math.sin(Phi1)*Math.cos(Phi1-Phi2)-Math.sin(Phi2))+(mu*l1*dPhi1*dPhi1+l2*dPhi2*dPhi2*Math.cos(Phi1-Phi2))*Math.sin(Phi1-Phi2))/(l2*(mu-Math.cos(Phi1-Phi2)*Math.cos(Phi1-Phi2)));
  dPhi1   += d2Phi1*time;
  dPhi2   += d2Phi2*time;
  Phi1    += dPhi1*time;
  Phi2    += dPhi2*time;

  myCircle1.x = X0+l1*Math.sin(Phi1);
  myCircle1.y = Y0+l1*Math.cos(Phi1);
  myCircle2.x = X0+l1*Math.sin(Phi1)+l2*Math.sin(Phi2);
  myCircle2.y = Y0+l1*Math.cos(Phi1)+l2*Math.cos(Phi2);

  myLine1.x  = myCircle1.x;
  myLine1.y  = myCircle1.y;
  myLine2.x0 = myCircle1.x;
  myLine2.y0...