Image Dark Oil Painting Creator

/**
 * Transforms an image into a dark oil painting style.
 * This effect is achieved by analyzing pixel neighborhoods to create painterly patches of color,
 * and then darkening the overall result.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} radius The radius of the "brush stroke" in pixels. A larger radius creates larger, more abstract patches.
 * @param {number} intensityLevels The number of intensity levels to quantize the image into. A lower number creates a more posterized, abstract effect.
 * @param {number} darkness A value from 0 (no change) to 1 (completely black) to control the overall darkness of the painting.
 * @returns {HTMLCanvasElement} A new canvas element with the dark oil painting effect applied.
 */
function processImage(originalImg, radius = 4, intensityLevels = 25, darkness = 0.3) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    canvas.width = width;
    canvas.height = height;

    // Draw the original image to the canvas to get its pixel data
    ctx.drawImage(originalImg, 0, 0);
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Create a new pixel array for the output image
    const outputData = new Uint8ClampedArray(data.length);

    // Validate and clamp parameters
    const safeRadius = Math.max(1, Math.round(radius));
    const safeIntensity = Math.max(2, Math.min(255, Math.round(intensityLevels)));
    const safeDarkness = Math.max(0, Math.min(1, darkness));
    const darknessFactor = 1.0 - safeDarkness;

    // Iterate over each pixel of the image
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const i = (y * width + x) * 4;

            // Arrays to hold data for the pixel's neighborhood
            const intensityCount = new Array(safeIntensity).fill(0);
            const avgR = new Array(safeIntensity).fill(0);
            const avgG = new Array(safeIntensity).fill(0);
            const avgB = new Array(safeIntensity).fill(0);

            // Analyze the neighborhood of the current pixel
            for (let ny = -safeRadius; ny <= safeRadius; ny++) {
                for (let nx = -safeRadius; nx <= safeRadius; nx++) {
                    const currentY = y + ny;
                    const currentX = x + nx;

                    // Check if the neighbor pixel is within the image bounds
                    if (currentY >= 0 && currentY < height && currentX >= 0 && currentX < width) {
                        const ni = (currentY * width + currentX) * 4;
                        const r = data[ni];
                        const g = data[ni + 1];
                        const b = data[ni + 2];

                        // Calculate the intensity (brightness) of the neighbor pixel and quantize it
                        const currentIntensity = Math.floor(((r + g + b) / 3) * (safeIntensity - 1) / 255);

                        // Store the data for this intensity level
                        intensityCount[currentIntensity]++;
                        avgR[currentIntensity] += r;
                        avgG[currentIntensity] += g;
                        avgB[currentIntensity] += b;
                    }
                }
            }

            // Find the intensity level that occurs most frequently in the neighborhood
            let maxIntensity = 0;
            let maxCount = 0;
            for (let k = 0; k < safeIntensity; k++) {
                if (intensityCount[k] > maxCount) {
                    maxCount = intensityCount[k];
                    maxIntensity = k;
                }
            }
            
            // If the neighborhood analysis found a dominant intensity, calculate the average color
            if (maxCount > 0) {
                const finalR = avgR[maxIntensity] / maxCount;
                const finalG = avgG[maxIntensity] / maxCount;
                const finalB = avgB[maxIntensity] / maxCount;

                 // Apply the darkness factor and set the output pixel
                outputData[i] = finalR * darknessFactor;
                outputData[i + 1] = finalG * darknessFactor;
                outputData[i + 2] = finalB * darknessFactor;
                outputData[i + 3] = 255; // Alpha
            } else {
                // Failsafe in case of an empty neighborhood (should not happen with radius >= 1)
                outputData[i] = data[i] * darknessFactor;
                outputData[i+1] = data[i+1] * darknessFactor;
                outputData[i+2] = data[i+2] * darknessFactor;
                outputData[i+3] = data[i+3];
            }
        }
    }

    // Create a new ImageData object and put it back onto the canvas
    const outputImageData = new ImageData(outputData, width, height);
    ctx.putImageData(outputImageData, 0, 0);

    return canvas;
}