From eeff471c96c75cc78622fff81c943d08d5697679 Mon Sep 17 00:00:00 2001 From: shoe Date: Sat, 22 Mar 2025 03:55:29 +0000 Subject: [PATCH] Add new homepage content and reorder js file --- index.html | 72 +++++++++++++++++++++++++++++++++++++++++------------ walkers.css | 4 +++ walkers.js | 25 ++++++++++--------- 3 files changed, 73 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 0a332d9..48642d5 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,61 @@ - - control the walker! - - - -

this page is wildly in-progress

-

as in i am repeatedly breaking stuff all the time

-

code modified from https://jackmckew.dev/interactive-random-walkers-with-javascript.html

- - - + + shoe says hi! + + + -
- -
- - +
+

this page wildly under construction

+

aka i am gonna be repeatedly redoing like everything

+ +
+

hi, i'm shoe.

+

i hope you like this place!

+
+ +
+

about shoe

+
    +
  • they/them
    • +
  • i like sysadmin
    • +
  • TODO: I really need this section to not read like garbo
  • +
+
+ +
+

controls

+

mess with the random walkers

+
    +
    • +
    • +
    • +
+

if you want, you can the page to just watch the random walk

+
+ +
+

inspiration

+

gotta cite your sources >w<

+
    +
  • ~nebula's homepage is beautiful and convinced me to make a lot of empty space, including the right-aligned elements
    • +
  • Jack McKew's blogpost about random walkers in js was my starting point, even though mine looks nothing like theirs
    • +
+
+
+ +
+ +
+ + +
+ +
+ + + + diff --git a/walkers.css b/walkers.css index ea2287d..5c503b6 100644 --- a/walkers.css +++ b/walkers.css @@ -24,3 +24,7 @@ body { height: 100%; background: black; } + +#page-content-hidden { + display:none; +} diff --git a/walkers.js b/walkers.js index b0f18ff..3402103 100644 --- a/walkers.js +++ b/walkers.js @@ -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);