From af68e1d499f433cfe9b197aaecb13edca04dddf1 Mon Sep 17 00:00:00 2001 From: Elizabeth Hunt Date: Fri, 26 Apr 2024 13:26:15 -0700 Subject: rainrainrain --- .DS_Store | Bin 0 -> 6148 bytes img/.DS_Store | Bin 0 -> 6148 bytes img/mkwsnyder.jpeg | Bin 0 -> 31445 bytes img/rains/arch.png | Bin 0 -> 15149 bytes img/rains/bmo.png | Bin 0 -> 111995 bytes img/rains/cat.gif | Bin 0 -> 13088 bytes img/rains/demi.png | Bin 0 -> 2170 bytes img/rains/dnd.png | Bin 0 -> 30225 bytes img/rains/eattherich.png | Bin 0 -> 88824 bytes img/rains/gloomhaven.png | Bin 0 -> 535658 bytes img/rains/iron_throne.png | Bin 0 -> 1122212 bytes img/rains/link.png | Bin 0 -> 242341 bytes img/rains/meddle.jpeg | Bin 0 -> 12869 bytes img/rains/moon.png | Bin 0 -> 391922 bytes img/rains/note.png | Bin 0 -> 21718 bytes img/rains/obsidian.png | Bin 0 -> 113820 bytes img/rains/outerwilds.png | Bin 0 -> 205408 bytes img/rains/piano.png | Bin 0 -> 61541 bytes img/rains/pirate.svg | 135 ++++++++++++++++++++++++++++++++++++++++++++++ img/rains/ror.png | Bin 0 -> 66051 bytes img/rains/smashball.svg | 7 +++ img/rains/ssa.png | Bin 0 -> 30564 bytes img/rains/svelte.png | Bin 0 -> 71789 bytes img/rains/usu.png | Bin 0 -> 39000 bytes index.html | 18 +++++++ scripts/script.js | 117 ++++++++++++++++++++++++++++++++++++++++ styles/styles.css | 25 +++++++++ 27 files changed, 302 insertions(+) create mode 100644 .DS_Store create mode 100644 img/.DS_Store create mode 100644 img/mkwsnyder.jpeg create mode 100644 img/rains/arch.png create mode 100644 img/rains/bmo.png create mode 100644 img/rains/cat.gif create mode 100644 img/rains/demi.png create mode 100644 img/rains/dnd.png create mode 100644 img/rains/eattherich.png create mode 100644 img/rains/gloomhaven.png create mode 100644 img/rains/iron_throne.png create mode 100644 img/rains/link.png create mode 100644 img/rains/meddle.jpeg create mode 100644 img/rains/moon.png create mode 100644 img/rains/note.png create mode 100644 img/rains/obsidian.png create mode 100644 img/rains/outerwilds.png create mode 100644 img/rains/piano.png create mode 100644 img/rains/pirate.svg create mode 100644 img/rains/ror.png create mode 100644 img/rains/smashball.svg create mode 100644 img/rains/ssa.png create mode 100644 img/rains/svelte.png create mode 100644 img/rains/usu.png create mode 100644 index.html create mode 100644 scripts/script.js create mode 100644 styles/styles.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..d009fcb Binary files /dev/null and b/.DS_Store differ diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 0000000..56e1902 Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/mkwsnyder.jpeg b/img/mkwsnyder.jpeg new file mode 100644 index 0000000..5d7a864 Binary files /dev/null and b/img/mkwsnyder.jpeg differ diff --git a/img/rains/arch.png b/img/rains/arch.png new file mode 100644 index 0000000..4881cd8 Binary files /dev/null and b/img/rains/arch.png differ diff --git a/img/rains/bmo.png b/img/rains/bmo.png new file mode 100644 index 0000000..0c513d2 Binary files /dev/null and b/img/rains/bmo.png differ diff --git a/img/rains/cat.gif b/img/rains/cat.gif new file mode 100644 index 0000000..5b56679 Binary files /dev/null and b/img/rains/cat.gif differ diff --git a/img/rains/demi.png b/img/rains/demi.png new file mode 100644 index 0000000..a58aff7 Binary files /dev/null and b/img/rains/demi.png differ diff --git a/img/rains/dnd.png b/img/rains/dnd.png new file mode 100644 index 0000000..6908377 Binary files /dev/null and b/img/rains/dnd.png differ diff --git a/img/rains/eattherich.png b/img/rains/eattherich.png new file mode 100644 index 0000000..f447e0d Binary files /dev/null and b/img/rains/eattherich.png differ diff --git a/img/rains/gloomhaven.png b/img/rains/gloomhaven.png new file mode 100644 index 0000000..9902784 Binary files /dev/null and b/img/rains/gloomhaven.png differ diff --git a/img/rains/iron_throne.png b/img/rains/iron_throne.png new file mode 100644 index 0000000..b8b4659 Binary files /dev/null and b/img/rains/iron_throne.png differ diff --git a/img/rains/link.png b/img/rains/link.png new file mode 100644 index 0000000..b5feaff Binary files /dev/null and b/img/rains/link.png differ diff --git a/img/rains/meddle.jpeg b/img/rains/meddle.jpeg new file mode 100644 index 0000000..f327612 Binary files /dev/null and b/img/rains/meddle.jpeg differ diff --git a/img/rains/moon.png b/img/rains/moon.png new file mode 100644 index 0000000..42b4eed Binary files /dev/null and b/img/rains/moon.png differ diff --git a/img/rains/note.png b/img/rains/note.png new file mode 100644 index 0000000..7c2a2fc Binary files /dev/null and b/img/rains/note.png differ diff --git a/img/rains/obsidian.png b/img/rains/obsidian.png new file mode 100644 index 0000000..559f53b Binary files /dev/null and b/img/rains/obsidian.png differ diff --git a/img/rains/outerwilds.png b/img/rains/outerwilds.png new file mode 100644 index 0000000..542c224 Binary files /dev/null and b/img/rains/outerwilds.png differ diff --git a/img/rains/piano.png b/img/rains/piano.png new file mode 100644 index 0000000..feedd2a Binary files /dev/null and b/img/rains/piano.png differ diff --git a/img/rains/pirate.svg b/img/rains/pirate.svg new file mode 100644 index 0000000..77845b8 --- /dev/null +++ b/img/rains/pirate.svg @@ -0,0 +1,135 @@ + + + + +Created by potrace 1.15, written by Peter Selinger 2001-2017 + + + + + + + + + + + + + + + + diff --git a/img/rains/ror.png b/img/rains/ror.png new file mode 100644 index 0000000..46266d7 Binary files /dev/null and b/img/rains/ror.png differ diff --git a/img/rains/smashball.svg b/img/rains/smashball.svg new file mode 100644 index 0000000..93d6993 --- /dev/null +++ b/img/rains/smashball.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/img/rains/ssa.png b/img/rains/ssa.png new file mode 100644 index 0000000..4a9abc3 Binary files /dev/null and b/img/rains/ssa.png differ diff --git a/img/rains/svelte.png b/img/rains/svelte.png new file mode 100644 index 0000000..1c38fd4 Binary files /dev/null and b/img/rains/svelte.png differ diff --git a/img/rains/usu.png b/img/rains/usu.png new file mode 100644 index 0000000..1b3e764 Binary files /dev/null and b/img/rains/usu.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..6293c0b --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + + + + + + +
+
+

