Image Current Effect Generator

function processImage(originalImg, amplitude = 15, frequency = 0.05) {
    // Convert parameters to numbers in case they are passed as strings
    const amp = typeof amplitude === 'number' ? amplitude : parseFloat(amplitude) || 15;
    const freq = typeof frequency === 'number' ? frequency : parseFloat(frequency) || 0.05;

    // Create a canvas to work with the image data
    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 the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    // Extract the pixel data
    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;
    
    // Create an empty array for the output pixel data
    const outData = new Uint8ClampedArray(data.length);

    // Loop through each pixel to apply the current effect
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            // Generate a flowing 'current' displacement using interacting sine and cosine waves
            // Combining multiple frequencies gives it a more organic, water-like flow
            let dx = Math.sin(y * freq) * amp + Math.sin(x * freq * 1.5) * (amp / 2);
            let dy = Math.cos(x * freq) * amp + Math.cos(y * freq * 1.5) * (amp / 2);

            // Calculate the source pixel coordinates after displacement
            let srcX = Math.floor(x + dx);
            let srcY = Math.floor(y + dy);

            // Clamp coordinates to the image boundaries to prevent out-of-bounds artifacting
            srcX = Math.max(0, Math.min(width - 1, srcX));
            srcY = Math.max(0, Math.min(height - 1, srcY));

            // Calculate 1D indices for the pixel arrays
            let outIdx = (y * width + x) * 4;
            let srcIdx = (srcY * width + srcX) * 4;

            // Copy RGBA values from the displaced source to the destination
            outData[outIdx] = data[srcIdx];         // Red
            outData[outIdx + 1] = data[srcIdx + 1]; // Green
            outData[outIdx + 2] = data[srcIdx + 2]; // Blue
            outData[outIdx + 3] = data[srcIdx + 3]; // Alpha
        }
    }

    // Set the distorted current pixel data back to the canvas
    const outputImgData = new ImageData(outData, width, height);
    ctx.putImageData(outputImgData, 0, 0);

    return canvas;
}