Image To Oil Paint Filter Converter

function processImage(originalImg, radius = 4, levels = 30) {
    radius = parseInt(radius, 10);
    levels = parseInt(levels, 10);

    // Apply basic constraints
    if (radius < 1) radius = 1;
    if (levels < 1) levels = 1;

    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;

    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    
    try {
        const imgData = ctx.getImageData(0, 0, width, height);
        const src = imgData.data;
        
        const outData = ctx.createImageData(width, height);
        const dst = outData.data;

        // Allocate arrays outside the loop to optimize memory and speed
        const intensityCount = new Int32Array(levels + 1);
        const sumR = new Int32Array(levels + 1);
        const sumG = new Int32Array(levels + 1);
        const sumB = new Int32Array(levels + 1);

        for (let y = 0; y < height; y++) {
            for (let x = 0; x < width; x++) {
                // Reset statistics for the current pixel's neighborhood
                intensityCount.fill(0);
                sumR.fill(0);
                sumG.fill(0);
                sumB.fill(0);

                let maxIntensityCount = 0;
                let maxIndex = 0;

                // Determine neighborhood bounds, bounded by image edges
                const startY = Math.max(0, y - radius);
                const endY = Math.min(height - 1, y + radius);
                const startX = Math.max(0, x - radius);
                const endX = Math.min(width - 1, x + radius);

                // Examine the neighborhood
                for (let ny = startY; ny <= endY; ny++) {
                    for (let nx = startX; nx <= endX; nx++) {
                        const i = (ny * width + nx) * 4;
                        const r = src[i];
                        const g = src[i + 1];
                        const b = src[i + 2];

                        // Calculate grayscale intensity level for current neighbor
                        const curIntensity = Math.round((((r + g + b) / 3) * levels) / 255);

                        intensityCount[curIntensity]++;
                        sumR[curIntensity] += r;
                        sumG[curIntensity] += g;
                        sumB[curIntensity] += b;

                        // Keep track of the most frequent intensity
                        if (intensityCount[curIntensity] > maxIntensityCount) {
                            maxIntensityCount = intensityCount[curIntensity];
                            maxIndex = curIntensity;
                        }
                    }
                }

                // Calculate the final color based on the average color of the most frequent intensity
                const outIndex = (y * width + x) * 4;
                dst[outIndex] = Math.round(sumR[maxIndex] / maxIntensityCount);
                dst[outIndex + 1] = Math.round(sumG[maxIndex] / maxIntensityCount);
                dst[outIndex + 2] = Math.round(sumB[maxIndex] / maxIntensityCount);
                dst[outIndex + 3] = src[outIndex + 3]; // Preserve original pixel alpha
            }
        }

        ctx.putImageData(outData, 0, 0);
    } catch (e) {
        console.error("Error applying oil paint filter. Outputting original image. Details: ", e);
    }

    return canvas;
}