Bulge X Image Effect Generator

/**
 * Applies a Bulge X effect to an image. The effect distorts the image by magnifying (bulge)
 * or shrinking (pinch) horizontally along the X-axis while leaving the Y-axis intact.
 * 
 * @param {HTMLImageElement} originalImg - The input image object.
 * @param {number|string} amount - The strength of the bulge effect [-1.0 to 1.0]. Positive is bulge, negative is pinch. Default is 0.5.
 * @param {number|string} radius - The radius of the effect relative to the image width [0.0 to 1.0]. Default is 0.5.
 * @param {number|string} centerX - The center position of the effect on the X-axis [0.0 to 1.0]. Default is 0.5.
 * @returns {HTMLCanvasElement} - A canvas element containing the processed image.
 */
function processImage(originalImg, amount = 0.5, radius = 0.5, centerX = 0.5) {
    // Parse parameters
    const amt = Number(amount);
    const rad = Number(radius);
    const cxRatio = Number(centerX);

    // Setup canvas
    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, width, height);

    // If there is no distortion applied, return the original drawn canvas early
    if (amt === 0 || rad <= 0) {
        return canvas;
    }

    const srcImageData = ctx.getImageData(0, 0, width, height);
    const srcData = srcImageData.data;
    const dstImageData = ctx.createImageData(width, height);
    const dstData = dstImageData.data;

    // Convert normalized parameters to pixel values
    const cx = cxRatio * width;
    const r = rad * width;

    // Precompute X-axis distortion mapping
    // Since the Bulge X effect operates entirely in 1D horizontally, we can precalculate 
    // the source pixels and interpolation weights for a single row to maximize performance.
    const safeX1 = new Int32Array(width);
    const safeX2 = new Int32Array(width);
    const wx = new Float32Array(width);
    const iwx = new Float32Array(width);

    for (let x = 0; x < width; x++) {
        let dx = x - cx;
        let distance = Math.abs(dx);
        let srcX = x;

        // Apply distortion if the pixel falls within the bulging radius
        if (distance < r && r > 0) {
            let ratio = distance / r;
            // Using a cubic polynomial distortion mapping mapping
            srcX = cx + dx * (1 - amt * (1 - ratio * ratio));
        }

        // Setup linear interpolation values
        let x1 = Math.floor(srcX);
        let x2 = x1 + 1;
        let weight = srcX - x1;

        // Clamp the sampled source pixels to essentially handle edges gracefully
        safeX1[x] = x1 < 0 ? 0 : (x1 >= width ? width - 1 : x1);
        safeX2[x] = x2 < 0 ? 0 : (x2 >= width ? width - 1 : x2);
        wx[x] = weight;
        iwx[x] = 1.0 - weight;
    }

    // Apply mapping looping over Height -> Width
    for (let y = 0; y < height; y++) {
        let yOffset = y * width;
        for (let x = 0; x < width; x++) {
            // Left shift by 2 is functionally equivalent to multiplying by 4 (RGBA bytes)
            let dstIdx = (yOffset + x) << 2; 
            let idx1 = (yOffset + safeX1[x]) << 2;
            let idx2 = (yOffset + safeX2[x]) << 2;
            
            let weightX = wx[x];
            let invWeightX = iwx[x];

            // Bilinear interpolation computationally simplified to horizontal space (Linear)
            dstData[dstIdx]     = srcData[idx1]     * invWeightX + srcData[idx2]     * weightX;
            dstData[dstIdx + 1] = srcData[idx1 + 1] * invWeightX + srcData[idx2 + 1] * weightX;
            dstData[dstIdx + 2] = srcData[idx1 + 2] * invWeightX + srcData[idx2 + 2] * weightX;
            dstData[dstIdx + 3] = srcData[idx1 + 3] * invWeightX + srcData[idx2 + 3] * weightX;
        }
    }

    // Draw the calculated altered pixel data back to canvas
    ctx.putImageData(dstImageData, 0, 0);
    
    return canvas;
}