Photo Deep Sea Bioluminescence Filter Effect Tool

async function processImage(
    originalImg, 
    bioluminescentColorStr = "20,160,200", // RGB string, e.g., "R,G,B" for the glow color
    luminescenceThreshold = 140,           // Value 0-255. Pixels brighter than this will start to glow.
    darknessFactor = 0.15,                // Value 0.0-1.0. How dark non-glowing parts become (0=black, 1=original light level before blue tint).
    glowIntensityBoost = 1.5              // Multiplier for glow strength. >1 boosts intensity, 1 is normal.
) {
    // 1. Parse the bioluminescentColorStr into R, G, B components
    const [bioR_str, bioG_str, bioB_str] = bioluminescentColorStr.split(',').map(s => s.trim());
    const bioR = parseInt(bioR_str, 10);
    const bioG = parseInt(bioG_str, 10);
    const bioB = parseInt(bioB_str, 10);

    // 2. Create a canvas and get its 2D rendering context
    const canvas = document.createElement('canvas');
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;
    canvas.width = imgWidth;
    canvas.height = imgHeight;

    const ctx = canvas.getContext('2d');

    // Basic check if context is available (highly unlikely to fail for '2d')
    if (!ctx) {
        console.error("Canvas 2D context is not available.");
        // Fallback: return an empty canvas or draw an error message.
        // For this tool, returning the canvas as is (which would be blank) fulfills the return type.
        // Or, draw the original image if processing failed:
        // ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
        return canvas;
    }
    
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // 3. Get image data from the canvas
    const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    const data = imageData.data;

    // Internal parameters for fine-tuning the effect
    const glowExponent = 1.5;         // Controls the falloff curve of the glow (higher = sharper falloff)
    const glowBaseDarkenFactor = 0.4; // How much to darken the original color that forms the base of the glow (0.0-1.0)

    // Clamp input parameters to sensible ranges to prevent unexpected results
    const effectiveDarknessFactor = Math.max(0.0, Math.min(1.0, darknessFactor));
    const effectiveGlowIntensityBoost = Math.max(0.0, glowIntensityBoost); // Allow 0 to turn off boost
    const effectiveLuminescenceThreshold = Math.max(0, Math.min(255, luminescenceThreshold));

    // 4. Iterate through each pixel and apply the effect
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        // Alpha (data[i+3]) is preserved

        // Calculate luminance (perceived brightness of the pixel)
        const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;

        if (luminance > effectiveLuminescenceThreshold) {
            // This pixel is part of the "glow"
            // Calculate how much it glows based on how far its luminance is above the threshold
            let glowAmount = (luminance - effectiveLuminescenceThreshold) / (255.0 - effectiveLuminescenceThreshold);
            glowAmount = Math.max(0, glowAmount); // Ensure it's not negative
            
            glowAmount = Math.pow(glowAmount, glowExponent); // Apply exponent for falloff curve
            glowAmount = Math.min(1.0, glowAmount * effectiveGlowIntensityBoost); // Apply boost and clamp to 1.0

            // The base color for the glow is a darkened version of the original pixel color
            const baseR = r * glowBaseDarkenFactor;
            const baseG = g * glowBaseDarkenFactor;
            const baseB = b * glowBaseDarkenFactor;
            
            // Blend the darkened base color with the bioluminescent color
            data[i]   = Math.floor(Math.max(0, Math.min(255, baseR * (1 - glowAmount) + bioR * glowAmount)));
            data[i+1] = Math.floor(Math.max(0, Math.min(255, baseG * (1 - glowAmount) + bioG * glowAmount)));
            data[i+2] = Math.floor(Math.max(0, Math.min(255, baseB * (1 - glowAmount) + bioB * glowAmount)));

        } else {
            // This pixel is part of the "deep sea" background
            // Apply the darknessFactor to make it darker
            const darkR = r * effectiveDarknessFactor;
            const darkG = g * effectiveDarknessFactor;
            const darkB = b * effectiveDarknessFactor;

            // Tint the darkened pixel towards a moody blue
            // Suppress red and green, enhance blue, and add a constant blue offset for ambiance
            data[i]   = Math.floor(Math.max(0, Math.min(255, darkR * 0.3))); 
            data[i+1] = Math.floor(Math.max(0, Math.min(255, darkG * 0.5))); 
            data[i+2] = Math.floor(Math.max(0, Math.min(255, darkB * 0.7 + 40))); // Add 40 for a minimum blue level
        }
    }

    // 5. Put the modified image data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // 6. Return the canvas element
    return canvas;
}