Keep

// script.js
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth * 0.8;
canvas.height = window.innerHeight * 0.8;

const drops = [];

function createDrop(x, y) {
    const drop = {
        x,
        y,
        radius: 1,
        maxRadius: Math.random() * 30 + 20, // 더 자연스러운 크기
        speed: Math.random() * 0.2 + 0.1,  // 느린 확산 속도
        alpha: 1,
        color: 'rgba(200, 200, 200, ', // 기본 색상 연한 회색
        expandSpeed: Math.random() * 0.1 + 0.05, // 확산 속도
        fadeSpeed: Math.random() * 0.002 + 0.001 // 서서히 마르는 속도
    };
    drops.push(drop);
}

function drawDrop(drop) {
    const gradient = ctx.createRadialGradient(drop.x, drop.y, drop.radius * 0.2, drop.x, drop.y, drop.radius);
    gradient.addColorStop(0, `${drop.color}${drop.alpha})`);
    gradient.addColorStop(1, `${drop.color}0)`);

    ctx.beginPath();
    ctx.arc(drop.x, drop.y, drop.radius, 0, Math.PI * 2);
    ctx.fillStyle = gradient;
    ctx.fill();
    ctx.closePath();
}

function updateDrops() {
    for (let i = drops.length - 1; i >= 0; i--) {
        const drop = drops[i];
        drop.radius += drop.expandSpeed;
        drop.alpha -= drop.fadeSpeed;
        if (drop.alpha <= 0) {
            drops.splice(i, 1);
        }
    }
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drops.forEach(drawDrop);
    updateDrops();
    requestAnimationFrame(animate);
}

canvas.addEventListener('click', (e) => {
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    createDrop(x, y);
});

animate();