shoe/random-walkers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the walker loop around when hitting edges

Browse Source
This commit is contained in:
shoe 2025-03-21 02:05:09 +00:00
parent 3c7ad70939
commit 85b1025d16
1 changed files with 21 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
random-walkers.js
View File

@ -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()