Cellular automata implemented in JavaScript and HTML5 Canvas

Question

I implemented a Conway's Game of Life in JavaScript but I'm not seeing the same patterns such as Gosper's Glider Gun. I seed the grid the ways it's depicted in the Wikipedia article but, the gun never happens.

Will someone look at my code and see if there's anything wrong with it, any suggestions to the implementation?

https://github.com/DiegoSalazar/ConwaysGameOfLife

Answer 1

You are not updating all of the cells simultaneously, rather sequentially. A cell that is born in the first generation will not appear alive to the calculation of other cells of the first generation (it still counts as dead).

Create a new property called willBeAlive and use that to hold the cell's new calculated alive state. Once all the calculations for that generation are done, set each cell's alive property to its willBeAlive property and redraw.

Here are the changes:

Automaton.prototype.update = function() {
  for (var x = 0; x < this.w; x++) {
    for (var y = 0; y < this.h; y++) {
      this.grid[x][y].killYourselfMaybe();
    }
  }
  // set the alive property to willBeAlive
  for (var x = 0; x < this.w; x++) {
    for (var y = 0; y < this.h; y++) {
            this.grid[x][y].alive = this.grid[x][y].willBeAlive;
        }
    }  
}


Cell.prototype.killYourselfMaybe = function(grid) {
  var num = this.numLiveNeighbors();

  this.willBeAlive = false;

  if (this.alive) {
    // 1. Any live cell with fewer than two live neighbours dies, as if caused by under-population.
    if (num < 2) this.willBeAlive = false;
    // 2. Any live cell with two or three live neighbours lives on to the next generation.
    if (num == 2 || num == 3) { this.willBeAlive = true}
    // 3. Any live cell with more than three live neighbours dies, as if by overcrowding.
    if (num > 3) this.willBeAlive = false;
  } else {
    // 4. Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.
    if (num == 3) this.willBeAlive = true;
  }
}

and here is a seed array for "Gosper's Glider Gun":

[[2,6],[2,7],[3,6],[3,7],[12,6],[12,7],[12,8],[13,5],[13,9],[14,4],[14,10],[15,4],[15,10],[16,7],[17,5],[17,9],[18,6],[18,7],[18,8],[19,7],[22,4],[22,5],[22,6],[23,4],[23,5],[23,6],[24,3],[24,7],[26,2],[26,3],[26,7],[26,8],[36,4],[36,5],[37,4],[37,5]]