Image Ilford HP5 Plus Filter Effect Application

function processImage(originalImg, inputContrast = "1.4", inputBrightness = "5", inputGrain = "20") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the originalImg is loaded, otherwise width/height might be 0
    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, imgWidth, imgHeight);

    // Get image data
    const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    const data = imageData.data;

    // Parse Sser-provided parameters or use defaults for Ilford HP5 Plus simulation
    let contrastLevel = parseFloat(inputContrast);
    if (isNaN(contrastLevel) || contrastLevel < 0) {
        contrastLevel = 1.4; // Default typical contrast enhancement for HP5
    }

    let brightnessAdjustment = parseFloat(inputBrightness);
    if (isNaN(brightnessAdjustment)) {
        brightnessAdjustment = 5; // Slight brightness lift
    }

    let grainAmount = parseFloat(inputGrain);
    if (isNaN(grainAmount) || grainAmount < 0) {
        grainAmount = 20; // Characteristic fine grain amount
    }


    // Process each pixel
    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 using luminosity method
        let gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // 2. Apply contrast adjustment
        // The formula C * (value - 128) + 128 maps the value from [0, 255] to [-128, 127],
        // scales it, then maps it back to [0, 255] range (approximately).
        gray = (gray - 128) * contrastLevel + 128;
        
        // 3. Apply brightness adjustment
        gray += brightnessAdjustment;

        // 4. Add film grain
        // Generate random noise centered around 0, from -grainAmount/2 to +grainAmount/2
        const noise = (Math.random() - 0.5) * grainAmount;
        gray += noise;

        // 5. Clamp values to the 0-255 range
        gray = Math.max(0, Math.min(255, gray));

        // Set the new RGB values (all to gray for B&W)
        data[i] = gray;
        data[i + 1] = gray;
        data[i + 2] = gray;
        // Alpha channel (data[i+3]) is preserved
    }

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

    return canvas;
}