Image Tools
Particle Playground - Canvas Animation Tool
An interactive particle animation playground running in your browser. Adjust count, speed, size, color modes, and trail settings in real time.
Click canvas to emit a burst of particles.
What is being simulated?
The particle playground simulates a system of point particles subject to physical forces. Each particle has a position, velocity, and mass. Forces - gravity, electrostatic attraction/repulsion, damping, and boundary collisions - are applied every animation frame to update each particle’s velocity and position according to Newton’s laws of motion (F = ma).
Controls
- Click / tap the canvas to add new particles at that position.
- Gravity slider: increase gravity to make particles fall; set to zero for zero-g or negative for anti-gravity.
- Attraction / repulsion: particles can attract each other (like gravity) or repel (like same-charge particles).
- Damping: adds drag that slows particles over time, simulating air resistance.
- Clear: remove all particles.
Exploration prompts
- Zero gravity + attraction: particles orbit each other, forming clusters that resemble stellar systems or molecular bonds.
- High gravity + no damping: chaotic bouncing as particles accelerate downward and rebound from boundaries.
- Repulsion only: particles spread as far apart as possible - they arrange into a pattern that minimizes potential energy, similar to Thomson’s electron-sphere model.
- Lots of particles + damping: watch a gas-like system settle into equilibrium.
Real-world connections
Particle simulations with the same mathematical foundations are used in:
- Video games and film VFX: fire, smoke, water, explosions, and cloth physics are all particle systems.
- Molecular dynamics: simulating how atoms and molecules interact to model protein folding and drug behavior.
- Astrophysics: N-body simulations of stars, galaxies, and dark matter use the same force integration methods, just at astronomical scale.
- Fluid dynamics: Smoothed Particle Hydrodynamics (SPH) represents fluid as a collection of particles - used in engineering and disaster modeling.
Physics parameters glossary
- Gravity: a constant downward acceleration applied to all particles. Positive values pull particles down; zero gives weightlessness; negative values push particles upward.
- Drag / friction: a velocity-proportional force that opposes motion, simulating air resistance. Without drag, particles maintain velocity indefinitely.
- Bounce elasticity: the fraction of kinetic energy retained after a boundary collision. 1.0 = perfectly elastic (no energy loss); 0 = perfectly inelastic (sticks to wall).
- Emission rate: how many particles are created per frame or per second from the source point.
- Particle lifetime: how many frames or seconds a particle exists before being removed. Controls the density and length of trails.
- Initial velocity: the speed and direction particles have at the moment of creation. Combined with gravity and drag, this determines the arc and spread of the system.
Emergent phenomena
Complex behaviors can arise from the simple per-particle rules in this simulation. Try to recreate these:
- Flocking (Boids-like behavior): with moderate attraction between particles and some damping, particles cluster into groups that orbit each other - similar to Craig Reynolds' Boids algorithm (alignment, cohesion, separation).
- Vortex formation: a rotating mass of particles can form spontaneously when initial conditions have angular momentum, analogous to galaxy formation or hurricane eye walls.
- Crystal lattice: with strong repulsion and sufficient damping, particles arrange into minimum-energy configurations resembling 2D crystal structures.
Simulation accuracy note
This simulation uses Euler integration: at each time step, position is updated by velocity × Δt and velocity by acceleration × Δt. This is the simplest method but accumulates errors over time - a particle in a closed orbit will slowly spiral outward or inward rather than maintaining a perfect orbit.
Higher-accuracy methods used in professional physics engines include Verlet integration (better energy conservation for constraint-based systems) and Runge-Kutta (RK4) (much smaller per-step error for smooth force fields). The trade-off is computational cost per frame.