Particle Implementation

* Particle is implemented but something is odd. Will be replaced by a library
in the future

dvd.js

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

hg.css

@@ -50,6 +50,7 @@ body {
     text-align: center;
     background-position: 50% 50%;
     background-repeat: no-repeat;
+    z-index: 999;
 }
 
 .music-player .color-overlay {
@@ -251,3 +252,19 @@ dialog::backdrop {
     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;
+}

index.html

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