Image Corroded Copper Filter Effect Tool

function processImage(originalImg, intensity = 0.8, greenBoost = 1.4, blueBoost = 1.2, redDampening = 0.6, texture = 20) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure parameters are numbers, as they might be passed as strings which JS can often coerce,
    // but explicit conversion is safer and clearer.
    const numIntensity = Number(intensity);
    const numGreenBoost = Number(greenBoost);
    const numBlueBoost = Number(blueBoost);
    const numRedDampening = Number(redDampening);
    const numTexture = Number(texture);

    // Use naturalWidth/Height for unprocessed images, or width/height if already on a canvas or similar
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

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

    // If canvas dimensions are zero (e.g., image not loaded properly), return empty canvas
    if (canvas.width === 0 || canvas.height === 0) {
        console.warn("Image Corroded Copper Filter: Image has zero width or height.");
        return canvas;
    }
    
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Iterate over each pixel (RGBA)
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        // 1. Calculate the "fully corroded" target color for this pixel
        // This is what the pixel would look like if the corrosion effect was at maximum strength (intensity = 1),
        // before texture is applied. Patina is typically greenish-blue, with diminished red.

        // Reduce red component based on redDampening
        let transformedR = r * numRedDampening;
        
        // Boost green component significantly. Add some influence from original red and blue
        // to create more varied and natural-looking patina colors.
        // e.g., reddish areas might produce a slightly more olive/yellowish green patina.
        let transformedG = g * numGreenBoost + r * 0.15 + b * 0.05; 
        
        // Boost blue component. Add some influence from original green and red.
        // e.g., greenish areas might produce a slightly more cyan patina.
        let transformedB = b * numBlueBoost + g * 0.10 + r * 0.05;

        // 2. Interpolate between the original pixel color and the "fully corroded" target color
        // The numIntensity parameter controls the strength of the corrosion effect.
        // numIntensity = 0 results in the original color.
        // numIntensity = 1 results in the fully transformed color.
        let finalR = r * (1 - numIntensity) + transformedR * numIntensity;
        let finalG = g * (1 - numIntensity) + transformedG * numIntensity;
        let finalB = b * (1 - numIntensity) + transformedB * numIntensity;
        
        // 3. Add texture to simulate the uneven surface of physical corrosion
        if (numTexture > 0) {
            // Generate random noise. (Math.random() - 0.5) * 2 gives a range of [-1, 1].
            // So, 'noise' will be in the range [-numTexture, +numTexture].
            const noise = (Math.random() - 0.5) * 2 * numTexture; 
            
            // Apply noise primarily to green and blue channels, as patina is green/blue.
            // A positive noise value can simulate a "bump" of thicker patina (more green/blue).
            // A negative noise value can simulate a "pit" or thinner patina (less green/blue).
            finalG += noise;       // Green channel gets the full noise effect
            finalB += noise * 0.7; // Blue channel gets a slightly subdued noise effect, for variation
            
            // Red channel can be slightly inversely affected by noise,
            // simulating the underlying copper showing through pits or being covered by bumps.
            finalR -= noise * 0.3; 
        }

        // 4. Clamp the final RGB values to the valid 0-255 range
        data[i] = Math.max(0, Math.min(255, finalR));
        data[i + 1] = Math.max(0, Math.min(255, finalG));
        data[i + 2] = Math.max(0, Math.min(255, finalB));
        // Alpha channel (data[i + 3]) remains unchanged
    }

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