/* Conway's Game of Life */

document.addEventListener("DOMContentLoaded", function () {
  window.gol = {
    canvas: document.getElementById("gol"),
    ctx: document.getElementById("gol").getContext("2d"),

    fps: 10,

    idealCellSize: 20,
    cellSize: [20, 20], // This gets updated dynamically.

    // Called to update the canvas when the window resizes.
    sizeChanged: function() {
      var width = gol.canvas.offsetWidth,
          height = gol.canvas.offsetHeight;
      // Update canvas coordinate system
      gol.canvas.setAttribute("width", width);
      gol.canvas.setAttribute("height", height);

      // Update tile size by finding a width that will evenly fill the canvas
      // and is closest to the idealCellSize, then doing the same thing for
      // height.
      gol.cellSize = [
        width / Math.round(width / gol.idealCellSize),
        height / Math.round(height / gol.idealCellSize)
      ];
    },

    step: function() {
      var width = this.canvas.getAttribute("width"),
          height = this.canvas.getAttribute("height");
      this.ctx.clearRect(0, 0, width, height);
      this.ctx.fillStyle = "#41555e"; // $background-blue-lighter in Sass
      this.ctx.fillRect(0, 0, this.cellSize[0], this.cellSize[1]);
    },

    start: function() {
      gol.step();
      setTimeout(gol.start, 1000 / gol.fps);
    }
  };

  gol.sizeChanged();
  window.addEventListener("resize", gol.sizeChanged);
  gol.start();
});

@@ -298,16 +298,78 @@
 cally.%0A%0A
+    cells: %5B%0A      %5Btrue, false%5D,%0A      %5Bfalse, true%5D%0A    %5D,%0A%0A
     // C
@@ -1258,31 +1258,253 @@
     
-this.ctx.fillRect(0, 0,
+for (var x=0; x%3Cthis.cells.length; x++) %7B%0A        for (var y=0; y%3Cthis.cells%5Bx%5D.length; y++) %7B%0A          if (this.cells%5Bx%5D%5By%5D) %7B%0A            this.ctx.fillRect(%0A              this.cellSize%5B0%5D * x,%0A              this.cellSize%5B1%5D * y,%0A             
  thi
@@ -1517,16 +1517,30 @@
 Size%5B0%5D,
+%0A             
  this.ce
@@ -1548,18 +1548,61 @@
 lSize%5B1%5D
-);
+%0A            );%0A          %7D%0A        %7D%0A      %7D
 %0A    %7D,%0A

Read and render cells from an array