Contemplative Photo Filter Tool

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // willReadFrequently for performance with getImageData/putImageData

    // Ensure the original image has loaded and has dimensions
    if (!originalImg.naturalWidth || !originalImg.naturalHeight) {
        // Fallback if naturalWidth/Height are not available (e.g., not fully loaded)
        // This might happen if the Image object was not properly loaded before calling this function.
        // A robust solution outside this function would be to ensure img.onload has fired.
        // For now, using width/height if available, else default to a small size or throw error.
        // However, per spec, originalImg is an Image object, implies it could be used in drawImage.
        // If naturalWidth/Height are 0, it usually means the image hasn't loaded or is invalid.
        // We will proceed, and if an error occurs, it indicates an issue with the input image.
        canvas.width = originalImg.width || 300; // Fallback width
        canvas.height = originalImg.height || 150; // Fallback height
    } else {
        canvas.width = originalImg.naturalWidth;
        canvas.height = originalImg.naturalHeight;
    }


    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Filter parameters for a "contemplative" mood:
    // Desaturation: Reduces color vividness. (0.0 to 1.0; 0.6 means 60% towards grayscale)
    const desaturationAmount = 0.6;
    // Brightness Adjustment: Makes image darker or lighter. (-255 to 255; -10 makes it slightly darker)
    const brightnessAdjust = -15;
    // Contrast Factor: Adjusts the difference between light and dark areas.
    // (0.0 to infinity; 1.0 is no change, <1 decreases contrast, >1 increases it. 0.9 makes it softer)
    const contrastFactor = 0.9;
    // Cool Tint Factors: Multipliers for red and blue channels to create a cooler tone.
    const coolRedFactor = 0.95;  // Reduce red
    const coolBlueFactor = 1.05; // Increase blue

    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i+1];
        let b = data[i+2];

        // 1. Adjust Brightness
        r += brightnessAdjust;
        g += brightnessAdjust;
        b += brightnessAdjust;

        // Clamp after brightness adjustment before contrast
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));

        // 2. Adjust Contrast
        // Pixels are pushed towards or away from the mid-gray value (128)
        r = (r - 128) * contrastFactor + 128;
        g = (g - 128) * contrastFactor + 128;
        b = (b - 128) * contrastFactor + 128;

        // Clamp after contrast adjustment before desaturation
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));

        // 3. Desaturation
        // Standard luminance calculation for grayscale
        const gray = 0.299 * r + 0.587 * g + 0.114 * b;
        // Interpolate between original color and grayscale
        r = r * (1 - desaturationAmount) + gray * desaturationAmount;
        g = g * (1 - desaturationAmount) + gray * desaturationAmount;
        b = b * (1 - desaturationAmount) + gray * desaturationAmount;

        // 4. Apply Cool Tint
        r *= coolRedFactor;
        // g a little bit too, towards cyan maybe
        // g *= 1.02; // Optional: slightly increase green for a more cyan/teal cool tone
        b *= coolBlueFactor;

        // 5. Clamp final RGB values to 0-255 range
        data[i] = Math.max(0, Math.min(255, r));
        data[i+1] = Math.max(0, Math.min(255, g));
        data[i+2] = Math.max(0, Math.min(255, b));
        // Alpha channel (data[i+3]) remains unchanged
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas;
}