Scary Image Effect Generator

async function processImage(originalImg, subjectName = "IT", scaryLevel = 80) {
    // Dynamically load a creepy Google Font
    const fontName = 'Creepster';
    const fontUrl = 'https://fonts.googleapis.com/css2?family=Creepster&display=swap';
    
    if (!document.querySelector(`link[href="${fontUrl}"]`)) {
        const link = document.createElement('link');
        link.href = fontUrl;
        link.rel = 'stylesheet';
        document.head.appendChild(link);
    }
    
    try {
        // Attempt to wait for the font to load so it binds properly to canvas
        await document.fonts.load(`12px "${fontName}"`);
    } catch (e) {
        console.warn("Font loading timeout/error, using fallback fonts.");
    }

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

    // Draw original image
    ctx.drawImage(originalImg, 0, 0);

    // Get intensity as a normalized float between 0 and 1
    const intLevel = Math.max(0, Math.min(100, Number(scaryLevel))) / 100;
    
    // Process image pixel data for cursed/scary effect
    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;

    // Contrast parameters
    const contrast = 1 + (intLevel * 2.5); // Increase contrast significantly
    const intercept = 128 * (1 - contrast);

    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i+1];
        let b = data[i+2];

        // Apply high contrast
        r = r * contrast + intercept;
        g = g * contrast + intercept;
        b = b * contrast + intercept;

        // Apply dark and bloody red tint based on intensity
        if (intLevel > 0) {
            // Shift towards deep reds, suppress greens and blues to create a cursed vibe
            const targetR = r * 1.2;
            const targetG = g * 0.3;
            const targetB = b * 0.3; 
            
            r = r + (targetR - r) * intLevel;
            g = g + (targetG - g) * intLevel;
            b = b + (targetB - b) * intLevel;
        }

        // Add sporadic static noise
        if (Math.random() < (0.15 * intLevel)) {
            const noise = (Math.random() * 80 - 40) * intLevel;
            r += noise;
            g += noise;
            b += noise;
        }

        data[i] = Math.max(0, Math.min(255, r));
        data[i+1] = Math.max(0, Math.min(255, g));
        data[i+2] = Math.max(0, Math.min(255, b));
    }
    
    ctx.putImageData(imgData, 0, 0);

    // Apply a harsh claustrophobic vignette
    if (intLevel > 0) {
        const gradient = ctx.createRadialGradient(
            width / 2, height / 2, Math.min(width, height) * (0.6 - 0.4 * intLevel),
            width / 2, height / 2, Math.max(width, height) * 0.85
        );
        gradient.addColorStop(0, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, `rgba(0,0,0,${0.3 + 0.7 * intLevel})`);
        
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, width, height);

        // Add horizontal glitch slices
        const slices = Math.floor(20 * intLevel);
        for (let i = 0; i < slices; i++) {
            const sliceY = Math.floor(Math.random() * height);
            const sliceH = Math.max(1, Math.floor(Math.random() * (height * 0.04)));
            const xOffset = Math.floor((Math.random() - 0.5) * (width * 0.08 * intLevel));
            
            if (sliceY + sliceH <= height) {
                const slice = ctx.getImageData(0, sliceY, width, sliceH);
                ctx.putImageData(slice, xOffset, sliceY);
            }
        }
    }

    // Add Scary Text
    const text = `${String(subjectName).trim().toUpperCase()} WANTS TO SCARE YOU`;
    
    // Scale font size according to image dimensions
    let fontSize = Math.floor(Math.min(width, height) * 0.08);
    ctx.font = `${fontSize}px "${fontName}", "Impact", "Courier New", sans-serif`;
    
    // Auto-scale to fit horizontally
    let metrics = ctx.measureText(text);
    while (metrics.width > width * 0.95 && fontSize > 10) {
        fontSize--;
        ctx.font = `${fontSize}px "${fontName}", "Impact", "Courier New", sans-serif`;
        metrics = ctx.measureText(text);
    }

    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';

    // Position text at the top
    const textX = width / 2;
    const textY = height * 0.03;
    const shadowOffset = Math.max(2, fontSize * 0.05);

    // Draw deep dark shadow
    ctx.fillStyle = '#000000';
    ctx.fillText(text, textX + shadowOffset, textY + shadowOffset);

    // Draw bloody red text
    ctx.fillStyle = '#ff1111'; // Bright, jarring red
    ctx.fillText(text, textX, textY);

    return canvas;
}