From 85b1025d16b7bdf7f63b870f85d53f278012c757 Mon Sep 17 00:00:00 2001
From: shoe <shoe@tilde.town>
Date: Fri, 21 Mar 2025 02:05:09 +0000
Subject: [PATCH] Make the walker loop around when hitting edges

---
 random-walkers.js | 59 +++++++++++++++++------------------------------
 1 file changed, 21 insertions(+), 38 deletions(-)

diff --git a/random-walkers.js b/random-walkers.js
index 6e67f0a..1599a63 100644
--- a/random-walkers.js
+++ b/random-walkers.js
@@ -14,32 +14,32 @@ window.onload = function() {
 
   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, "color", 1, 50).name("which color the guy is").step(1);
+  gui.addColor(controls, "color").name("guy color");
+  gui.add(controls, "restart_button").name("start again");
 
   var customContainer = document.getElementById("controls-container");
   customContainer.append(gui.domElement);
 };
 
-// colorArray source: https://gist.github.com/mucar/3898821
-var colorArray = [
-  '#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
-  '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
-  '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
-  '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
-  '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
-  '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
-  '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
-  '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
-  '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
-  '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'
-];
-
 var controls = new(function() {
   this.step_time = 500;
   this.fadeout = 10;
-  this.color = 1;
-})();
+  this.color = "#FFB000";
 
+  this.restart_button = function() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    init_walk();
+  }
+})()
+
+
+// Define a new mod function that behaves different on negatives.
+// now, (-1).mod(4) -> 3. not -1.
+// taken from https://stackoverflow.com/a/4467559, which itself took from elsewhere
+Number.prototype.mod = function (n) {
+    "use strict";
+    return ((this % n) + n) % n;
+};
 
 function init_walk() {
   // Create array of walkers with set parameters, start walkers in center of canvas
@@ -49,7 +49,7 @@ function init_walk() {
       x_position: canvas.width / 2,
       y_position: canvas.height / 2,
       line_width: 1,
-      colour: colorArray[i],
+      color: controls.color,
       speed: 5,
       angle: Math.random() * 360,
       halt: false,
@@ -106,32 +106,16 @@ function get_nearest_angle(goal, angle_list) {
 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
-  walker.x_position += walker.x_velocity
-  walker.y_position += walker.y_velocity
+  walker.x_position = (walker.x_position + walker.x_velocity).mod(canvas.width);
+  walker.y_position = (walker.y_position + walker.y_velocity).mod(canvas.height);
   walker.angle = degrees_to_radians(get_nearest_angle(new_angle, possible_directions))
   walker.x_velocity = walker.speed * Math.cos(walker.angle)
   walker.y_velocity = walker.speed * Math.sin(walker.angle)
 }
 
-function check_boundaries(canvas, walker) {
-  // Checks if walker has collided with walls and stops walker
-  if (walker.x_position >= canvas.width - walker.line_width || walker.x_position <= walker.line_width) {
-    walker.x_velocity = 0;
-    walker.y_velocity = 0;
-    walker.halt = true
-  }
-
-  if (walker.y_position >= canvas.height - walker.line_width || walker.y_position <= walker.line_width) {
-    walker.x_velocity = 0
-    walker.y_velocity = 0
-    walker.halt = true;
-  }
-}
-
 function paint_canvas() {
   // Regenerate possible angle list
   possible_directions = gen_angle_list(4)
@@ -147,9 +131,8 @@ function paint_canvas() {
       var prev_y = current_walker.y_position
       ctx.beginPath()
       ctx.moveTo(prev_x, prev_y)
-      check_boundaries(canvas, current_walker);
       move_walker(current_walker, possible_directions);
-      ctx.strokeStyle = current_walker.colour;
+      ctx.strokeStyle = current_walker.color;
       ctx.lineWidth = current_walker.line_width;
       ctx.lineTo(current_walker.x_position, current_walker.y_position)
       ctx.stroke()