Particle Implementationfeature/particles

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

1 files changed, 75 insertions, 0 deletions

diff --git a/dvd.js b/dvd.js
new file mode 100644
index 0000000..3497cef
--- /dev/null
+++ b/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);
+    }
+})();