Interactive Particle Life
This is an interactive, browser-based simulation inspired by "Particle Life," a concept that
generates surprisingly life-like, complex behaviors from a simple set of physics rules. The entire
simulation runs in your browser using plain JavaScript, HTML, and CSS, with no external libraries.
Overview
The simulation consists of thousands of colored particles. Each particle of a certain color exerts an
attraction or repulsion force on particles of other colors (and its own color). These forces are the
only rules in the system. Everything you see—the formation of "cells," the movement, the "chasing"
behaviors, and the complex structures—is an emergent property of these simple interactions. None of
this behavior is pre-programmed.
How to Use
- Simulation Settings: Adjust the total number of
Particles and the
number of color Types. Click "Restart" for these changes to take effect.
- Realtime Settings: These sliders change the simulation as it runs.
Damping adds friction, Radius controls how far particles can "see"
each other, and Force scales the strength of all interactions.
- Particle Values (Force Matrix): This grid is the heart of the simulation. Each
cell represents the force between two particle types. Click a cell to cycle its value from
strong attraction (bright green), through neutral (black), to strong repulsion (bright red). The
rows represent the particle type exerting the force, and the columns represent the particle type
being affected.
- Buttons:
Restart resets all particles to random positions.
Rand Forces generates a new random force matrix. Sound toggles
sonification. Glow toggles a visual effect that can improve performance when turned
off.
- Play Demo: Cycles through a series of interesting, pre-configured force
matrices to showcase the simulation's potential.
Technical Details
This project is a testament to what can be achieved with modern web technologies without relying on
heavy frameworks.
- Rendering: The simulation is rendered on an HTML5
<canvas>
element. The "glow" effect is achieved by drawing particles with a lower opacity and using the
lighter global composite operation.
- Physics Engine: The core logic is written in JavaScript. At each frame, the
simulation calculates the net force on every particle by iterating through all other particles
within its interaction radius. This is an O(n²) operation, which is why performance can degrade
with a very high particle count. More advanced implementations (like the one that inspired this
project) use GPU-based Compute Shaders for massive performance gains, but this version keeps it
simple and accessible in standard JavaScript.
- Density Regulation: To prevent particles from collapsing into infinitely dense
points (as seen in the inspiration video), this simulation includes a "density regulation"
mechanism. As particles of the same type get too close, their attraction to others is dampened,
encouraging them to form structures rather than clumps.
- Sonification: The sound is generated using the Web Audio API. A primary
oscillator's frequency is modulated by the simulation's average kinetic energy, creating a
dynamic ambient tone. Particle "births" (resets) trigger short, percussive sounds.
Future Directions
This simulation is a starting point. There are many ways it could be expanded:
- Implementing spatial hashing or a quad-tree to optimize particle interaction checks, moving from
O(n²) to something closer to O(n log n).
- Adding more complex behaviors, like particle division or evolution of force matrices over time.
- Porting the simulation logic to a WebGL Compute Shader for a massive performance boost, allowing
for hundreds of thousands of particles.
- Exploring 3D space for even more complex emergent structures.
This project was heavily inspired by the YouTube video "Realistic Life With Particles".