Make grid resize an event listener, comment functions

walkers.js

@@ -12,6 +12,7 @@ var walker_colors = [
 ];
 var color_idx = 0;
 
+// create a new walker with random position and color
 function create_new_walker() {
   var my_row = Math.floor(Math.random() * n_rows);
   var my_col = Math.floor(Math.random() * n_cols);
@@ -21,6 +22,7 @@ function create_new_walker() {
   color_idx = (color_idx + 1).mod(walker_colors.length);
 }
 
+// choose a random walker to kill. does not kill the trail.
 function destroy_random_walker() {
   // destroy a random walker.
   // we can't get the trail, that'll have to fade on its own
@@ -31,8 +33,8 @@ function destroy_random_walker() {
   draw_grid_square(removed[0].row, removed[0].col, "black");
 }
 
+// kill all walkers, but not their trails.
 function destroy_all_walkers() {
-  // kill all the walkers, but not their trails -- i like the look better
   var removed = walkers.splice(0, walkers.length);
 
   // draw black everywhere on the canvas to hide the dead bodies D:
@@ -63,8 +65,8 @@ Number.prototype.div = function(divisor) {
  * Random walk implementation (movement functions)                          *
  ****************************************************************************/
 
+// start up the functions that run FOREVER!!!
 function init_walk() {
-  setInterval(update_size, 20);
   setInterval(update_walkers, 200);
   setInterval(update_trails, 200);
 }
@@ -81,6 +83,7 @@ function trails_find_position(row, col) {
   return null;
 }
 
+// update and draw all trails in the array
 function update_trails() {
   // for all existing trails, make them darker
   for (var i = 0; i < trails.length; i++) {
@@ -105,6 +108,7 @@ function update_trails() {
   }
 }
 
+// update and draw all walkers in the array
 function update_walkers() {
   // move all walkers, creating trails behind them
   for (var i = 0; i < walkers.length; i++) {
@@ -168,28 +172,28 @@ function tweak_color_luminance(hex, lum) {
   return rgb;
 }
 
-function update_size() {
-  if (canvas.width != window.innerWidth || canvas.height != window.innerHeight) {
-    // note: changing width and height clears the canvas, so this will cause a
-    // black screen until the next draw call for each thing.
-    canvas.width  = window.innerWidth;
-    canvas.height = window.innerHeight;
+// when called, fixes the canvas and grid size. will cause the canvas to go
+// black until it's drawn again, though.
+function fix_grid_size() {
+  // note: changing width and height clears the canvas, so this will cause a
+  // black screen until the next draw call for each thing.
+  canvas.width  = window.innerWidth;
+  canvas.height = window.innerHeight;
 
-    // update all the globals we're using too
-    n_rows = canvas.height.div(cell_size);
-    n_cols = canvas.width.div(cell_size);
-    offset_h = (canvas.width - (cell_size * n_cols)).div(2);
-    offset_v = (canvas.height - (cell_size * n_rows)).div(2);
-  }
+  // update all the globals we're using too
+  n_rows = canvas.height.div(cell_size);
+  n_cols = canvas.width.div(cell_size);
+  offset_h = (canvas.width - (cell_size * n_cols)).div(2);
+  offset_v = (canvas.height - (cell_size * n_rows)).div(2);
 }
 
+// draw on the canvas a grid square of that color
 function draw_grid_square(row, col, color) {
   var margin = 2;
-
-  ctx.fillStyle = color;
   var pos_h = offset_h + (cell_size * col) + margin;
   var pos_v = offset_v + (cell_size * row) + margin;
 
+  ctx.fillStyle = color;
   ctx.fillRect(pos_h, pos_v, cell_size - (2*margin), cell_size - (2*margin));
 }
 
@@ -205,6 +209,9 @@ var ctx = canvas.getContext('2d')
 canvas.width  = window.innerWidth;
 canvas.height = window.innerHeight;
 
+// set up a handler so the grid gets fixed whenever the window resizes
+window.addEventListener('resize', fix_grid_size);
+
 // find the UI buttons and give them click handlers to activate our functions
 document
   .getElementById("button-create-walker")