ww24/ca.js

## ca.js
/**
 * Life Game - Cellular Automaton
 *
 * Author: Takenori Nakagawa
 * License: GPLv3
 */

// cell constructor
function Cell(x, y, init) {
  var value;
  Object.defineProperty(this, "value", {
    get: function () {
      return value;
    },
    set: function (val) {
      Cell.ctx.fillStyle = val ? "rgb(0, 0, 0)" : "rgb(255, 255, 255)";
      Cell.ctx.fillRect(this.cx, this.cy, Cell.size, Cell.size);
      value = val;
    }
  });

  // canvas x, y
  this.cx = x;
  this.cy = y;
  // cell x, y
  this.x = this.cx / Cell.size;
  this.y = this.cy / Cell.size;
  // set initial value
  this.value = init;
  this.next = init;

  Cell.instances[this.x] || (Cell.instances[this.x] = []);
  Cell.instances[this.x][this.y] = this;
}
// Canvas context
Cell.ctx = null;
// cell size on canvas
Cell.size = 1;
// all cell instances
Cell.instances = [];
// transition to next generation
Cell.next = function () {
  var cells = this.instances,
      w = cells.length,
      h = cells[0].length;

  // scan all cells
  cells.forEach(function (lines) {
    lines.forEach(function (cell) {
      // get 8 neighboring cells
      var neighbors = [
        cells[cell.x              ][(cell.y - 1 + h) % h],
        cells[(cell.x + 1) % w    ][(cell.y - 1 + h) % h],
        cells[(cell.x + 1) % w    ][cell.y              ],
        cells[(cell.x + 1) % w    ][(cell.y + 1) % h    ],
        cells[cell.x              ][(cell.y + 1) % h    ],
        cells[(cell.x - 1 + w) % w][(cell.y + 1) % h    ],
        cells[(cell.x - 1 + w) % w][cell.y              ],
        cells[(cell.x - 1 + w) % w][(cell.y - 1 + h) % h]
      ];

      // decide next generation cell value
      var count = neighbors.filter(function (c) {return c.value}).length;
      if (count === 3 || cell == 1 && count === 2) {
        cell.next = 1;
      } else {
        cell.next = 0;
      }
    });
  });

  // apply next generation to all cells
  cells.forEach(function (lines) {
    lines.forEach(function (cell) {
      cell.value = cell.next;
    });
  });
};
// method for Number type conversion
Cell.prototype.valueOf = function () {
  return this.value;
};

// DOM Ready
addEventListener("load", function () {
  // get Canvas Element
  var cvs = document.getElementById("field");
  // get Button Elements
  var btn = {
    start: document.getElementById("start"),
    stop: document.getElementById("stop"),
    next: document.getElementById("next"),
    reset: document.getElementById("reset")
  };

  // get Canvas context
  Cell.ctx = cvs.getContext("2d");
  Cell.size = 5;

  // check Canvas support
  if (! CanvasRenderingContext2D) {
    return document.body.innerText = "お使いのブラウザには対応してません。";
  }

  // set random value to cells
  var cells = [];
  for (var x = 0; x < cvs.height / Cell.size; x++) {
    cells.push([]);
    for (var y = 0; y < cvs.width / Cell.size; y++) {
      cells[x].push(new Cell(x * Cell.size, y * Cell.size, ~~(Math.random() * 10) % 2));
    }
  }

  var timerId = null;
  btn.start.addEventListener("click", function () {
    timerId = setInterval(function () {
      Cell.next();
    }, 300);
    btn.start.disabled = true;
    btn.stop.disabled = false;
  });
  function stop() {
    timerId && clearInterval(timerId);
    timerId = null;
    btn.start.disabled = false;
    btn.stop.disabled = true;
  }
  btn.stop.addEventListener("click", stop);
  btn.next.addEventListener("click", function () {
    stop();
    Cell.next();
  });
  btn.reset.addEventListener("click", function () {
    stop();
    for (var x = 0; x < cvs.height / Cell.size; x++) {
      cells.push([]);
      for (var y = 0; y < cvs.width / Cell.size; y++) {
        cells[x][y].value = ~~(Math.random() * 10) % 2;
      }
    }
  });
});

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Life Game - Cellular Automaton</title>
  <style>
    body {
      font-family: sans-serif;
    }
    canvas {
      width: 500px;
      height: 500px;
    }
    button {
      width: 60px;
      height: 20px;
      font-size: 12px;
    }
  </style>
</head>
<body>
  <canvas id="field" width="500" height="500"></canvas>
  <div>
    <button id="start">Start</button>
    <button id="stop" disabled>Stop</button>
    <button id="next">Next</button>
    <button id="reset">Reset</button>
  </div>
  <script src="ca.js"></script>
