Olympus OM-1 Photo Filter Effect Tool

function processImage(originalImg, warmth = 20, desaturation = 15, contrast = 10, grain = 10, vignette = 30) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Use naturalWidth and naturalHeight for an Image object to get its intrinsic dimensions
    const imgActualWidth = originalImg.naturalWidth;
    const imgActualHeight = originalImg.naturalHeight;

    if (imgActualWidth === 0 || imgActualHeight === 0) {
        // Image might not be loaded or is a 0x0 image
        // Return an empty (0x0) canvas or handle as an error
        canvas.width = 0;
        canvas.height = 0;
        // console.warn("processImage: originalImg has zero dimensions. Ensure it is loaded completely.");
        return canvas;
    }

    canvas.width = imgActualWidth;
    canvas.height = imgActualHeight;

    ctx.drawImage(originalImg, 0, 0, imgActualWidth, imgActualHeight);

    const imageData = ctx.getImageData(0, 0, imgActualWidth, imgActualHeight);
    const data = imageData.data;

    const centerX = imgActualWidth / 2;
    const centerY = imgActualHeight / 2;
    
    // Max distance for vignette normalization (using dimensions to handle non-square images correctly with an elliptical vignette)
    const maxDistX = imgActualWidth / 2;
    const maxDistY = imgActualHeight / 2;

    // Convert parameters to internal factors
    const warmthFactor = warmth / 100.0; // Range 0-1
    const desaturationFactor = desaturation / 100.0; // Range 0-1
    
    // Contrast: input 0-100 maps to a value for the standard contrast formula
    // A contrast value of 0 means no change (factor of 1).
    // Max input of 64 for `contrastInputVal` gives a factor of approx 1.66.
    const contrastInputVal = (contrast / 100.0) * 64; 
    const calculatedContrastFactor = (259 * (contrastInputVal + 255)) / (255 * (259 - contrastInputVal));

    const grainBaseStrength = 25; // Max pixel intensity change for grain at 100% grain setting
    const grainAmount = (grain / 100.0) * grainBaseStrength;
    
    const vignetteStrengthFactor = vignette / 100.0; // Range 0-1

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

        const pixelIndex = i / 4;
        const x = pixelIndex % imgActualWidth;
        const y = Math.floor(pixelIndex / imgActualWidth);

        // 1. Vignette
        if (vignetteStrengthFactor > 0 && maxDistX > 0 && maxDistY > 0) {
            const dx = x - centerX;
            const dy = y - centerY;
            
            // Normalized distance for elliptical vignette (0 at center, approaches 1 at edge)
            let normDist = Math.sqrt( (dx/maxDistX)*(dx/maxDistX) + (dy/maxDistY)*(dy/maxDistY) );
            normDist = Math.min(1, normDist); // Clamp to 1, effectively making it an ellipse cut-off

            // Quadratic falloff for smoother vignette
            const vignetteReduction = Math.pow(normDist, 2.0) * vignetteStrengthFactor;
            const vignetteMultiplier = 1.0 - vignetteReduction;
            
            r *= vignetteMultiplier;
            g *= vignetteMultiplier;
            b *= vignetteMultiplier;
        }

        // 2. Warmth
        if (warmthFactor > 0) {
            // Define "warm" target versions of R, G, B
            const warmRTarget = r * 1.15; 
            const warmGTarget = g * 1.08;
            const warmBTarget = b * 0.85; // Reducing blue contributes to warmth
            
            // Blend current color with warm target based on warmthFactor
            r = r * (1 - warmthFactor) + warmRTarget * warmthFactor;
            g = g * (1 - warmthFactor) + warmGTarget * warmthFactor;
            b = b * (1 - warmthFactor) + warmBTarget * warmthFactor;
        }

        // 3. Desaturation
        if (desaturationFactor > 0) {
            const gray = r * 0.299 + g * 0.587 + b * 0.114; // Luminance calculation
            r = r * (1 - desaturationFactor) + gray * desaturationFactor;
            g = g * (1 - desaturationFactor) + gray * desaturationFactor;
            b = b * (1 - desaturationFactor) + gray * desaturationFactor;
        }

        // 4. Contrast
        // The calculatedContrastFactor will be 1 if contrastInputVal is 0 (i.e., contrast param is 0).
        // So, no explicit check for contrast === 0 is needed here if we want 0 to mean "no change".
        // Default contrast is 10, so this will usually apply a slight contrast boost.
        r = calculatedContrastFactor * (r - 128) + 128;
        g = calculatedContrastFactor * (g - 128) + 128;
        b = calculatedContrastFactor * (b - 128) + 128;
        
        // 5. Film Grain
        if (grainAmount > 0) {
            // Generate monochromatic noise (same noise value for R, G, B)
            const noise = (Math.random() - 0.5) * grainAmount;
            r += noise;
            g += noise;
            b += noise;
        }

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

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