The Game Of Life

The Game of Life is a cellular automataton designed by the British mathematician John Conway. A cellular automataton is a mathematical model that consists of a grid of cells, with each cell having an finite number of states (e.g "on" or "off"). A new grid configuration (a new generation) is created according to a fixed set of rules that determine the state of each cell based on its current state and the state of the cells around it (its neighbourhood). Cellular automata can be used to simulate a variety of real-world systems, from the Belousov–Zhabotinsky reaction to predator prey relationships.

In Conway's Game of Life, the grid is a 2D array of square cells each with two states alive and dead. Each cell interacts with its 8 neighbours, which are the cells that are horizontally, vertically, or diagonally adjacent to it. The rules are:

• Any live cell with fewer than two live neighbours dies, as if by underpopulation.
• Any live cell with two or three live neighbours lives on to the next generation.
• Any live cell with more than three live neighbours dies, as if by overpopulation.
• Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

We can get the number of alive neighbours of a cell in 2D array with the code below. Note we are applying periodic boundary conditions in both the x and y directions.

var ALIVE = 1;
var DEAD = 0;
var N = 200;
var arr = create2Darray(N, N, DEAD); // Iitialises a new 2D array with array values set to 0.
var neighbourhood = [
  [1, 0],
  [1, 1],
  [0, 1],
  [-1, 1],
  [-1, 0],
  [-1, -1],
  [0, -1],
  [1, -1],
];

// Get number of ALIVE neighbours for point (x,y)
function getneighcount(arr, x, y) {
  var nc = 0;
  for (var nn = 0; nn < neighbourhood.length; nn++) {
    var dx = neighbourhood[nn][0];
    var dy = neighbourhood[nn][1];
    if (arr[pbcz(x + dx, arr.length)][pbcz(y + dy, arr[x].length)] === ALIVE) {
      nc++;
    }
  }
  return nc;
}

// Periodic boundary conditions in z-direction:
function pbcz(iz, Lz) {
  if (iz >= Lz) {
    iz = iz - Lz;
  }
  if (iz < 0) {
    iz = iz + Lz;
  }
  return iz;
}

Then we can just turn the Game of Life rules into some simple JavaScript code:

var ALIVE = 1;
var DEAD = 0;
var N = 200;
var arr = create2Darray(N, N, DEAD); // Iitialises a new 2D array with array values set to 0.
var requestId;
gameLoop();

// Runs forever, call cancelAnimationFrame(requestId) to stop.
function gameLoop() {
  arr = iterate(arr);
  print_to_canvas(arr);
  requestId = requestAnimationFrame(gameLoop);
}

// Iterate the next state of the array.
function iterate(oldArray) {
  var newArray = clone2Darray(oldArray);
  for (var x = 0; x < oldArray.length; x++) {
    for (var y = 0; y < oldArray[0].length; y++) {
      var aliveNeighbourCount = getneighcount(oldArray, x, y);
      if (oldArray[x][y] === ALIVE) {
        if (aliveNeighbourCount < 2) {
          newArray[x][y] = DEAD; // Underpopulation kills cell.
        } else if (aliveNeighbourCount === 2 || aliveNeighbourCount === 3) {
          newArray[x][y] = ALIVE; // Surivies!
        } else if (aliveNeighbourCount > 3) {
          newArray[x][y] = DEAD; // Overpopulation kills cell.
        }
      } else if (oldArray[x][y] === DEAD && aliveNeighbourCount === 3) {
        newArray[x][y] = ALIVE; // Reproduction.
      }
    }
  }
  return newArray;
}

I've packaged the Game of Life code up into interactive tool below.

The full code for this tool is available on my GitHub.