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

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

    // x, y, w, h
    verly.createBox(20, 100, 100, 100);
    // x, y, segments, radius
    verly.createHexagon(200, 200, 16, 50);
    // x, y, w, h, segments, pinOffset
    verly.createCloth(300, 200, 300, 300, 15, 2);
    // x, y, segments, gap, pin
    verly.createRope(500, 150, 20, 15, 0);
    // x, y
    verly.createRagdoll(300, 200);

    function animate() {
      ctx.clearRect(0, 0, width, height);

      verly.update();
      verly.render();

      // for interacting with points
      verly.interact();
      
      requestAnimationFrame(animate);
    }
    animate();
  }