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

Change controls without entirely destroying existing code

Browse Source
This commit is contained in:
shoe 2025-03-21 00:41:58 +00:00
parent fe5b661858
commit 3c7ad70939
1 changed files with 104 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

222
random-walkers.js
View File

@ -1,176 +1,162 @@
window.onload = function() { window.onload = function() {
var gui = new dat.GUI({ var gui = new dat.GUI({
closed: false, closed: false,
remembered: { remembered: {
undefined: { undefined: {
"0": {}, "0": {},
}, },
}, },
folders: {}, folders: {},
load: JSON, load: JSON,
width: 400, width: 400,
autoPlace: false, autoPlace: false,
}); });
gui.add(controls, "speed", 1, 10).name("Speed To Move"); gui.add(controls, "step_time", 200, 2000).name("step time (ms)").step(1);
gui.add(controls, "line_width", 1, 10).name("Line Width"); 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.add(controls, "reoccurance_rate", 0, 8).name("Reoccurance Rate"); var customContainer = document.getElementById("controls-container");
gui customContainer.append(gui.domElement);
.add(controls, "walker_count", 1, 50)
.name("Number of Walkers").step(1);
gui.add(controls, "limit_angles", 3, 360).name("Limit Number of Directions").step(1);
gui.add(controls, "restart_button").name("Click To Restart");
var customContainer = document.getElementById("controls-container");
customContainer.append(gui.domElement);
}; };
//colorArray source: https://gist.github.com/mucar/3898821 // colorArray source: https://gist.github.com/mucar/3898821
var colorArray = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', var colorArray = [
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D', '#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
'#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
'#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC', '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
'#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
'#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399', '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
'#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
'#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933', '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
'#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
'#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF' '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
'#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'
]; ];
var controls = new(function() { var controls = new(function() {
this.speed = 5; this.step_time = 500;
this.line_width = 1; this.fadeout = 10;
this.walker_count = 5; this.color = 1;
this.limit_angles = 4;
this.time_to_recover = 4;
this.restart_button = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
init_walk();
}
})(); })();
function init_walk() { function init_walk() {
// Create array of walkers with set parameters, start walkers in center of canvas // Create array of walkers with set parameters, start walkers in center of canvas
walker_array = [] walker_array = []
for (var i = 0; i < controls.walker_count; i++) { for (var i = 0; i < 1; i++) {
var walker = { var walker = {
x_position: canvas.width / 2, x_position: canvas.width / 2,
y_position: canvas.height / 2, y_position: canvas.height / 2,
line_width: controls.line_width, line_width: 1,
colour: colorArray[i], colour: colorArray[i],
speed: controls.speed, speed: 5,
angle: Math.random() * 360, angle: Math.random() * 360,
halt: false, halt: false,
}
walker.x_velocity = walker.speed * Math.cos(walker.angle)
walker.y_velocity = walker.speed * Math.sin(walker.angle)
walker_array.push(walker)
} }
setInterval(paint_canvas, 20); walker.x_velocity = walker.speed * Math.cos(walker.angle)
walker.y_velocity = walker.speed * Math.sin(walker.angle)
walker_array.push(walker)
}
setInterval(paint_canvas, 20);
} }
function degrees_to_radians(degrees) { function degrees_to_radians(degrees) {
var pi = Math.PI; var pi = Math.PI;
return degrees * (pi / 180); return degrees * (pi / 180);
} }
function radians_to_degrees(radians) { function radians_to_degrees(radians) {
var pi = Math.PI; var pi = Math.PI;
return radians * (180 / pi); return radians * (180 / pi);
} }
function gen_angle_list(number_of_groups) { function gen_angle_list(number_of_groups) {
/* Generate array of possible angles from limitation /* 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] 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 Including 0 & 360 is to give the walker equal chance to turn around and stay in the canvas
*/ */
var angle_list = [] var angle_list = []
var initial_angle = 360 / number_of_groups; var initial_angle = 360 / number_of_groups;
for (var i = 0; i < number_of_groups + 1; i++) { for (var i = 0; i < number_of_groups + 1; i++) {
angle_list.push(initial_angle * i); angle_list.push(initial_angle * i);
} }
return angle_list return angle_list
} }
function get_nearest_angle(goal, angle_list) { function get_nearest_angle(goal, angle_list) {
// Source: https://stackoverflow.com/questions/8584902/get-closest-number-out-of-array // Source: https://stackoverflow.com/questions/8584902/get-closest-number-out-of-array
// Find nearest angle in possible direction array from new random angle // Find nearest angle in possible direction array from new random angle
var closest = angle_list.reduce(function(prev, curr) { var closest = angle_list.reduce(function(prev, curr) {
return (Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev); return (Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev);
}); });
return closest return closest
} }
var possible_directions = gen_angle_list(controls.limit_angles); var possible_directions = gen_angle_list(4);
function move_walker(walker, possible_directions) { function move_walker(walker, possible_directions) {
// Update new random direction & update velocity of walker // Update new random direction & update velocity of walker
var new_angle = Math.random() * 360 var new_angle = Math.random() * 360
walker.x_position += walker.x_velocity walker.x_position += walker.x_velocity
walker.y_position += walker.y_velocity walker.y_position += walker.y_velocity
walker.angle = degrees_to_radians(get_nearest_angle(new_angle, possible_directions)) walker.angle = degrees_to_radians(get_nearest_angle(new_angle, possible_directions))
walker.x_velocity = walker.speed * Math.cos(walker.angle) walker.x_velocity = walker.speed * Math.cos(walker.angle)
walker.y_velocity = walker.speed * Math.sin(walker.angle) walker.y_velocity = walker.speed * Math.sin(walker.angle)
} }
function check_boundaries(canvas, walker) { function check_boundaries(canvas, walker) {
// Checks if walker has collided with walls and stops 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) { if (walker.x_position >= canvas.width - walker.line_width || walker.x_position <= walker.line_width) {
walker.x_velocity = 0; walker.x_velocity = 0;
walker.y_velocity = 0; walker.y_velocity = 0;
walker.halt = true walker.halt = true
} }
if (walker.y_position >= canvas.height - walker.line_width || walker.y_position <= walker.line_width) { if (walker.y_position >= canvas.height - walker.line_width || walker.y_position <= walker.line_width) {
walker.x_velocity = 0 walker.x_velocity = 0
walker.y_velocity = 0 walker.y_velocity = 0
walker.halt = true; walker.halt = true;
} }
} }
function paint_canvas() { function paint_canvas() {
// Regenerate possible angle list // Regenerate possible angle list
possible_directions = gen_angle_list(controls.limit_angles) possible_directions = gen_angle_list(4)
// Loop through all walkers, moving & painting accordingly // Loop through all walkers, moving & painting accordingly
for (var i = 0; i < walker_array.length; i++) { for (var i = 0; i < walker_array.length; i++) {
current_walker = walker_array[i]; current_walker = walker_array[i];
// If walker hasn't hit the walls yet // If walker hasn't hit the walls yet
if (!current_walker.halt) { if (!current_walker.halt) {
var prev_x = current_walker.x_position var prev_x = current_walker.x_position
var prev_y = current_walker.y_position var prev_y = current_walker.y_position
ctx.beginPath() ctx.beginPath()
ctx.moveTo(prev_x, prev_y) ctx.moveTo(prev_x, prev_y)
check_boundaries(canvas, current_walker); check_boundaries(canvas, current_walker);
move_walker(current_walker, possible_directions); move_walker(current_walker, possible_directions);
ctx.strokeStyle = current_walker.colour; ctx.strokeStyle = current_walker.colour;
ctx.lineWidth = current_walker.line_width; ctx.lineWidth = current_walker.line_width;
ctx.lineTo(current_walker.x_position, current_walker.y_position) ctx.lineTo(current_walker.x_position, current_walker.y_position)
ctx.stroke() ctx.stroke()
ctx.closePath(); ctx.closePath();
}
} }
}
} }