Physics simulations turn your browser into a laboratory. From simple gravity to fluid dynamics, from wave mechanics to chaotic systems — these tutorials show you how to simulate the physical world with JavaScript and the HTML Canvas.
Each simulation is self-contained and runs in real-time. You'll learn the math and physics behind each effect, with clear code examples you can modify and experiment with.
9 articles in this guide
Learn how to build gravity simulations with JavaScript and HTML Canvas. 8 interactive examples: orbital mechanics, n-body systems, galaxy formation, particle gravity wells, spring physics, and more.
Learn how to build fluid simulations with JavaScript and HTML Canvas. 8 interactive examples: Navier-Stokes solver, smoke simulation, ink diffusion, SPH particles, vortex dynamics, shallow water waves, and more.
Learn how to build particle systems with JavaScript and HTML Canvas. 8 interactive examples: emitters, forces, trails, flocking, fireworks, galaxy spirals, rain, and interactive attraction fields.
Learn to build stunning wave simulations from scratch with JavaScript and Canvas. 8 interactive examples: 1D string wave, 2D ripple tank, interference patterns, Doppler effect, diffraction through slits, standing waves, shallow water equations, and generative wave art.
Learn to simulate double pendulums with JavaScript and Canvas. 8 interactive examples: basic simulation, trail painting, energy visualization, phase space portraits, butterfly effect comparison, pendulum array, damped pendulum with springs, and generative chaos art.
Learn to create kinetic art with JavaScript and Canvas. 8 interactive examples: pendulum waves, Calder-style mobiles, wind sculptures, harmonographs, kinetic typography, magnetic fields, mechanical linkages, and wave machines.
Learn to visualize the Lorenz attractor and other strange attractors with JavaScript and Canvas. 8 interactive examples: classic Lorenz butterfly, Rössler attractor, Clifford attractor, De Jong attractor, Aizawa attractor, Lorenz parameter explorer, multi-trajectory phase portrait, and generative chaos art.
Learn to simulate reaction-diffusion systems with JavaScript and Canvas. 8 interactive examples: Gray-Scott model, Turing spots and stripes, coral growth, fingerprint patterns, mitosis animation, chemical waves, Belousov-Zhabotinsky spirals, and generative reaction-diffusion art.
Learn to build interactive metaball simulations with JavaScript and Canvas. 8 working examples: basic 2D metaballs, marching squares, colorful organic blobs, interactive mouse metaballs, lava lamp, 3D raymarched metaballs, metaball text, and generative metaball art.