Big Hero 6 To Big Hero 6 The Series AU Replacement Tool

/**
 * Big Hero 6 To Big Hero 6 The Series AU Replacement Tool
 * 
 * Description: Big Hero 6 (the movie) is well known for its 3D CGI animation, while 
 * "Big Hero 6: The Series" utilizes a traditional 2D hand-drawn/flat style. 
 * This tool bridges the "Alternate Universe" (AU) gap by running an image through a 
 * 2D Toon-Shading/Cel-Shading filter. This stylizes the image to look like a frame from 
 * the 2D series (flat, saturated colors, fewer gradients, and strong comic book outlines).
 * 
 * @param {HTMLImageElement} originalImg - The original image object.
 * @param {number|string} edgeSensitivity - Threshold for drawing outline strokes (default: 80).
 * @param {number|string} colorLevels - How many distinct color bands to restrict to for cel-shading (default: 6).
 * @param {number|string} colorSaturation - Boosts color saturation to match the vibrant 2D show (default: 1.3).
 * @returns {HTMLCanvasElement} - A canvas containing the processed animated style image.
 */
function processImage(originalImg, edgeSensitivity = 80, colorLevels = 6, colorSaturation = 1.3) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;
    
    // Draw original image to canvas
    ctx.drawImage(originalImg, 0, 0, width, height);
    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;

    // Parse parameters
    const threshold = Number(edgeSensitivity) || 80;
    const levels = Math.max(2, Number(colorLevels) || 6); // Prevent division by zero
    const sat = Number(colorSaturation) || 1.3;

    // Precalculate Luma for Sobel Edge Detection 
    const grayscale = new Uint8Array(width * height);
    for (let i = 0; i < data.length; i += 4) {
        // ITU-R 601 Luma
        grayscale[i / 4] = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
    }

    // Sobel kernels for edge detection
    const sobelData = new Uint8Array(width * height);
    const gx = [-1, 0, 1, -2, 0, 2, -1, 0, 1];
    const gy = [-1, -2, -1, 0, 0, 0, 1, 2, 1];

    // Build the edges
    for (let y = 1; y < height - 1; y++) {
        for (let x = 1; x < width - 1; x++) {
            let pixelX = 0;
            let pixelY = 0;
            
            // Apply convolution
            for (let j = -1; j <= 1; j++) {
                for (let i = -1; i <= 1; i++) {
                    const idx = ((y + j) * width + (x + i));
                    const weightX = gx[(j + 1) * 3 + (i + 1)];
                    const weightY = gy[(j + 1) * 3 + (i + 1)];
                    pixelX += grayscale[idx] * weightX;
                    pixelY += grayscale[idx] * weightY;
                }
            }
            
            const magnitude = Math.sqrt(pixelX * pixelX + pixelY * pixelY);
            if (magnitude > threshold) {
                sobelData[y * width + x] = 255;
            }
        }
    }

    const interval = 255 / (levels - 1);

    // Apply stylization (Posterization + Saturation + Edges)
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const idx = (y * width + x) * 4;
            
            // Skip fully transparent pixels
            if (data[idx + 3] === 0) continue;

            const isEdge = sobelData[y * width + x] === 255;
            
            if (isEdge) {
                // Apply black comic stroke
                data[idx] = 0;     // R
                data[idx + 1] = 0; // G
                data[idx + 2] = 0; // B
            } else {
                let r = data[idx];
                let g = data[idx + 1];
                let b = data[idx + 2];

                // Increase Saturation
                const luma = 0.299 * r + 0.587 * g + 0.114 * b;
                r = luma + (r - luma) * sat;
                g = luma + (g - luma) * sat;
                b = luma + (b - luma) * sat;

                 // Apply Posterization (Cel-shading flat color levels)
                data[idx] = Math.min(255, Math.max(0, Math.round(Math.round(r / interval) * interval)));
                data[idx + 1] = Math.min(255, Math.max(0, Math.round(Math.round(g / interval) * interval)));
                data[idx + 2] = Math.min(255, Math.max(0, Math.round(Math.round(b / interval) * interval)));
            }
        }
    }

    // Assign mapped 2D stylized data back to canvas
    ctx.putImageData(imgData, 0, 0);
    return canvas;
}