Undead Image Filter

/**
 * Applies an "Undead" filter to the image, making it look sickly, 
 * desaturated, high contrast, and tinted with a pale/greenish hue.
 * 
 * @param {HTMLImageElement} originalImg - The original image object to be processed
 * @param {number} intensity - The intensity of the filter from 0 to 100
 * @returns {HTMLCanvasElement} - The canvas element containing the filtered image
 */
function processImage(originalImg, intensity = 100) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Match canvas size to the original image
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

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

    // Skip processing if intensity is 0
    if (intensity <= 0) {
        return canvas;
    }

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

    // Normalize intensity to a 0.0 - 1.0 multiplier
    const ratio = Math.max(0, Math.min(100, intensity)) / 100;
    
    // Contrast parameters (Increase contrast to make shadows harsher and features sunken)
    const contrast = 50 * ratio;
    const factor = (259 * (contrast + 255)) / (255 * (259 - contrast));
    
    // Desaturation parameter (Reduce color to simulate lifelessness)
    // At maximum intensity, we keep only 15% of the original color saturation
    const colorKeep = 1 - (0.85 * ratio); 

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

        // 1. Calculate luminance (perceived brightness)
        let lum = 0.299 * r + 0.587 * g + 0.114 * b;

        // 2. Desaturate the pixel
        r = r * colorKeep + lum * (1 - colorKeep);
        g = g * colorKeep + lum * (1 - colorKeep);
        b = b * colorKeep + lum * (1 - colorKeep);

        // 3. Apply "Undead" Tint
        // - Drain reds (lack of blood flow)
        // - Boost greens slightly (decay/rot)
        // - Drain blues slightly (but keep more than red for a cold look)
        let tr = r * (1 - 0.40 * ratio); // Drop red by up to 40%
        let tg = g * (1 + 0.15 * ratio); // Boost green by up to 15%
        let tb = b * (1 - 0.10 * ratio); // Drop blue by up to 10%

        // 4. Apply high contrast
        tr = factor * (tr - 128) + 128;
        tg = factor * (tg - 128) + 128;
        tb = factor * (tb - 128) + 128;

        // 5. Darken the image overall to look more sinister and gloomy
        tr -= 25 * ratio;
        tg -= 20 * ratio;
        tb -= 15 * ratio;

        // 6. Clamp values between 0 and 255 and assign back to array
        data[i]     = Math.max(0, Math.min(255, tr));
        data[i + 1] = Math.max(0, Math.min(255, tg));
        data[i + 2] = Math.max(0, Math.min(255, tb));
        // data[i + 3] is the alpha channel, which remains unchanged
    }

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

    return canvas;
}