Fandom Fire — A GPU-Accelerated, AI-Powered Roast Battle Engine

[User Input] → [Gemini Roast Generator] → [ElevenLabs Voice Synth] → [Web Audio FFT] → [GLSL Shader]

async function generateBattle(f1, f2) {

    const turns = [

        { attacker: f1, defender: f2, side: 'left' },

        { attacker: f2, defender: f1, side: 'right' },

        { attacker: f1, defender: f2, side: 'left' },

        { attacker: f2, defender: f1, side: 'right' }

    ];



    for(let i=0; i<turns.length; i++) {

        if(!isBattling) break;

        const turn = turns[i];

        const prompt = `You are ${turn.attacker}. Write a single, highly 

          aggressive, funny, and punchy 1-2 sentence roast insulting 

          ${turn.defender}. Use VERY SIMPLE, EASY TO UNDERSTAND language. 

          Do not include quotes, hashtags, or emojis. Just the raw dialogue. 

          Speak in: ${preferredLang}.`;



        const response = await fetch(

          `https://generativelanguage.googleapis.com/v1beta/models/gemini-3.1-flash-lite:generateContent?key=${geminiKey}`, 

          {

            method: 'POST',

            headers: { 'Content-Type': 'application/json' },

            body: JSON.stringify({

                contents: [{ parts: [{ text: prompt }] }],

                systemInstruction: {

                    parts: [{ text: "You are a roast character. Output ONLY the raw roast text. No formatting." }]

                }

            })

        });



        const data = await response.json();

        const roastText = data.candidates[0].content.parts[0].text

          .replace(/["\n]/g, '').trim();



        roastQueue.push({

            attacker: turn.attacker,

            side: turn.side,

            text: roastText,

            dmg: Math.floor(Math.random() * 21) + 40,

            voice: turn.side === 'left' ? VOICE_LEFT : VOICE_RIGHT

        });

    }

}

function playTurn(turn) {

    return new Promise(async (resolve) => {

        // Fetch synthesized audio from ElevenLabs

        const response = await fetch(

          `https://api.elevenlabs.io/v1/text-to-speech/${turn.voice}?output_format=mp3_44100_128`, 

          {

            method: 'POST',

            headers: { 'xi-api-key': elevenKey, 'Content-Type': 'application/json' },

            body: JSON.stringify({

                text: turn.text,

                model_id: "eleven_v3",

                voice_settings: { stability: 0.5, similarity_boost: 0.75 }

            })

        });



        // Decode directly into Web Audio API buffer

        const arrayBuffer = await response.arrayBuffer();

        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);



        // Route through analyser node for FFT data extraction

        const source = audioContext.createBufferSource();

        source.buffer = audioBuffer;

        source.connect(analyser);        // ← FFT tap point

        analyser.connect(audioContext.destination);

        source.start(0);

    });

}

void main() {

    vec2 uv = gl_FragCoord.xy / u_resolution.xy;



    // Multi-octave noise generates organic wave forms

    float n1 = noise(vec2(uv.x * 2.5 + u_time * 0.6, u_time * 0.4));

    float n2 = noise(vec2(uv.x * 4.5 - u_time * 0.4, u_time * 0.3));



    // Audio volumes directly modulate wave height

    float leftHeight = u_leftVolume * 0.28;

    float rightHeight = u_rightVolume * 0.28;



    float waveHeight = 0.15 

        + n1 * (0.12 + leftHeight) 

        + n2 * (0.08 + rightHeight);



    // Smooth, glowing boundary (no harsh edges)

    float alpha = smoothstep(-0.35, 0.05, waveHeight - uv.y);



    // Premium gradient: Sky Blue → Violet → Rose Pink

    vec3 colorLeft  = vec3(0.02, 0.42, 0.98);

    vec3 colorMid   = vec3(0.48, 0.12, 0.94);

    vec3 colorRight = vec3(0.96, 0.05, 0.42);



    vec3 gradColor = mix(colorLeft, colorMid, smoothstep(0.1, 0.5, uv.x));

    gradColor = mix(gradColor, colorRight, smoothstep(0.5, 0.9, uv.x));



    // Brightness surges with voice volume

    float intensity = 1.0 + (u_leftVolume + u_rightVolume) * 1.5;



    vec3 bgColor = vec3(0.004, 0.004, 0.008) * (1.0 - uv.y);

    gl_FragColor = vec4(mix(bgColor, gradColor * intensity, alpha), 1.0);

}

function animate() {

    requestAnimationFrame(animate);

    uniforms.u_time.value = clock.getElapsedTime();



    if(analyser && isBattling) {

        const dataArray = new Uint8Array(analyser.frequencyBinCount);

        analyser.getByteFrequencyData(dataArray);



        // Extract bass frequencies (bins 0-19) for organic pulsing

        let sum = 0;

        for(let i = 0; i < 20; i++) sum += dataArray[i];

        let normalized = (sum / 20.0) / 255.0;



        // Lerp prevents jarring visual jumps between frames

        if (currentSpeakerSide === 'left') {

            uniforms.u_leftVolume.value = THREE.MathUtils.lerp(

              uniforms.u_leftVolume.value, normalized, 0.2);

            uniforms.u_rightVolume.value = THREE.MathUtils.lerp(

              uniforms.u_rightVolume.value, 0, 0.1);

        } else if (currentSpeakerSide === 'right') {

            uniforms.u_rightVolume.value = THREE.MathUtils.lerp(

              uniforms.u_rightVolume.value, normalized, 0.2);

            uniforms.u_leftVolume.value = THREE.MathUtils.lerp(

              uniforms.u_leftVolume.value, 0, 0.1);

        }

    }

    renderer.render(scene, camera);

}

generateBattle() → pushes roasts to roastQueue[]

playbackWorker() → shifts from roastQueue[], plays each turn sequentially