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>
<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>
<button id="button-destroy-walker">kill one :(</button>
<button id="button-reset-walkers">kill them all D:</button>
<head>
<title>shoe says hi!</title>
<link rel="stylesheet" href="walkers.css">
</head>
<body>
<div id="canvas-container">
<canvas id="walker-canvas"></canvas>
</div>
</body>
<script src="walkers.js" walkers></script>
<div id="page-content">
<h1>this page wildly under construction</h1>
<p>aka i am gonna be repeatedly redoing like everything</p>
<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>

4
walkers.css
View File

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

25
walkers.js
View File

@ -1,20 +1,15 @@
/****************************************************************************
/***************************************************************************
* 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
var walker_colors = [
"#FFB000", // amber, from https://superuser.com/a/1206781
"#33FF00", // green, also from https://superuser.com/a/1206781
"#0033ff", // blue
"#a553fc", // purple
"#FF2E00", // red
"#ffb000", // amber, from https://superuser.com/a/1206781
"#ff7700", // orange
"#33ff00", // green, also from https://superuser.com/a/1206781
"#004cff", // blue
"#8500ff", // purple
"#ff2e00", // red
];
var color_idx = 0;
@ -86,6 +81,12 @@ Number.prototype.div = function(divisor) {
* 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!!!
function init_walk() {
setInterval(update_trails, 200);