the official rain fan page!!!

+ +
+
+ + + + diff --git a/scripts/script.js b/scripts/script.js new file mode 100644 index 0000000..b3efd73 --- /dev/null +++ b/scripts/script.js @@ -0,0 +1,117 @@ +const IMGS = [ + "/img/rains/arch.png", + "/img/rains/bmo.png", + "/img/rains/cat.gif", + "/img/rains/demi.png", + "/img/rains/dnd.png", + "/img/rains/eattherich.png", + "/img/rains/gloomhaven.png", + "/img/rains/iron_throne.png", + "/img/rains/link.png", + "/img/rains/meddle.jpeg", + "/img/rains/moon.png", + "/img/rains/note.png", + "/img/rains/obsidian.png", + "/img/rains/outerwilds.png", + "/img/rains/piano.png", + "/img/rains/pirate.svg", + "/img/rains/ror.png", + "/img/rains/smashball.svg", + "/img/rains/ssa.png", + "/img/rains/svelte.png", + "/img/rains/usu.png", +]; + +const DROPLETS = 8; +const DROPLET_WIDTH_RANGE = [80, 120]; +const DROPLET_DY_RANGE = [0.1, 0.4]; +const DROPLET_DTHETA_RANGE = [-0.25, 0.25]; +const DROPLET_INIT_THETA_RANGE = [-180, 180]; + +const makeDroplet = (src, width, x, y, theta, dtheta, dy) => { + const img = document.createElement("img"); + img.style.position = "absolute"; + img.style.width = `${width}px`; + img.src = src; + document.body.appendChild(img); + + return { + img, + width, + theta, + pos: { x, y }, + vel: { dy, dtheta }, + }; +}; + +const randBetween = (min, max) => Math.random() * (max - min) + min; + +const update = (droplets, dt, boundedY) => + droplets + .map((droplet) => { + return { + ...droplet, + pos: { ...droplet.pos, y: droplet.pos.y + droplet.vel.dy * dt }, + theta: droplet.theta + droplet.vel.dtheta * dt, + }; + }) + .map((droplet) => { + const { + pos: { y }, + img, + } = droplet; + if (y >= boundedY) { + document.body.removeChild(img); + return null; + } + return droplet; + }) + .filter((x) => x) + .map((droplet) => { + const { + img, + pos: { x, y }, + theta, + } = droplet; + + img.style.left = `${x}px`; + img.style.top = `${y}px`; + img.style.transform = `rotate(${theta}deg)`; + + return droplet; + }); + +const buildRandomDroplet = () => + makeDroplet( + IMGS[Math.floor(randBetween(0, IMGS.length))], + randBetween(...DROPLET_WIDTH_RANGE), + randBetween(0, window.innerWidth - DROPLET_WIDTH_RANGE[1]), + randBetween(-50, window.innerHeight / 8), + randBetween(...DROPLET_INIT_THETA_RANGE), + randBetween(...DROPLET_DTHETA_RANGE), + randBetween(...DROPLET_DY_RANGE), + ); + +window.onload = () => { + // cache 'em + IMGS.forEach((x) => { + ((img) => (img.src = x))(new Image()); + }); + + let droplets = Array(DROPLETS).fill().map(buildRandomDroplet); + + let lastTimestamp = performance.now(); + const next = (timestamp) => { + const dt = timestamp - lastTimestamp; + lastTimestamp = timestamp; + + droplets = update(droplets, dt, window.innerHeight); + + if (droplets.length != DROPLETS) { + droplets.push(buildRandomDroplet()); + } + + requestAnimationFrame(next); + }; + requestAnimationFrame(next); +}; diff --git a/styles/styles.css b/styles/styles.css new file mode 100644 index 0000000..9e33334 --- /dev/null +++ b/styles/styles.css @@ -0,0 +1,25 @@ +* { + margin: 0; + padding: 0; + overflow: hidden; +} + +html, body { + height: 100%; + width: 100%; + background-color: #282828; + color: #ebdbb2; +} + +.main { + display: flex; + justify-content: center; + align-items: center; + + height: 100%; + width: 100%; +} + +.content { + text-align:center; +} -- cgit v1.2.3-70-g09d2