JSFiddle - React, Tailwind, and code Playground

by simonsarris

HTML

<canvas id = "c" > </canvas>

CSS

* {
  margin: 0;
  background:#333;
}

JavaScript

// settings

var physics_accuracy = 3,
   mouse_influence   = 20,
   mouse_cut         = 6,
   gravity           = 2900,
   cloth_height      = 30,
   cloth_width       = 200,
   start_y           = 20,
   spacing           = 4,
   tear_distance     = 60;


window.requestAnimFrame =
window.requestAnimationFrame       ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame    ||
window.oRequestAnimationFrame      ||
window.msRequestAnimationFrame     ||
function(callback) {
    window.setTimeout(callback, 1000 / 60);
};

var canvas,
  ctx,
  points,
  physics,
  mouse = {
    down: false,
    button: 1,
    x: 0,
    y: 0,
    px: 0,
    py: 0
  };

window.onload = function() {
  canvas = document.getElementById('c');
  ctx    = canvas.getContext('2d');

  canvas.width  = 960;//window.innerWidth;
  canvas.height = 600;//window.innerHeight;

  canvas.onmousedown = function(e) {
    mouse.button = e.which;
    mouse.px = mouse.x;
    mouse.py = mouse.y;
    mouse.x = e.clientX || e.layerX;
    mouse.y = e.clientY || e.layerY;
    mouse.down = true;
    e.preventDefault();
  };

  canvas.onmouseup = function(e) {
    mouse.down = false;
    e.preventDefault();
  };

  canvas.onmousemove = function(e) {
    mouse.px = mouse.x;
    mouse.py = mouse.y;
    mouse.x = e.clientX || e.layerX;
    mouse.y = e.clientY || e.layerY;
    e.preventDefault();
  };

  canvas.oncontextmenu = function(e) {
    e.preventDefault();
  };

  init();
};

var Constraint = function(p1, p2, spacing, tear_distance) {

  this.p1 = p1;
  this.p2 = p2;

  this.length = spacing;
  this.tear_distance = tear_distance;
};

Constraint.prototype.solve = function() {

  var diff_x = this.p1.x - this.p2.x,
    diff_y = this.p1.y - this.p2.y,
    dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y),
    diff = (this.length - dist) / dist;

  if (dist > this.tear_distance) this.p1.remove_constraint(this);

  var scalar_1 = ((1 / this.p1.mass) / ((1 / this.p1.mass) + (1 / this.p2.mass))),
 ...