</body>
</html>
	/**
	* Life Game - Cellular Automaton
	*
	* Author: Takenori Nakagawa
	* License: GPLv3
	*/

	// cell constructor
	function Cell(x, y, init) {
	var value;
	Object.defineProperty(this, "value", {
	get: function () {
	return value;
	},
	set: function (val) {
	Cell.ctx.fillStyle = val ? "rgb(0, 0, 0)" : "rgb(255, 255, 255)";
	Cell.ctx.fillRect(this.cx, this.cy, Cell.size, Cell.size);
	value = val;
	}
	});

	// canvas x, y
	this.cx = x;
	this.cy = y;
	// cell x, y
	this.x = this.cx / Cell.size;
	this.y = this.cy / Cell.size;
	// set initial value
	this.value = init;
	this.next = init;

	Cell.instances[this.x] \|\| (Cell.instances[this.x] = []);
	Cell.instances[this.x][this.y] = this;
	}
	// Canvas context
	Cell.ctx = null;
	// cell size on canvas
	Cell.size = 1;
	// all cell instances
	Cell.instances = [];
	// transition to next generation
	Cell.next = function () {
	var cells = this.instances,
	w = cells.length,
	h = cells[0].length;

	// scan all cells
	cells.forEach(function (lines) {
	lines.forEach(function (cell) {
	// get 8 neighboring cells
	var neighbors = [
	cells[cell.x ][(cell.y - 1 + h) % h],
	cells[(cell.x + 1) % w ][(cell.y - 1 + h) % h],
	cells[(cell.x + 1) % w ][cell.y ],
	cells[(cell.x + 1) % w ][(cell.y + 1) % h ],
	cells[cell.x ][(cell.y + 1) % h ],
	cells[(cell.x - 1 + w) % w][(cell.y + 1) % h ],
	cells[(cell.x - 1 + w) % w][cell.y ],
	cells[(cell.x - 1 + w) % w][(cell.y - 1 + h) % h]
	];

	// decide next generation cell value
	var count = neighbors.filter(function (c) {return c.value}).length;
	if (count === 3 \|\| cell == 1 && count === 2) {
	cell.next = 1;
	} else {
	cell.next = 0;
	}
	});
	});

	// apply next generation to all cells
	cells.forEach(function (lines) {
	lines.forEach(function (cell) {
	cell.value = cell.next;
	});
	});
	};
	// method for Number type conversion
	Cell.prototype.valueOf = function () {
	return this.value;
	};

	// DOM Ready
	addEventListener("load", function () {
	// get Canvas Element
	var cvs = document.getElementById("field");
	// get Button Elements
	var btn = {
	start: document.getElementById("start"),
	stop: document.getElementById("stop"),
	next: document.getElementById("next"),
	reset: document.getElementById("reset")
	};

	// get Canvas context
	Cell.ctx = cvs.getContext("2d");
	Cell.size = 5;

	// check Canvas support
	if (! CanvasRenderingContext2D) {
	return document.body.innerText = "お使いのブラウザには対応してません。";
	}

	// set random value to cells
	var cells = [];
	for (var x = 0; x < cvs.height / Cell.size; x++) {
	cells.push([]);
	for (var y = 0; y < cvs.width / Cell.size; y++) {
	cells[x].push(new Cell(x * Cell.size, y * Cell.size, ~~(Math.random() * 10) % 2));
	}
	}

	var timerId = null;
	btn.start.addEventListener("click", function () {
	timerId = setInterval(function () {
	Cell.next();
	}, 300);
	btn.start.disabled = true;
	btn.stop.disabled = false;
	});
	function stop() {
	timerId && clearInterval(timerId);
	timerId = null;
	btn.start.disabled = false;
	btn.stop.disabled = true;
	}
	btn.stop.addEventListener("click", stop);
	btn.next.addEventListener("click", function () {
	stop();
	Cell.next();
	});
	btn.reset.addEventListener("click", function () {
	stop();
	for (var x = 0; x < cvs.height / Cell.size; x++) {
	cells.push([]);
	for (var y = 0; y < cvs.width / Cell.size; y++) {
	cells[x][y].value = ~~(Math.random() * 10) % 2;
	}
	}
	});
	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Life Game - Cellular Automaton</title>
	<style>
	body {
	font-family: sans-serif;
	}
	canvas {
	width: 500px;
	height: 500px;
	}
	button {
	width: 60px;
	height: 20px;
	font-size: 12px;
	}
	</style>
	</head>
	<body>
	<canvas id="field" width="500" height="500"></canvas>
	<div>
	<button id="start">Start</button>
	<button id="stop" disabled>Stop</button>
	<button id="next">Next</button>
	<button id="reset">Reset</button>
	</div>
	<script src="ca.js"></script>
	</body>
	</html>