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".