explaingit

subprotocol/verlet-js

★ 3,784JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

A small JavaScript physics engine for 2D browser simulations, combine particles and constraints to create cloth, ropes, rigid shapes, or spiderwebs that move and interact realistically on a canvas.

Mindmap

mindmap
  root((verlet-js))
    What it does
      2D physics
      Browser-based
      Particle system
    Primitives
      Particles
      Distance constraints
      Angular constraints
    Examples
      Cloth simulation
      Fractal trees
      Spiderweb
    Tech
      Plain JavaScript
      npm package
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a cloth or rope physics simulation in the browser using particles connected by distance constraints.

USE CASE 2

Add interactive physics-based animations to a web page, like objects that swing, bounce, or sag naturally.

USE CASE 3

Create fractal tree or spiderweb visualizations in a browser canvas using the included example scenes.

Tech stack

JavaScript

Getting it running

Difficulty · easy Time to first run · 30min
Free to use in any project, personal or commercial, as long as you keep the copyright notice.

In plain English

verlet-js is a small physics engine written in JavaScript that simulates how objects move and interact in two dimensions. It is based on a technique called Verlet integration, a mathematical method for calculating the positions of particles over time that tends to produce stable, believable results without requiring complex velocity tracking. The engine works by giving you three basic building blocks: particles, distance constraints, and angular constraints. A particle is a point in space with a position. A distance constraint keeps two particles a fixed distance apart. An angular constraint controls the angle between connected particles. By combining these primitives in different arrangements, you can build a wide range of physical simulations, from rigid geometric shapes to flexible structures like cloth or rope. The repository includes four example simulations: a basic shapes demo that serves as a starting point, fractal trees where branches are connected by constraints, a cloth simulation made of a grid of particles, and a spiderweb. These examples show the range of what the engine can produce from its simple component set. The code is organized into four files: a 2D vector math implementation, the constraint logic, the main engine, and a collection of pre-built objects like triangles, circles, and tires. It is available as an npm package. The README is short, and the project appears to be a self-contained demonstration rather than a production physics library with active development. The README is brief and the project description is sparse beyond what the examples demonstrate. It is released under the MIT license.

Copy-paste prompts

Prompt 1
Using verlet-js, write JavaScript code to create a cloth simulation made of a grid of particles connected by distance constraints.
Prompt 2
How do I add a swinging rope made of particles to a browser canvas using verlet-js?
Prompt 3
Modify the verlet-js circle object to bounce off the edges of the canvas instead of falling off screen.
Prompt 4
How does Verlet integration work in verlet-js, and why does it produce stable physics without explicitly tracking velocity?
Prompt 5
Create an interactive verlet-js demo where the user can click to pin or release individual particles in a cloth simulation.
Open on GitHub → Explain another repo

← subprotocol on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.