Image Rain Effect Generator

/**
 * Creates an animated rain effect over an image.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} [raindropCount=500] The number of raindrops on the canvas.
 * @param {number} [raindropLength=20] The average length of a rain streak.
 * @param {number} [raindropWidth=1] The width/thickness of a rain streak.
 * @param {number} [rainSpeed=5] The average vertical speed of the rain.
 * @param {string} [rainColor='rgba(255, 255, 255, 0.6)'] The color of the raindrops.
 * @param {number} [wind=2] The horizontal speed of the rain, creating a slant. Negative values create a left slant.
 * @returns {HTMLCanvasElement} A canvas element with the animated rain effect.
 */
function processImage(originalImg, raindropCount = 500, raindropLength = 20, raindropWidth = 1, rainSpeed = 5, rainColor = 'rgba(255, 255, 255, 0.6)', wind = 2) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    let raindrops = [];

    // Helper function to create or reset a raindrop with random properties for a natural look.
    const resetDrop = (drop) => {
        // Spread drops across a wider area than the canvas to avoid edges, especially with wind
        drop.x = Math.random() * (width + 200) - 100;
        // Start drops at various negative y positions to appear staggered
        drop.y = Math.random() * -height;
        // Add random variation to each drop's speed and length
        drop.speed = rainSpeed * (0.9 + Math.random() * 0.2); // +/- 10% speed variation
        drop.length = raindropLength * (0.8 + Math.random() * 0.4); // +/- 20% length variation
        return drop;
    };

    // Initialize the array of raindrops
    for (let i = 0; i < raindropCount; i++) {
        raindrops.push(resetDrop({}));
    }

    function animate() {
        // Redraw the background image in each frame to clear the previous frame's drops
        ctx.clearRect(0, 0, width, height);
        ctx.drawImage(originalImg, 0, 0, width, height);

        // Set the drawing style for the raindrops
        ctx.strokeStyle = rainColor;
        ctx.lineWidth = raindropWidth;
        ctx.lineCap = 'round'; // Makes the ends of the streaks look softer

        for (let i = 0; i < raindrops.length; i++) {
            let drop = raindrops[i];

            // Update the position of the drop's leading point (bottom tip)
            drop.y += drop.speed;
            drop.x += wind;

            // Draw the streak trailing behind the leading point.
            // The tail's position is relative to the leading point, creating the slant.
            const startX = drop.x - wind;
            const startY = drop.y - drop.length;
            ctx.beginPath();
            ctx.moveTo(drop.x, drop.y);
            ctx.lineTo(startX, startY);
            ctx.stroke();

            // If a drop is completely off-screen, reset its position to the top.
            // We check its tail (startY) to ensure the entire streak is gone.
            if (startY > height) {
                resetDrop(drop);
                // Place it back just above the canvas view
                drop.y = -drop.length;
            }
            // Also reset if it goes too far off-screen horizontally due to wind
            if (wind > 0 && drop.x > width + 100) {
                 resetDrop(drop);
                 drop.x = -100; // Re-enter from the left
            } else if (wind < 0 && drop.x < -100) {
                 resetDrop(drop);
                 drop.x = width + 100; // Re-enter from the right
            }
        }

        // Request the next animation frame to create a continuous loop
        requestAnimationFrame(animate);
    }

    // Start the animation loop
    animate();

    // Return the canvas, which will display the live animation
    return canvas;
}