From 22c9e30317f25df3a517a9323a1f93f47723ea58 Mon Sep 17 00:00:00 2001 From: Indrajith K L Date: Wed, 30 Nov 2022 05:52:51 +0530 Subject: Particle Implementation * Particle is implemented but something is odd. Will be replaced by a library in the future --- dvd.js | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 dvd.js (limited to 'dvd.js') 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); + } +})(); -- cgit v1.2.3