Image Minolta X-700 Film Camera Render Effect Creator

async function processImage(
    originalImg,
    grainAmount = 0.08,     // Strength of the film grain. Range: 0.0 (none) to ~0.3 (heavy). Default: 0.08
    vignetteAmount = 0.6,   // Intensity of the vignette effect. Range: 0.0 (none) to 1.0 (strong darkening at edges). Default: 0.6
    warmth = 0.1,           // Color temperature adjustment. Range: -1.0 (very cool) to 1.0 (very warm), 0 for no change. Default: 0.1
    desaturation = 0.15,    // Amount of desaturation. Range: 0.0 (original saturation) to 1.0 (fully grayscale). Default: 0.15
    contrastFactor = 1.05,  // Contrast level. Range: ~0.5 (low contrast) to ~2.0 (high contrast), 1.0 for no change. Default: 1.05
    blurPx = 0.2            // Pixel radius for slight image blur, simulating lens softness. Range: 0.0 (sharp) to ~2.0. Default: 0.2
) {
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can hint the browser to optimize for frequent getImageData/putImageData calls
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Ensure image dimensions are valid from the original Image object
    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;

    if (w === 0 || h === 0) {
        console.error("Image has zero dimensions. Ensure the image is loaded and valid before processing.");
        // Return an empty (0x0) canvas. The caller should handle this.
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    canvas.width = w;
    canvas.height = h;

    // Step 0: Apply initial blur for overall softness (simulating lens/film characteristics)
    if (blurPx > 0) {
        ctx.filter = `blur(${blurPx}px)`;
    }
    ctx.drawImage(originalImg, 0, 0, w, h);
    // Reset filter so it doesn't affect subsequent ImageData operations or drawing
    ctx.filter = 'none'; 

    const imageData = ctx.getImageData(0, 0, w, h);
    const data = imageData.data; // Pixel data: [R,G,B,A, R,G,B,A, ...]

    const centerX = w / 2;
    const centerY = h / 2;
    // Maximum distance from center to a corner, used for normalizing vignette distance
    const maxDist = (w > 0 && h > 0) ? Math.sqrt(centerX * centerX + centerY * centerY) : 0;

    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 preserved

        // Step 1: Warmth / Coolness Adjustment
        // Positive 'warmth' increases red and decreases blue tones.
        // Negative 'warmth' decreases red and increases blue tones.
        if (warmth !== 0) {
            const warmAdjustVal = warmth * 20; // Scale factor for warmth effect; e.g., warmth=0.1 means +/- 2 shift
            r += warmAdjustVal;
            b -= warmAdjustVal;
        }

        // Step 2: Desaturation
        // Reduces color intensity, moving pixels towards their grayscale equivalent.
        if (desaturation > 0) {
            const effectiveDesaturation = Math.max(0, Math.min(1, desaturation)); // Clamp desaturation between 0 and 1
            // Standard luminance calculation for grayscale value (per ITU-R BT.709)
            const grayscale = 0.2126 * r + 0.7152 * g + 0.0722 * b; // More perceptually accurate luminance
            //const grayscale = 0.299 * r + 0.587 * g + 0.114 * b; // Older standard, often used

            r = r * (1 - effectiveDesaturation) + grayscale * effectiveDesaturation;
            g = g * (1 - effectiveDesaturation) + grayscale * effectiveDesaturation;
            b = b * (1 - effectiveDesaturation) + grayscale * effectiveDesaturation;
        }

        // Step 3: Contrast Adjustment
        // Modifies the tonal range, pivoting around mid-gray (127.5).
        if (contrastFactor !== 1.0) {
            // Linear contrast formula: NewVal = (OldVal/255 - 0.5) * Factor + 0.5) * 255
            // Simplified: NewVal = OldVal * Factor + Intercept
            const intercept = 127.5 * (1 - contrastFactor);
            r = r * contrastFactor + intercept;
            g = g * contrastFactor + intercept;
            b = b * contrastFactor + intercept;
        }
        
        // Step 4: Vignette Effect
        // Darkens the corners/edges of the image.
        if (vignetteAmount > 0 && maxDist > 0) {
            const currentPixelX = (i / 4) % w;
            const currentPixelY = Math.floor((i / 4) / w);
            
            const dx = centerX - currentPixelX;
            const dy = centerY - currentPixelY;
            
            // Normalized distance from center (0 at center, 1 at the furthest point like a corner)
            const distNormalized = Math.sqrt(dx * dx + dy * dy) / maxDist;

            // vignettePower controls the falloff curve. Higher values mean a more abrupt darkening at the extreme edges.
            // A quadratic falloff (power=2) is common and visually pleasing.
            const vignettePower = 2.0; 
            
            // Calculate how much to reduce brightness. `reduction` will be 0 at center, up to `vignetteAmount` at maxDist.
            const reduction = Math.pow(distNormalized, vignettePower) * vignetteAmount;
            const vignetteFactor = Math.max(0, 1.0 - reduction); // Ensure factor is not negative

            r *= vignetteFactor;
            g *= vignetteFactor;
            b *= vignetteFactor;
        }

        // Step 5: Film Grain
        // Adds monochrome (grayscale) noise to simulate the granular texture of photographic film.
        if (grainAmount > 0) {
            // Generate a random value for monochrome grain
            const grainVal = (Math.random() - 0.5) * 255 * grainAmount;
            r += grainVal;
            g += grainVal;
            b += grainVal;
        }

        // Clamp all color channel values to 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));
        // data[i+3] (alpha channel) remains unchanged
    }

    // Write the modified pixel data back to the canvas
    ctx.putImageData(imageData, 0, 0);
    
    return canvas;
}