Photo Lomography Berlin Kino Filter Effect Tool

function processImage(originalImg, contrast = 1.8, grainAmount = 25, vignetteStrength = 0.8, vignetteSoftness = 0.6) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // Optimization hint

    // Use naturalWidth/Height if available, otherwise fallback to width/height
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

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

    const centerX = width / 2;
    const centerY = height / 2;
    // Max distance is from center to a corner
    const maxDist = Math.sqrt(centerX * centerX + centerY * centerY);

    // Vignette exponent calculation:
    // vignetteSoftness (0.0 to 1.0): 0.0 for hard edge, 1.0 for very soft/wide edge.
    // A higher exponent creates a harder edge (darkness concentrated at the very edges).
    // A lower exponent creates a softer edge (darkness spreads more towards the center).
    // Map vignetteSoftness: 0 -> exponent=2.0 (hard), 1 -> exponent=0.2 (very soft)
    const vignetteExponent = Math.max(0.1, 2.0 - (vignetteSoftness * 1.8));

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

        // 1. Convert to Grayscale (Luminosity method)
        // Standard weights for luminance
        let gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // 2. Apply Contrast
        // Formula: NewValue = factor * (OldValue - 128) + 128
        gray = (contrast * (gray - 128)) + 128;

        // Clamp gray value to [0, 255]
        gray = Math.max(0, Math.min(255, gray));

        // 3. Apply Film Grain
        // Generate random noise between -grainAmount and +grainAmount
        const grain = (Math.random() * 2 - 1) * grainAmount;
        let finalVal = gray + grain;

        // Clamp final B&W value to [0, 255]
        finalVal = Math.max(0, Math.min(255, finalVal));

        // Set R, G, B to the processed monochrome value
        r = finalVal;
        g = finalVal;
        b = finalVal;

        // 4. Apply Vignette
        // Calculate pixel coordinates
        const x = (i / 4) % width;
        const y = Math.floor((i / 4) / width);

        // Calculate distance from center
        const dx = x - centerX;
        const dy = y - centerY;
        const dist = Math.sqrt(dx * dx + dy * dy);

        // Normalize distance (0 at center, 1 at maxDist)
        const normalizedDist = Math.min(1, dist / maxDist); // Clamp to 1 for points outside inscribed circle

        // Calculate vignette factor (1 at center, decreasing towards edges)
        // Strength controls max darkness, exponent controls falloff shape
        let vignetteFactor = 1.0 - vignetteStrength * Math.pow(normalizedDist, vignetteExponent);
        vignetteFactor = Math.max(0, Math.min(1, vignetteFactor)); // Clamp factor [0, 1]

        // Apply vignette by darkening the pixel
        data[i]     = r * vignetteFactor;
        data[i + 1] = g * vignetteFactor;
        data[i + 2] = b * vignetteFactor;
        // Alpha (data[i + 3]) remains unchanged
    }

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

    return canvas;
}