🧬 Cellular Simulations: A "Clusters" Variation

A web based cellular automata simulation playground powered by my variation of Jeffrey Ventrella's "Clusters" algorithm. It simulates the movement and interaction of hundreds of thousands of particles using rules of attraction and repulsion, creating complex and organic patterns.

Features

• Simulate hundreds of thousands of interacting particles smoothly in the browser.
• Customizable attraction/repulsion rules between particle types.
• Adjustable physics parameters for diverse behaviors.
• GPU accelerated with WebGL.
• Live experimentation with interactive controls.

cells.sebilune.dev

How It Works

Particle State

The simulation consists of a starting population of 4,000 particles. Each particle is a distinct entity defined by its state, which includes:

• Position (x, y): Its coordinates in the 2D space.
• Velocity (v_x, v_y): Its speed and direction of movement.
• Type: Red, Green, Blue, Yellow, Cyan, or Magenta.

Rules of Interaction

The simulation's emergent behavior lies in a 6x6 interaction matrix. This matrix defines the core laws of the simulated space, specifying the force between any two particle types. For a particle of type A and a particle of type B, the matrix contains a value g, that dictates their interaction.

• If g is positive, the force is attractive, pulling the particles together.
• If g is negative, the force is repulsive, pushing them apart.

The magnitude of this interaction coefficient determines the strength of the force. When the rules are randomized, this matrix is populated with random values between -1 and 1. This leads to an almost infinite diversity of patterns.

	Red	Green	Blue	Yellow	Cyan	Magenta
Red	0.8	-0.5	0.2	-0.7	0.1	-0.3
Green	-0.4	0.7	-0.6	0.3	-0.2	0.5
Blue	0.3	-0.1	0.9	-0.8	0.4	-0.5
Yellow	-0.6	0.2	-0.7	0.6	-0.3	0.8
Cyan	0.2	-0.4	0.5	-0.2	0.7	-0.6
Magenta	-0.5	0.3	-0.8	0.4	-0.1	0.9

Example Matrix
Values >0 indicate attraction; values <0 indicate repulsion.

Force Law and Simulation Loop

The simulation evolves in discrete time steps. In each step, the following calculations are performed for every particle in parallel:

• Force Calculation: The net force on a particle is the sum of forces from all other particles within a predefined maxDistance. The force exerted by one particle on another follows a simplified gravity-like law:

  
  
  
  
  

  where g is the interaction value from the rules matrix and d is the distance between the particles. This inverse relationship means that closer particles exert a stronger influence.

• Numerical Integration: Once the total force vector is calculated for a particle, its velocity and position are updated using a semi-implicit Euler integration method:

  
  
  
  
  
  

  The damping factor acts like friction, preventing the system from becoming unstable and allowing structures to form and stabilize.

• Boundary Conditions: A simple wall repulsion force is applied to keep particles within the visible area, preventing them from flying off-screen.

Computing

To make the real-time simulation of thousands of particles possible, the entire computational workload is offloaded to the GPU using WebGL.

• Data as Textures: Particle data (position and velocity) is stored in WebGL textures. Each pixel in a texture corresponds to a single particle, with the pixel's RGBA color channels used to encode the x, y, vx, vy values.

• "Ping-Pong" Technique: The simulation loop is implemented in a GLSL fragment shader. This shader reads the particle states from an input texture (u_particles), performs the force and integration calculations, and writes the new states to an output texture. To avoid reading from and writing to the same texture simultaneously, two textures are used in a "ping-pong" fashion. On each frame, the roles of the input and output textures are swapped.

Emergence

The organic looking patterns you see are not explicitly designed. They are emergent properties of the algorithm. The interaction rules, when applied simultaneously to thousands of particles, give rise to self-organizing structures. Depending on the rule set, you can see behaviors similar to flocking, cellular division, predator-prey dynamics, and the formation of complex "organisms." Cellular automata like this show how complexity can arise from simplicity, a fundamental concept in chaos theory and artificial life.

The simulation consists of two main shaders:

• Step Shader: This shader is responsible for updating the position and velocity of each particle based on a set of rules. These rules define the attraction and repulsion forces between different types of particles.
• Render Shader: This shader is responsible for rendering the particles to the screen. It uses the particle positions and types to draw each particle with its corresponding color.

The simulation space is very customizable, many parameters are adjustable such as the number of particles, the rules of interaction, and the physics.

Usage

The simulation can be controlled using the settings panel, in the top-right corner of the screen. The following can be adjusted:

• Overlay: Toggles the visibility of the overlay, which displays the UI excluding for the settings and theme button.
• Analytics: Controls the visibility of the current rules and physics tables at the bottom left of the screen.
• Population: Controls the number of particles in the simulation.
• Rules: Defines the interaction rules between particle types. You can adjust the values in the 6x6 matrix to change how particles of different types interact with each other.
• Physics: Controls the physical properties of the simulation. You can adjust parameters such as:
  • maxDistance: Used as cutoff for force calculation.
  • damping: Multiplies velocity after force is applied.
  • timeScale: Multiplies velocity for position update.
  • wallRepel: Defines the "soft" boundary region.
  • wallForce: Multiplies the correction applied when near the wall.
  • particleSize: Used for rendering, doesn't affect physics.
  • mouseRepel: Used for mouse repulsion force.

View settings can be controlled using the following mouse and keyboard shortcuts:

• Click and drag: Camera panning.
• Scroll wheel: Zoom in/out.

Technologies

• React: JavaScript library for UI.
• TypeScript: Typed superset of JavaScript.
• Vite: Build tool for modern web apps.
• regl: Functional WebGL library.
• GLSL: OpenGL Shading Language.
• Tailwind CSS: Utility CSS framework.
• Shadcn: React UI components via Radix UI.

Installation

If you would like to get a local build of this project, clone the repository and install the dependencies:

git clone https://github.com/sebilune/cells-sim.git
cd cells-sim
npm install

Then, build the app:

npm run build

This will generate a dist directory at the root of the project, containing a portable build of the app. To run the app, open the dist/index.html file in any modern web browser.

This project was made as an exploration of mine into the field of Artificial Life, to understand how complex cellular behaviors can emerge from a simple set of rules.

License

This project is licensed under the MIT License. See the LICENSE file for more information.