examples/ragdoll.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      canvas {
        display: block;
        background: white;
      }
    </style>
  </head>
  <body>
    <canvas></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
    <script src="../index.umd.js"></script>
    <script>
      const { Heax, Composite } = HeaxVerlet;

      const canvas = document.querySelector("canvas");
      canvas.height = window.innerHeight;
      canvas.width = window.innerWidth;

      const heax = new Heax();
      const ragdoll = new Composite(heax);

      // head
      const head = ragdoll.addParticle(50, 0, 50, 0, { radius: 15 });

      // neck
      const neck = ragdoll.addParticle(50, 40, 50, 40, { radius: 2 });
      ragdoll.addConstraint(head, neck, { width: 4 });

      // body
      const body = ragdoll.addParticle(50, 120, 50, 120, { radius: 2 });
      ragdoll.addConstraint(neck, body, { width: 4 });

      // hands
      const leftElbow = ragdoll.addParticle(20, 70, 20, 70, { radius: 2 });
      ragdoll.addConstraint(neck, leftElbow, { width: 4 });
      const leftHand = ragdoll.addParticle(20, 120, 20, 120, { radius: 2 });
      ragdoll.addConstraint(leftElbow, leftHand, { width: 4 });

      const rightElbow = ragdoll.addParticle(80, 70, 80, 70, { radius: 2 });
      ragdoll.addConstraint(neck, rightElbow, { width: 4 });
      const rightHand = ragdoll.addParticle(80, 120, 80, 120, { radius: 2 });
      ragdoll.addConstraint(rightElbow, rightHand, { width: 4 });

      //legs
      const leftKnee = ragdoll.addParticle(20, 150, 20, 150, { radius: 2 });
      ragdoll.addConstraint(body, leftKnee, { width: 4 });
      const leftLeg = ragdoll.addParticle(20, 200, 20, 200, { radius: 2 });
      ragdoll.addConstraint(leftKnee, leftLeg, { width: 4 });

      const rightKnee = ragdoll.addParticle(80, 150, 80, 150, { radius: 2 });
      ragdoll.addConstraint(body, rightKnee, { width: 4 });
      const rightLeg = ragdoll.addParticle(80, 200, 80, 200, { radius: 2 });
      ragdoll.addConstraint(rightKnee, rightLeg, { width: 4 });

      const joints = [
        ragdoll.addConstraint(leftElbow, body, { hidden: true }),
        ragdoll.addConstraint(rightElbow, body, { hidden: true }),
        ragdoll.addConstraint(leftElbow, rightElbow, { hidden: true }),

        ragdoll.addConstraint(head, leftElbow, { hidden: true }),
        ragdoll.addConstraint(head, rightElbow, { hidden: true }),

        ragdoll.addConstraint(leftKnee, rightKnee, { hidden: true }),
        ragdoll.addConstraint(leftKnee, neck, { hidden: true }),
        ragdoll.addConstraint(rightKnee, neck, { hidden: true }),

        ragdoll.addConstraint(leftLeg, body, { hidden: true }),
        ragdoll.addConstraint(rightLeg, body, { hidden: true }),
        ragdoll.addConstraint(leftLeg, neck, { hidden: true }),
        ragdoll.addConstraint(rightLeg, neck, { hidden: true }),
      ];

      const gui = new dat.GUI();
      const stiffness = gui.add({ stiffness: 1.0 }, "stiffness", 0, 1.5);
      const showJoints = gui.add({ showJoints: false }, "showJoints");

      stiffness.onChange((val) => {
        for (const s of joints) {
          s.stiffness = val;
        }
      });

      showJoints.onChange((val) => {
        for (const s of joints) {
          s.hidden = !val;
        }
      });

      heax.composites.push(ragdoll);
      function update() {
        heax.clear();
        heax.update();
        heax.render();
        heax.mouse.drag();

        requestAnimationFrame(update);
      }

      update();
    </script>
  </body>
</html>