I wrote a cellular automation simulator using Processing.js. If you like Conway’s Game of Life, Brian’s Brain or others, this should interest you!


What is it?

This program was inspired by Mirek’s Cellebration website, which talks in detail about cellular automata. These are mathematical simulations which involve iterating a collection of cells in a grid, based on a series of rules. For instance, the well known automaton, Conway’s Game of Life, has the following rules:

  • Cells in the grid can either be ON or OFF.
  • If a cell is OFF, and exactly 3 of its neighbors are ON, the cell turns ON in the next generation.
  • If a cell is ON, and 2 or 3 of its neighbors are ON, it continues to survive. Otherwise, it dies in the next generation.

To see this in action, enter the rule 23/3/2 in the rule box.

I created this program using Processing.js. This is a powerful JavaScript visualization engine that uses canvas in HTML5.

How to Use

  • Press Start to begin simulation. Press Stop to pause it.
  • Clear World sets all cells to zero state. Randomize randomly adds pixels to about 50% of the world.
  • Drag your mouse over the canvas to add more pixels. Left click to add pixels, right click to erase.
  • To change the simulation rules, enter rule in the input box and press enter. Rule must in S/B/G notation.
  • I have some preset rules in the dropdown: Brian’s Brain, Conway’s Game of Life, and my favorite, Star Wars.

Rules Notation

Each rule has three parts: Survival rule, Birth rule and # of generations (S/B/G).

  • The survival rule is a list of numbers 0-8 which specify how many neighboring cells must be alive in order for a given cell to survive. Represented by “23” in The Game of Life.
  • The birth rule is also a list of numbers 0-8, which specify how many neighboring cells must be alive in order for a dead cell to come alive. Represented by “3” in The Game of Life.
  • The # of generations is a special rule used to create complex automata. For The Game of Life, this number is “2”, because a cell can only be alive or dead.

What I Learned

This was my first exposure to the Processing.js library, and I was very impressed by it. The library gives you an easy way to make dynamic graphics based apps in the browser. 15 years ago, I would have had to make a Java Applet to accomplish the same thing (and I actually did build this app in Java once).