Game of Life

README.md

The Game of Life, also known simply as Life, is a cellular automaton devised by the British mathematician John Horton Conway in 1970.

The game is a zero-player game, meaning that its evolution is determined by its initial state, requiring no further input. One interacts with the Game of Life by creating an initial configuration and observing how it evolves, or, for advanced players, by creating patterns with particular properties.

Rules:

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

life.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
<p style="display:inline-block;" id="generation">Generation x</p>
<button style="display:inline-block;" onclick="start()">start</button>
<button style="display:inline-block;" onclick="reset()">reset</button>
<br/>
Speed:
<input style="display:inline-block;" type="range" min="1" max="500" value="250" id="speed">
<p style="display:inline-block;" id="speed-output">250</p>

<script>
let slider = document.getElementById('speed');
let speed_output = document.getElementById('speed-output');
  
slider.oninput = function() {
  speed_output.innerHTML = this.value;
  if (interval) {
    clearInterval(interval);
    interval = setInterval(createGeneration, 500 - slider.value);
  }
}
  
//let grid = new Array(30).fill(new Array(40).fill(0)); //REFERENCE HELL
let game = false;

let grid=[],
	x_cells = 40,
	y_cells = 30,
	interval,
	generation=1;

function setup() {
  var canvas = createCanvas(x_cells * 20 + 2, y_cells * 20 + 2).canvas;//Margin of 2
  canvas.setAttribute('style','display:block;');
	
	//Thanks Aetheryx
	for (let i = 0; i < y_cells; i++) {
	  let row = [];
	  for (let j = 0; j < x_cells; j++) {
		  row.push(0);
	  }
	  grid.push(row);
	}
}

function start() {
	if (!game)
		game = true;
	else return;
  
  interval = setInterval(createGeneration, 500 - slider.value);
}
  
function createGeneration() {
  document.getElementById('generation').innerHTML = 'Generation ' + generation;
  generation++;

  //Cells get sorted
  let dead = [];
  let alive = [];

  //Loop through all cells
  for (i=0; i < grid.length; i++)
    for (j=0; j < grid[i].length; j++) {		

      let alive_neighbours = 0;
      //Overcomplicated thing to find neighbour cells
      for (k=-1;k<2;k++) 
        for (l=-1;l<2;l++) {
          if (i+k != -1 && j+l != -1 && !(k == 0 && l == 0) && i+k != y_cells && j+l != x_cells) {
            if (grid[i+k][j+l] == 1) alive_neighbours++;
          }
        }

      //underpopulation
      if (alive_neighbours < 2) dead.push({x:i,y:j});

      //survives
      if (alive_neighbours > 2) alive.push({x:i,y:j});

      //overpopulaiton
      if (alive_neighbours > 3) dead.push({x:i,y:j});

      //reproduction
      if (grid[i][j] == 0 && alive_neighbours == 3) alive.push({x:i,y:j});

    }

  alive.forEach(({x,y}) => grid[x][y] = 1);
  dead.forEach(({x,y}) => grid[x][y] = 0);

}

function draw() {	
	//Draw grid
	for (i=0; i < grid.length; i++)
		for (j=0; j < grid[i].length; j++) {
			let x = j * 20;
			let y = i * 20;
			fill(grid[i][j] == 0 ? 255 : 0);
			rect(x,y,20,20);
		}
}

//Pregame, select alive cells
function mouseClicked() {
	if (!(mouseX > canvas.width || mouseY > canvas.height || mouseX < 0 || mouseY < 0) && !game) {
		if (grid[Math.floor(mouseY/20)][Math.floor(mouseX/20)] == 0)
			grid[Math.floor(mouseY/20)][Math.floor(mouseX/20)] = 1;
		else grid[Math.floor(mouseY/20)][Math.floor(mouseX/20)] = 0;
	}
}

function reset() {
	game = false;
	clearInterval(interval);
	for (i=0; i < grid.length; i++)
		for (j=0; j < grid[i].length; j++) 
			grid[i][j] = 0;
	generation = 1;
	document.getElementById('generation').innerHTML = 'Generation x';
}

</script>