About this project

This project is an implementation of the classic game of life. It was written in the p5.js framework.

Originally, I just wanted to have a version of the game in the browser to practice my JavaScript, but I enjoyed the interactive nature of the game and so added more and more features, such as the scrolling.

This project features a generation counter, a counter of the number of alive cells, and an FPS display with slider if you want to investigate a particular sequence in more detail.

The pause and restart buttons are quite self-explanatory; the 'Scroll' button causes the entire grid to scroll from left to right, which can cause some quite interesting patterns to occur.

The graph at bottom which tracks the number of cells alive can also reveal some clues about the nature of the algorithm.

The most interesting feature by far however are the number of different 'rules' that can be applied to the grid which go beyond the classical Game Of Life. These range from quite similar to the original to entirely different, such as the 'Mazezentric' rule that generates beautiful mazes. I encourage you to try out all the rules as well as the scrolling :).

Some of my personal favourites are scrolling Diamoebe, which looks almost like a simulation of fire, as well as 'Walled cities'.

As already mentioned, this project was written in the p5.js framework, which is a JavaScript library for creating interactive web applications. It's very intuitive and meant for beginners, but it's also very powerful and can be used to create complex apps.

Originally, this project was only meant for the original game of life, but I discovered that there were other forms of cellular automata that seemed quite interesting, so I decided to add them as well.

In order for this to be possible, I 'created' a simple format for the rules, which is a short list of attributes. The first attribute is the rulestring, which describes the number of neighbors needed for a cell to be born or survive.

The next attribute is the probability, which is the probability that is used to spawn the cells at the beginning of a game, so for example a probability of 50 means that every cell has a 50% chance to be alive at the beginning of a game.

The last attribute is the probability_offset, which is the probability used to spawn the cells when the game is being scrolled. This only applies to the furthest left row of cells, so for example a probability of 50 means that every cell on the leftmost row has a 50% chance to be born per generation.

So for example, the rule for Game Of Life Looks like this:

indicating that a dead cell will spawn if it has exactly 3 neighbors, and will survive if it has 2 or 3 neighbors. The probability of a cell being spawned at the start is 10, and the probability of a cell being born when the game is being scrolled is 40.

The game itself is a class called CellularAutomaton, in which all the simulation steps take place. The sketch.js file sets up all the UI components and runs the drawing loop.

Lastly, as the project was first devoloped as a standalone application, it needed to be integrated into this site in some way. I did this with a simple canvas element, which is a HTML element that can be used to draw on. This is the same way that a canvas is used in the p5.js framework, but it's a bit more intuitive and less code to use. The canvas element is then added to the body element, which is the main HTML element in the page. This way, the game can be drawn on the page itself, and the user can interact with it.