retrowave-player/dvd.js

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