commit af68e1d499f433cfe9b197aaecb13edca04dddf1 Author: Elizabeth Hunt Date: Fri Apr 26 13:26:15 2024 -0700 rainrainrain 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 @@ + + + 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; +}