Replace all the math.floor with an int div prototype

random-walkers.js

@@ -50,6 +50,12 @@ Number.prototype.mod = function (n) {
     return ((this % n) + n) % n;
 };
 
+// Perform integer division
+Number.prototype.div = function(divisor) {
+  "use strict";
+  return Math.floor(this / divisor);
+}
+
 /****************************************************************************
  * Random walk implementation (movement functions)                          *
  ****************************************************************************/
@@ -98,17 +104,29 @@ function move_walker(walker, possible_directions) {
  ****************************************************************************/
 
 function draw() {
-  var oldwidth = ctx.canvas.width;
+  // pixel width and height
-  var oldheight = ctx.canvas.height;
+  var old_width = ctx.canvas.width;
-  ctx.canvas.width  = window.innerWidth;
+  var old_height = ctx.canvas.height;
-  ctx.canvas.height = window.innerHeight;
+  canvas.width  = window.innerWidth;
+  canvas.height = window.innerHeight;
 
-  if (oldwidth !== ctx.canvas.width || oldheight != ctx.canvas.height) {
+  if (old_width !== canvas.width || old_height != canvas.height) {
-    console.log(`dimensions changed from ${oldwidth}x${oldheight} to ${ctx.canvas.width}x${ctx.canvas.height}`);
+    var old_n_rows = n_rows;
+    var old_n_cols = n_cols;
+    n_rows = canvas.height.div(controls.cell_size);
+    n_cols = canvas.width.div(controls.cell_size);
+    // TODO: for every walker and every trail, adjust their position to the new canvas size
+    // we wanna just mod it, probably. that way if you shrink it you don't
+    // lose anything.
+
+    // TODO: HANDLE RESIZE
+    console.log(`dimensions changed from ${old_width}x${old_height} to ${ctx.canvas.width}x${ctx.canvas.height}`);
   }
 
+  // grid of all one color.
   draw_grid();
 
+
   // TODO CODE
 }
 
@@ -124,19 +142,13 @@ function draw_grid_square(row, col, color, offset) {
 
 
 function draw_grid() {
-  // Fit in as many cell_size sized boxes as we can.
+  var offset_h = (canvas.width - (controls.cell_size * n_cols)).div(2);
-  // note that cell_size is the outer size, not the inner size.
+  var offset_v = (canvas.height - (controls.cell_size * n_rows)).div(2);
-  //   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 row = 0; row < n_rows; row++) {
-    for (var col = 0; col < n_cells_h; col++) {
+    for (var col = 0; col < n_cols; col++) {
       draw_grid_square(row, col, "#282828", offset);
     }
   }
@@ -146,11 +158,17 @@ function draw_grid() {
  * ON SCRIPT LOAD                                                           *
  ****************************************************************************/
 
-// find the canvas
+// find the canvas and set its initial size
 var canvas = document.getElementById("walker-canvas")
 var ctx = canvas.getContext('2d')
+canvas.width  = window.innerWidth;
+canvas.height = window.innerHeight;
+
+// compute the initial rows and columns
+var n_rows = canvas.height.div(controls.cell_size);
+var n_cols = canvas.width.div(controls.cell_size);
 
 // set start position of walker and start the random walk
-var walker_position = {x: 0, y: 0};
+var walker_position = {x: n_rows.div(2), y: n_cols.div(2)};
 var trail_positions = [];
 init_walk();