Make the grid smaller and the walkers faster

index.html

@@ -21,7 +21,7 @@
         <ul>
           <li>they/them</li>
           <li>i like sysadmin</li>
-          <li>TODO: I really need this section to not read like garbo<li>
+          <li>TODO: I really need this section to not read like garbo</li>
         </ul>
       </div>
 
@@ -30,7 +30,7 @@
         <p>mess with the random walkers</p>
         <ul>
           <li><button id="button-create-walker">create one</button></li>
-          <li><button id="button-destroy-walker">kill one :(</button></li>
+          <li><button id="button-destroy-walker">kill the last one :(</button></li>
           <li><button id="button-reset-walkers">kill them all D:</button></li>
         </ul>
         <p>if you want, you can <button id="button-hide-page">hide</button> the page to just watch the random walk</p>

walkers.js

@@ -11,10 +11,11 @@ var walker_colors = [
   "#8500ff", // purple
   "#ff2e00", // red
 ];
-var color_idx = 0;
+// start with a random part of the sequence
+var color_idx = Math.floor(Math.random() * walker_colors.length);
 
 // create a new walker with random position and color
-function create_new_walker() {
+function create_random_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);
@@ -32,15 +33,18 @@ 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() {
-  // 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)[0];
+// kill the last walker created
+function destroy_last_walker() {
+  var last_idx = walkers.length - 1;
+  var removed = walkers.splice(last_idx, 1)[0];
+  if (!removed) {
+    return;
+  }
+
   draw_grid_square(removed.row, removed.col, "black");
 
   // also stop its timer
-  var removed_timer = walker_timers.splice(choice, 1)[0];
+  var removed_timer = walker_timers.splice(last_idx, 1)[0];
   clearInterval(removed_timer);
 }
 
@@ -81,18 +85,20 @@ Number.prototype.div = function(divisor) {
  * Random walk implementation (movement functions)                          *
  ****************************************************************************/
 
-// return a random update time. 25 to 175ms in increments of 50
+// return a random update time. 10 to 90ms in increments of 20.
 function random_update_time() {
-  var speed = Math.floor(Math.random() * 4);
-  return (speed * 50) + 25;
+  var speed = Math.floor(Math.random() * 5);
+  return (speed * 20) + 10;
 }
 
 // start up the functions that run FOREVER!!!
 function init_walk() {
   setInterval(update_trails, 200);
 
-  // create an initial walker. also creates its timer with setInterval.
-  create_new_walker();
+  // create initial walkers of every color
+  for (var i = 0; i < walker_colors.length; i++) {
+    create_random_walker();
+  }
 }
 
 // check if the trails array has a position.
@@ -208,12 +214,12 @@ function fix_grid_size() {
 
 // draw on the canvas a grid square of that color
 function draw_grid_square(row, col, color) {
-  var margin = 2;
+  var margin = 1;
   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));
+  ctx.fillRect(pos_h, pos_v, cell_size - margin, cell_size - margin);
 }
 
 /****************************************************************************
@@ -234,16 +240,16 @@ window.addEventListener('resize', fix_grid_size);
 // find the UI buttons and give them click handlers to activate our functions
 document
   .getElementById("button-create-walker")
-  .addEventListener("click", create_new_walker);
+  .addEventListener("click", create_random_walker);
 document
   .getElementById("button-destroy-walker")
-  .addEventListener("click", destroy_random_walker);
+  .addEventListener("click", destroy_last_walker);
 document
   .getElementById("button-reset-walkers")
   .addEventListener("click", destroy_all_walkers);
 
 // compute the initial rows and columns
-var cell_size = 22;
+var cell_size = 8;
 var n_rows = canvas.height.div(cell_size);
 var n_cols = canvas.width.div(cell_size);
 var offset_h = (canvas.width - (cell_size * n_cols)).div(2);