Image To Voice Of The Dark Valley Generator

function processImage(
    originalImg, 
    text = "VOICE OF THE DARK VALLEY", 
    waveColor = "#44ff88", 
    gloomyTint = "#1a2c3a", 
    noiseIntensity = "0.2"
) {
    // Ensure noise intensity is a proper number
    const noiseLevel = Math.max(0, Math.min(1, Number(noiseIntensity) || 0));

    // Create the main canvas
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    
    if (width === 0 || height === 0) {
        return canvas; // Return empty canvas if image is invalid
    }

    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // 1. Draw the base image giving it a dark, desaturated high-contrast look
    // Using widely supported canvas filters
    ctx.filter = 'grayscale(85%) contrast(140%) brightness(70%)';
    ctx.drawImage(originalImg, 0, 0, width, height);
    ctx.filter = 'none'; // reset filter

    // 2. Apply a gloomy tint over the valley (Multiply blending)
    ctx.globalCompositeOperation = 'multiply';
    ctx.fillStyle = gloomyTint;
    ctx.fillRect(0, 0, width, height);

    // 3. Add Film Grain / Static Noise to represent eerie atmosphere
    if (noiseLevel > 0) {
        ctx.globalCompositeOperation = 'overlay';
        const noiseCanvas = document.createElement('canvas');
        noiseCanvas.width = width;
        noiseCanvas.height = height;
        const noiseCtx = noiseCanvas.getContext('2d');
        const noiseData = noiseCtx.createImageData(width, height);
        const data = noiseData.data;
        
        // Generate monochrome noise
        for (let i = 0; i < data.length; i += 4) {
            const val = Math.random() * 255;
            data[i] = val;     // R
            data[i+1] = val;   // G
            data[i+2] = val;   // B
            data[i+3] = 255;   // A
        }
        noiseCtx.putImageData(noiseData, 0, 0);
        
        ctx.globalAlpha = noiseLevel;
        ctx.drawImage(noiseCanvas, 0, 0);
        ctx.globalAlpha = 1.0;
    }

    // 4. Add heavy radial vignette for the "Dark" aesthetic
    ctx.globalCompositeOperation = 'multiply';
    const cx = width / 2;
    const cy = height / 2;
    const radiusOut = Math.max(width, height) * 0.7;
    const radiusIn = Math.min(width, height) * 0.3;
    
    const gradient = ctx.createRadialGradient(cx, cy, radiusIn, cx, cy, radiusOut);
    gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
    gradient.addColorStop(1, 'rgba(0, 0, 0, 0.95)');
    
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);

    // 5. Draw the "Voice" - A glowing digital audio waveform across the screen
    ctx.globalCompositeOperation = 'screen';
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    
    // Setup glow effect
    ctx.shadowColor = waveColor;
    ctx.shadowBlur = Math.max(5, width * 0.015);
    ctx.strokeStyle = waveColor;
    ctx.lineWidth = Math.max(2, width / 300);

    ctx.beginPath();
    const startX = width * 0.1;
    const endX = width * 0.9;
    const waveWidth = endX - startX;
    
    ctx.moveTo(startX, cy);
    
    // Generate an atmospheric waveform
    const segments = 150;
    for (let i = 0; i <= segments; i++) {
        const x = startX + (i / segments) * waveWidth;
        const normalizedX = i / segments;
        
        // Window function to make the wave peak in the center and zero out at edges
        const envelope = Math.pow(Math.sin(normalizedX * Math.PI), 2); 
        
        // Complex wave combining Sine and Random noise
        const frequency = Math.sin(normalizedX * Math.PI * 20);
        const staticBurst = (Math.random() * 2 - 1);
        const waveAmplitutde = (frequency * 0.4 + staticBurst * 0.6);
        
        // Calculate Y position
        const yOffset = waveAmplitutde * envelope * (height * 0.2);
        ctx.lineTo(x, cy + yOffset);
    }
    ctx.stroke();

    // 6. Draw eerie text overlay
    if (text && text.trim() !== "") {
        ctx.globalCompositeOperation = 'source-over';
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        
        const fontSize = Math.max(16, Math.floor(width / 22));
        ctx.font = `bold ${fontSize}px "Courier New", Courier, monospace`;
        
        const textX = width / 2;
        const textY = height - (fontSize * 2);
        
        // Creepy white glow
        ctx.shadowColor = "rgba(255, 255, 255, 0.6)";
        ctx.shadowBlur = 10;
        
        // Base text
        ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
        ctx.fillText(text, textX, textY);
        
        // Ghostly offset text (chromatic/glitch echo)
        ctx.shadowBlur = 0;
        ctx.fillStyle = "rgba(200, 255, 255, 0.3)";
        ctx.fillText(text, textX - 2, textY - 2);
        ctx.fillStyle = "rgba(255, 200, 200, 0.3)";
        ctx.fillText(text, textX + 2, textY + 2);
    }

    return canvas;
}