# More Game of Life

At Recurse Center we are highly encouraged to pair program. By means of an introduction we did a workshop today to practice. The challenge was Game of Life, which already came up today in a different conversation, and I wrote about how to do it in Grasshopper a while back. Are Cellular Automata having a moment? Or are they just awesome?

Either way I worked with Joseph Martinez on a JavaScript implementation. Here's what we cooked up:

// grab a DOM element to use for output // and initialize the grid state const target = document.querySelector('#life'); let grid = [ [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 1, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 1, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], ]; // how many of the eight surrounding cells // at row, column are currently living? function countLiveNeighbors(row, col) { let w = grid[0].length - 1; let h = grid.length - 1; let neighbors = [ row >= 1 && col >= 1 ? grid[row - 1][col - 1] : 0, row >= 1 ? grid[row - 1][col] : 0, row >= 1 && col < w ? grid[row - 1][col + 1] : 0, col >= 1 ? grid[row ][col - 1] : 0, col < w ? grid[row ][col + 1] : 0, row < h && col >= 1 ? grid[row + 1][col - 1] : 0, row < h ? grid[row + 1][col] : 0, row < h && col < w ? grid[row + 1][col + 1] : 0, ]; let count = neighbors.reduce((accum, n) => accum + n, 0); return count; }; // loop over the grid, apply rules to each cell // build up the next grid state, make that current function applyRules() { let newGrid = []; for (let i = 0; i < grid.length; i++) { newGrid[i] = []; for (let j = 0; j < grid.length; j++) { let alive = grid[i][j]; let neighbors = countLiveNeighbors(i, j); if (neighbors < 2 && alive) alive = 0; else if (neighbors == (2 || 3) && alive) alive = 1; else if (neighbors > 3 && alive) alive = 0; else if (neighbors == 3 && !alive) alive = 1; newGrid[i][j] = alive; } } grid = newGrid; } // translate the grid state data to something readable function draw() { const gridAsString = grid.map((row) => row.join(' ')).join('\n'); target.innerHTML = gridAsString; } // every second, apply the rules and redraw setInterval(() => { applyRules() draw(); }, "1000");

Here it is in action:

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

I'm sure there are more elegant ways to deal with the neighbor checking, and it would be fun to be able to use a different input state (maybe from a user-provided bitmap?). But that's good enough for today!