Image Resonance Effect Generator

function processImage(
    originalImg,
    waveAmplitude = 15,
    waveWavelength = 30,
    resonanceLobes = 4,
    chromaticAberration = 8,
    echoCount = 6,
    echoZoomStep = 0.08,
    echoRotation = 2
) {
    // Coerce parameters to numbers gracefully
    waveAmplitude = parseFloat(waveAmplitude) || 0;
    waveWavelength = parseFloat(waveWavelength);
    if (!waveWavelength || waveWavelength === 0) waveWavelength = 1;
    resonanceLobes = parseFloat(resonanceLobes) || 0;
    chromaticAberration = parseFloat(chromaticAberration) || 0;
    echoCount = parseInt(echoCount, 10) || 0;
    echoZoomStep = parseFloat(echoZoomStep) || 0;
    echoRotation = parseFloat(echoRotation) || 0;

    const w = originalImg.width;
    const h = originalImg.height;

    // Create a canvas to extract original image data
    const srcCanvas = document.createElement('canvas');
    srcCanvas.width = w;
    srcCanvas.height = h;
    const srcCtx = srcCanvas.getContext('2d', { willReadFrequently: true });
    srcCtx.drawImage(originalImg, 0, 0);

    const imgData = srcCtx.getImageData(0, 0, w, h);
    const inData = imgData.data;

    // Create a temporary canvas for the warped wave effect
    const outCanvas = document.createElement('canvas');
    outCanvas.width = w;
    outCanvas.height = h;
    const outCtx = outCanvas.getContext('2d');
    const outImgData = outCtx.createImageData(w, h);
    const outData = outImgData.data;

    const cx = w / 2;
    const cy = h / 2;
    const hasLobes = resonanceLobes > 0;

    // Step 1: Apply cymatics (Chladni resonance) space distortion and chromatic shift
    for (let y = 0; y < h; y++) {
        let dy = y - cy;
        let dy2 = dy * dy;
        let rowOffset = y * w;

        for (let x = 0; x < w; x++) {
            let dx = x - cx;
            let dist = Math.sqrt(dx * dx + dy2) || 1;

            let phase = dist / waveWavelength;
            let lobeMultiplier = 1;

            if (hasLobes) {
                let angle = Math.atan2(dy, dx);
                lobeMultiplier = Math.cos(angle * resonanceLobes);
            }

            // Calculate the resonance standing wave offset
            let ripple = Math.sin(phase) * waveAmplitude * lobeMultiplier;

            let dirX = dx / dist;
            let dirY = dy / dist;

            // Offset color channels to create a vibrating chromatic aberration
            let rx = x + dirX * (ripple + chromaticAberration);
            let ry = y + dirY * (ripple + chromaticAberration);

            let gx = x + dirX * ripple;
            let gy = y + dirY * ripple;

            let bx = x + dirX * (ripple - chromaticAberration);
            let by = y + dirY * (ripple - chromaticAberration);

            let outIdx = (rowOffset + x) * 4;

            // Nearest neighbor sampler with clamping
            let irx = rx < 0 ? 0 : (rx >= w ? w - 1 : rx | 0);
            let iry = ry < 0 ? 0 : (ry >= h ? h - 1 : ry | 0);
            outData[outIdx] = inData[(iry * w + irx) * 4];     // R

            let igx = gx < 0 ? 0 : (gx >= w ? w - 1 : gx | 0);
            let igy = gy < 0 ? 0 : (gy >= h ? h - 1 : gy | 0);
            outData[outIdx + 1] = inData[(igy * w + igx) * 4 + 1]; // G

            let ibx = bx < 0 ? 0 : (bx >= w ? w - 1 : bx | 0);
            let iby = by < 0 ? 0 : (by >= h ? h - 1 : by | 0);
            outData[outIdx + 2] = inData[(iby * w + ibx) * 4 + 2]; // B

            // Using the green channel's unshifted anchor point for structural Alpha
            outData[outIdx + 3] = inData[(igy * w + igx) * 4 + 3];
        }
    }

    outCtx.putImageData(outImgData, 0, 0);

    // Step 2: Composite echo feedback for a vibrating "halo" resonance effect
    const finalCanvas = document.createElement('canvas');
    finalCanvas.width = w;
    finalCanvas.height = h;
    const finalCtx = finalCanvas.getContext('2d');

    // Lay down the base rippled image
    finalCtx.drawImage(outCanvas, 0, 0);

    // Expand outward with scaled layers (visualizing the acoustic/visual echoes)
    for (let i = 1; i <= echoCount; i++) {
        finalCtx.save();
        finalCtx.translate(cx, cy);
        
        let s = 1 + i * echoZoomStep;
        finalCtx.scale(s, s);
        finalCtx.rotate(i * echoRotation * Math.PI / 180);

        finalCtx.globalAlpha = 0.4 / i; // Echoes gradually fade as they expand
        finalCtx.drawImage(outCanvas, -cx, -cy);
        
        finalCtx.restore();
    }

    return finalCanvas;
}