sauce

2020-04-12 01:31:55 -04:00 · 2020-04-12 01:31:55 -04:00 · ee10127800
parent 701e943c79
commit ee10127800
3 changed files with 126 additions and 0 deletions
--- a/laundry-room.css
+++ b/laundry-room.css
@ -0,0 +1,48 @@
+body {
+    margin: 0;
+    overflow: hidden;
+}
+
+main {
+    left: 50vw;
+    top: 50vh;
+}
+
+main, main img {
+    position: absolute;
+}
+
+img.full {
+    width: 100vw;
+    height: 52.9vw;
+    left: -50vw;
+    top: -26.4vw;
+}
+
+img.wm1 {
+    width: 21.5vw;
+    height: 16vw;
+    left: -44.6vw;
+    top: 1.5vw;
+}
+
+img.wm2 {
+    width: 38.5vw;
+    height: 28.5vw;
+    left: 1.5vw;
+    top: -2.3vw;
+}
+
+img.mac {
+    width: 25.3vw;
+    height: 13.8vw;
+    left: -23.1vw;
+    top: 7.7vw;
+}
+
+img.shark {
+    width: 15.4vw;
+    height: 22.8vw;
+    left: -13.8vw;
+    top: -3.8vw;
+}
--- a/laundry-room.html
+++ b/laundry-room.html
@ -0,0 +1,20 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="./laundry-room.css">
+    <meta charset="utf8"/>
+  </head>
+  <body>
+    <main>
+      <img class="bg full" src="./img/basement.jpg"/>
+      <img class="wm wm1" src="./img/washingmachine.png"/>
+      <img class="mac back" src="./img/djset.png"/>
+      <img class="shark" src="./img/djshark.png"/>
+      <img class="mac frnt" src="./img/djset-justmac.png"/>
+      <img class="wm wm2" src="./img/washingmachine.png"/>
+      <img class="ov full" src="./img/overlay-r.png"/>
+      <img class="ov full" src="./img/overlay-g.png"/>
+      <img class="ov full" src="./img/overlay-u.png"/>
+    </main>
+    <script src="./laundry-room.js" type="text/javascript"></script>
+  </body>
+</html>
--- a/laundry-room.js
+++ b/laundry-room.js
@ -0,0 +1,58 @@
+var E = (function () {
+    const images = Array.of.apply([], document.getElementsByTagName("img"));
+    const main = document.getElementsByTagName("main")[0];
+    const overlays = images.filter(e => e.classList.contains("ov"));
+    const wms = images.filter(e => e.classList.contains("wm"));
+    const shark = images.find(e => e.classList.contains("shark"));
+
+    const BG_W = 1300;
+    const BG_H = 688;
+
+    var strobeIdx = ~~(Math.random() * 999);
+    const nOverlays = overlays.length;
+
+    function strobe() {
+        if (Math.random() < 0.5) {
+            strobeIdx++;
+        } else {
+            strobeIdx--;
+        }
+        strobeIdx = (strobeIdx + nOverlays) % nOverlays;
+        for (var i = 0; i < nOverlays; i++) {
+            overlays[i].style.visibility = (i == strobeIdx) ? "visible" : "hidden";
+        }
+    }
+
+    var time0 = +new Date;
+    function elapsed() { return (new Date - time0) / 1000; }
+
+    var lastStrobe = -Infinity;
+    var lastShake = wms.map(_ => Math.random() * 0.2);
+
+    function animate() {
+        requestAnimationFrame(animate);
+        var t = elapsed();
+
+        if (t - lastStrobe > 0.5) {
+            lastStrobe = t;
+            strobe();
+        }
+
+        for (var i = 0; i < wms.length; i++) {
+            if (t - lastShake[i] > 0.1) {
+                const dx = Math.random() * 0.2;
+                const dy = Math.random() * 0.2;
+                wms[i].style.transform = "translate(" + dx + "vw," + dy + "vw)";
+                lastShake[i] = t;
+            }
+        }
+
+        const shDy = 2 * Math.sin(elapsed() * 4.7);
+        const shRot = Math.sin(elapsed() * 7) * 3;
+        shark.style.transform = "translate(0," + shDy + "vw) rotate(" + shRot + "deg)";
+    }
+
+    animate();
+
+    return { main, overlays, shark, wms, strobe, animate };
+})();