Audio-Visual Desync Fixer Tool

function processImage(originalImg, rgbSplitX = 10, rgbSplitY = 0, audioWaveAmplitude = 5, audioWaveFrequency = 10) {
    // Parse parameters to ensure they are treated as numbers
    const shiftX = Number(rgbSplitX) || 0;
    const shiftY = Number(rgbSplitY) || 0;
    const waveAmplitude = Number(audioWaveAmplitude) || 0;
    const waveFreq = Number(audioWaveFrequency) || 0;

    // Create canvas and get dimensions
    const canvas = document.createElement('canvas');
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    
    canvas.width = width;
    canvas.height = height;

    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    
    // Draw original image
    ctx.drawImage(originalImg, 0, 0);

    // If no distortion parameters are applied, return the unmodified canvas
    if (shiftX === 0 && shiftY === 0 && waveAmplitude === 0) {
        return canvas;
    }

    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;
    
    // Create new image data for the result
    const resultData = new ImageData(width, height);
    const resData = resultData.data;

    for (let y = 0; y < height; y++) {
        // Calculate audio wave horizontal distortion
        let waveOffset = 0;
        if (waveAmplitude !== 0 && waveFreq !== 0) {
            waveOffset = Math.round(Math.sin((y / height) * waveFreq * Math.PI * 2) * waveAmplitude);
        }

        for (let x = 0; x < width; x++) {
            let outIdx = (y * width + x) * 4;

            // Apply wave distortion (Audio aspect)
            let base_x = x + waveOffset;

            // Chromatic aberration / RGB displacement (Visual aspect)
            // Red channel shifted out of sync
            let r_x = Math.min(width - 1, Math.max(0, base_x - shiftX));
            let r_y = Math.min(height - 1, Math.max(0, y - shiftY));

            // Green channel acts as the anchor/base
            let g_x = Math.min(width - 1, Math.max(0, base_x));
            let g_y = y;

            // Blue channel shifted out of sync in the opposite direction
            let b_x = Math.min(width - 1, Math.max(0, base_x + shiftX));
            let b_y = Math.min(height - 1, Math.max(0, y + shiftY));

            let r_idx = (r_y * width + r_x) * 4;
            let g_idx = (g_y * width + g_x) * 4;
            let b_idx = (b_y * width + b_x) * 4;

            // Map corresponding pixels to output (or fix them if inverse values are provided)
            resData[outIdx]     = data[r_idx];       // R
            resData[outIdx + 1] = data[g_idx + 1];   // G
            resData[outIdx + 2] = data[b_idx + 2];   // B
            resData[outIdx + 3] = data[g_idx + 3];   // A (Anchor to Green channel's Alpha)
        }
    }

    // Paint the processed, synced/desynced image back onto the canvas
    ctx.putImageData(resultData, 0, 0);

    return canvas;
}