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

Compare commits

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

No commits in common. "fb01e550bdb52673bfd00fa5e14c70a4a3b9f3f6" and "eeff471c96c75cc78622fff81c943d08d5697679" have entirely different histories.
fb01e550bd ... eeff471c96

4 changed files with 61 additions and 44 deletions
Show Stats Expand all files Collapse all files

3
.gitignore vendored
View File

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

49
index.html
View File

@ -2,23 +2,60 @@
<html> <html>
<head> <head>
<title>water?</title> <title>shoe says hi!</title>
<link rel="stylesheet" href="water.css"> <link rel="stylesheet" href="walkers.css">
</head> </head>
<body> <body>
<div id="page-content"> <div id="page-content">
<h1>water time</h1> <h1>this page wildly under construction</h1>
<p>aka i am gonna be repeatedly redoing like everything</p>
move the mouse to gaming <div id="hi">
<h1>hi, i'm shoe.</h1>
<p>i hope you like this place!</p>
</div>
<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> </div>
<!-- this is the canvas that makes up the page background --> <!-- this is the canvas that makes up the page background -->
<div id="canvas-container"> <div id="canvas-container">
<canvas id="water-canvas"></canvas> <canvas id="walker-canvas"></canvas>
</div> </div>
</body> </body>
<script src="water.js" water></script> <script src="walkers.js" walkers></script>
<script src="hidepage.js" hidepage></script>
</html> </html>

0
water.css → walkers.css
View File

53
water.js → walkers.js
View File

@ -5,17 +5,16 @@
// a rainbow-adjacent set of colors for the walkers to cycle through // a rainbow-adjacent set of colors for the walkers to cycle through
var walker_colors = [ var walker_colors = [
"#ffb000", // amber, from https://superuser.com/a/1206781 "#ffb000", // amber, from https://superuser.com/a/1206781
"#33ff00", // green, also from https://superuser.com/a/1206781
"#ff2e00", // red
"#ff7700", // orange "#ff7700", // orange
"#33ff00", // green, also from https://superuser.com/a/1206781
"#004cff", // blue "#004cff", // blue
"#8500ff", // purple "#8500ff", // purple
"#ff2e00", // red
]; ];
// start with a random part of the sequence
var color_idx = 0; var color_idx = 0;
// create a new walker with random position and color // create a new walker with random position and color
function create_random_walker() { function create_new_walker() {
// create random-param walker and add to the array // create random-param walker and add to the array
var my_row = Math.floor(Math.random() * n_rows); var my_row = Math.floor(Math.random() * n_rows);
var my_col = Math.floor(Math.random() * n_cols); var my_col = Math.floor(Math.random() * n_cols);
@ -33,18 +32,15 @@ function create_random_walker() {
color_idx = (color_idx + 1).mod(walker_colors.length); color_idx = (color_idx + 1).mod(walker_colors.length);
} }
// kill the last walker created // choose a random walker to kill. does not kill the trail.
function destroy_last_walker() { function destroy_random_walker() {
var last_idx = walkers.length - 1; // choose a random walker to destroy, draw black over its location.
var removed = walkers.splice(last_idx, 1)[0]; var choice = Math.floor(Math.random() * walkers.length);
if (!removed) { var removed = walkers.splice(choice, 1)[0];
return;
}
draw_grid_square(removed.row, removed.col, "black"); draw_grid_square(removed.row, removed.col, "black");
// also stop its timer // also stop its timer
var removed_timer = walker_timers.splice(last_idx, 1)[0]; var removed_timer = walker_timers.splice(choice, 1)[0];
clearInterval(removed_timer); clearInterval(removed_timer);
} }
@ -85,30 +81,18 @@ Number.prototype.div = function(divisor) {
* Random walk implementation (movement functions) * * Random walk implementation (movement functions) *
****************************************************************************/ ****************************************************************************/
// return a random update time. 30 to 210ms in increments of 20. // return a random update time. 25 to 175ms in increments of 50
function random_update_time() { function random_update_time() {
var speed = Math.floor(Math.random() * 7); var speed = Math.floor(Math.random() * 4);
return (speed * 30) + 30; return (speed * 50) + 25;
} }
// start up the functions that run FOREVER!!! // start up the functions that run FOREVER!!!
function init_walk() { function init_walk() {
setInterval(update_trails, 200); setInterval(update_trails, 200);
// read url params to see how many we should create, default to num colors. // create an initial walker. also creates its timer with setInterval.
// special case is because 0 == null and my brain doesn't wanna work good create_new_walker();
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. // check if the trails array has a position.
@ -224,12 +208,12 @@ function fix_grid_size() {
// draw on the canvas a grid square of that color // draw on the canvas a grid square of that color
function draw_grid_square(row, col, color) { function draw_grid_square(row, col, color) {
var margin = 4; var margin = 2;
var pos_h = offset_h + (cell_size * col) + margin; var pos_h = offset_h + (cell_size * col) + margin;
var pos_v = offset_v + (cell_size * row) + margin; var pos_v = offset_v + (cell_size * row) + margin;
ctx.fillStyle = color; ctx.fillStyle = color;
ctx.fillRect(pos_h, pos_v, cell_size - margin, cell_size - margin); ctx.fillRect(pos_h, pos_v, cell_size - (2*margin), cell_size - (2*margin));
} }
/**************************************************************************** /****************************************************************************
@ -250,10 +234,10 @@ window.addEventListener('resize', fix_grid_size);
// find the UI buttons and give them click handlers to activate our functions // find the UI buttons and give them click handlers to activate our functions
document document
.getElementById("button-create-walker") .getElementById("button-create-walker")
.addEventListener("click", create_random_walker); .addEventListener("click", create_new_walker);
document document
.getElementById("button-destroy-walker") .getElementById("button-destroy-walker")
.addEventListener("click", destroy_last_walker); .addEventListener("click", destroy_random_walker);
document document
.getElementById("button-reset-walkers") .getElementById("button-reset-walkers")
.addEventListener("click", destroy_all_walkers); .addEventListener("click", destroy_all_walkers);
@ -270,4 +254,3 @@ var walkers = [];
var walker_timers = []; var walker_timers = [];
var trails = [] var trails = []
init_walk(); init_walk();