Image Kodak Gold 200 Film Filter Effect Tool

function processImage(originalImg, 
    warmth = 0.18,       // Strength of the warm yellow/orange overlay (0 to 1). Kodak Gold 200 is known for its warmth.
    contrast = 1.12,     // Contrast enhancement factor (>1 increases contrast). Kodak Gold 200 typically has good contrast.
    saturation = 1.1,    // Saturation boost factor (>1 increases saturation). Kodak Gold 200 has vibrant colors.
    redChannelBoost = 1.03, // Multiplier for the red channel. Helps with warm tones and skin.
    greenChannelBoost = 1.01, // Multiplier for the green channel.
    blueChannelAdjust = 0.94, // Multiplier for the blue channel. Reduces blue for warmth and to mimic film's blue response.
    grainAmount = 10,     // Amount of film grain to add (0 for no grain).
    vignetteStrength = 0.25 // Strength of the vignette effect (0 for no vignette, up to ~1).
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // willReadFrequently for performance if available

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

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

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

        // 1. Base Channel Adjustments (Core of Kodak Gold 200 color signature)
        // These adjustments aim to mimic the general color response of the film.
        if (redChannelBoost !== 1.0) r *= redChannelBoost;
        if (greenChannelBoost !== 1.0) g *= greenChannelBoost;
        if (blueChannelAdjust !== 1.0) b *= blueChannelAdjust;

        // 2. Contrast
        // Applies contrast enhancement. The value 128 is the midpoint of the 0-255 range.
        if (contrast !== 1.0) {
            r = (r - 128) * contrast + 128;
            g = (g - 128) * contrast + 128;
            b = (b - 128) * contrast + 128;
        }

        // 3. Saturation
        // Increases or decreases the intensity of colors.
        if (saturation !== 1.0) {
            // Calculate luminance (brightness) of the pixel using standard coefficients.
            const lum = 0.299 * r + 0.587 * g + 0.114 * b;
            // Interpolate between the luminance (grayscale) and the original color.
            r = lum + saturation * (r - lum);
            g = lum + saturation * (g - lum);
            b = lum + saturation * (b - lum);
        }
        
        // 4. Warm Overlay (Characteristic yellow-orange tint of Gold 200)
        // This applies a color blend with a warm, golden-orange color.
        if (warmth > 0) {
            const warmOverlayR = 255; 
            const warmOverlayG = 200; 
            const warmOverlayB = 100; 

            r = r * (1 - warmth) + warmOverlayR * warmth;
            g = g * (1 - warmth) + warmOverlayG * warmth;
            b = b * (1 - warmth) + warmOverlayB * warmth;
        }

        // Clamp intermediate values to prevent issues before vignette or grain
        // (though current implementation order can handle out-of-range values until final clamp)
        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. Vignette
        // Darkens the corners of the image for a classic film look.
        if (vignetteStrength > 0) {
            const x = (i / 4) % width;
            const y = Math.floor((i / 4) / width);
            
            // Calculate normalized distance from the center of the image.
            // normX and normY range from -1 to 1.
            const normX = (x / (width -1) - 0.5) * 2;
            const normY = (y / (height-1) - 0.5) * 2;
            // dist is ~0 at center, ~1 at corners (normalized by dividing by sqrt(2)).
            let dist = Math.sqrt(normX * normX + normY * normY) / Math.SQRT2; 
            
            // Vignette factor: 1 at center, decreasing towards edges.
            // Math.pow(dist, 2.5) creates a smooth falloff curve.
            let vFactor = 1.0 - Math.pow(dist, 2.5) * vignetteStrength;
            vFactor = Math.max(0, Math.min(1, vFactor)); // Ensure factor is between 0 and 1.

            r *= vFactor;
            g *= vFactor;
            b *= vFactor;
        }

        // 6. Grain
        // Adds random noise to simulate film grain.
        if (grainAmount > 0) {
            // Generate noise between -grainAmount/2 and +grainAmount/2
            const noise = (Math.random() - 0.5) * grainAmount;
            r += noise;
            g += noise;
            b += noise;
        }

        // Final Clamp: Ensure all color values are within the valid 0-255 range.
        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)));
    }

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