Conway's Game of Life

life.html

<canvas id="canvasElement" style="border: 1px solid black;"></canvas>
<script>


setup(); loop(); setInterval(loop, 1);

/////////////////////////////////////////////////

var canvas, context, gridByX, gridByY, gridFieldSize, population;

/////////////////////////////////////////////////

function setup () {
	canvas = document.getElementById('canvasElement');
	context = canvas.getContext('2d');

	gridFieldSize = 5;	gridByX = 150; gridByY = 150;
	canvas.width = gridByX * gridFieldSize;
	canvas.height = gridByY * gridFieldSize;

	population = [];
	for (var i = 0; i < gridByX; i++) {
		population.push([]);
		for (var j = 0; j < gridByY; j++)
			population[i][j] = Math.random() > Math.random();
	}
}

/////////////////////////////////////////////////

function loop () {
	clearCanvas();

	toLive();

	drawGrid();
	drawPopulation();
}

/////////////////////////////////////////////////

function suitableForLife (x, y) {
	var current = population[x][y],
		neighbors = 0;

	if (x > 0) neighbors += population[x - 1][y];
	if (x < gridByX - 1) neighbors += population[x + 1][y];

	if (y > 0) neighbors += population[x][y - 1];
	if (y < gridByY - 1) neighbors += population[x][y + 1];

	if (x > 0 && y > 0) neighbors += population[x - 1][y - 1];
	if (x < gridByX - 1 && y > 0) neighbors += population[x + 1][y - 1];
	if (x > 0 && y < gridByY - 1) neighbors += population[x - 1][y + 1];
	if (x < gridByX - 1 && y < gridByY - 1) neighbors += population[x + 1][y + 1];

	if (current === false && neighbors === 3) return true;
	if (current === true  && neighbors === 2) return true;
	if (current === true  && neighbors === 3) return true;

	return false;
}

function toLive () {
	var newGeneration = [];

	for (var i = 0; i < gridByX; i++) {
		newGeneration.push([]);

		for (var j = 0; j < gridByY; j++)
			newGeneration[i][j] = suitableForLife(i, j);
	}

	population = newGeneration;
}

function drawPopulation () {
	context.beginPath();
	context.fillStyle = 'black';

	for (var i = 0; i < gridByX; i++)
		for (var j = 0; j < gridByY; j++)
			if (population[i][j])
				context.fillRect(
					i * gridFieldSize,
					j * gridFieldSize,
					gridFieldSize,
					gridFieldSize
				);

	context.fill();
}

function drawGrid () {
	context.beginPath();
	context.strokeStyle = 'rgba(0, 0, 0, 0.2)';

	for (var i = 0, _i = gridByX - 1, x; i < _i; i++) {
		x = gridFieldSize * (i + 1);
		
		context.moveTo(x, 0);
		context.lineTo(x, canvas.height);
	}

	for (var i = 0, _i = gridByY - 1, y; i < _i; i++) {
		y = gridFieldSize * (i + 1);
		
		context.moveTo(0, y);
		context.lineTo(canvas.width, y);
	}

	context.stroke();
}

function clearCanvas () {
	canvas.width = canvas.width;
}


</script>