Coding Conway's Game of Life

Conway's Game of Life is a classic example of cellular automaton, in which each cell in a grid of cells can be either alive or dead, and its state evolves according to certain rules that depend on the states of its neighbors. This game was invented by the mathematician John Conway in 1970 and has since been a popular subject of study for both mathematicians and computer scientists. Beyond having a measurable influence on he field, I also love Conway's Game of Life for its simplicity and capacity for infinite possibilities.

The code I ended up creating is a JavaScript implementation of Conway's Game of Life using the p5.js library for visualization. The code creates a canvas of size 800 by 800 pixels and divides it into a grid of cells. The number of cells in the grid is determined by the `divFactor` variable, which is initially set to 100. The `mainArray` and `nextArray` variables are two-dimensional arrays that store the state of each cell, with `mainArray` representing the current generation and `nextArray` representing the next generation.

The setup() function is called once when the program starts and initializes the state of the cells. It sets up the canvas, initializes the `mainArray` and `nextArray` arrays to all zeros, and randomly sets some of the cells to the "alive" state by setting the corresponding elements in `mainArray` to 1. The number of cells initially set to the "alive" state is determined by the `initialCells` variable, which is set to a random number between 100 and the total number of cells in the grid (divFactor * divFactor).

The resetSketch() function is called when the "New Game" button is pressed and resets the state of the cells to the initial state as in the setup() function.

The draw() function is called repeatedly and updates the state of the cells. It first loops through each cell in `mainArray` and determines the state of its neighbors. It then applies the rules of Conway's Game of Life to each cell in `mainArray` to determine its next state, and stores the result in `nextArray`. Finally, it copies the contents of `nextArray` back to `mainArray`, and repeats the process for the next generation.

The rules of Conway's Game of Life are as follows:

• A live cell with fewer than two live neighbors dies (underpopulation)
• A live cell with two or three live neighbors survives
• A live cell with more than three live neighbors dies (overpopulation)
• A dead cell with exactly three live neighbors becomes a live cell (reproduction)


In the implementation provided by this code, each cell is represented by a square on the canvas, with white representing an "alive" cell and black representing a "dead" cell. The color of each cell is determined by the value of its corresponding element in `mainArray`.

The code is unoptimized, as noted in the comments. A possible optimization would be to switch between the `mainArray` and `nextArray` arrays for each generation, rather than copying `nextArray` back to `mainArray` each time. This would reduce the time it takes to write the next generation into `mainArray`. Feel free to take a look at the code specific for this p5 js generation and try it out yourself!