shoe/water
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Grid box follows mouse, not centered

Browse Source
This commit is contained in:
shoe 2025-12-13 17:45:03 +00:00
parent 0e351590eb
commit 55b652c47c
2 changed files with 29 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -16,7 +16,7 @@
<!-- this is the canvas that makes up the page background -->
<div id="canvas-container">
<canvas id="water-canvas"></canvas>
<canvas id="grid-canvas"></canvas>
</div>
</body>

172
water.js
View File

@ -1,68 +1,3 @@
/***************************************************************************
* Buttons that interact with the UI *
****************************************************************************/
// a rainbow-adjacent set of colors for the walkers to cycle through
var walker_colors = [
"#ffb000", // amber, from https://superuser.com/a/1206781
"#33ff00", // green, also from https://superuser.com/a/1206781
"#ff2e00", // red
"#ff7700", // orange
"#004cff", // blue
"#8500ff", // purple
];
// start with a random part of the sequence
var color_idx = 0;
// create a new walker with random position and color
function create_random_walker() {
// create random-param walker and add to the array
var my_row = Math.floor(Math.random() * n_rows);
var my_col = Math.floor(Math.random() * n_cols);
var my_color = walker_colors[color_idx];
var new_length = walkers.push({row: my_row, col: my_col, color: my_color});
// decide how fast this walker updates and push that to the interval array
var update_time = random_update_time();
var timer = setInterval((function() {
update_walker(walkers[new_length - 1]);
}), update_time);
walker_timers.push(timer);
// go to the next color
color_idx = (color_idx + 1).mod(walker_colors.length);
}
// kill the last walker created
function destroy_last_walker() {
var last_idx = walkers.length - 1;
var removed = walkers.splice(last_idx, 1)[0];
if (!removed) {
return;
}
draw_grid_square(removed.row, removed.col, "black");
// also stop its timer
var removed_timer = walker_timers.splice(last_idx, 1)[0];
clearInterval(removed_timer);
}
// kill all walkers, but not their trails.
function destroy_all_walkers() {
// delete all walkers, draw black where they used to be
var removed = walkers.splice(0, walkers.length);
for (var i = 0; i < removed.length; i++) {
draw_grid_square(removed[i].row, removed[i].col, "black");
}
// stop all timers as well
var removed_timers = walker_timers.splice(0, walker_timers.length);
for (var i = 0; i < removed_timers.length; i++) {
clearInterval(removed_timers[i]);
}
}
/****************************************************************************
* Functions JS doesn't want you to have, ig *
****************************************************************************/
@ -92,60 +27,23 @@ function random_update_time() {
}
// start up the functions that run FOREVER!!!
function init_walk() {
setInterval(update_trails, 200);
// read url params to see how many we should create, default to num colors.
// special case is because 0 == null and my brain doesn't wanna work good
var n_create;
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.has('n', "0")) {
n_create = 0;
} else {
n_create = Number(urlParams.get('nwalk')) || 3;
}
// create initial walkers of every color
for (var i = 0; i < n_create; i++) {
create_random_walker();
}
}
// check if the trails array has a position.
// return index if found, or null if not.
function trails_find_position(row, col) {
for (var i = 0; i < trails.length; i++) {
var t = trails[i];
if (t.row === row && t.col === col) {
return i;
}
}
return null;
function init() {
document.addEventListener('mousemove', follow_mouse)
//setInterval(epic_physics, 500);
}
// update and draw all trails in the array
function update_trails() {
// for all existing trails, make them darker
for (var i = 0; i < trails.length; i++) {
var darker = tweak_color_luminance(trails[i].color, -0.1);
trails[i].color = darker;
function follow_mouse(event) {
// get the mouse position
var mouse_x = event.clientX
var mouse_y = event.clientY
// delete any trails with 0 for first digit of RGB
// (think of them as near-black)
// e.g. #050500
if (darker[1] === "0" && darker[3] == "0" && darker[5] == "0") {
// draw black, just so we don't leave behind an almost-black square
draw_grid_square(trails[i].row, trails[i].col, "black");
// convert screen coordinates to grid coordinates
var grid_x = (mouse_x - grid_margin - offset_h).div(grid_size);
var grid_y = (mouse_y - grid_margin - offset_v).div(grid_size);
// delete the item from the array
trails.splice(i, 1);
}
}
// after all trails have been darkened/removed, draw the remaining ones
for (var i = 0; i < trails.length; i++) {
draw_grid_square(trails[i].row, trails[i].col, trails[i].color);
}
// draw a square there
draw_grid_square(grid_y, grid_x, 'white');
}
// update and draw all walkers in the array
@ -216,20 +114,19 @@ function fix_grid_size() {
canvas.height = window.innerHeight;
// update all the globals we're using too
n_rows = canvas.height.div(cell_size);
n_cols = canvas.width.div(cell_size);
offset_h = (canvas.width - (cell_size * n_cols)).div(2);
offset_v = (canvas.height - (cell_size * n_rows)).div(2);
n_rows = canvas.height.div(grid_size);
n_cols = canvas.width.div(grid_size);
offset_h = (canvas.width - (grid_size * n_cols)).div(2);
offset_v = (canvas.height - (grid_size * n_rows)).div(2);
}
// draw on the canvas a grid square of that color
function draw_grid_square(row, col, color) {
var margin = 4;
var pos_h = offset_h + (cell_size * col) + margin;
var pos_v = offset_v + (cell_size * row) + margin;
var pos_h = offset_h + (grid_size * col) + grid_margin;
var pos_v = offset_v + (grid_size * row) + grid_margin;
ctx.fillStyle = color;
ctx.fillRect(pos_h, pos_v, cell_size - margin, cell_size - margin);
ctx.fillRect(pos_h, pos_v, grid_size - grid_margin, grid_size - grid_margin);
}
/****************************************************************************
@ -239,7 +136,7 @@ function draw_grid_square(row, col, color) {
// "make sure to eat up your globals honey, they're good for you"
// find the canvas and set its initial size
var canvas = document.getElementById("walker-canvas")
var canvas = document.getElementById("grid-canvas")
var ctx = canvas.getContext('2d')
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
@ -247,27 +144,14 @@ canvas.height = window.innerHeight;
// set up a handler so the grid gets fixed whenever the window resizes
window.addEventListener('resize', fix_grid_size);
// find the UI buttons and give them click handlers to activate our functions
document
.getElementById("button-create-walker")
.addEventListener("click", create_random_walker);
document
.getElementById("button-destroy-walker")
.addEventListener("click", destroy_last_walker);
document
.getElementById("button-reset-walkers")
.addEventListener("click", destroy_all_walkers);
// compute the initial rows and columns
var cell_size = 22;
var n_rows = canvas.height.div(cell_size);
var n_cols = canvas.width.div(cell_size);
var offset_h = (canvas.width - (cell_size * n_cols)).div(2);
var offset_v = (canvas.height - (cell_size * n_rows)).div(2);
var grid_size = 22;
var grid_margin = 4;
var n_rows = canvas.height.div(grid_size);
var n_cols = canvas.width.div(grid_size);
var offset_h = (canvas.width - (grid_size * n_cols)).div(2);
var offset_v = (canvas.height - (grid_size * n_rows)).div(2);
// set start position of walker and start the random walk
var walkers = [];
var walker_timers = [];
var trails = []
init_walk();
// away we go!
init();