diff options
-rw-r--r-- | dvd.js | 75 | ||||
-rw-r--r-- | hg.css | 17 | ||||
-rw-r--r-- | images/dvd.png | bin | 0 -> 20425 bytes | |||
-rw-r--r-- | index.html | 5 |
4 files changed, 97 insertions, 0 deletions
@@ -0,0 +1,75 @@ +(function () { + const dvdCanvas = document.getElementById("dvd-render"); + const ctx = dvdCanvas.getContext("2d"); + const dvd = document.getElementById("dvd"); + const particleLength = 500; + let dvdParticles = (new Array(particleLength)).fill(0); + const maxDimension = 16; + const minDimension = 2; + let x = 0; + let y = 0; + let dx = 0.8; + let dy = -0.8; + resizeWindow(); + + dvd.addEventListener("load", () => { + ctx.imageSmoothingEnabled = false; + const { width, height } = document.body.getBoundingClientRect(); + dvdParticles = dvdParticles.map((particle) => { + const particleImage = dvd; + particleImage.width = Math.floor(Math.random()* (maxDimension - minDimension) + minDimension); + particleImage.height = particleImage.width; + return { + img: particleImage, + x: Math.floor(Math.random() * width), + y: Math.floor(Math.random() * height), + dx: Math.floor(Math.random() * 2), + dy: -Math.floor(Math.random() * 2), + }; + }); + requestAnimationFrame(update); + }); + + addEventListener("resize", () => { + resizeWindow(); + }); + + function resizeWindow() { + const { width, height } = document.body.getBoundingClientRect(); + x = Math.floor(Math.random() * width); + y = Math.floor(Math.random() * height); + dvdCanvas.width = width; + dvdCanvas.height = height; + } + + function update() { + ctx.clearRect(0, 0, dvdCanvas.width, dvdCanvas.height); + for(let particle of dvdParticles) { + let {x, y, img, dx, dy} = particle; + ctx.drawImage(img, x, y, img.width, img.height); + + particle.x = x + dx; + particle.y = y + dy; + if (x+img.width > dvdCanvas.width) { + particle.x = dvdCanvas.width-img.width; + particle.dx = -dx; + } + + if (y+img.height > dvdCanvas.height) { + particle.y = dvdCanvas.height-img.height; + particle.dy = -dy; + } + + if (x < 0) { + particle.x = 0; + particle.dx = -dx; + } + + if (y < 0) { + particle.y = 0; + particle.dy = -dy; + } + } + requestAnimationFrame(update); + } +})(); @@ -50,6 +50,7 @@ body { text-align: center; background-position: 50% 50%; background-repeat: no-repeat; + z-index: 999; } .music-player .color-overlay { @@ -250,4 +251,20 @@ dialog::backdrop { padding-left: 10px; color: #ffffff; justify-content: center; +} + +#dvd-render { + position: absolute; + top: 0; + z-index: 0; +} + +#assets { + display: none; +} + +#dvd { + width: 32px; + height: 18px; + object-fit: contain; }
\ No newline at end of file diff --git a/images/dvd.png b/images/dvd.png Binary files differnew file mode 100644 index 0000000..ebe435f --- /dev/null +++ b/images/dvd.png @@ -47,7 +47,12 @@ </div> </div> <input id="file-upload" type="file" accept="application/json" /> + <canvas id="dvd-render"></canvas> + <div id="assets"> + <img src="images/dvd.png" id="dvd" alt=""> + </div> <script src="player.js"></script> + <script src="dvd.js"></script> </body> </html>
\ No newline at end of file |