Image Toxic Waste Identifier

async function processImage(originalImg, toxicityLevel = 0.6, toxicColor = '#33FF33', bubbleCount = 75) {
    /**
     * Helper function to convert a hex color string to an rgba string.
     * @param {string} hex - The hex color code (e.g., "#FF0000").
     * @param {number} alpha - The alpha transparency (0.0 to 1.0).
     * @returns {string} The resulting rgba color string.
     */
    const hexToRgba = (hex, alpha) => {
        // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
        const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
        hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);

        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        const r = result ? parseInt(result[1], 16) : 51;  // Default to toxic green component
        const g = result ? parseInt(result[2], 16) : 255; // Default to toxic green component
        const b = result ? parseInt(result[3], 16) : 51;  // Default to toxic green component

        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    };
    
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

    // 1. Draw the original image on the canvas
    ctx.drawImage(originalImg, 0, 0, w, h);

    // 2. Apply the "toxic" color overlay
    // The 'color' blend mode applies the hue and saturation of the fill style
    // to the lightness of the base image, which is perfect for tinting.
    if (toxicityLevel > 0) {
        ctx.globalCompositeOperation = 'color';
        ctx.fillStyle = toxicColor;
        ctx.globalAlpha = Math.max(0, Math.min(1, toxicityLevel)); // Clamp between 0 and 1
        ctx.fillRect(0, 0, w, h);
    }
    
    // Reset composite operation and alpha for drawing subsequent elements
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 1.0;

    // 3. Draw "toxic bubbles"
    for (let i = 0; i < bubbleCount; i++) {
        // Random position for each bubble
        const x = Math.random() * w;
        const y = Math.random() * h;
        // Random radius, scaled by the smaller dimension of the image
        const radius = (Math.random() * 0.04 + 0.01) * Math.min(w, h);
        
        // Create a radial gradient for a more 3D, shiny bubble effect
        const gradient = ctx.createRadialGradient(
            x - radius / 3, y - radius / 3, // Inner circle (highlight) start point
            radius / 8,                     // Inner circle radius
            x, y,                           // Outer circle start point
            radius                          // Outer circle radius
        );

        // Add color stops to the gradient for a translucent, lit effect
        const bubbleBaseColor = hexToRgba(toxicColor, 0.4);
        const bubbleHighlight = hexToRgba('#FFFFFF', 0.8);
        gradient.addColorStop(0, bubbleHighlight);
        gradient.addColorStop(0.7, bubbleBaseColor);
        gradient.addColorStop(1, hexToRgba(toxicColor, 0.1));

        // Draw the bubble's body
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.fillStyle = gradient;
        ctx.fill();

        // Add a subtle border to the bubble for definition
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.strokeStyle = hexToRgba(toxicColor, 0.6);
        ctx.lineWidth = Math.max(1, radius * 0.05); // Border width scales with bubble size
        ctx.stroke();
    }

    // 4. A final touch: add a global 'haze' or 'fumes' vignette effect
    const centerX = w / 2;
    const centerY = h / 2;
    const hazeGradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, Math.max(w,h) / 2);
    hazeGradient.addColorStop(0, 'rgba(0,0,0,0)'); // Transparent center
    hazeGradient.addColorStop(1, hexToRgba(toxicColor, 0.25 * toxicityLevel)); // Colored edges
    ctx.fillStyle = hazeGradient;
    ctx.fillRect(0, 0, w, h);

    // Return the final canvas element
    return canvas;
}