Audio-Frequency Image Distortion Tool

function processImage(originalImg, frequencyX = 60, amplitudeX = 25, frequencyY = 40, amplitudeY = 15, rgbSplit = 8) {
    // Convert parameter inputs to numbers
    const freqX = Number(frequencyX) || 0;
    const ampX = Number(amplitudeX) || 0;
    const freqY = Number(frequencyY) || 0;
    const ampY = Number(amplitudeY) || 0;
    const split = Number(rgbSplit) || 0;

    // Create and size the 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');
    
    // Draw original image to extract pixel data
    ctx.drawImage(originalImg, 0, 0, width, height);
    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;

    // Create a new ImageData object for the distorted output
    const outputData = ctx.createImageData(width, height);
    const outBase = outputData.data;

    for (let y = 0; y < height; y++) {
        // Compute complex waveform for horizontal displacement across the Y axis (simulating audio frequencies)
        const phaseX1 = y * Math.PI * 2 * (freqX / height);
        // Add a secondary harmonic to make the "torture" effect more chaotic/unpredictable
        const phaseX2 = y * Math.PI * 2 * (freqX * 3.14 / height);
        
        const displacementX = (Math.sin(phaseX1) + Math.sin(phaseX2) * 0.5) * ampX;

        for (let x = 0; x < width; x++) {
            // Compute complex waveform for vertical displacement across the X axis
            const phaseY1 = x * Math.PI * 2 * (freqY / width);
            const phaseY2 = x * Math.PI * 2 * (freqY * 2.71 / width);
            
            const displacementY = (Math.cos(phaseY1) + Math.sin(phaseY2) * 0.5) * ampY;
            
            // Calculate distorted Y-coordinate
            const srcY = Math.floor(y + displacementY);
            // Clamp to boundaries
            const clampedSrcY = Math.max(0, Math.min(height - 1, srcY));
            
            // Calculate destination array index
            const destIdx = (y * width + x) * 4;
            
            // Apply RGB split across the displaced X coordinates to simulate chromatic aberration / signal degradation
            const rX = Math.floor(x + displacementX - split);
            const gX = Math.floor(x + displacementX);
            const bX = Math.floor(x + displacementX + split);
            
            const clampedRX = Math.max(0, Math.min(width - 1, rX));
            const clampedGX = Math.max(0, Math.min(width - 1, gX));
            const clampedBX = Math.max(0, Math.min(width - 1, bX));
            
            // Map back to 1D array coordinates for each color block
            const idxR = (clampedSrcY * width + clampedRX) * 4;
            const idxG = (clampedSrcY * width + clampedGX) * 4;
            const idxB = (clampedSrcY * width + clampedBX) * 4;
            
            // Reconstruct the tortured pixel in destination
            outBase[destIdx] = data[idxR];         // Red channel
            outBase[destIdx + 1] = data[idxG + 1]; // Green channel
            outBase[destIdx + 2] = data[idxB + 2]; // Blue channel
            outBase[destIdx + 3] = data[idxG + 3]; // Preserve Alpha from green alignment
        }
    }

    // Apply the distorted pixel data back to the canvas
    ctx.putImageData(outputData, 0, 0);

    return canvas;
}