Physics Sandbox

A browser-based interactive physics playground with five simulation modes, all running on a vanilla JS canvas engine with no dependencies.

Modes

Mode	What it does
Gravity	Spawn bouncing circles that fall under gravity with motion trails
Collisions	Same as Gravity but with mass-based elastic circle-circle collision resolution
Springs	Click bodies to link them with animated coil springs; color shifts green→red under tension
Particles	Click/drag to emit rotating square particles that fade and floor-bounce
Fluid	SPH-lite pressure simulation rendered as soft radial blobs

Files

physics-sandbox/
├── index.html    # Layout, mode tabs, sliders, color palette, live stats panel
├── physics.js    # Engine — Body, Spring, Particle, FluidParticle classes + main loop
├── ui.js         # Wires DOM controls → PhysicsSandbox API
└── style.css     # Dark monospace theme (JetBrains Mono, CSS variables)

Usage

Open index.html directly in any modern browser — no build step, no server required.

Canvas interactions

• Click — spawn a body / emit particles or fluid
• Drag — move an existing body (Gravity/Collisions/Springs)
• Springs mode — click body A then body B to connect them; click empty space to spawn a new anchored body

Panel controls

• Pause / Resume — freeze the simulation
• Demo — spawns a mode-specific preset (pendulum chain, particle bursts, fluid blobs, etc.)
• Clear — removes objects for the current mode only
• Clear All — wipes everything across all modes
• Color — eight swatches; affects newly spawned objects
• Physics sliders — gravity, bounce, friction (all modes); stiffness + damping (Springs); lifetime (Particles); radius + pressure (Fluid)

Limits

Object	Cap
Bodies	120
Fluid particles	600

Browser support

Any browser with Canvas 2D and requestAnimationFrame — Chrome, Firefox, Safari, Edge.