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

Add new homepage content and reorder js file

Browse Source
This commit is contained in:
shoe 2025-03-22 03:55:29 +00:00
parent 7150be9dfb
commit eeff471c96
3 changed files with 73 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
index.html
View File

@ -1,21 +1,61 @@
<!doctype html> <!doctype html>
<html> <html>
<head>
<title>control the walker!</title>
<link rel="stylesheet" href="walkers.css">
</head>
<body>
<h1>this page is wildly in-progress</h1>
<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-create-walker">make a new guy</button> <head>
<button id="button-destroy-walker">kill one :(</button> <title>shoe says hi!</title>
<button id="button-reset-walkers">kill them all D:</button> <link rel="stylesheet" href="walkers.css">
</head>
<body>
<div id="canvas-container"> <div id="page-content">
<canvas id="walker-canvas"></canvas> <h1>this page wildly under construction</h1>
</div> <p>aka i am gonna be repeatedly redoing like everything</p>
</body>
<script src="walkers.js" walkers></script> <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>
<!-- this is the canvas that makes up the page background -->
<div id="canvas-container">
<canvas id="walker-canvas"></canvas>
</div>
</body>
<script src="walkers.js" walkers></script>
<script src="hidepage.js" hidepage></script>
</html> </html>

4
walkers.css
View File

@ -24,3 +24,7 @@ body {
height: 100%; height: 100%;
background: black; background: black;
} }
#page-content-hidden {
display:none;
}

25
walkers.js
View File

@ -1,20 +1,15 @@
/**************************************************************************** /***************************************************************************
* Buttons that interact with the UI * * Buttons that interact with the UI *
****************************************************************************/ ****************************************************************************/
// return a random update time. 25 to 175ms in increments of 50
function random_update_time() {
var speed = Math.floor(Math.random() * 4);
return (speed * 50) + 25;
}
// 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 "#ff7700", // orange
"#0033ff", // blue "#33ff00", // green, also from https://superuser.com/a/1206781
"#a553fc", // purple "#004cff", // blue
"#FF2E00", // red "#8500ff", // purple
"#ff2e00", // red
]; ];
var color_idx = 0; var color_idx = 0;
@ -86,6 +81,12 @@ Number.prototype.div = function(divisor) {
* Random walk implementation (movement functions) * * Random walk implementation (movement functions) *
****************************************************************************/ ****************************************************************************/
// return a random update time. 25 to 175ms in increments of 50
function random_update_time() {
var speed = Math.floor(Math.random() * 4);
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);