Image Soap Bubble Bokeh Effect Generator

async function processImage(
    originalImg, 
    threshold = 210, 
    minRadius = 8, 
    maxRadius = 30, 
    density = 0.02, 
    color = "rgba(255, 255, 240, 0.75)", 
    thicknessFactor = 0.1
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure originalImg is loaded, otherwise dimensions might be 0
    // This basic check helps, but robust loading should be handled by caller
    if (!originalImg.complete || originalImg.naturalWidth === 0) {
        // Wait for image to load if not already loaded.
        // This is a simple promise wrapper for onload.
        await new Promise((resolve, reject) => {
            originalImg.onload = () => resolve();
            originalImg.onerror = () => {
                console.error("Image failed to load for processing.");
                // Draw a small placeholder or throw error if image fails
                canvas.width = 100;
                canvas.height = 30;
                ctx.fillStyle = "red";
                ctx.fillRect(0, 0, 100, 30);
                ctx.fillStyle = "white";
                ctx.fillText("Error loading image", 5, 20);
                reject(new Error("Image load error"));
            };
            // If src is set and it's not loaded yet, onload will trigger.
            // If src is not set, or image is broken, onerror might trigger.
        });
        if (!originalImg.complete || originalImg.naturalWidth === 0 && canvas.width === 100) { // check if error canvas was set
             return canvas; // return error canvas
        }
    }

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

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

    // Parameter sanitization and type conversion
    const paramThreshold = Math.max(0, Math.min(255, Number(threshold)));
    const paramMinRadius = Math.max(1, Number(minRadius));
    // Ensure maxRadius is not less than minRadius
    const paramMaxRadius = Math.max(paramMinRadius, Number(maxRadius)); 
    const paramDensity = Math.max(0, Math.min(1, Number(density)));
    // Ensure color is a string; it should be a valid CSS color.
    const paramColor = String(color); 
    const paramThicknessFactor = Math.max(0.01, Math.min(0.5, Number(thicknessFactor)));

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

    // 2. Prepare for highlight detection using a temporary canvas for getImageData
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = imgWidth;
    tempCanvas.height = imgHeight;
    // Use { willReadFrequently: true } for potential performance optimization if supported by the browser
    const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true }); 
    tempCtx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    
    let imageData;
    try {
        imageData = tempCtx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Failed to get image data, possibly due to cross-origin restrictions:", e);
        // Return the canvas with only the original image drawn if pixel processing is not possible
        // This could happen if the image is from a different domain without CORS headers.
        return canvas; 
    }
    const data = imageData.data;

    // 3. Detect highlights and draw soap bubble bokeh circles
    // Adjust scanStep based on minRadius to balance performance and detail.
    // A smaller scanStep means more points are checked, potentially leading to more bubbles.
    const scanStep = Math.max(1, Math.floor(paramMinRadius / 3) + 1); 

    for (let y = 0; y < imgHeight; y += scanStep) {
        for (let x = 0; x < imgWidth; x += scanStep) {
            // Calculate index for the pixel data array (R,G,B,A components)
            const i = (y * imgWidth + x) * 4; 
            const r_val = data[i];
            const g_val = data[i + 1];
            const b_val = data[i + 2];
            // const alpha_val = data[i + 3]; // Alpha of original pixel, not used here

            // Calculate luminosity (perceived brightness)
            // Standard formula for converting RGB to Luminance (Y_linear = 0.2126R + 0.7152G + 0.0722B)
            // Or common one (Y_ITU-R_BT.601 = 0.299R + 0.587G + 0.114B)
            const luminosity = 0.299 * r_val + 0.587 * g_val + 0.114 * b_val;

            // If luminosity is above threshold and random chance passes (based on density)
            if (luminosity > paramThreshold && Math.random() < paramDensity) {
                // Determine bubble properties
                let bubbleRadius = paramMinRadius;
                // If min and max radius are different, pick a random radius in between
                if (paramMaxRadius > paramMinRadius) { 
                     bubbleRadius = paramMinRadius + Math.random() * (paramMaxRadius - paramMinRadius);
                }
                
                // Add some jitter (random offset) to the bubble's position
                // This makes the bubble placement look more natural than a strict grid
                const jitterX = (Math.random() - 0.5) * scanStep * 0.8; 
                const jitterY = (Math.random() - 0.5) * scanStep * 0.8;
                const bubbleX = x + jitterX;
                const bubbleY = y + jitterY;

                // Calculate line width for the bubble ring based on its radius
                const lineWidth = Math.max(1, bubbleRadius * paramThicknessFactor);

                // Draw the bubble ring on the main canvas
                ctx.beginPath();
                ctx.arc(bubbleX, bubbleY, bubbleRadius, 0, 2 * Math.PI, false); // Full circle
                
                ctx.strokeStyle = paramColor; 
                ctx.lineWidth = lineWidth;
                
                ctx.stroke();
            }
        }
    }

    return canvas;
}