Real-time particle physics simulation inspired by Traer Physics for Processing. Renders with Three.js and WebGL.
Live Demo — runs entirely in your browser.
Five modes demonstrating different particle physics:
- Triangle — Three spring-connected particles with an angle constraint
- Attraction — Particles orbiting a pinned center under inverse-square forces
- Rope — A dangling chain of springs with gravity
- Cloth — 12x12 grid with structural, shear, and bending springs
- 3D Mesh — 5x5x5 particle grid with elastic collisions
Click and drag particles to interact. Adjust physics parameters with the control panel.
Two execution modes:
Standalone (browser only): Physics runs in TypeScript using flat Float32Array buffers. This is what the live demo uses.
Client-server: A Python backend computes physics with PyTorch tensors and streams state over WebSocket at 60 Hz. The browser is a pure renderer.
Three.js (renderer) <── WebSocket binary frames ──> FastAPI + PyTorch (physics)
↕ REST ↕
lil-gui controls ──── /api/mode, /api/params ───> SimulationServer
cd frontend
npm install
npm run devOpen http://localhost:5173 — standalone mode activates automatically when there's no backend.
./setup.sh
./run.shThis starts the FastAPI server on port 8000 and Vite dev server on port 5173. Windows users can use setup.bat and run.bat.
Force-based Euler integration following the Paul Bourke particle model and the gorillasun spring tutorial.
- Hooke's law springs with velocity damping along the spring axis
- Inverse-square attraction with distance clamping
- Position-based distance and angle constraints (iterated Gauss-Seidel)
- Brute-force elastic collisions with impulse response
- Axis-aligned bounding box enforcement (clamp or reflection)
- Rendering: Three.js — InstancedMesh for particles, LineSegments for springs
- UI: lil-gui
- Build: Vite + TypeScript
- Backend: Python, PyTorch, FastAPI, binary WebSocket protocol
MIT