anuraghazra/Verly.js

Verly.js

Easy to integrate verlet physics engine.

• Yet another physics engine? really?
• Yes because i love physics :heart:.

Read my article on medium about Making a Verlet Physics Engine in JavaScript

cool things made with Verly.js

• VerlyRangeSlider
• Ship
• Parasites
• Swingy Text
• Happy Holi
• See more examples

want more info? Check out the API documentation

Experimental Reactjs Integration - check out the sandbox

Installation

git clone https://github.com/anuraghazra/Verly.js.git

local development

after cloning the repo in command line run to build

npm install && npm run build

Usage

import CDN link

<!-- add this to head -->
<script src="https://cdn.jsdelivr.net/gh/anuraghazra/[email protected]/dist/verly.bundle.js"></script>

  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();
  }

Author

• https://anuraghazra.github.io
• [email protected]

Contributions Are Welcomed.

Made with :heart: and JavaScript