DEV Community

Cover image for The Game of Life
Luke Garrigan
Luke Garrigan

Posted on

The Game of Life

The Game of Life or cellular automaton was developed by John Horton Conway in 1970 with just some paper and a Go board. It takes place on a two-dimensional grid where each cell is in one of two states on (alive) or off (dead). The state of a cell is determined by its neighbours, and 4 simple rules determine whether the given state will live or die.

Rules

There are four rules that determine a cell’s fate.

  1. Underpopulation: Any live cell that has less than two neighbours dies.
  2. Overpopulation: Any live cell that has more than three neighbours dies.
  3. Any cell with two or three neighbours survives.
  4. Reproduction: Any dead cell with exactly three neighbours becomes a live cell.

These rules can be further simplified for implementation:

  1. Any live cell with two or three neighbours survives
  2. Any dead cell with three live neighbours becomes a live cell
  3. Everything else is now a dead cell

Implementing

I’m going to be using p5.js to implement this, all the code can be found here.

The first step is to create a grid and randomly choose whether the cell is dead or alive:

let grid;
let columns;
let rows;
let size = 20;

function setup() {
  createCanvas(800, 600);
  columns = width / size;
  rows = height / size;
  grid = createGrid();

  for (let i = 0; i < columns; i++) {
    for (let j = 0; j < rows; j++) {
      grid[i][j] = floor(random(2));
    }
  }
}

function draw() {
  background(0);
  for (let i = 0; i < columns; i++) {
    for (let j = 0; j < rows; j++) {
      let x = i * size;
      let y = j * size;
      if (grid[i][j] == 1) {
        fill(0, 255, 255);
        stroke(0, 255, 255);
        rect(x, y, size, size);
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Which should give us something like the following, where the blue colour represents a live cell:

image of grid

The next step is to create the next generation.

function createNewGeneration() {
  let nextGeneration = createGrid();
  for (let i = 0; i < columns; i++) {
    for (let j = 0; j < rows; j++) {
      let currentState = grid[i][j];
      let count = countNeighbours(i, j);
      if (currentState == 1 && count == 2 || count == 3) {
        nextGeneration[i][j] = 1;
      } else if (currentState == 0 && count == 3) {
        nextGeneration[i][j] = 1;
      } else {
        nextGeneration[i][j] = 0;
      }
    }
  }
  return nextGeneration;
}

function countNeighbours(x, y) {
  let sum = 0;
  for (let i = -1; i <= 1; i++) {
    for (let j = -1; j <= 1; j++) {
      let col = (x + i + columns) % columns;
      let row = (y + j + rows) % rows;
      sum += grid[col][row];
    }
  }
  sum -= grid[x][y];
  return sum;
}

Enter fullscreen mode Exit fullscreen mode

Now all that's needed is to assign the new generation to the current grid: grid = createNewGeneration() in the draw function and we're good to go!

image of grid moving game of life

Let's make each cell a little smaller, thus increasing the population size: let size = 5

image of grid moving game of life more cells

Conclusion

The Game of Life is a marvellous simulation. It demonstrates how just a few simple rules and structures can form very complex systems. There's far more to learn about the Game of Life, there's a whole lexicon of patterns that perform particular behaviours.

What is even more remarkable about the Game of Life is that it is Turing Complete. It is able to make any arbitrarily complex computation, meaning a computer can be built in the Game of Life that can run a simulation of the Game of Life, which of course, has been done.

Top comments (4)

Collapse
 
zeynepcik4444 profile image
zeynepcik4444

Multiplayer HTML5 games are a great way to have fun and stay connected with your friends. agario Unblocked games offers you thousands of games that are easy to access and free to play, perfect for when you need to get away from reality. It’s also a great way to socialize and compete with others. agario.boston

Collapse
 
jasmine_lara_4dfb30370d7c profile image
jasmine Lara

This breakdown of the Game of Life is fantastic! It’s amazing how simple rules can create such complex behaviors. I’m working on my PhD dissertation abstract, and seeing this kind of structured approach is inspiring for organizing complex ideas. Thanks for sharing!

Collapse
 
jasmine_lara_4dfb30370d7c profile image
jasmine Lara

Your implementation of Conway's Game of Life in JavaScript with p5.js is impressive! You've captured the complexity with clean, efficient code and great visuals. The modular approach, with functions like createNewGeneration and countNeighbours, makes it easy to follow, and using smaller cells to show intricate patterns works beautifully. It's a fantastic example of how simple rules can create complex systems, much like crafting Plagiarism Free Papers with careful structure. Well done—an inspiring project for cellular automata enthusiasts!

Collapse
 
ella_purnellrt profile image
ella purnell

Even though today was the first time that I have seen this blog, I have to say it really impressed me..thank you! retro bowl unblocked