Image Kodak Vision3 500T Motion Picture Film Effect Simulator

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

    // Ensure the canvas has the same dimensions as the image
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    canvas.width = width;
    canvas.height = height;

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

    // Get the image data from the canvas
    let imageData = ctx.getImageData(0, 0, width, height);
    let data = imageData.data; // This is a Uint8ClampedArray

    // --- Parameters for Kodak Vision3 500T Simulation ---
    // These values are estimations for a typical "cinematic" look associated with this film stock.
    const blackLift = 6;           // Lifts the black point (0-255). Vision3 has good shadow detail.
    const contrastFactor = 1.1;    // 1.0 is no change. Vision3 has a good contrast range.
    const saturationFactor = 0.9;  // 0.0 (grayscale) to 1.0 (original). Cinematic looks often mildly desaturate.
    const grainAmount = 8;         // Strength of monochromatic grain (0 is none). Vision3 500T has fine grain.

    // Color tinting values: (additive, influence based on luminance)
    // Shadows tend towards cooler tones (cyan/blue)
    const shadowR_tint = -4; // Reduce red in shadows
    const shadowG_tint = 1;  // Slightly boost green in shadows
    const shadowB_tint = 6;  // Boost blue in shadows

    // Highlights tend towards warmer tones (yellow/orange)
    const highlightR_tint = 6;  // Boost red in highlights
    const highlightG_tint = 3;  // Slightly boost green in highlights (for yellow/orange)
    const highlightB_tint = -4; // Reduce blue in highlights

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

        // 1. Black Point Lift
        // This formula lifts darker values more, pure white remains unchanged.
        r += blackLift * (1 - r / 255);
        g += blackLift * (1 - g / 255);
        b += blackLift * (1 - b / 255);
        // Clamp after lift
        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. Contrast Adjustment
        // (value - midpoint) * factor + midpoint
        r = (r - 127.5) * contrastFactor + 127.5;
        g = (g - 127.5) * contrastFactor + 127.5;
        b = (b - 127.5) * contrastFactor + 127.5;
        // Clamp after 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));

        // 3. Saturation Adjustment
        // Calculate luminance of the current (contrast-adjusted) pixel
        const lum = 0.299 * r + 0.587 * g + 0.114 * b;
        // Interpolate towards luminance for desaturation
        r = lum + saturationFactor * (r - lum);
        g = lum + saturationFactor * (g - lum);
        b = lum + saturationFactor * (b - lum);
        // Clamp after saturation
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));

        // 4. Color Tinting (Split Toning)
        // Calculate luminance ratio (0-1) of the current (saturated/desaturated) pixel
        // Using the standard NTSC luminance coefficients
        const currentLumRatio = (0.299 * r + 0.587 * g + 0.114 * b) / 255;

        // Apply shadow tint (more effect in darker areas)
        const shadowEffect = 1.0 - currentLumRatio; // Max effect at lum=0, no effect at lum=1
        r += shadowR_tint * shadowEffect;
        g += shadowG_tint * shadowEffect;
        b += shadowB_tint * shadowEffect;

        // Apply highlight tint (more effect in brighter areas)
        const highlightEffect = currentLumRatio; // Max effect at lum=1, no effect at lum=0
        r += highlightR_tint * highlightEffect;
        g += highlightG_tint * highlightEffect;
        b += highlightB_tint * highlightEffect;
        
        // Clamp after tinting
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));

        // 5. Film Grain
        // Add monochromatic grain (same offset to R, G, B)
        const grain = (Math.random() - 0.5) * grainAmount; // Symmetrical noise around 0
        r += grain;
        g += grain;
        b += grain;

        // Final Clamp for all channels
        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
    }

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

    return canvas;
}