Autovocoding Image Effect Generator

function processImage(originalImg, mixRatio = 0.85, bandCount = 64, carrierType = 'sine', colorStyle = 'rainbow') {
    // Parse and clamp parameters
    const mix = Math.max(0, Math.min(1, parseFloat(mixRatio) || 0.85));
    const bands = Math.max(1, parseInt(bandCount) || 64);
    
    const w = originalImg.width;
    const h = originalImg.height;

    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');

    // Draw the original image to extract pixel data
    ctx.drawImage(originalImg, 0, 0);
    const imgData = ctx.getImageData(0, 0, w, h);
    const data = imgData.data;

    // Create a new ImageData object for the final output
    const outData = ctx.createImageData(w, h);
    const out = outData.data;

    const bandWidth = Math.max(1, w / bands);

    // Vocoder visual carrier configurations (simulating frequencies)
    const minFreq = 0.1;
    const maxFreq = 1.5;

    for (let y = 0; y < h; y++) {
        for (let x = 0; x < w; x++) {
            const i = (y * w + x) * 4;

            // Determine which "channel band" this x coordinate falls into
            const bandIndex = Math.floor(x / bandWidth);
            // Center of the current band to extract the envelope (modulator signal)
            const bandCenter = Math.floor((bandIndex + 0.5) * bandWidth);
            const sampleX = Math.min(w - 1, bandCenter);

            // Fetch the modulator envelope pixel from the center of the band
            const envIdx = (y * w + sampleX) * 4;
            const r = data[envIdx];
            const g = data[envIdx + 1];
            const b = data[envIdx + 2];
            
            // Standard perceptual luminance acts as the vocoder's magnitude envelope
            const luma = (0.299 * r + 0.587 * g + 0.114 * b) / 255.0;

            // Frequency for this spatial band increases from left to right (like a spectrum analyzer)
            const freq = minFreq + (bandIndex / bands) * (maxFreq - minFreq);
            let carrier = 1.0;

            // Generate the carrier signal for the current pixel
            if (carrierType === 'noise') {
                carrier = Math.random();
            } else if (carrierType === 'sawtooth') {
                carrier = (y * freq) % 1.0;
            } else if (carrierType === 'square') {
                carrier = Math.sin(y * freq) > 0 ? 1.0 : 0.0;
            } else { // default to 'sine' wave
                carrier = 0.5 + 0.5 * Math.sin(y * freq);
            }

            // Windowing function (Hanning-like) visually separates the channels/columns smoothly
            const inBandX = (x - bandIndex * bandWidth) / bandWidth;
            const bandWindow = Math.sin(inBandX * Math.PI);

            // The Autovocoded core operation (Modulator * Carrier * Window Filter)
            const vocodedLuma = luma * carrier * bandWindow;

            let synthR, synthG, synthB;

            // Map the signal back into color space
            if (colorStyle === 'original') {
                // Modulate the original pixel's chroma by the new vocoded envelope
                const origR = data[i];
                const origG = data[i+1];
                const origB = data[i+2];
                const origLuma = (0.299 * origR + 0.587 * origG + 0.114 * origB) / 255.0;
                
                // Prevent divide-by-zero on black pixels
                const lumaRatio = origLuma > 0.01 ? vocodedLuma / origLuma : vocodedLuma;
                
                synthR = Math.min(255, origR * lumaRatio * 2.0); // Amplified for brightness 
                synthG = Math.min(255, origG * lumaRatio * 2.0);
                synthB = Math.min(255, origB * lumaRatio * 2.0);
            } else { 
                // Default 'rainbow' synthwave style, distributes hue by frequency band
                const hue = (bandIndex / bands) * 360;
                const cVal = vocodedLuma; 
                const hPrime = hue / 60;
                const xVal = cVal * (1 - Math.abs((hPrime % 2) - 1));

                let rC = 0, gC = 0, bC = 0;
                if (hPrime < 1) { rC = cVal; gC = xVal; bC = 0; }
                else if (hPrime < 2) { rC = xVal; gC = cVal; bC = 0; }
                else if (hPrime < 3) { rC = 0; gC = cVal; bC = xVal; }
                else if (hPrime < 4) { rC = 0; gC = xVal; bC = cVal; }
                else if (hPrime < 5) { rC = xVal; gC = 0; bC = cVal; }
                else { rC = cVal; gC = 0; bC = xVal; }

                synthR = Math.min(255, rC * 255 * 1.8); // slight boost for synthetic pop
                synthG = Math.min(255, gC * 255 * 1.8);
                synthB = Math.min(255, bC * 255 * 1.8);
            }

            // Blend the dry (original image) and wet (vocoded synth image) signals
            out[i]     = data[i] * (1 - mix) + synthR * mix;
            out[i+1]   = data[i+1] * (1 - mix) + synthG * mix;
            out[i+2]   = data[i+2] * (1 - mix) + synthB * mix;
            out[i+3]   = data[i+3]; // keep original alpha
        }
    }

    ctx.putImageData(outData, 0, 0);
    return canvas;
}