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