Image Ilford Delta 3200 Filter Effect Application

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

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

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

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

    // Parameters for the Ilford Delta 3200 effect
    // This film is known for its high speed, pronounced grain, and strong contrast.
    const contrastFactor = 1.8; // Enhances contrast significantly
    const grainAmount = 35;     // Adds noticeable grain

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

        // 1. Convert to grayscale (luminosity method)
        let gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // 2. Apply contrast adjustment
        // This formula increases the difference from mid-gray (128)
        gray = (gray - 128) * contrastFactor + 128;

        // Clamp the contrast-adjusted value to the [0, 255] range
        gray = Math.max(0, Math.min(255, gray));

        // 3. Add grain
        // Generate a random noise value (positive or negative)
        const noise = (Math.random() - 0.5) * grainAmount;
        let finalValue = gray + noise;

        // Clamp the final value to the [0, 255] range
        finalValue = Math.max(0, Math.min(255, finalValue));

        // Set the new RGB values (all same for grayscale)
        data[i] = finalValue;     // Red
        data[i + 1] = finalValue; // Green
        data[i + 2] = finalValue; // Blue
        // Alpha channel (data[i + 3]) remains unchanged
    }

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

    // Return the canvas with the applied effect
    return canvas;
}