Conway's Game of Life

Ooh, pretty.

by piannaf

HTML

<canvas id="board"></canvas>
<!--
<div id="controls">
  <button id="nextStep">Step</button>
</div>
-->

CSS

body
{
  overflow: hidden;
  margin: 0;
}

#board
{
  margin: 0;
  padding: 0;
  border: 0;
}

JavaScript

var $board;
var ctx;
var data = [];
var running = false;

//var CANVAS_SIZE = {x: 600, y: 400};
CANVAS_SIZE = {x: window.innerWidth, y: window.innerHeight};
var PIXEL_SIZE = {x: 8, y: 10};
var ARRAY_DIMENSIONS = {x: Math.floor(CANVAS_SIZE.x / PIXEL_SIZE.x),
												y: Math.floor(CANVAS_SIZE.y / PIXEL_SIZE.y)};
                        
var BACKGROUND_COLOR = "black";
var PIXEL_STATES = {0:{color: "black", radius: 0},
                    1:{color: "#0c0", radius: 4}};
                    
function get2dArrayStr(data)
{
	var returnStr = "";
  for(var y = 0; y < data.length; y++)
  {
  	for (var x = 0; x < data[y].length; x++)
    {
    	returnStr += data[y][x];
    }
    returnStr += "\n";
	}
  return returnStr;
}

function updateBoardSize(w, h)
{
	var width = w || window.innerWidth;
  var height = h || window.innerHeight;
  $board.css("width", width + "px").css("height", height + "px");
  ctx.canvas.width = width;
  ctx.canvas.height = height;
}

function initializeDataArray()
{
	data = new Array(ARRAY_DIMENSIONS.y);
  for (var y = 0; y < data.length; y++)
  {
  	data[y] = new Array(ARRAY_DIMENSIONS.x);
    for (var x = 0; x < data[y].length; x++)
    	//data[y][x] = 0;
      data[y][x] = Math.floor(Math.random() * 2);
  } 
}

function drawPixel(x, y, val)
{
	ctx.beginPath();
	ctx.fillStyle = BACKGROUND_COLOR;
	ctx.fillRect(x * PIXEL_SIZE.x, y * PIXEL_SIZE.y, PIXEL_SIZE.x, PIXEL_SIZE.y);
  
  var pxl = PIXEL_STATES[val];
  ctx.fillStyle = pxl.color;
  ctx.arc(x * PIXEL_SIZE.x + PIXEL_SIZE.x/2,
  				y * PIXEL_SIZE.y + PIXEL_SIZE.y/2,
          pxl.radius,
          0, 2* Math.PI, true);
  ctx.fill();
  ctx.closePath();
}

function drawBoard()
{
	var width = ARRAY_DIMENSIONS.x;
  var height = ARRAY_DIMENSIONS.y;
  
	for (var y = 0; y < height; y++)
  	for (var x = 0; x < width; x++)
    	drawPixel(x, y, data[y][x]);
}

function centerDataShape(arr)
{
	var height = arr.length;
  var width = arr[0].length;
  var xOffset = Math.floor((ARRAY_DIMENSIONS.x - width) /...