Oppo Deform Image Effect Generator

/**
 * Applies an "Oppo Deform" (Opposing Deformation) effect to an image.
 * This distorts the image using one of three mirrored/opposing algorithms.
 *
 * @param {HTMLImageElement} originalImg - The original image to process.
 * @param {string} deformType - Type of opposing deform ("opposing_waves", "opposing_twist", "opposing_stretch"). Default: "opposing_waves".
 * @param {number|string} strength - The amplitude/strength of the deformation. Default: 20.
 * @param {number|string} frequency - The frequency/wavelength of the deformation. Default: 50.
 * @returns {HTMLCanvasElement} A canvas element containing the deformed image.
 */
function processImage(originalImg, deformType = "opposing_waves", strength = 20, frequency = 50) {
    const s = parseFloat(strength) || 20;
    let f = parseFloat(frequency) || 50;
    
    // Prevent division by zero
    if (f === 0) f = 1;

    const width = originalImg.width;
    const height = originalImg.height;

    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;
    const outData = new Uint8ClampedArray(data.length);

    const cx = width / 2;
    const cy = height / 2;

    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            let srcX, srcY;

            // Apply different types of oppositional deformation effects
            if (deformType === 'opposing_twist') {
                let dx = x - cx;
                let dy = y - cy;
                let dist = Math.sqrt(dx * dx + dy * dy);
                let angle = Math.atan2(dy, dx);
                
                // Alternating twist direction (opposing twists)
                let twist = Math.sin(dist / f) * (s / 10);
                
                srcX = cx + dist * Math.cos(angle + twist);
                srcY = cy + dist * Math.sin(angle + twist);
                
            } else if (deformType === 'opposing_stretch') {
                let dx = x - cx;
                let dy = y - cy;
                
                // Opposite stretch: when one axis expands, the other compresses
                let factor = Math.cos((Math.abs(dx) + Math.abs(dy)) / f) * (s / 50) + 1;
                if (factor < 0.1) factor = 0.1;
                
                srcX = cx + dx * factor;
                srcY = cy + dy / factor;
                
            } else {
                // Default: opposing_waves
                // X shifts via sine of Y, Y shifts via opposite sine of X
                srcX = x + Math.sin(y / f) * s;
                srcY = y - Math.sin(x / f) * s; 
            }

            // Bilinear interpolation for smooth sub-pixel distortion
            let x1 = Math.floor(srcX);
            let y1 = Math.floor(srcY);
            let x2 = x1 + 1;
            let y2 = y1 + 1;

            let tx = srcX - x1;
            let ty = srcY - y1;

            // Clamp coordinates to image boundaries
            x1 = Math.max(0, Math.min(width - 1, x1));
            y1 = Math.max(0, Math.min(height - 1, y1));
            x2 = Math.max(0, Math.min(width - 1, x2));
            y2 = Math.max(0, Math.min(height - 1, y2));

            // Calculate 1D indices for the pixel channels
            let p1 = (y1 * width + x1) * 4;
            let p2 = (y1 * width + x2) * 4;
            let p3 = (y2 * width + x1) * 4;
            let p4 = (y2 * width + x2) * 4;

            let outIdx = (y * width + x) * 4;

            // Interpolate R, G, B, and Alpha channels
            for (let i = 0; i < 4; i++) {
                let top = data[p1 + i] * (1 - tx) + data[p2 + i] * tx;
                let bottom = data[p3 + i] * (1 - tx) + data[p4 + i] * tx;
                outData[outIdx + i] = top * (1 - ty) + bottom * ty;
            }
        }
    }

    const outImgData = new ImageData(outData, width, height);
    ctx.putImageData(outImgData, 0, 0);

    return canvas;
}