Particles Canvas is a teaching-focused 3D force lab rendered with Canvas 2D, custom physics, collisions, camera controls, field visualization, probes, measurements, and configurable particle systems.
Particles Canvas
HTML canvas3D simulationPhysics
Overview
The simulation makes force laws visible and adjustable. It keeps the physics model explicit and bounded, so users can enable one force, change constants, step time, inspect vectors, and discuss behavior without pretending the toy model is a real atomic or molecular simulator.
Implementation notes
Simulation runs a fixed-step semi-implicit Euler loop with capped frame gaps, acceleration and speed clamps, softened force equations, spatial-grid pair lookup, boundary resolution, and collisions.
Model, renderer, hooks, and components are split under the simulation feature so physics, projection, controls, canvas events, and UI state stay separate.
The renderer projects a 3D world to Canvas 2D with axes, grid, depth cues, particles, vectors, trails, FPS, probe data, and optional potential heatmap.
Key points
Designed for force intuition, not SI-accurate molecular or quantum simulation.
Includes presets for acceleration, electric and magnetic fields, springs, drag, buoyancy, charge pairs, Lennard-Jones, and collision scenarios.
Covered by lint, typecheck, Vitest model/renderer tests, and Next build checks.
Try the simulation in the browser, then inspect the source to see how the physics model, renderer, and interaction state are separated.