From 0e30c58ec25863337b71e8aeb63fae1c37bfa319 Mon Sep 17 00:00:00 2001
From: shoe <shoe@tilde.town>
Date: Fri, 21 Mar 2025 19:53:40 +0000
Subject: [PATCH] Resize canvas & redraw grid every frame, not that bad

---
 random-walkers.js | 49 +++++++++++++++++------------------------------
 1 file changed, 18 insertions(+), 31 deletions(-)

diff --git a/random-walkers.js b/random-walkers.js
index 1feff2a..7864d33 100644
--- a/random-walkers.js
+++ b/random-walkers.js
@@ -18,7 +18,7 @@ window.onload = function() {
 
   gui.add(controls, "step_time", 200, 2000).name("step time ms").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.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");
 
@@ -29,7 +29,7 @@ window.onload = function() {
 var controls = new(function() {
   this.step_time = 500;
   this.fadeout = 10;
-  this.cell_size = 30;
+  this.cell_size = 22;
   this.color = "#FFB000";
 
   this.restart_button = function() {
@@ -56,7 +56,9 @@ Number.prototype.mod = function (n) {
 
 function init_walk() {
   // Draw a grid of boxes on the canvas
-  draw_grid();
+  setInterval(draw, 20);
+
+  /*
 
   // Set default values for walker pos and empty the trail
   // TODO: ACTUAL DEFAULT VALUE AT CENTER.
@@ -78,7 +80,7 @@ function init_walk() {
     walker.y_velocity = walker.speed * Math.sin(walker.angle)
     walker_array.push(walker)
   }
-  setInterval(paint_canvas, 20);
+  */
 }
 
 function move_walker(walker, possible_directions) {
@@ -95,32 +97,19 @@ function move_walker(walker, possible_directions) {
  * Drawing                                                                  *
  ****************************************************************************/
 
-function paint_canvas() {
-  /*
-  // Regenerate possible angle list
-  possible_directions = gen_angle_list(4)
+function draw() {
+  var oldwidth = ctx.canvas.width;
+  var oldheight = ctx.canvas.height;
+  ctx.canvas.width  = window.innerWidth;
+  ctx.canvas.height = window.innerHeight;
 
-  // Loop through all walkers, moving & painting accordingly
-  for (var i = 0; i < walker_array.length; i++) {
-
-    current_walker = walker_array[i];
-
-    // If walker hasn't hit the walls yet
-    if (!current_walker.halt) {
-      var prev_x = current_walker.x_position
-      var prev_y = current_walker.y_position
-      ctx.beginPath()
-      ctx.moveTo(prev_x, prev_y)
-      move_walker(current_walker, possible_directions);
-      ctx.strokeStyle = current_walker.color;
-      ctx.lineWidth = current_walker.line_width;
-      ctx.lineTo(current_walker.x_position, current_walker.y_position)
-      ctx.stroke()
-
-      ctx.closePath();
-    }
+  if (oldwidth !== ctx.canvas.width || oldheight != ctx.canvas.height) {
+    console.log(`dimensions changed from ${oldwidth}x${oldheight} to ${ctx.canvas.width}x${ctx.canvas.height}`);
   }
-  */
+
+  draw_grid();
+
+  // TODO CODE
 }
 
 function draw_grid_square(row, col, color, offset) {
@@ -157,11 +146,9 @@ function draw_grid() {
  * ON SCRIPT LOAD                                                           *
  ****************************************************************************/
 
-// canvas starts with full width and height of its HTML element
+// find the canvas
 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
 
 // set start position of walker and start the random walk
 var walker_position = {x: 0, y: 0};