lkacenja · July 16, 2014 14:57
diff --git a/conways.v1 b/conways.v1
 <!DOCTYPE html>
 <html>
  <head>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="./conway.js" ></script>
  </head>
  <body></body>
 </html>

 // conway.js


 (function() {

  var width = 1200,
    height = 800,
    svg,
    cellWidth = 5,
    cellHeight = 5,
    cellModels = [],
    rowLength = 0,
    columnLength = 0;

  var cellModel = function() {
    this.alive = false;
    this.color = '#000000';
    this.coords = {};
    this.neighbors = {};
    this.getPath = function() {
      return this.path;
    }
    this.setPath = function(path) {
      this.path = path;
    }
    this.setAlive = function(bool) {
      if (bool == true) {
        this.path.style('fill', this.color);
      }
      else {
        this.path.style('fill', 'transparent');
      }
      this.alive = bool;
    }
    this.getAlive = function() {
      return this.alive;
    }
    this.getNeighbors = function() {
      return this.neighbors;
    }
    this.setCoords = function(coords) {
      if (coords) {
        this.coords = coords;
      }
    }
    this.determineNeighbors = function() {
      if (this.coords) {
        this.neighbors.tl = {x: this.coords.x - cellWidth, y: this.coords.y - cellHeight}; 
        this.neighbors.tc = {x: this.coords.x, y: this.coords.y - cellHeight};
        this.neighbors.tr = {x: this.coords.x + cellWidth, y: this.coords.y - cellHeight};
        this.neighbors.cl = {x: this.coords.x - cellWidth, y: this.coords.y};
        this.neighbors.cr = {x: this.coords.x + cellWidth, y: this.coords.y};
        this.neighbors.bl = {x: this.coords.x - cellWidth, y: this.coords.y + cellHeight};
        this.neighbors.bc = {x: this.coords.x, y: this.coords.y + cellHeight};
        this.neighbors.br = {x: this.coords.x + cellWidth, y: this.coords.y + cellHeight};
      }
    }
  }

  function init() {
    svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height); 
    createCells();
    //draw();
    setInterval(tick, 100);
  }

  function createCells() {
    var x, y, model, path, alive;
    columnLength = d3.range(0, height, cellHeight).pop();
    rowLength = d3.range(0, width, cellWidth).pop();
    d3.range(0, height, cellHeight).forEach(function(y) {
      d3.range(0, width, cellWidth).forEach(function(x) {
        path = svg.append("rect")
          .attr("x", x)
          .attr("y", y)
          .attr("width", cellWidth)
          .attr("height", cellHeight);
        model = new cellModel();
        model.setPath(path);
        alive = (Math.floor(Math.random() * 100) + 1) == 2 ? true : false;
        model.setAlive(alive);
        model.setCoords({x: x, y: y});
        model.determineNeighbors();
        cellModels[x] = cellModels[x] || [];
        cellModels[x][y] = model;
      });
    });
  }

  function tick() {
    draw();
  }

  function draw() {
    var x, y, n,
    neighbors = {},
    liveNeighbors = 0;
    for (x in cellModels) {
      for(y in cellModels[x]) {
        neighbors = cellModels[x][y].getNeighbors();
        liveNeighbors = 0;
        for (n in neighbors) {
          if (cellModels[neighbors[n].x] != undefined && cellModels[neighbors[n].x][neighbors[n].y]) {
            if (cellModels[neighbors[n].x][neighbors[n].y].getAlive() == true) {
              liveNeighbors ++;
            }
          }
        }
        if (cellModels[x][y].getAlive() == true) {
          if (liveNeighbors < 2 || liveNeighbors > 3) {
            cellModels[x][y].setAlive(false);
          }
          else {
            cellModels[x][y].setAlive(true);
          }
        }
        else {
          if (liveNeighbors == 2) {
            cellModels[x][y].setAlive(true);
          }
        }
      }
    }
  }

  function clear() {
    cellPaths = [];
    svg.selectAll("*").remove();
  }

  // Kick it all off.
  document.addEventListener('DOMContentLoaded', init);
 })();
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="./conway.js" ></script>
	</head>
	<body></body>
	</html>

	// conway.js


	(function() {

	var width = 1200,
	height = 800,
	svg,
	cellWidth = 5,
	cellHeight = 5,
	cellModels = [],
	rowLength = 0,
	columnLength = 0;

	var cellModel = function() {
	this.alive = false;
	this.color = '#000000';
	this.coords = {};
	this.neighbors = {};
	this.getPath = function() {
	return this.path;
	}
	this.setPath = function(path) {
	this.path = path;
	}
	this.setAlive = function(bool) {
	if (bool == true) {
	this.path.style('fill', this.color);
	}
	else {
	this.path.style('fill', 'transparent');
	}
	this.alive = bool;
	}
	this.getAlive = function() {
	return this.alive;
	}
	this.getNeighbors = function() {
	return this.neighbors;
	}
	this.setCoords = function(coords) {
	if (coords) {
	this.coords = coords;
	}
	}
	this.determineNeighbors = function() {
	if (this.coords) {
	this.neighbors.tl = {x: this.coords.x - cellWidth, y: this.coords.y - cellHeight};
	this.neighbors.tc = {x: this.coords.x, y: this.coords.y - cellHeight};
	this.neighbors.tr = {x: this.coords.x + cellWidth, y: this.coords.y - cellHeight};
	this.neighbors.cl = {x: this.coords.x - cellWidth, y: this.coords.y};
	this.neighbors.cr = {x: this.coords.x + cellWidth, y: this.coords.y};
	this.neighbors.bl = {x: this.coords.x - cellWidth, y: this.coords.y + cellHeight};
	this.neighbors.bc = {x: this.coords.x, y: this.coords.y + cellHeight};
	this.neighbors.br = {x: this.coords.x + cellWidth, y: this.coords.y + cellHeight};
	}
	}
	}

	function init() {
	svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);
	createCells();
	//draw();
	setInterval(tick, 100);
	}

	function createCells() {
	var x, y, model, path, alive;
	columnLength = d3.range(0, height, cellHeight).pop();
	rowLength = d3.range(0, width, cellWidth).pop();
	d3.range(0, height, cellHeight).forEach(function(y) {
	d3.range(0, width, cellWidth).forEach(function(x) {
	path = svg.append("rect")
	.attr("x", x)
	.attr("y", y)
	.attr("width", cellWidth)
	.attr("height", cellHeight);
	model = new cellModel();
	model.setPath(path);
	alive = (Math.floor(Math.random() * 100) + 1) == 2 ? true : false;
	model.setAlive(alive);
	model.setCoords({x: x, y: y});
	model.determineNeighbors();
	cellModels[x] = cellModels[x] \|\| [];
	cellModels[x][y] = model;
	});
	});
	}

	function tick() {
	draw();
	}

	function draw() {
	var x, y, n,
	neighbors = {},
	liveNeighbors = 0;
	for (x in cellModels) {
	for(y in cellModels[x]) {
	neighbors = cellModels[x][y].getNeighbors();
	liveNeighbors = 0;
	for (n in neighbors) {
	if (cellModels[neighbors[n].x] != undefined && cellModels[neighbors[n].x][neighbors[n].y]) {
	if (cellModels[neighbors[n].x][neighbors[n].y].getAlive() == true) {
	liveNeighbors ++;
	}
	}
	}
	if (cellModels[x][y].getAlive() == true) {
	if (liveNeighbors < 2 \|\| liveNeighbors > 3) {
	cellModels[x][y].setAlive(false);
	}
	else {
	cellModels[x][y].setAlive(true);
	}
	}
	else {
	if (liveNeighbors == 2) {
	cellModels[x][y].setAlive(true);
	}
	}
	}
	}
	}

	function clear() {
	cellPaths = [];
	svg.selectAll("*").remove();
	}

	// Kick it all off.
	document.addEventListener('DOMContentLoaded', init);
	})();