Image Champagne Bubble Filter Effect Tool

function processImage(
    originalImg,
    bubbleCount = 100,
    minBubbleSize = 2,
    maxBubbleSize = 15,
    mainBubbleColor = "rgba(255,255,220,0.5)", 
    highlightBubbleColor = "rgba(255,255,255,0.8)"
) {
    // --- Parameter sanitization and type conversion ---

    // Sanitize bubbleCount: ensure it's a non-negative integer.
    // Uses the default value from the function signature (100) if parsing fails.
    let numBubbleCount = Number(bubbleCount);
    if (isNaN(numBubbleCount) || numBubbleCount < 0) {
        numBubbleCount = 100; // Fallback to the function's default value.
    } else {
        numBubbleCount = Math.floor(numBubbleCount); // Ensure it's an integer.
    }

    // Sanitize minBubbleSize: ensure it's a non-negative number.
    // Uses the default value (2) if parsing fails.
    let numMinBubbleSize = Number(minBubbleSize);
    if (isNaN(numMinBubbleSize) || numMinBubbleSize < 0) {
        numMinBubbleSize = 2; // Fallback to the function's default value.
    }

    // Sanitize maxBubbleSize: ensure it's a non-negative number.
    // Uses the default value (15) if parsing fails.
    let numMaxBubbleSize = Number(maxBubbleSize);
    if (isNaN(numMaxBubbleSize) || numMaxBubbleSize < 0) {
        numMaxBubbleSize = 15; // Fallback to the function's default value.
    }
    
    // Ensure numMinBubbleSize is not greater than numMaxBubbleSize for the random generation logic.
    // If min > max, swap their values.
    if (numMinBubbleSize > numMaxBubbleSize) {
        [numMinBubbleSize, numMaxBubbleSize] = [numMaxBubbleSize, numMinBubbleSize];
    }

    // mainBubbleColor and highlightBubbleColor are used directly as strings.
    // The canvas context will handle them; invalid CSS color strings typically result in black fill or no change.

    // --- Canvas Setup ---
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // Handle cases where image dimensions are invalid (e.g., image not fully loaded or is not an image).
    if (imgWidth === 0 || imgHeight === 0) {
        console.error("Image has zero dimensions. Ensure it's properly loaded and is a valid image.");
        // Return a minimal 1x1 blank canvas to prevent errors in calling code that might expect a canvas.
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Draw the original image onto the canvas.
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // --- Draw Bubbles ---
    for (let i = 0; i < numBubbleCount; i++) {
        // Generate a random position (x, y) for the center of the bubble.
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        
        // Calculate a random radius for the bubble within the specified [min, max] range.
        let radius;
        if (numMinBubbleSize === numMaxBubbleSize) {
            radius = numMinBubbleSize; // If min and max are same, all bubbles have this radius.
        } else {
            radius = numMinBubbleSize + Math.random() * (numMaxBubbleSize - numMinBubbleSize);
        }

        // Skip drawing bubbles that are too small to be visually distinct (e.g., radius < 0.5px).
        // This also helps prevent potential issues with highlight calculations for extremely small radii.
        if (radius < 0.5) {
            continue; 
        }

        // Draw the main body of the bubble.
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2); // A full circle.
        ctx.fillStyle = mainBubbleColor;       // Use the provided main bubble color.
        ctx.fill();

        // Draw a highlight on the bubble to give a subtle 3D appearance.
        const highlightRadius = radius * 0.4; // Highlight is smaller than the main bubble.
        
        // Only draw the highlight if it's visually sensible:
        // - The highlightRadius itself should be at least 0.5px.
        // - The main bubble radius should be at least 1px (otherwise highlight is too small or on too small bubble).
        if (highlightRadius >= 0.5 && radius >= 1) { 
            // Position the highlight slightly offset from the bubble's center (simulates a light source, e.g., top-left).
            const highlightOffsetX = -radius * 0.25; // Offset towards left.
            const highlightOffsetY = -radius * 0.25; // Offset towards top.

            ctx.beginPath();
            ctx.arc(x + highlightOffsetX, y + highlightOffsetY, highlightRadius, 0, Math.PI * 2);
            ctx.fillStyle = highlightBubbleColor; // Use the provided highlight color.
            ctx.fill();
        }
    }

    return canvas;
}