Create and destroy walkers with buttons

index.html

@@ -9,6 +9,9 @@
   <p>as in i am repeatedly breaking stuff all the time</p>
   <p>code modified from <a href="https://jackmckew.dev/interactive-random-walkers-with-javascript.html">https://jackmckew.dev/interactive-random-walkers-with-javascript.html</a></p>
 
+  <button id="button-new-walker">make a new one</button>
+  <button id="button-reset">kill them all :(</button>
+
   <div id="canvas-container">
   <canvas id="walker-canvas"></canvas>
   </div>

walkers.js

@@ -1,3 +1,26 @@
+/****************************************************************************
+ * Buttons that interact with the UI                                        *
+ ****************************************************************************/
+
+function create_new_walker() {
+  var my_row = Math.floor(Math.random() * n_rows);
+  var my_col = Math.floor(Math.random() * n_cols);
+  // TODO: CHOOSE COLOR, ONLY DO IT IN SEQUENCE FROM A LIST OF KNOWN-GOOD
+  // COLORS. THE SEQUENCE WILL BE FINE.
+  var my_color = "#FFB000";
+  walkers.push({row: my_row, col: my_col, color: my_color});
+}
+
+function reset() {
+  // kill all the walkers and trails
+  walkers.splice(0, walkers.length);
+  trails.splice(0, trails.length);
+
+  // draw black everywhere on the canvas to hide the dead bodies D:
+  ctx.fillStyle = "black";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+}
+
 /****************************************************************************
  * Functions JS doesn't want you to have, ig                                *
  ****************************************************************************/
@@ -162,6 +185,12 @@ var ctx = canvas.getContext('2d')
 canvas.width  = window.innerWidth;
 canvas.height = window.innerHeight;
 
+// find the UI buttons and give them click handlers to activate
+var reset_btn = document.getElementById("button-reset");
+var new_walker_btn = document.getElementById("button-new-walker");
+reset_btn.addEventListener("click", reset);
+new_walker_btn.addEventListener("click", create_new_walker);
+
 // compute the initial rows and columns
 var cell_size = 22;
 var n_rows = canvas.height.div(cell_size);
@@ -172,8 +201,6 @@ 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"},
-  {row: 0, col: 0, color: "#ff0000"},
-  {row: n_rows, col: 0, color: "#00ff00"},
 ];
 trails = []
 init_walk();