JSFiddle - React, Tailwind, and code Playground

by hunterloftis

HTML

<script src="//hunterloftis.github.io/newton/current/newton.min.js"></script>
<canvas id="display" width="400" height="400"></canvas>

CSS

html {
    margin: 0;
    padding: 0;
}
body {
    text-align: left;
    font-size: 12px;
    padding: 0;
    margin: 0;
}
#display {
    display: block;
    border: solid 1px #ccc;
    margin: 0;
    background: #000;
}
a {
    text-decoration: none;
    color: #2badad;
}

JavaScript

function Rope(x, y, length) {
    Newton.Body.call(this);   // call Body's constructor
  
    var segmentLength = 10;
    var segments = length / segmentLength;
    var prev, current;

    for (var i = 0; i < segments; i++) {
        // add some randomness for a nice sway
        current = this.add(Newton.Particle(x + Math.random() * 20 - 10, y));
        if (!prev) this.head = current;
        else this.add(Newton.RopeConstraint(prev, current, {
            length: segmentLength
        }));    
        prev = current;
    }
}

Rope.prototype = Object.create(Newton.Body.prototype);  // extend Body's prototype

var display = document.getElementById('display');
var renderer = Newton.GLRenderer(display);
var sim = Newton.Simulator({
    solve: [ Newton.PinConstraint, Newton.BoxConstraint, Newton.RopeConstraint ]
});

var gravity = Newton.LinearForce(7, Math.PI * 1.5);
var container = Newton.BoxConstraint(0, 0, 400, 400);
var rope1 = new Rope(150, 50, 150);
var rope2 = new Rope(250, 50, 250);

sim.add(rope1);
sim.add(rope2);
sim.add(Newton.PinConstraint(rope1.head));    // Pin one end of the rope
sim.add(Newton.PinConstraint(rope2.head));
sim.add(gravity);
sim.add(container);

renderer.render(sim);
sim.start();