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

 * {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0px;
}

canvas {
  outline: 1px solid black;
}

// demo of Verly.js
// github: https://github.com/anuraghazra/Verly.js
// examples: http://anuraghazra.github.io/Verly.js

let canvas = document.getElementById('c');
let ctx = canvas.getContext('2d');
let width = window.innerWidth - 4;
let height = window.innerHeight - 4;
canvas.width = width;
canvas.height = height;


// iteration, canvas, ctx
let verly = new Verly(16, canvas, ctx);

let box = verly.createBox(50, 100, 50, 50);
let cloth = verly.createCloth(150, 120, 200, 200, 15, 2);
let hexagon = verly.createHexagon(250, 100, 16, 40, 1, 4);
let ragdoll = verly.createRagdoll(350, 50);
let rope = verly.createRope(300, 50, 20, 15, 0);


function animate() {
  ctx.clearRect(0, 0, width, height);
  
  cloth.tear(200);
  verly.update();
  verly.render();

  // for interacting with points
  verly.interact();

  requestAnimationFrame(animate);
}
animate();