basic working simulator hooked up to interface -- first 'it's alive' moment

life.html

@@ -4,9 +4,12 @@
 		<script language="javascript">
 			var size;
 			var hertz;
-			var height;
+			var height_px;
-			var width;
+			var width_px;
+			var height_c;
+			var width_c;
 			var cells;
+			var timer;
 
 
 			function btn_control_set_name(name) {
@@ -15,14 +18,12 @@
 			}
 
 			function gen_cells() {
-				var hcells = height/size;
+				var new_cells = new Array(height_c);
-				var wcells = width/size;
+				for(var i = 0; i < height_c; i++) {
-				var new_cells = new Array(hcells);
+					new_cells[i] = new Array(width_c);
-				for(var i = 0; i < hcells; i++) {
-					new_cells[i] = new Array(wcells);
 				}
-				for (var y = 0; y < hcells; y++) {
+				for (var y = 0; y < height_c; y++) {
-					for (var x = 0; x < wcells; x++) {
+					for (var x = 0; x < width_c; x++) {
 						new_cells[y][x] = false;
 					}
 				}
@@ -35,40 +36,52 @@
 
 			function board_init() {
 				var canvas = document.getElementById('board');
-				width = canvas.width;
-				height = canvas.height;
-				btn_control_set_name('Start');
 				size = 10;
+				width_px = canvas.width;
+				width_c = width_px/ size;
+				height_px = canvas.height;
+				height_c = height_px/size;
+				btn_control_set_name('Start');
 				hertz = 4;
 				init_cells();
 				redraw();
 			}
 
 			function redraw() {
+				console.log('redraw()');
 				var canvas = document.getElementById('board');
 				var c = canvas.getContext('2d');
+				
+				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.save();
+
+				c.beginPath();
+
 				draw_grid(c);
 				c.stroke();
 				
-				cells[1][2] = true;
-				cells[3][4] = true;
-				cells[5][5] = true;
 
+				c.strokeStyle= 'rgba(0,0,0,1)';
+				c.fillStyle = c.strokeStyle;
+				c.beginPath();
 				draw_cells(c);
 				c.stroke();
 				c.fill();
 			}
 
 			function draw_cells(c) {
-				var hcells = height/size;
+				for (var y = 0; y < height_c; y++) {
-				var wcells = width/size;
+					for (var x =0; x < width_c; x ++) {
-				for (var y = 0; y < hcells; y++) {
-					for (var x =0; x < wcells; x ++) {
 						if (cells[y][x] == true) {
-							c.moveTo(x*size, y*size);
+							c.moveTo(x*size +1, y*size+1);
-							c.lineTo(x*size+ size, y*size);
+							c.lineTo(x*size+ size-1, y*size+1);
-							c.lineTo(x*size+ size, y*size + size);
+							c.lineTo(x*size+ size-1, y*size + size-1);
-							c.lineTo(x*size, y*size + size);
+							c.lineTo(x*size+1, y*size + size-1);
 							// auto return home?
 						}
 					}
@@ -77,14 +90,14 @@
 
 			function draw_grid(c) {
 				// Horizontal lines
-				for (var y = 0; y <= height; y += size) {
+				for (var y = 0; y <= height_px; y += size) {
 					c.moveTo(0, y);
-					c.lineTo(width, y);
+					c.lineTo(width_px, y);
 				}
 				// Vertical lines
-				for (var x = 0; x <= width; x += size) {
+				for (var x = 0; x <= width_px; x += size) {
 					c.moveTo(x, 0);
-					c.lineTo(x, height);
+					c.lineTo(x, height_px);
 				}
 
 			}
@@ -92,16 +105,43 @@
 
 			window.onload = board_init;
 
+			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];
+				}
+			}
+
+
+
+			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;
+			}
 
 			function step() {
 				var new_cells = gen_cells();
-				for(var y=0; y <= height; y++) {
+				for(var y=0; y < height_c; y++) {
-					for(var x =0 ; x <= width; x++) {
+					for(var x =0 ; x < width_c; x++) {
 						var n = num_neighbours(x, y);
 						if (cells[y][x] == true) {
 							if (n < 2 || n > 3) {
 								new_cells[y][x] = false;
 							} else {
+								console.log('ALIVE');
 								new_cells[y][x] = true;
 							}
 						} else if (n == 3) {
@@ -111,13 +151,43 @@
 						}
 				 	}
 				}
+				//new_cells[Math.floor(Math.random()*8)][ Math.floor(Math.random()*8) ] = true;
+				cells = new_cells;
 			}
+
+			function control_click() {
+				var btn = document.getElementById('control-btn');
+				if (btn.value == 'Start') {
+					tick();
+					btn.value = 'Stop';
+				} else {
+					clearTimeout(timmer);
+					btn.value = 'Start';
+				}
+			}
+
+			function tick() {
+				step();
+				redraw();
+				timmer = setTimeout('tick();', 1000/hertz);
+			}
+
+			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);
+				console.log(e.pageX + '/' + size + ' = ' + x + ' && ' + e.pageY + '/' + size + ' = ' +y);
+				cells[y][x] = ! cells[y][x];
+				redraw();
+			}
+
+
 		</script>
 	</head>
 	<body>
-		<input type="button" id="control-btn"/>
+		<input type="button" id="control-btn" onClick="control_click(); return false;" />
 		<br/>
-		<canvas width="800" height="400" id="board" ></canvas>
+		<canvas width="800" height="400" id="board" onClick="board_click(event);"></canvas>
 	</body>
 </html>