Change controls without entirely destroying existing code

This commit is contained in:
shoe 2025-03-21 00:41:58 +00:00
parent fe5b661858
commit 3c7ad70939

View File

@ -12,23 +12,17 @@ window.onload = function() {
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");
gui
.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"); var customContainer = document.getElementById("controls-container");
customContainer.append(gui.domElement); 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 = [
'#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D', '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
'#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
'#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC', '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
@ -41,30 +35,22 @@ var colorArray = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
]; ];
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,
} }
@ -117,7 +103,7 @@ function get_nearest_angle(goal, angle_list) {
} }
var possible_directions = gen_angle_list(controls.limit_angles); var possible_directions = gen_angle_list(4);
@ -148,7 +134,7 @@ function check_boundaries(canvas, walker) {
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++) {