iitalics
/
laundry-room-rave
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

sauce

This commit is contained in:
Milo Turner 2020-04-12 01:31:55 -04:00
parent 701e943c79
commit ee10127800
3 changed files with 126 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
laundry-room.css Normal file
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
laundry-room.html Normal file
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
laundry-room.js Normal file
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 };
})();