Browse Source

sauce

master
Milo Turner 4 months ago
parent
commit
ee10127800
3 changed files with 126 additions and 0 deletions
  1. +48
    -0
      laundry-room.css
  2. +20
    -0
      laundry-room.html
  3. +58
    -0
      laundry-room.js

+ 48
- 0
laundry-room.css View File

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

+ 20
- 0
laundry-room.html View File

@@ -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>

+ 58
- 0
laundry-room.js View File

@@ -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 };
})();

Loading…
Cancel
Save