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='10'>
        <label for='mass2'>Mass2:</label>
        <input id='mass2' max='50' min='1' type='range' value='10'>
        <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='myCanvas' width='700'></canvas>

JavaScript

$('#set_variables_form').submit(function (e) {
  e.preventDefault();
  console.log($('#mass1').val());
  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 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) {
  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 = myCircle1.y;
  myLine2.x  = myCircle2.x;
  myLine2.y  = myCircle2.y;

  context.clearRect(0, 0, canvas.width, canvas.height);

  drawLine(myLine1, context);
  drawLine(myLine2, context);
  drawCircle(myCircle1, context);
  drawCircle(myCircle2, context);
}

//Physics Constants
var d2Phi1 = 0;
var d2Phi2 = 0;
var dPhi1  = 0;
var dPhi2  = 0;
var Phi1   = 0*(Math.PI)/2;
var Phi2...