I have it drawing a grid, mover is turned off

random-walkers.js

@@ -1,3 +1,7 @@
+/****************************************************************************
+ * GUI Setup                                                                *
+ ****************************************************************************/
+
 window.onload = function() {
   var gui = new dat.GUI({
     closed: false,
@@ -12,8 +16,9 @@ window.onload = function() {
     autoPlace: false,
   });
 
-  gui.add(controls, "step_time", 200, 2000).name("step time (ms)").step(1);
+  gui.add(controls, "step_time", 200, 2000).name("step time ms").step(1);
-  gui.add(controls, "fadeout", 0, 20).name("time to fade (0 to disable").step(1);
+  gui.add(controls, "fadeout", 0, 20).name("trail fadeout length (0 to disable)").step(1);
+  gui.add(controls, "cell_size", 10, 100).name("cell size").step(1);
   gui.addColor(controls, "color").name("guy color");
   gui.add(controls, "restart_button").name("start again");
 
@@ -24,6 +29,7 @@ window.onload = function() {
 var controls = new(function() {
   this.step_time = 500;
   this.fadeout = 10;
+  this.cell_size = 30;
   this.color = "#FFB000";
 
   this.restart_button = function() {
@@ -32,6 +38,9 @@ var controls = new(function() {
   }
 })()
 
+/****************************************************************************
+ * TODO: CATEOGORIZE THESE BULLSHITS                                        *
+ ****************************************************************************/
 
 // Define a new mod function that behaves different on negatives.
 // now, (-1).mod(4) -> 3. not -1.
@@ -41,7 +50,18 @@ Number.prototype.mod = function (n) {
     return ((this % n) + n) % n;
 };
 
+/****************************************************************************
+ * Random walk implementation (movement functions)                          *
+ ****************************************************************************/
+
 function init_walk() {
+  // Draw a grid of boxes on the canvas
+  draw_grid();
+
+  // Set default values for walker pos and empty the trail
+  // TODO: ACTUAL DEFAULT VALUE AT CENTER.
+  walker_position = {x: 0, y: 0};
+  trail_positions = [];
   // Create array of walkers with set parameters, start walkers in center of canvas
   walker_array = []
   for (var i = 0; i < 1; i++) {
@@ -61,51 +81,6 @@ function init_walk() {
   setInterval(paint_canvas, 20);
 }
 
-
-
-function degrees_to_radians(degrees) {
-  var pi = Math.PI;
-  return degrees * (pi / 180);
-}
-
-function radians_to_degrees(radians) {
-  var pi = Math.PI;
-  return radians * (180 / pi);
-}
-
-
-function gen_angle_list(number_of_groups) {
-  /* Generate array of possible angles from limitation
-
-     For example, if the limitation of angles is 4, then 360 / 4 = 90, and resulting array will be angle_list = [0,90,180,270,360]
-     Including 0 & 360 is to give the walker equal chance to turn around and stay in the canvas
-     */
-  var angle_list = []
-
-  var initial_angle = 360 / number_of_groups;
-
-  for (var i = 0; i < number_of_groups + 1; i++) {
-    angle_list.push(initial_angle * i);
-  }
-  return angle_list
-}
-
-function get_nearest_angle(goal, angle_list) {
-  // Source: https://stackoverflow.com/questions/8584902/get-closest-number-out-of-array
-
-  // Find nearest angle in possible direction array from new random angle
-
-  var closest = angle_list.reduce(function(prev, curr) {
-    return (Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev);
-  });
-  return closest
-
-}
-
-
-var possible_directions = gen_angle_list(4);
-
-
 function move_walker(walker, possible_directions) {
   // Update new random direction & update velocity of walker
   var new_angle = Math.random() * 360
@@ -116,7 +91,12 @@ function move_walker(walker, possible_directions) {
   walker.y_velocity = walker.speed * Math.sin(walker.angle)
 }
 
+/****************************************************************************
+ * Drawing                                                                  *
+ ****************************************************************************/
+
 function paint_canvas() {
+  /*
   // Regenerate possible angle list
   possible_directions = gen_angle_list(4)
 
@@ -140,13 +120,50 @@ function paint_canvas() {
       ctx.closePath();
     }
   }
+  */
+}
+
+function draw_grid_square(row, col, color, offset) {
+  var margin = 2;
+
+  ctx.fillStyle = color;
+  var pos_h = offset.h + (controls.cell_size * col) + margin;
+  var pos_v = offset.v + (controls.cell_size * row) + margin;
+
+  ctx.fillRect(pos_h, pos_v, controls.cell_size - (2*margin), controls.cell_size - (2*margin));
 }
 
 
+function draw_grid() {
+  // Fit in as many cell_size sized boxes as we can.
+  // note that cell_size is the outer size, not the inner size.
+  //   inner = outer - 4, to allow for spacing between
+  var n_cells_h = Math.floor(canvas.width / controls.cell_size);
+  var n_cells_v = Math.floor(canvas.height / controls.cell_size);
+
+  var offset_h = Math.floor((canvas.width - (controls.cell_size * n_cells_h)) / 2);
+  var offset_v = Math.floor((canvas.height - (controls.cell_size * n_cells_v)) / 2);
+  var offset = {h: offset_h, v: offset_v};
+
+  // Actually draw the cells lol
+  for (var row = 0; row < n_cells_v; row++) {
+    for (var col = 0; col < n_cells_h; col++) {
+      draw_grid_square(row, col, "#282828", offset);
+    }
+  }
+}
+
+/****************************************************************************
+ * ON SCRIPT LOAD                                                           *
+ ****************************************************************************/
+
+// canvas starts with full width and height of its HTML element
 var canvas = document.getElementById("walker-canvas")
 var ctx = canvas.getContext('2d')
 ctx.canvas.width = document.getElementById("walker-canvas").clientWidth
 ctx.canvas.height = document.getElementById("walker-canvas").clientHeight
 
-var walker_array = []
+// set start position of walker and start the random walk
+var walker_position = {x: 0, y: 0};
+var trail_positions = [];
 init_walk();