Photo Filter Effect Creator For Yashica T4 Point-and-Shoot

function processImage(
    originalImg,
    saturation = 1.15,        // Saturation factor. 1.0 is original. Higher values increase saturation.
    contrast = 1.1,           // Contrast factor. 1.0 is original. Higher values increase contrast.
    warmth = 0.03,            // Warmth adjustment. 0.0 for no change. Positive values (e.g., 0.03 for ~3% shift) make the image warmer (more red/yellow, less blue).
    grain = 10,               // Grain intensity. Defines the max range of noise added (+/- grain/2). 0 for no grain.
    vignetteStrength = 0.4,   // Vignette darkness. 0 for no vignette, up to 1.0 for fully black corners.
    vignetteFalloff = 2.5     // Vignette falloff exponent. Controls how sharply the vignette fades. Higher values (e.g., 2.0-4.0) mean a tighter, more edge-focused vignette.
) {
    const canvas = document.createElement('canvas');
    // Optimization hint for browsers when frequently reading pixel data
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    if (width === 0 || height === 0) {
        console.error("Image has zero width or height. Ensure the image is loaded and valid before processing.");
        // Return an empty (0x0) canvas if image dimensions are invalid
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    canvas.width = width;
    canvas.height = height;

    ctx.drawImage(originalImg, 0, 0, width, height);

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

    const centerX = width / 2;
    const centerY = height / 2;
    // Maximum distance from the center to any corner of the image
    const maxDist = Math.hypot(centerX, centerY);

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

        // 1. Apply Warmth
        if (warmth !== 0) {
            r = r * (1 + warmth);
            g = g * (1 + warmth * 0.3); // Green channel is less affected by the warming adjustment
            b = b * (1 - warmth);
        }

        // 2. Adjust Saturation
        if (saturation !== 1.0) {
            // Calculate grayscale luminance
            const gray = 0.299 * r + 0.587 * g + 0.114 * b;
            // Adjust saturation: lerp between grayscale and original color
            r = gray + (r - gray) * saturation;
            g = gray + (g - gray) * saturation;
            b = gray + (b - gray) * saturation;
        }

        // 3. Adjust Contrast
        if (contrast !== 1.0) {
            // Normalize color channels to [-0.5, 0.5] range around mid-gray
            r = (r / 255 - 0.5) * contrast + 0.5;
            g = (g / 255 - 0.5) * contrast + 0.5;
            b = (b / 255 - 0.5) * contrast + 0.5;
            
            // Scale back to [0, 255] range
            r *= 255;
            g *= 255;
            b *= 255;
        }
        
        // 4. Apply Vignette
        // vignetteFalloff must be positive for Math.pow to work as expected for darkening
        if (vignetteStrength > 0 && vignetteFalloff > 0) {
            const pixelX = (i / 4) % width; // Current pixel's x coordinate
            const pixelY = Math.floor((i / 4) / width); // Current pixel's y coordinate
            
            // Distance of the current pixel from the center
            const distFromCenter = Math.hypot(pixelX - centerX, pixelY - centerY);
            
            if (maxDist > 0) { // Avoid division by zero if maxDist is 0 (e.g., 1x1 image at origin)
                const normalizedDist = distFromCenter / maxDist;
                // Calculate vignette effect: stronger towards edges based on falloff exponent
                const vignetteAmount = Math.pow(normalizedDist, vignetteFalloff);
                
                // Reduce brightness based on vignette effect and strength
                const brightnessMultiplier = 1.0 - (vignetteAmount * vignetteStrength);
                
                r *= brightnessMultiplier;
                g *= brightnessMultiplier;
                b *= brightnessMultiplier;
            }
        }

        // 5. Add Film Grain
        if (grain > 0) {
            // Generate random noise value (approx. -grain/2 to +grain/2)
            const noise = (Math.random() - 0.5) * grain;
            r += noise;
            g += noise;
            b += noise;
        }

        // Clamp final RGB 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));
        // Alpha channel (data[i + 3]) remains unchanged
    }

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