High Voice Image Effect Generator

/**
 * Applies a "High Voice" image effect (a pinch distort in the center of the image).
 * This simulates the visual tiny-face/squeaky effect often paired with high-pitch voice filters.
 * 
 * @param {HTMLImageElement} originalImg - The source image to be processed.
 * @param {number|string} strength - The intensity of the pinch effect, from -0.99 to 0.99. Default is 0.6.
 * @param {number|string} radiusScale - The relative radius size of the effect. Default is 1.2.
 * @param {number|string} centerX - Unnormalized X center of the effect (0.0 to 1.0). Default is 0.5.
 * @param {number|string} centerY - Unnormalized Y center of the effect (0.0 to 1.0). Default is 0.5.
 * @returns {HTMLCanvasElement} - A canvas containing the processed image.
 */
function processImage(originalImg, strength = 0.6, radiusScale = 1.2, centerX = 0.5, centerY = 0.5) {
    // Safely parse numerical values from potentially string parameters
    strength = isNaN(parseFloat(strength)) ? 0.6 : parseFloat(strength);
    radiusScale = isNaN(parseFloat(radiusScale)) ? 1.2 : parseFloat(radiusScale);
    centerX = isNaN(parseFloat(centerX)) ? 0.5 : parseFloat(centerX);
    centerY = isNaN(parseFloat(centerY)) ? 0.5 : parseFloat(centerY);

    // Clamp strength safely to prevent zero or extremely broken exponents
    // strength > 0 -> inward pinch (squeaky face effect, typical "high voice")
    // strength < 0 -> outward bulge (deep voice effect)
    strength = Math.max(-0.99, Math.min(0.99, strength));
    
    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);
    
    const srcData = ctx.getImageData(0, 0, width, height);
    const dstData = ctx.createImageData(width, height);
    
    const cx = width * Math.max(0, Math.min(1, centerX));
    const cy = height * Math.max(0, Math.min(1, centerY));
    
    // We use Math.min(width, height) so the distortion always conforms nicely to the center face
    const radius = (Math.min(width, height) / 2) * Math.max(0.1, radiusScale);
    const gamma = 1.0 - strength;
    
    const srcBuffer = srcData.data;
    const dstBuffer = dstData.data;
    
    let dstIdx = 0;
    
    for (let y = 0; y < height; y++) {
        const dy = y - cy;
        const dy2 = dy * dy;
        
        for (let x = 0; x < width; x++) {
            const dx = x - cx;
            const d = Math.sqrt(dx * dx + dy2);
            
            // Check if we are outside the distortion circle
            if (d >= radius || d === 0) {
                // Copy original pixel exactly, bypassing heavy math overhead
                dstBuffer[dstIdx]     = srcBuffer[dstIdx];
                dstBuffer[dstIdx + 1] = srcBuffer[dstIdx + 1];
                dstBuffer[dstIdx + 2] = srcBuffer[dstIdx + 2];
                dstBuffer[dstIdx + 3] = srcBuffer[dstIdx + 3];
            } else {
                // Apply radial pinch mapping
                const r = d / radius;
                const rho = Math.pow(r, gamma);
                const d_src = rho * radius;
                
                const ratio = d_src / d;
                const sx = cx + dx * ratio;
                const sy = cy + dy * ratio;
                
                // Bilinear interpolation
                let x1 = Math.floor(sx);
                let y1 = Math.floor(sy);
                let x2 = x1 + 1;
                let y2 = y1 + 1;
                
                // Weights based on pure mathematical floor, retaining validity even if coordinates clip
                const wx2 = sx - x1;
                const wy2 = sy - y1;
                const wx1 = 1.0 - wx2;
                const wy1 = 1.0 - wy2;
                
                // Clamp sampling boundaries safely to the edges
                x1 = Math.max(0, Math.min(x1, width - 1));
                x2 = Math.max(0, Math.min(x2, width - 1));
                y1 = Math.max(0, Math.min(y1, height - 1));
                y2 = Math.max(0, Math.min(y2, height - 1));
                
                const w1 = wx1 * wy1;
                const w2 = wx2 * wy1;
                const w3 = wx1 * wy2;
                const w4 = wx2 * wy2;
                
                const i1 = (y1 * width + x1) * 4;
                const i2 = (y1 * width + x2) * 4;
                const i3 = (y2 * width + x1) * 4;
                const i4 = (y2 * width + x2) * 4;
                
                // Calculate colors via manual loop-unrolled weighted sums
                dstBuffer[dstIdx]     = srcBuffer[i1]     * w1 + srcBuffer[i2]     * w2 + srcBuffer[i3]     * w3 + srcBuffer[i4]     * w4;
                dstBuffer[dstIdx + 1] = srcBuffer[i1 + 1] * w1 + srcBuffer[i2 + 1] * w2 + srcBuffer[i3 + 1] * w3 + srcBuffer[i4 + 1] * w4;
                dstBuffer[dstIdx + 2] = srcBuffer[i1 + 2] * w1 + srcBuffer[i2 + 2] * w2 + srcBuffer[i3 + 2] * w3 + srcBuffer[i4 + 2] * w4;
                dstBuffer[dstIdx + 3] = srcBuffer[i1 + 3] * w1 + srcBuffer[i2 + 3] * w2 + srcBuffer[i3 + 3] * w3 + srcBuffer[i4 + 3] * w4;
            }
            
            dstIdx += 4; // Move destination pointer forward to the next pixel RGBA offset
        }
    }
    
    ctx.putImageData(dstData, 0, 0);
    return canvas;
}