rainrainrain

img/rains/pirate.svg

@@ -0,0 +1,135 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1280.000000pt" height="959.000000pt" viewBox="0 0 1280.000000 959.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,959.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M6120 9579 c-494 -40 -925 -180 -1235 -399 -49 -35 -133 -107 -186
+-160 -160 -158 -227 -277 -309 -544 -28 -93 -78 -237 -110 -320 -65 -171 -83
+-247 -101 -426 -19 -198 1 -854 31 -1018 30 -165 152 -292 214 -223 35 38 39
+82 41 411 2 412 14 483 134 787 76 192 85 225 116 428 33 221 65 337 124 460
+41 85 137 232 146 223 2 -2 -16 -43 -40 -93 -47 -99 -105 -264 -136 -390 -13
+-53 -23 -140 -28 -255 l-8 -176 -56 -120 c-102 -220 -136 -323 -157 -483 -13
+-89 -12 -149 6 -607 7 -160 7 -161 -21 -222 -30 -68 -88 -128 -154 -161 -78
+-40 -93 -101 -53 -213 42 -118 153 -270 238 -326 67 -45 116 -43 252 9 283
+109 348 109 441 3 42 -47 57 -88 82 -213 43 -222 80 -305 173 -396 l62 -60
+-38 -50 c-56 -73 -98 -162 -98 -206 0 -49 30 -71 105 -77 47 -4 57 -1 79 21
+30 31 31 38 7 182 -10 61 -18 111 -17 112 1 2 29 -2 62 -8 32 -6 69 -13 81
+-15 l22 -4 -30 -81 c-16 -45 -32 -107 -36 -140 -6 -57 -5 -59 31 -95 l36 -36
+88 4 c127 6 152 29 152 136 0 43 -8 73 -30 120 -17 35 -30 66 -30 68 0 2 41 4
+90 4 50 0 90 -3 90 -6 0 -4 -8 -21 -19 -38 -21 -35 -41 -138 -41 -215 0 -46 3
+-53 26 -61 37 -14 194 -12 224 3 19 9 26 22 28 50 4 52 -24 184 -48 225 -11
+18 -20 35 -20 38 0 2 50 4 111 4 l111 0 -30 -34 c-22 -25 -33 -51 -41 -98 -15
+-87 -14 -163 2 -177 29 -24 115 -35 180 -23 78 14 97 35 90 94 -9 78 -34 172
+-53 205 l-18 31 76 7 c42 3 98 8 124 11 l47 6 -15 -49 c-8 -26 -17 -88 -21
+-138 -5 -82 -4 -92 15 -108 46 -41 182 -25 231 27 33 35 31 102 -4 186 -16 36
+-32 85 -36 108 l-9 44 122 129 c158 167 173 192 203 324 34 148 65 194 160
+236 71 32 139 29 260 -12 127 -42 245 -47 310 -12 156 82 272 394 200 534 -18
+35 -52 58 -136 92 -80 34 -133 76 -159 128 -17 32 -20 59 -20 166 -1 246 -15
+391 -45 473 -34 95 -39 114 -31 143 6 25 43 47 80 47 50 0 51 -9 51 -364 1
+-357 5 -393 51 -440 96 -95 208 62 298 420 37 147 49 284 43 468 -6 176 -21
+261 -82 461 -20 66 -54 182 -76 257 -91 320 -252 596 -498 850 -308 319 -554
+459 -926 527 -210 39 -493 50 -745 30z m-672 -2199 c245 -27 411 -99 464 -204
+45 -88 33 -316 -23 -432 -63 -133 -390 -395 -542 -435 -38 -11 -56 -11 -94 -1
+-100 27 -217 136 -276 255 -31 64 -64 217 -78 367 -26 266 39 403 213 446 66
+15 209 17 336 4z m1894 -25 c128 -32 240 -110 284 -201 26 -54 27 -57 21 -207
+-7 -191 -39 -405 -69 -458 -48 -86 -190 -133 -332 -109 -195 32 -521 292 -614
+490 -34 73 -43 208 -18 275 65 170 444 279 728 210z m-1077 -631 c24 -10 92
+-112 184 -277 151 -271 190 -371 198 -517 4 -81 2 -103 -16 -150 -26 -69 -74
+-125 -125 -145 l-38 -16 -37 39 c-20 21 -64 86 -98 143 -76 128 -94 146 -130
+133 -19 -6 -39 -31 -68 -86 -51 -96 -71 -118 -105 -118 -69 0 -88 103 -47 255
+57 211 87 326 110 425 29 126 79 249 117 290 31 33 31 33 55 24z"/>
+<path d="M18 8178 c-21 -37 -17 -399 5 -512 75 -375 326 -896 710 -1471 462
+-692 1160 -1420 2031 -2118 790 -635 1483 -1077 2391 -1527 757 -375 1429
+-658 2174 -916 472 -164 1326 -434 1371 -434 9 0 11 31 8 138 -4 109 -9 148
+-26 193 -28 71 -94 139 -173 179 -94 48 -661 249 -1185 421 -648 212 -1044
+377 -1704 710 -1142 575 -1995 1127 -2436 1575 -124 127 -226 264 -196 264 4
+0 57 -43 117 -96 476 -416 1004 -793 1725 -1229 519 -314 972 -538 1575 -778
+357 -142 809 -300 1751 -613 282 -94 429 -118 529 -89 146 42 290 136 314 205
+10 29 9 30 -32 40 -716 188 -1569 488 -2454 864 -1406 598 -2238 1066 -3278
+1845 -537 401 -941 749 -1403 1205 -310 307 -491 505 -813 891 -417 500 -733
+913 -855 1121 -89 151 -119 179 -146 132z"/>
+<path d="M12716 8169 c-15 -17 -49 -70 -78 -118 -157 -266 -747 -1010 -1221
+-1539 -253 -283 -679 -699 -1027 -1003 -612 -534 -1446 -1137 -2125 -1534
+-452 -265 -1109 -597 -1650 -835 -66 -29 -122 -54 -124 -56 -5 -4 183 -93 369
+-176 l135 -59 240 120 c412 206 844 461 1365 806 467 309 787 551 1138 860 28
+26 52 43 52 38 0 -18 -59 -98 -127 -174 -393 -438 -1226 -994 -2353 -1573
+-201 -103 -222 -116 -200 -124 193 -73 359 -133 461 -167 l127 -43 218 115
+c764 402 1350 780 2003 1293 462 364 752 619 1137 1004 286 287 403 414 601
+653 541 652 1006 1479 1113 1978 28 130 39 458 18 520 -17 50 -38 55 -72 14z
+m-386 -1112 c0 -2 -11 -36 -25 -77 -48 -142 -197 -401 -378 -660 -375 -536
+-997 -1214 -1307 -1426 -38 -26 -73 -44 -77 -41 -4 4 131 146 298 315 397 400
+556 575 804 887 253 318 448 606 620 918 27 48 52 87 57 87 4 0 8 -1 8 -3z"/>
+<path d="M7722 5658 c-55 -12 -101 -57 -180 -177 -99 -150 -140 -288 -182
+-606 -37 -284 -65 -363 -159 -446 -49 -43 -175 -119 -198 -119 -6 0 -2 24 8
+53 22 63 25 160 5 176 -7 6 -39 16 -70 22 -73 15 -128 -5 -185 -66 -54 -58
+-53 -89 4 -227 6 -16 -1 -18 -80 -18 -79 0 -86 2 -79 18 16 36 43 148 43 180
+1 49 -13 68 -64 88 -54 20 -173 14 -211 -11 -22 -14 -24 -22 -24 -88 0 -39 7
+-97 15 -127 8 -30 15 -58 15 -62 0 -5 -41 -8 -90 -8 l-90 0 21 43 c29 57 49
+132 49 189 0 72 -19 81 -165 76 -103 -3 -118 -5 -131 -23 -24 -32 -6 -144 41
+-267 6 -15 -2 -16 -87 -11 -51 3 -95 7 -96 9 -2 1 6 28 17 60 12 31 25 92 28
+134 5 69 4 79 -15 98 -41 41 -195 41 -248 0 -26 -21 -26 -23 -21 -107 3 -47 8
+-96 12 -108 l7 -23 -54 19 c-89 31 -133 57 -181 111 -61 68 -83 131 -102 296
+-9 77 -20 159 -26 184 -16 74 -149 471 -174 520 -74 143 -165 191 -266 140
+-92 -48 -100 -118 -33 -288 93 -232 113 -362 96 -620 -19 -296 1 -339 236
+-513 105 -77 183 -148 332 -299 125 -126 211 -206 240 -221 61 -31 172 -35
+374 -15 212 21 329 20 521 -5 188 -24 283 -21 351 12 56 27 126 94 226 219 94
+117 152 173 293 282 108 84 167 145 184 190 5 13 11 68 15 123 15 212 30 291
+119 615 55 201 96 397 104 501 5 69 4 78 -13 87 -32 17 -86 21 -132 10z"/>
+<path d="M2495 2846 c-130 -32 -224 -105 -277 -215 -28 -58 -33 -79 -36 -167
+-7 -161 26 -269 108 -358 59 -64 134 -97 235 -103 138 -9 206 34 257 163 33
+80 56 83 129 16 83 -76 238 -347 352 -613 65 -151 103 -277 222 -724 128 -483
+153 -545 274 -666 133 -133 279 -186 487 -176 230 11 364 82 410 219 32 97 14
+290 -36 387 -59 117 -242 168 -349 98 -29 -19 -48 -44 -71 -92 -17 -36 -38
+-65 -46 -65 -38 0 -178 186 -208 278 -35 107 -49 233 -50 452 l-1 215 33 66
+c17 37 57 94 87 128 30 34 55 66 55 71 0 5 -17 12 -37 15 -198 30 -278 59
+-342 125 -21 22 -78 118 -136 228 -116 223 -192 334 -312 455 -141 142 -288
+228 -452 263 -80 17 -228 17 -296 0z"/>
+<path d="M9924 2845 c-179 -40 -357 -156 -503 -329 -91 -109 -134 -175 -225
+-345 -128 -239 -152 -263 -360 -366 -66 -33 -122 -65 -123 -70 -2 -6 19 -41
+46 -78 27 -37 60 -98 73 -135 21 -60 23 -84 22 -227 -3 -339 -66 -544 -217
+-703 -58 -61 -63 -60 -97 12 -52 110 -111 145 -225 133 -101 -10 -183 -76
+-218 -175 -24 -66 -38 -207 -27 -280 19 -138 105 -222 270 -263 74 -18 300
+-18 365 0 179 50 339 194 410 370 13 31 49 151 79 267 147 550 170 633 211
+752 75 221 226 527 347 705 41 60 108 117 138 117 23 0 32 -13 59 -82 43 -109
+123 -154 256 -146 86 6 148 32 210 89 91 84 130 201 123 370 -3 86 -8 114 -30
+161 -52 113 -152 193 -279 223 -78 18 -222 18 -305 0z"/>
+<path d="M4610 2386 c-234 -78 -519 -170 -635 -205 -115 -36 -214 -68 -219
+-72 -15 -13 15 -70 62 -121 60 -65 127 -89 260 -96 113 -5 203 6 357 44 147
+37 483 143 803 252 250 86 313 112 270 112 -16 0 -335 156 -406 198 -29 18
+-56 32 -60 31 -4 0 -198 -65 -432 -143z"/>
+<path d="M5220 2068 c-256 -88 -557 -191 -670 -230 -333 -114 -431 -171 -484
+-281 -37 -76 -57 -240 -40 -326 8 -40 -26 -48 439 95 586 181 1133 368 1585
+544 102 40 193 75 204 79 13 5 -24 25 -140 76 -88 37 -220 98 -294 135 l-135
+67 -465 -159z"/>
+<path d="M2330 1819 c-82 -23 -99 -89 -56 -215 29 -86 47 -123 99 -197 22 -31
+38 -60 35 -63 -12 -11 -87 36 -121 76 -19 23 -44 65 -55 93 -11 29 -32 85 -47
+125 -15 40 -38 86 -51 102 -38 44 -104 65 -204 64 -177 -2 -210 -66 -156 -304
+49 -212 93 -306 191 -406 93 -93 131 -111 275 -124 237 -21 930 -4 989 23 96
+45 83 265 -28 492 -91 185 -191 315 -256 331 -14 4 -49 4 -77 2 -134 -13 -130
+-148 10 -355 34 -51 59 -93 54 -93 -16 0 -86 55 -121 95 -51 59 -87 120 -117
+199 -35 92 -70 129 -143 150 -63 17 -166 20 -221 5z"/>
+<path d="M10160 1810 c-66 -22 -101 -60 -124 -133 -26 -83 -73 -154 -149 -228
+-39 -38 -74 -69 -79 -69 -4 0 10 26 32 58 84 124 125 250 106 326 -14 58 -127
+75 -202 31 -73 -43 -210 -260 -263 -416 -58 -171 -62 -305 -11 -362 24 -27 34
+-31 116 -38 168 -16 751 -22 884 -10 152 14 189 30 281 120 83 83 138 191 180
+357 56 223 48 308 -30 342 -57 25 -205 21 -258 -6 -66 -34 -72 -45 -149 -255
+-25 -69 -128 -177 -168 -177 -3 0 12 28 34 63 58 92 110 235 110 300 0 43 -5
+58 -22 74 -49 45 -191 57 -288 23z"/>
+<path d="M1220 1794 c-99 -18 -200 -73 -264 -144 -143 -159 -169 -497 -54
+-712 106 -200 341 -328 543 -296 124 19 285 126 384 254 52 68 68 102 58 128
+-9 22 -38 10 -98 -40 -94 -78 -130 -95 -216 -101 -88 -6 -148 7 -182 38 -41
+38 -26 59 81 111 163 78 224 164 235 328 13 178 -75 340 -220 406 -51 23 -78
+28 -152 30 -49 1 -101 0 -115 -2z"/>
+<path d="M11287 1789 c-210 -49 -330 -305 -256 -545 18 -57 30 -77 82 -129 49
+-49 79 -68 145 -96 46 -19 86 -40 90 -48 8 -20 -40 -58 -89 -71 -23 -6 -79
+-11 -125 -11 -99 0 -130 14 -216 91 -34 30 -65 50 -75 48 -28 -5 -28 -61 0
+-121 68 -144 219 -241 418 -266 264 -34 499 128 595 409 27 77 27 318 0 405
+-55 180 -161 286 -331 330 -64 16 -177 18 -238 4z"/>
+</g>
+</svg>

img/rains/smashball.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<svg width="275" height="275" xmlns="http://www.w3.org/2000/svg">
+<clipPath id="c">
+<path d="m0,0h54v155H0m0,25h54v92H0M115,0h160v155H115m0,25h160v92H115"/>
+</clipPath>
+<circle clip-path="url(#c)" cx="137" cy="137" r="130" fill="#E10D05"/>
+</svg>

index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <link rel="stylesheet" href="/styles/styles.css">
+  </head>
+
+  <body>
+    <div class="main">
+      <div class="content">
+        <h1>the official rain fan page!!!</h1>
+        <img id="rain" src="/img/mkwsnyder.jpeg">
+      </div>
+    </div>
+
+    <script src="/scripts/script.js"></script>
+  </body>
+</html>

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);
+};

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;
+}