Please bookmark this page to avoid losing your image tool!

Image Rain Effect Creator

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
function processImage(originalImg, raindropCount = 500, raindropLength = 20, raindropWidth = 1, raindropSpeed = 5, raindropColor = "rgba(255, 255, 255, 0.6)", wind = 1) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Array to store the raindrop objects
    let raindrops = [];

    /**
     * Creates a single raindrop object with randomized properties.
     * @returns {{x: number, y: number, length: number, speed: number, width: number}}
     */
    function createRaindrop() {
        return {
            // Spawn raindrops horizontally across a wider area than the canvas to account for wind
            x: Math.random() * (canvas.width + 200) - 100,
            // Spawn raindrops above the canvas view
            y: Math.random() * -canvas.height,
            // Randomize properties for a more natural effect
            length: raindropLength * (0.7 + Math.random() * 0.6),
            speed: raindropSpeed * (0.8 + Math.random() * 0.4),
            width: raindropWidth * (0.5 + Math.random() * 0.5)
        };
    }

    // Initialize the raindrops array
    for (let i = 0; i < raindropCount; i++) {
        const drop = createRaindrop();
        // For the initial setup, spread the raindrops across the entire canvas height
        drop.y = Math.random() * canvas.height;
        raindrops.push(drop);
    }

    /**
     * The main animation loop.
     */
    function animate() {
        // Draw the original image as the background for each frame
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

        // Set the visual style for the raindrops
        ctx.strokeStyle = raindropColor;
        ctx.lineCap = 'round'; // Makes the ends of the rain streaks rounded

        // Iterate through each raindrop to update and draw it
        for (let i = 0; i < raindrops.length; i++) {
            let drop = raindrops[i];

            ctx.lineWidth = drop.width;

            // Draw the raindrop streak
            ctx.beginPath();
            ctx.moveTo(drop.x, drop.y);
            // The line's end point is offset by the wind parameter, creating a slant
            ctx.lineTo(drop.x + wind, drop.y + drop.length);
            ctx.stroke();

            // Update the raindrop's position for the next frame
            // Vertical movement is based on speed
            drop.y += drop.speed;
            // Horizontal movement is based on the wind, normalized by length to maintain angle
            drop.x += (wind * drop.speed) / drop.length;

            // Check if the raindrop has moved off the bottom of the canvas
            if (drop.y > canvas.height) {
                // Reset the raindrop's properties and position it back above the canvas
                Object.assign(drop, createRaindrop());
                drop.y = Math.random() * -100; // Staggered respawn
            }

            // Check if the raindrop has moved off the sides of the canvas due to wind
            if (wind > 0 && drop.x > canvas.width + 20) {
                drop.x = -20; // Wrap around to the left side
            } else if (wind < 0 && drop.x < -20) {
                drop.x = canvas.width + 20; // Wrap around to the right side
            }
        }

        // Request the next frame of the animation
        requestAnimationFrame(animate);
    }

    // Start the animation
    animate();

    // Return the canvas element. The animation will continue to run on this canvas.
    return canvas;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Rain Effect Creator is a web tool that allows users to add realistic rain effects to their images. By simulating raindrops with customizable properties such as count, length, width, speed, and color, users can transform a standard image into a dynamic visual experience. This tool is ideal for graphic designers, digital artists, and anyone looking to create atmospheric visuals for presentations, social media posts, or artistic projects. The animated rain effect can enhance the mood of images, making them more engaging and visually appealing.

Leave a Reply

Your email address will not be published. Required fields are marked *