diff --git a/laundry-room.css b/laundry-room.css new file mode 100644 index 0000000..ccbf458 --- /dev/null +++ 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; +} diff --git a/laundry-room.html b/laundry-room.html new file mode 100644 index 0000000..60dac1f --- /dev/null +++ b/laundry-room.html @@ -0,0 +1,20 @@ + + + + + + +
+ + + + + + + + + +
+ + + diff --git a/laundry-room.js b/laundry-room.js new file mode 100644 index 0000000..4712b06 --- /dev/null +++ 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 }; +})();