Colored particles with simple attractions that assemble into living cells.
Each color of particle attracts or repels each other color with its own random strength, and that small table of numbers is the whole rulebook. Out of it come membranes, cells that chase each other, spinning clusters and things that look alive. Forces are computed with a spatial grid so thousands of particles run in real time, and every few seconds the rules mutate to grow a new ecosystem.
Try it. Click to randomize the rules. Drag to stir the particles.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build "particle life" with JavaScript and the HTML canvas element: colored particles whose simple attractions grow into cells and creatures. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint it near black.
- Create about 1,500 particles split evenly into 5 colors, at random positions, stored in typed arrays.
- Make a 5x5 table of random numbers between -1 and 1. Entry [a][b] says how much color a is pulled toward color b (positive) or pushed away (negative). It does not have to be symmetric.
- For every pair closer than a max radius, compute a force: below 30% of the radius, always push apart (strongest when touching); beyond that, a triangular bump whose height is the table entry, zero at both ends.
- Add up the forces, add them to each velocity, multiply velocities by a friction factor (around 0.8 per step), and move. Wrap particles around the edges so the world is a torus, and measure distances the short way around.
- Draw each particle as a small dot in its color.
Once that works, make it beautiful:
- Speed it up with a grid: cells one radius wide, rebuilt every frame, so each particle only checks the 3x3 block of cells around it. Then push to several thousand particles.
- Draw with globalCompositeOperation = "lighter" and soft radial-gradient sprites so clusters glow, and fade the previous frame instead of clearing it for short trails.
- Click to roll a new random table, and every few seconds nudge a few entries so the ecosystem keeps evolving.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as showing the rule table on screen, saving and sharing favorite rule sets, or letting particles change color when they collide.
