Photo Hopeful Filter

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    // Use naturalWidth/Height if available, otherwise fallback to width/height
    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);

    // Get image data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Define filter parameters for the "Hopeful" effect
    // These values are chosen to give a bright, slightly desaturated, and warm look.
    const brightnessIncrease = 20; // Amount to add to each color channel (0-255)
    const saturationFactor = 0.85;  // Saturation multiplier (1.0 = original, <1.0 desaturates, >1.0 saturates)
                                    // 0.85 means 15% desaturation.
    const warmTintRedFactor = 1.07; // Multiplier for the red channel to add warmth
    const warmTintGreenFactor = 1.03; // Multiplier for the green channel to add warmth

    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i+1];
        let b = data[i+2];
        // Alpha channel (data[i+3]) is not modified

        // 1. Apply brightness increase
        // This lifts the overall brightness of the image.
        r += brightnessIncrease;
        g += brightnessIncrease;
        b += brightnessIncrease;

        // 2. Apply desaturation
        // Calculate luminance (perceived brightness) of the (now brightened) pixel.
        // Standard ITU-R BT.601 coefficients for luminance:
        const Pr = 0.299;
        const Pg = 0.587;
        const Pb = 0.114;
        const lum = Pr * r + Pg * g + Pb * b;

        // Adjust saturation: C_out = C_in * factor + lum * (1 - factor)
        // This moves colors towards the grayscale value (lum).
        r = r * saturationFactor + lum * (1 - saturationFactor);
        g = g * saturationFactor + lum * (1 - saturationFactor);
        b = b * saturationFactor + lum * (1 - saturationFactor);

        // 3. Apply warm tint
        // This gives a slightly yellowish/orangish hue, often associated with positive/hopeful feelings.
        r *= warmTintRedFactor;
        g *= warmTintGreenFactor;
        // Blue channel can be left as is, or slightly reduced if a stronger warm effect is desired.
        // b *= 0.98; // Example: slightly reduce blue to enhance warmth

        // Clamp values to ensure they remain within the valid [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));
    }

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

    return canvas;
}