Sad Effect Image Generator

function processImage(originalImg, intensity = 0.8, addRain = 1, tintColor = '#12263a') {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.width;
    const height = originalImg.height;
    
    canvas.width = width;
    canvas.height = height;
    
    // Validate intensity constraint (0 to 1 scale)
    const validIntensity = Math.min(Math.max(Number(intensity) || 0.8, 0), 1);
    
    // 1. Draw base image with "sad" filters
    // A gloomy look requires desaturation, reduced brightness, and low contrast
    const grayscaleVal = 85 * validIntensity;
    const brightnessVal = 100 - (35 * validIntensity);
    const contrastVal = 100 - (20 * validIntensity);
    
    ctx.filter = `grayscale(${grayscaleVal}%) brightness(${brightnessVal}%) contrast(${contrastVal}%)`;
    ctx.drawImage(originalImg, 0, 0, width, height);
    ctx.filter = 'none'; // reset filter
    
    // 2. Add moody color tint (Gloomy/Melancholic Blue by default)
    ctx.globalCompositeOperation = 'overlay';
    ctx.fillStyle = tintColor;
    ctx.globalAlpha = 0.5 * validIntensity;
    ctx.fillRect(0, 0, width, height);
    ctx.globalAlpha = 1.0;
    
    // 3. Add heavy darkening vignette to feel closed-in/depressing
    ctx.globalCompositeOperation = 'multiply';
    const cx = width / 2;
    const cy = height / 2;
    const radius = Math.max(width, height);
    
    const gradient = ctx.createRadialGradient(cx, cy, radius * 0.25, cx, cy, radius * 0.8);
    gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
    gradient.addColorStop(1, `rgba(0, 0, 0, ${0.9 * validIntensity})`);
    
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);
    
    // 4. Add tears/rain effect if requested (classic cinematic sadness)
    const isRaining = addRain === 1 || String(addRain).toLowerCase() === 'true' || addRain === '1';
    
    if (isRaining) {
        ctx.globalCompositeOperation = 'screen';
        ctx.lineCap = 'round';
        
        // Scale drop counts based on image area to maintain consistent density
        const baseArea = Math.min(width * height, 2500000); // cap to avoid extremely lag on mass images
        const numDrops = Math.floor(baseArea * 0.001 * validIntensity);
        
        for (let i = 0; i < numDrops; i++) {
            // Start slightly outside viewport bounds to allow seamless entering
            const x = (Math.random() * 1.2 - 0.1) * width;
            const y = (Math.random() * 1.2 - 0.1) * height;
            
            // Randomize drop size dynamically with resolution compensation
            const dropLen = (Math.random() * 25 + 10) * Math.max(height / 1000, 0.5); 
            const dropWidth = (Math.random() * 1.5 + 0.5);
            const angle = 0.12; // slightly angled straight-down
            
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x + Math.sin(angle) * dropLen, y + Math.cos(angle) * dropLen);
            ctx.lineWidth = dropWidth;
            
            // Faint, icy/watery reflection color
            const alpha = Math.random() * 0.25 + 0.05;
            ctx.strokeStyle = `rgba(180, 210, 255, ${alpha})`;
            ctx.stroke();
        }
    }
    
    // Reset back to standard composition
    ctx.globalCompositeOperation = 'source-over';
    
    return canvas;
}