diff --git a/life.html b/life.html
index ab0ad19..2ad1d5e 100644
--- a/life.html
+++ b/life.html
@@ -1,275 +1,7 @@
The Game of Life: HTML Canvas Demo
-
+
Speed:
diff --git a/life.js b/life.js
new file mode 100644
index 0000000..a094dee
--- /dev/null
+++ b/life.js
@@ -0,0 +1,266 @@
+var size;
+var hertz;
+var height_px;
+var width_px;
+var height_c;
+var width_c;
+var cells;
+var timer;
+var effects;
+
+// set start/stop button value
+function btn_control_set_name(name) {
+ var btn = document.getElementById('control-btn');
+ btn.value = name;
+}
+
+// generate an 2d array of cells based on current geometry
+function gen_cells() {
+ var new_cells = new Array(height_c);
+ for(var i = 0; i < height_c; i++) {
+ new_cells[i] = new Array(width_c);
+ }
+ for (var y = 0; y < height_c; y++) {
+ for (var x = 0; x < width_c; x++) {
+ new_cells[y][x] = 0;
+ }
+ }
+ return new_cells;
+}
+
+// init the cells
+function init_cells() {
+ cells = gen_cells();
+}
+
+// Generate and populate the geometry variables
+// possibly over complicated from my experiment with an elastic resizeable board
+function get_demensions() {
+ var canvas = document.getElementById('board');
+ size = parseInt( document.getElementById('density').value);
+ width_px = canvas.offsetWidth - (canvas.offsetWidth%size);
+ canvas.width = width_px;
+ width_c = width_px/ size;
+ height_px = canvas.offsetHeight - (canvas.offsetHeight%size);
+ canvas.height = height_px;
+ height_c = height_px/size;
+ //console.log(width_px + 'x' + height_px + ' => ' + width_c + 'x' +height_c);
+}
+
+// init the board
+// set vars
+// get geometry
+// generate cells for 1st time
+// draw
+function board_init() {
+ var canvas = document.getElementById('board');
+ document.getElementById('density').value = 10;
+ get_demensions();
+ btn_control_set_name('Start');
+ document.getElementById('speed').value = 8;
+ change_speed();
+ init_cells();
+ document.getElementById('effects').value=0;
+ effects=0;
+ redraw();
+}
+
+// Draw the current board: gird, then cells
+function redraw() {
+ var canvas = document.getElementById('board');
+ var c = canvas.getContext('2d');
+ get_demensions();
+
+ c.globalCompositeOperation = 'destination-over';
+
+ c.clearRect(0, 0, width_px, height_px);
+
+ c.fillStyle='rgba(0,0,0,0.)';
+ c.strokeStyle= 'rgba(192,192,192,1)';
+
+ c.beginPath();
+
+ draw_grid(c);
+ c.stroke();
+
+
+ draw_cells(c);
+}
+
+// Generate a cycling darkening with age rainbow color
+// based on math/code from http://www.krazydad.com/makecolors.php
+function setStrokeAgeRainbow(l, c) {
+ var frequency = 0.3;
+ var center = 200; //128;
+ var width = 55; //127;
+
+ var red = Math.floor( (Math.sin(frequency*l + 0) * width + center) -l) ;
+ var green = Math.floor( (Math.sin(frequency*l + 2) * width + center) -l);
+ var blue = Math.floor( (Math.sin(frequency*l + 4) * width + center) -l);
+
+ red = Math.max(0, red);
+ green = Math.max(0, green);
+ blue = Math.max(0, blue);
+
+ c.strokeStyle= 'rgba('+red+','+green+','+blue+','+1+')';
+}
+
+// Draw all the cells onto the board inside the grid
+function draw_cells(c) {
+ for (var y = 0; y < height_c; y++) {
+ for (var x =0; x < width_c; x ++) {
+ if (cells[y][x] != 0) {
+
+ if(effects == 0) {
+ c.strokeStyle = 'rgba(0,0,0,1)';
+ } else {
+ setStrokeAgeRainbow(cells[y][x], c);
+ }
+
+ c.fillStyle = c.strokeStyle;
+ c.beginPath();
+ c.moveTo(x*size +1, y*size+1);
+ c.lineTo(x*size+ size-1, y*size+1);
+ c.lineTo(x*size+ size-1, y*size + size-1);
+ c.lineTo(x*size+1, y*size + size-1);
+ // auto return home
+ c.stroke();
+ c.fill();
+ }
+ }
+ }
+}
+
+// draw the grid and border
+function draw_grid(c) {
+ // Horizontal lines
+ for (var y = 0; y <= height_px; y += size) {
+ c.moveTo(0, y);
+ c.lineTo(width_px, y);
+ }
+ // Vertical lines
+ for (var x = 0; x <= width_px; x += size) {
+ c.moveTo(x, 0);
+ c.lineTo(x, height_px);
+ }
+
+}
+
+// When we've loaded, run!
+window.onload = board_init;
+
+// is a cell alive or dead
+// 0 for dead, 1 for alive
+// walls count as dead
+// used by num_neighbours
+function cell_value(x, y) {
+ //console.log('(x:' + x + ',y:' + y + ') w/s:' + (width/size) + ' h/s:' + (height/size) );
+ if (x < 0 || x >= width_c || y < 0 || y >= height_c) {
+ return 0;
+ } else {
+ return cells[y][x] == 0 ? 0 : 1;
+ }
+}
+
+// return the number of neighbours for a cell
+// walls count as dead
+function num_neighbours(x, y) {
+ var n = 0;
+ n += cell_value(x-1, y-1);
+ n += cell_value(x, y-1);
+ n += cell_value(x+1, y-1);
+
+ n += cell_value(x-1, y);
+ n += cell_value(x+1, y);
+
+ n += cell_value(x-1, y+1);
+ n += cell_value(x, y+1);
+ n += cell_value(x+1, y+1);
+
+ return n;
+}
+
+// Simulate one generation of cells
+// create a new cells 2d array and simulate the next generation
+// into it and then replace the current cells with it
+function step() {
+ var new_cells = gen_cells();
+ for(var y=0; y < height_c; y++) {
+ for(var x =0 ; x < width_c; x++) {
+ var n = num_neighbours(x, y);
+ if (cells[y][x] != 0) {
+ if (n < 2 || n > 3) {
+ new_cells[y][x] = 0;
+ } else {
+ new_cells[y][x] = cells[y][x] +1;
+ }
+ } else if (n == 3) {
+ new_cells[y][x] = 1;
+ } else {
+ new_cells[y][x] = 0;
+ }
+ }
+ }
+ //new_cells[Math.floor(Math.random()*8)][ Math.floor(Math.random()*8) ] = true;
+ cells = new_cells;
+}
+
+// Stop/Start button press
+function control_click() {
+ var btn = document.getElementById('control-btn');
+ if (btn.value == 'Start') {
+ tick();
+ btn.value = 'Stop';
+ } else {
+ clearTimeout(timmer);
+ btn.value = 'Start';
+ }
+}
+
+// Function to call on timmer
+// simulate on e generation,
+// redrawn
+// reset timmer
+function tick() {
+ step();
+ redraw();
+ timmer = setTimeout('tick();', 1000.0/hertz);
+}
+
+// Handler for a click on the board to place/unplace a cell
+function board_click(e) {
+ var canvas = document.getElementById('board');
+ var x = Math.floor((e.pageX-canvas.offsetLeft)/size);
+ var y = Math.floor((e.pageY-canvas.offsetTop)/size);
+ cells[y][x] = ! cells[y][x];
+ redraw();
+}
+
+// Change speed handler
+function change_speed() {
+ hertz = parseInt(document.getElementById('speed').value);
+}
+
+// Resize board handler (kind of not used)
+// Left over from experiment in resiable elastic board
+// Abandoned because of problems with lining up mouse clicks on board
+// and weird stretcing issues
+function resize_cells() {
+ var new_cells = gen_cells();
+ var w = Math.min(width_c, cells[0].length);
+ var h = Math.min(height_c, cells.length);
+ for(var y = 0; y < h; y++) {
+ for(x = 0; x < w; x++) {
+ new_cells[y][x] = cells[y][x];
+ }
+ }
+
+ cells = new_cells;
+}
+
+// What to do on a document resize (more usefull for elastic boards)
+function canvas_resize() {
+ get_demensions();
+ resize_cells();
+ redraw();
+}