Image Master Challenge

/**
 * Applies a "Raphael Master Challenge" filter to an image.
 * Inspired by the Teenage Mutant Ninja Turtle Raphael, this function aims to give 
 * any image an aggressive, high-energy look with a signature red tint, high contrast, and sharpness.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} [redIntensity=0.4] The strength of the red overlay. A value from 0 (no tint) to 1 (full red).
 * @param {number} [contrast=1.3] The contrast level of the image. 1 means no change. Values greater than 1 increase contrast.
 * @param {number} [sharpness=0.5] The amount of sharpening to apply. A value from 0 (no sharpening) to 1 (maximum). Note: Sharpening is computationally expensive and may be slow on large images.
 * @returns {HTMLCanvasElement} A new canvas element displaying the processed image.
 */
function processImage(originalImg, redIntensity = 0.4, contrast = 1.3, sharpness = 0.5) {
    // Create a canvas element to work with
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    }); // Optimize for frequent pixel data reading

    // Set canvas dimensions to match the image
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    canvas.width = w;
    canvas.height = h;

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

    // Get the pixel data from the canvas
    const sourceImageData = ctx.getImageData(0, 0, w, h);
    const sourceData = sourceImageData.data;

    // Create a new ImageData object to store the output pixels
    const outputImageData = ctx.createImageData(w, h);
    const outputData = outputImageData.data;

    // Define the convolution kernel for sharpening
    const sharpenKernel = [
        [0, -1, 0],
        [-1, 5, -1],
        [0, -1, 0]
    ];

    // Sanitize input parameters to be within a sensible range
    sharpness = Math.max(0, Math.min(1, sharpness));
    redIntensity = Math.max(0, Math.min(1, redIntensity));
    contrast = Math.max(0, contrast);

    // Iterate over each pixel in the image
    for (let y = 0; y < h; y++) {
        for (let x = 0; x < w; x++) {
            const i = (y * w + x) * 4;

            const origR = sourceData[i];
            const origG = sourceData[i + 1];
            const origB = sourceData[i + 2];

            let r = origR;
            let g = origG;
            let b = origB;

            // 1. Apply Sharpening using convolution
            if (sharpness > 0) {
                let sumR = 0, sumG = 0, sumB = 0;

                // Apply the 3x3 kernel to the current pixel's neighbors
                for (let ky = -1; ky <= 1; ky++) {
                    for (let kx = -1; kx <= 1; kx++) {
                        // Clamp coordinates to stay within image bounds
                        const nx = Math.min(w - 1, Math.max(0, x + kx));
                        const ny = Math.min(h - 1, Math.max(0, y + ky));
                        
                        const neighborIndex = (ny * w + nx) * 4;
                        const kernelValue = sharpenKernel[ky + 1][kx + 1];

                        sumR += sourceData[neighborIndex] * kernelValue;
                        sumG += sourceData[neighborIndex + 1] * kernelValue;
                        sumB += sourceData[neighborIndex + 2] * kernelValue;
                    }
                }
                
                // Blend the original pixel with the sharpened result based on sharpness intensity
                r = origR * (1 - sharpness) + sumR * sharpness;
                g = origG * (1 - sharpness) + sumG * sharpness;
                b = origB * (1 - sharpness) + sumB * sharpness;
            }

            // 2. Apply Contrast
            if (contrast !== 1) {
                r = (r - 128) * contrast + 128;
                g = (g - 128) * contrast + 128;
                b = (b - 128) * contrast + 128;
            }

            // 3. Apply Raphael's Red Tint
            if (redIntensity > 0) {
                r = r * (1 - redIntensity) + 255 * redIntensity;
                g = g * (1 - redIntensity); // Tint green and blue towards black
                b = b * (1 - redIntensity);
            }
            
            // Assign the final, clamped pixel values to the output data
            outputData[i] = Math.max(0, Math.min(255, r));
            outputData[i + 1] = Math.max(0, Math.min(255, g));
            outputData[i + 2] = Math.max(0, Math.min(255, b));
            outputData[i + 3] = sourceData[i + 3]; // Preserve original alpha channel
        }
    }

    // Put the processed pixel data back onto the canvas
    ctx.putImageData(outputImageData, 0, 0);

    // Return the final canvas element
    return canvas;
}