assets/galaxy.js

// assets/galaxy.js
window.onload = function() {
    const canvas = document.createElement('canvas');
    canvas.id = 'galaxy-canvas';
    document.body.appendChild(canvas);
    const ctx = canvas.getContext('2d');

    let stars = [], width, height;
    const starCount = 400;

    function init() {
        width = window.innerWidth;
        height = window.innerHeight;
        canvas.width = width;
        canvas.height = height;
        stars = [];
        for (let i = 0; i < starCount; i++) {
            stars.push({
                x: Math.random() * width - width / 2,
                y: Math.random() * height - height / 2,
                z: Math.random() * width,
                o: Math.random()
            });
        }
    }

    function draw() {
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, width, height);
        
        ctx.save();
        ctx.translate(width / 2, height / 2);
        
        for (let i = 0; i < starCount; i++) {
            let s = stars[i];
            let x = s.x / (s.z / width);
            let y = s.y / (s.z / width);
            let r = (1 - s.z / width) * 2;
            
            ctx.beginPath();
            ctx.arc(x, y, r, 0, Math.PI * 2);
            ctx.fillStyle = `rgba(255, 255, 255, ${1 - s.z / width})`;
            ctx.fill();
            
            s.z -= 2; // Star speed
            if (s.z <= 0) s.z = width;
        }
        ctx.restore();
        requestAnimationFrame(draw);
    }

    init();
    draw();
    window.addEventListener('resize', init);
};