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

Implement colors, and let the user kill a random walker

Browse Source
This commit is contained in:
shoe 2025-03-22 00:59:40 +00:00
parent e336a48fd2
commit c5876c87e1
2 changed files with 42 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -9,8 +9,9 @@
<p>as in i am repeatedly breaking stuff all the time</p>
<p>code modified from <a href="https://jackmckew.dev/interactive-random-walkers-with-javascript.html">https://jackmckew.dev/interactive-random-walkers-with-javascript.html</a></p>
<button id="button-new-walker">make a new one</button>
<button id="button-reset">kill them all :(</button>
<button id="button-create-walker">make a new guy</button>
<button id="button-destroy-walker">kill one :(</button>
<button id="button-reset-walkers">kill them all D:</button>
<div id="canvas-container">
<canvas id="walker-canvas"></canvas>

53
walkers.js
View File

@ -2,23 +2,43 @@
* Buttons that interact with the UI *
****************************************************************************/
// a rainbow-adjacent set of colors for the walkers to cycle through
var walker_colors = [
"#33FF00", // green, also from https://superuser.com/a/1206781
"#0033ff", // blue
"#a553fc", // purple
"#FF2E00", // red
"#FFB000", // amber, also from https://superuser.com/a/1206781. this is the default color used, so it is last in the array.
];
var color_idx = 0;
function create_new_walker() {
var my_row = Math.floor(Math.random() * n_rows);
var my_col = Math.floor(Math.random() * n_cols);
// TODO: CHOOSE COLOR, ONLY DO IT IN SEQUENCE FROM A LIST OF KNOWN-GOOD
// COLORS. THE SEQUENCE WILL BE FINE.
var my_color = "#FFB000";
var my_color = walker_colors[color_idx];
// TODO: ADD SPEED TO THIS WHOLE DEAL
walkers.push({row: my_row, col: my_col, color: my_color});
color_idx = (color_idx + 1).mod(walker_colors.length);
}
function reset() {
// kill all the walkers and trails
walkers.splice(0, walkers.length);
trails.splice(0, trails.length);
function destroy_random_walker() {
// destroy a random walker.
// we can't get the trail, that'll have to fade on its own
var choice = Math.floor(Math.random() * walkers.length);
var removed = walkers.splice(choice, 1);
// hide where the walker used to be
draw_grid_square(removed[0].row, removed[0].col, "black");
}
function destroy_all_walkers() {
// kill all the walkers, but not their trails -- i like the look better
var removed = walkers.splice(0, walkers.length);
// draw black everywhere on the canvas to hide the dead bodies D:
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < removed.length; i++) {
draw_grid_square(removed[i].row, removed[i].col, "black");
}
}
/****************************************************************************
@ -185,11 +205,16 @@ var ctx = canvas.getContext('2d')
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// find the UI buttons and give them click handlers to activate
var reset_btn = document.getElementById("button-reset");
var new_walker_btn = document.getElementById("button-new-walker");
reset_btn.addEventListener("click", reset);
new_walker_btn.addEventListener("click", create_new_walker);
// find the UI buttons and give them click handlers to activate our functions
document
.getElementById("button-create-walker")
.addEventListener("click", create_new_walker);
document
.getElementById("button-destroy-walker")
.addEventListener("click", destroy_random_walker);
document
.getElementById("button-reset-walkers")
.addEventListener("click", destroy_all_walkers);
// compute the initial rows and columns
var cell_size = 22;