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

Compare commits

base: shoe:eeff471c96c75cc78622fff81c943d08d5697679
Branches Tags
shoe:main
..
compare: shoe:fb01e550bdb52673bfd00fa5e14c70a4a3b9f3f6
Branches Tags
shoe:main

10 Commits
eeff471c96 ... fb01e550bd

Author SHA1 Message Date
shoe
fb01e550bd Surface level rename walkers -> water (I need a better grid framework) 2025-12-13 17:12:21 +00:00
shoe
f20aee872e Re-grow the grid and re-lower the default num of walkers 2025-03-23 02:32:29 +00:00
shoe
dcdf2e7c55 Fix walker number url detection for n = 0 2025-03-22 06:23:20 +00:00
shoe
53540ccb77 Accept URL parameters for hiding and number of walkers 2025-03-22 06:11:54 +00:00
shoe
e42ec34ce2 Add a 'hide more' button to hide the unhide button 2025-03-22 05:43:57 +00:00
shoe
dccdf1fb99 Strip down repo to only the actual code parts 2025-03-22 05:29:08 +00:00
shoe
387b839410 update button name 2025-03-22 04:44:26 +00:00
shoe
528ef8f5bd Make the grid smaller and the walkers faster 2025-03-22 04:43:17 +00:00
shoe
1bfcf5ac27 Add other dir contents and add rest to gitignore 2025-03-22 03:57:35 +00:00
shoe
2b8fdf669d add js to hide/show page contents 2025-03-22 03:56:35 +00:00
4 changed files with 44 additions and 61 deletions
Show Stats Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1 +1,4 @@
*.swp
eng240-twine
feels

49
index.html
View File

@ -2,60 +2,23 @@
<html>
<head>
<title>shoe says hi!</title>
<link rel="stylesheet" href="walkers.css">
<title>water?</title>
<link rel="stylesheet" href="water.css">
</head>
<body>
<div id="page-content">
<h1>this page wildly under construction</h1>
<p>aka i am gonna be repeatedly redoing like everything</p>
<h1>water time</h1>
<div id="hi">
<h1>hi, i'm shoe.</h1>
<p>i hope you like this place!</p>
</div>
move the mouse to gaming
<div id="about-shoe">
<h1>about shoe</h1>
<ul>
<li>they/them</li>
<li>i like sysadmin</li>
<li>TODO: I really need this section to not read like garbo<li>
</ul>
</div>
<div id="controls">
<h1>controls</h1>
<p>mess with the random walkers</p>
<ul>
<li><button id="button-create-walker">create one</button></li>
<li><button id="button-destroy-walker">kill one :(</button></li>
<li><button id="button-reset-walkers">kill them all D:</button></li>
</ul>
<p>if you want, you can <button id="button-hide-page">hide</button> the page to just watch the random walk</p>
</div>
<div id="inspiration">
<h1>inspiration</h1>
<p>gotta cite your sources >w<</p>
<ul>
<li><a href="/~nebula"> ~nebula's homepage</a> is beautiful and convinced me to make a lot of empty space, including the right-aligned elements</li>
<li><a href="https://jackmckew.dev/interactive-random-walkers-with-javascript.html" target="_blank">Jack McKew's blogpost</a> about random walkers in js was my starting point, even though mine looks nothing like theirs</li>
</ul>
</div>
</div>
<div id="page-content-hidden">
<button id="button-unhide-page">unhide</button>
</div>
<!-- this is the canvas that makes up the page background -->
<div id="canvas-container">
<canvas id="walker-canvas"></canvas>
<canvas id="water-canvas"></canvas>
</div>
</body>
<script src="walkers.js" walkers></script>
<script src="hidepage.js" hidepage></script>
<script src="water.js" water></script>
</html>

0
walkers.css → water.css
View File

53
walkers.js → water.js
View File

@ -5,16 +5,17 @@
// a rainbow-adjacent set of colors for the walkers to cycle through
var walker_colors = [
"#ffb000", // amber, from https://superuser.com/a/1206781
"#ff7700", // orange
"#33ff00", // green, also from https://superuser.com/a/1206781
"#ff2e00", // red
"#ff7700", // orange
"#004cff", // blue
"#8500ff", // purple
"#ff2e00", // red
];
// start with a random part of the sequence
var color_idx = 0;
// create a new walker with random position and color
function create_new_walker() {
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);
@ -32,15 +33,18 @@ function create_new_walker() {
color_idx = (color_idx + 1).mod(walker_colors.length);
}
// choose a random walker to kill. does not kill the trail.
function destroy_random_walker() {
// choose a random walker to destroy, draw black over its location.
var choice = Math.floor(Math.random() * walkers.length);
var removed = walkers.splice(choice, 1)[0];
// 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(choice, 1)[0];
var removed_timer = walker_timers.splice(last_idx, 1)[0];
clearInterval(removed_timer);
}
@ -81,18 +85,30 @@ Number.prototype.div = function(divisor) {
* Random walk implementation (movement functions) *
****************************************************************************/
// return a random update time. 25 to 175ms in increments of 50
// return a random update time. 30 to 210ms in increments of 20.
function random_update_time() {
var speed = Math.floor(Math.random() * 4);
return (speed * 50) + 25;
var speed = Math.floor(Math.random() * 7);
return (speed * 30) + 30;
}
// start up the functions that run FOREVER!!!
function init_walk() {
setInterval(update_trails, 200);
// create an initial walker. also creates its timer with setInterval.
create_new_walker();
// 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.
@ -208,12 +224,12 @@ function fix_grid_size() {
// draw on the canvas a grid square of that color
function draw_grid_square(row, col, color) {
var margin = 2;
var margin = 4;
var pos_h = offset_h + (cell_size * col) + margin;
var pos_v = offset_v + (cell_size * row) + margin;
ctx.fillStyle = color;
ctx.fillRect(pos_h, pos_v, cell_size - (2*margin), cell_size - (2*margin));
ctx.fillRect(pos_h, pos_v, cell_size - margin, cell_size - margin);
}
/****************************************************************************
@ -234,10 +250,10 @@ 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_new_walker);
.addEventListener("click", create_random_walker);
document
.getElementById("button-destroy-walker")
.addEventListener("click", destroy_random_walker);
.addEventListener("click", destroy_last_walker);
document
.getElementById("button-reset-walkers")
.addEventListener("click", destroy_all_walkers);
@ -254,3 +270,4 @@ var walkers = [];
var walker_timers = [];
var trails = []
init_walk();