Troll Image Effect Generator

function processImage(
    originalImg,
    bulgeLevel = 2.5,
    swirlAmount = 1.0,
    deepFryIntensity = 1.0,
    topText = "PROBLEM?",
    bottomText = "U MAD BRO?"
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Limit maximum size to maintain good processing speed
    const MAX_SIZE = 800;
    let scale = 1;
    if (originalImg.width > MAX_SIZE || originalImg.height > MAX_SIZE) {
        scale = Math.min(MAX_SIZE / originalImg.width, MAX_SIZE / originalImg.height);
    }
    canvas.width = Math.floor(originalImg.width * scale);
    canvas.height = Math.floor(originalImg.height * scale);

    // Draw initial image
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Get pixel data for manipulation
    const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imgData.data;
    const outData = new Uint8ClampedArray(data.length);

    // Filter calculations
    const cx = canvas.width / 2;
    const cy = canvas.height / 2;
    const R = Math.min(cx, cy); // Distortion max radius
    const RSq = R * R;

    const bLevel = Number(bulgeLevel);
    const sAmount = Number(swirlAmount);
    const dfLevel = Number(deepFryIntensity);
    const doDistortion = bLevel !== 1 || sAmount !== 0;

    // Loop directly over pixels
    for (let y = 0; y < canvas.height; y++) {
        for (let x = 0; x < canvas.width; x++) {
            let srcX = x;
            let srcY = y;

            if (doDistortion) {
                const dx = x - cx;
                const dy = y - cy;
                const distSq = dx * dx + dy * dy;

                if (distSq < RSq) {
                    const distance = Math.sqrt(distSq);
                    const norm = distance / R;
                    
                    // Bulge / Pinch
                    let newDist = distance;
                    if (bLevel !== 1) {
                        const newNorm = Math.pow(norm, bLevel);
                        newDist = newNorm * R;
                    }

                    // Swirl
                    let angle = Math.atan2(dy, dx);
                    if (sAmount !== 0) {
                        const angleShift = sAmount * (1 - norm);
                        angle += angleShift;
                    }

                    srcX = cx + Math.cos(angle) * newDist;
                    srcY = cy + Math.sin(angle) * newDist;
                }
            }
            
            srcX = Math.round(srcX);
            srcY = Math.round(srcY);

            const dstIdx = (y * canvas.width + x) * 4;
            let srcIdx = dstIdx;
            
            // Boundary constraints for source index
            if (srcX >= 0 && srcX < canvas.width && srcY >= 0 && srcY < canvas.height) {
                srcIdx = (srcY * canvas.width + srcX) * 4;
            }

            let r = data[srcIdx];
            let g = data[srcIdx + 1];
            let b = data[srcIdx + 2];
            let a = data[srcIdx + 3];

            // Apply "Deep Fry" Troll Effect
            if (dfLevel > 0 && a > 0) {
                // High contrast push
                const contrast = 1 + (dfLevel * 0.6);
                r = ((r / 255 - 0.5) * contrast + 0.5) * 255 + (dfLevel * 30); // red tint boost
                g = ((g / 255 - 0.5) * contrast + 0.5) * 255;
                b = ((b / 255 - 0.5) * contrast + 0.5) * 255 - (dfLevel * 30); // reduce blue

                // Noise injection
                const noise = (Math.random() - 0.5) * 40 * dfLevel;
                r += noise;
                g += noise;
                b += noise;
            }

            // Write output (Uint8ClampedArray handles mathematical clamping automatically)
            outData[dstIdx] = r;
            outData[dstIdx + 1] = g;
            outData[dstIdx + 2] = b;
            outData[dstIdx + 3] = a;
        }
    }

    // Apply the manipulated pixels
    const outImgData = new ImageData(outData, canvas.width, canvas.height);
    ctx.putImageData(outImgData, 0, 0);

    // Overlay classic troll/meme text over the distorted canvas
    const drawMemeText = (text, position) => {
        if (!text || text.trim() === "") return;
        
        text = String(text).toUpperCase();
        const fontSize = Math.max(20, Math.floor(canvas.height * 0.12));
        
        // Font selections fitting the troll/meme style natively supported on OS
        ctx.font = `bold ${fontSize}px Impact, "Arial Black", "Comic Sans MS", sans-serif`;
        ctx.textAlign = 'center';
        ctx.fillStyle = 'white';
        ctx.strokeStyle = 'black';
        ctx.lineWidth = Math.max(2, fontSize * 0.05);
        ctx.lineJoin = 'round';

        const textX = canvas.width / 2;
        let textY;
        
        if (position === 'top') {
            ctx.textBaseline = 'top';
            textY = canvas.height * 0.02;
        } else {
            ctx.textBaseline = 'bottom';
            textY = canvas.height * 0.98;
        }

        const maxTextWidth = canvas.width * 0.95;
        // Stroke first then fill prevents the outline from swallowing the internal white fill
        ctx.strokeText(text, textX, textY, maxTextWidth);
        ctx.fillText(text, textX, textY, maxTextWidth);
    };

    drawMemeText(topText, 'top');
    drawMemeText(bottomText, 'bottom');

    return canvas;
}