Random speeds go brrrrrrr

walkers.js

@@ -2,45 +2,66 @@
  * Buttons that interact with the UI                                        *
  ****************************************************************************/
 
+// return a random update time. 25 to 175ms in increments of 50
+function random_update_time() {
+  var speed = Math.floor(Math.random() * 4);
+  return (speed * 50) + 25;
+}
+
 // a rainbow-adjacent set of colors for the walkers to cycle through
 var walker_colors = [
+  "#FFB000", // amber, from https://superuser.com/a/1206781
   "#33FF00", // green, also from https://superuser.com/a/1206781
   "#0033ff", // blue
   "#a553fc", // purple
   "#FF2E00", // red
-  "#FFB000", // amber, also from https://superuser.com/a/1206781. this is the default color used, so it is last in the array.
 ];
 var color_idx = 0;
 
 // create a new walker with random position and color
 function create_new_walker() {
+  // create random-param walker and add to the array
   var my_row = Math.floor(Math.random() * n_rows);
   var my_col = Math.floor(Math.random() * n_cols);
   var my_color = walker_colors[color_idx];
-  // TODO: ADD SPEED TO THIS WHOLE DEAL
-  walkers.push({row: my_row, col: my_col, color: my_color});
+  var new_length = walkers.push({row: my_row, col: my_col, color: my_color});
+
+  // decide how fast this walker updates and push that to the interval array
+  var update_time = random_update_time();
+  var timer = setInterval((function() {
+    update_walker(walkers[new_length - 1]);
+  }), update_time);
+  walker_timers.push(timer);
+
+  // go to the next color
   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
+  // choose a random walker to destroy, draw black over its location.
   var choice = Math.floor(Math.random() * walkers.length);
-  var removed = walkers.splice(choice, 1);
+  var removed = walkers.splice(choice, 1)[0];
+  draw_grid_square(removed.row, removed.col, "black");
 
-  // hide where the walker used to be
-  draw_grid_square(removed[0].row, removed[0].col, "black");
+  // also stop its timer
+  var removed_timer = walker_timers.splice(choice, 1)[0];
+  clearInterval(removed_timer);
 }
 
 // kill all walkers, but not their trails.
 function destroy_all_walkers() {
+  // delete all walkers, draw black where they used to be
   var removed = walkers.splice(0, walkers.length);
-
-  // draw black everywhere on the canvas to hide the dead bodies D:
   for (var i = 0; i < removed.length; i++) {
     draw_grid_square(removed[i].row, removed[i].col, "black");
   }
+
+  // stop all timers as well
+  var removed_timers = walker_timers.splice(0, walker_timers.length);
+  for (var i = 0; i < removed_timers.length; i++) {
+    clearInterval(removed_timers[i]);
+  }
 }
 
 /****************************************************************************
@@ -67,8 +88,10 @@ Number.prototype.div = function(divisor) {
 
 // start up the functions that run FOREVER!!!
 function init_walk() {
-  setInterval(update_walkers, 200);
   setInterval(update_trails, 200);
+
+  // create an initial walker. also creates its timer with setInterval.
+  create_new_walker();
 }
 
 // check if the trails array has a position.
@@ -109,25 +132,20 @@ 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++) {
-    // leave a trail behind
-    var index = trails_find_position(walkers[i].row, walkers[i].col);
-    if (index) {
-      trails[index].color = walkers[i].color;
-    } else {
-      trails.push({row: walkers[i].row, col: walkers[i].col, color: walkers[i].color});
-    }
-
-    // move in random dir
-    add_random_direction(walkers[i]);
+function update_walker(walker) {
+  // leave a trail behind
+  var index = trails_find_position(walker.row, walker.col);
+  if (index) {
+    trails[index].color = walker.color;
+  } else {
+    trails.push({row: walker.row, col: walker.col, color: walker.color});
   }
 
+  // move in random dir
+  add_random_direction(walker);
+
   // draw a colored square at walker locations
-  for (var i = 0; i < walkers.length; i++) {
-    draw_grid_square(walkers[i].row, walkers[i].col, walkers[i].color);
-  }
+  draw_grid_square(walker.row, walker.col, walker.color);
 }
 
 // give this function a walker and it will update the walkerition by one tile
@@ -231,8 +249,7 @@ var offset_h = (canvas.width - (cell_size * n_cols)).div(2);
 var offset_v = (canvas.height - (cell_size * n_rows)).div(2);
 
 // set start position of walker and start the random walk
-var walkers = [
-  {row: n_rows.div(2), col: n_cols.div(2), color: "#FFB000"},
-];
-trails = []
+var walkers = [];
+var walker_timers = [];
+var trails = []
 init_walk();