JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<body>
    <form name="dpform" style="display: none;">energy:
        <input name="energy" type="text" readonly="readonly">
    </form>
    <canvas id="canvas" width="440" height="440"></canvas>

CSS

body {
    background-color:#000000;
}

JavaScript

var simulator;

function double_pendulum(canvas) {
    if (!canvas || !canvas.getContext) {
        return false;
    }
    this.canvas = canvas;
    var ctx = this.ctx = canvas.getContext("2d");
    this.qp = new Array(4);
    this.qp_ = new Array(4);
    for (var j = 0; j < 4; ++j) {
        this.qp[j] = 0;
        this.qp_[j] = 0;
    }
    this.qp[0] = -1;
    this.length1 = 1;
    this.length2 = 1;
    this.mass1 = 1;
    this.mass2 = 5;
    this.gravity = 9.8;
    var width = canvas.width;
    var height = canvas.height;
    var bgcanvas = this.bgcanvas = document.createElement("canvas");
    bgcanvas.width = width;
    bgcanvas.height = height;
    var bgctx = this.bgctx = bgcanvas.getContext("2d");
    this.update_x2y2_canvas();
    this.timer = setInterval("simulator.update();", 1000 / 30);
}
double_pendulum.prototype.dt = (1 / 30) / 5;
double_pendulum.prototype.size_ref = 256;
double_pendulum.prototype.linewidth_ref = 5;
double_pendulum.prototype.update_fixed_point = function () {
    var qp_m = new Array(4);
    for (var i = 0; i < 4; i++) {
        qp_m[i] = 0.5 * (this.qp[i] + this.qp_[i]);
    }
    var delta_theta = qp_m[0] - qp_m[1];
    var cos_delta = Math.cos(delta_theta);
    var sin_delta = Math.sin(delta_theta);
    var sin_2delta = 2 * cos_delta * sin_delta;
    var l1l2m1pm2sin2delta = this.length1 * this.length2 * (this.mass1 + this.mass2 * sin_delta * sin_delta);
    var sin1 = Math.sin(qp_m[0]);
    var sin2 = Math.sin(qp_m[1]);
    var p1 = qp_m[2];
    var p2 = qp_m[3];
    var c1 = p1 * p2 * sin_delta / l1l2m1pm2sin2delta;
    var c2 = (this.length2 * this.length2 * this.mass2 * p1 * p1 + this.length1 * this.length1 * (this.mass1 + this.mass2) * p2 * p2 - 2 * this.length1 * this.length2 * this.mass2 * p1 * p2 * cos_delta) * sin_2delta / (2 * l1l2m1pm2sin2delta * l1l2m1pm2sin2delta);
    var qp_0_new = this.qp[0] + this.dt * (this.length2 * p1 - this.length1 * p2 * cos_delta) / (l1l2m1pm2sin2delta * this.length1);
    this.qp_[0] =...