Stream Image Generator

function processImage(originalImg, direction = "vertical", amplitude = 15, frequency = 0.03) {
    // Parse parameters to correct types
    const dir = String(direction).toLowerCase();
    const amp = Number(amplitude);
    const freq = Number(frequency);

    // Create a canvas with the same dimensions as the original image
    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 its pixel data
    ctx.drawImage(originalImg, 0, 0);
    const srcImgData = ctx.getImageData(0, 0, width, height);
    
    // Using Uint32Array for much faster pixel copying
    const srcData32 = new Uint32Array(srcImgData.data.buffer);
    
    // Create new image data for the output
    const outImgData = ctx.createImageData(width, height);
    const outData32 = new Uint32Array(outImgData.data.buffer);

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

            if (dir === 'vertical') {
                // Vertical stream: displace pixels horizontally in a flowing wavy pattern
                let displacement = Math.sin(y * freq) * amp 
                                 + Math.sin(y * freq * 2.1) * (amp * 0.5) 
                                 + Math.sin(y * freq * 0.77 + x * freq * 0.5) * (amp * 1.2);
                srcX = Math.floor(x + displacement);
            } else {
                // Horizontal stream: displace pixels vertically in a flowing wavy pattern
                let displacement = Math.sin(x * freq) * amp 
                                 + Math.sin(x * freq * 2.1) * (amp * 0.5) 
                                 + Math.sin(x * freq * 0.77 + y * freq * 0.5) * (amp * 1.2);
                srcY = Math.floor(y + displacement);
            }

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

            // Copy 32-bit pixel (RGBA channels) from source to destination
            outData32[y * width + x] = srcData32[srcY * width + srcX];
        }
    }

    // Put the processed pixel data back onto the canvas
    ctx.putImageData(outImgData, 0, 0);

    return canvas;
}