Nickelodeon Image Search Tool

function processImage(originalImg, themeColor = '#f37021', slimeColor = '#8bd100', dripCount = '8') {
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

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

    // Apply a classic Nickelodeon-style thick orange border
    const borderThickness = Math.max(width, height) * 0.02;
    ctx.lineWidth = borderThickness * 2; // times 2 because strokeRect is centered on the edge
    ctx.strokeStyle = themeColor;
    ctx.strokeRect(0, 0, width, height);

    // Parse the drip count
    let drips = parseInt(dripCount, 10);
    if (isNaN(drips) || drips < 1) drips = 8;
    
    // --- DRAW GREEN SLIME DRIPS ---
    ctx.fillStyle = slimeColor;
    ctx.beginPath();
    ctx.moveTo(0, 0);
    
    const segment = width / drips;
    
    for (let i = 0; i < drips; i++) {
        let startX = i * segment;
        let endX = startX + segment;
        let midX = (startX + endX) / 2;
        
        // Pseudo-random drip length logic based on simple sine math 
        // to keep it deterministic but varied
        let r = Math.abs(Math.sin((i + 1) * 12.9898)) * 0.3 + 0.1; // lengths between 10% and 40% of height
        let dripLength = height * r;
        
        // Draw the downward and upward curves of the given drip
        ctx.bezierCurveTo(
            startX + segment * 0.4, 0,
            midX - segment * 0.25, dripLength,
            midX, dripLength
        );
        ctx.bezierCurveTo(
            midX + segment * 0.25, dripLength,
            endX - segment * 0.4, 0,
            endX, 0
        );
    }
    ctx.lineTo(width, 0);
    ctx.closePath();
    ctx.fill();

    // Add specular highlights to the drips to make them look wet and gooey
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)';
    ctx.lineWidth = Math.max(2, width * 0.005);
    ctx.lineCap = 'round';
    
    ctx.beginPath();
    for (let i = 0; i < drips; i++) {
        let segmentStartX = i * segment;
        let segmentEndX = segmentStartX + segment;
        let midX = (segmentStartX + segmentEndX) / 2;
        let r = Math.abs(Math.sin((i + 1) * 12.9898)) * 0.3 + 0.1;
        let dripLength = height * r;
        
        // Only draw highlights on longer drips
        if (r > 0.15) {
            let highlightYStart = dripLength - height * 0.03;
            let highlightYEnd = dripLength - height * 0.01;
            
            ctx.moveTo(midX - segment * 0.1, highlightYStart);
            ctx.bezierCurveTo(
                midX - segment * 0.05, highlightYEnd,
                midX + segment * 0.05, highlightYEnd,
                midX + segment * 0.1, highlightYStart
            );
        }
    }
    ctx.stroke();

    // --- DRAW FLOATING SLIME SPLATTERS ---
    ctx.fillStyle = slimeColor;
    const splatterCount = drips * 2;
    for (let i = 0; i < splatterCount; i++) {
        let cx = (Math.abs(Math.cos(i * 4.123)) * 0.8 + 0.1) * width;
        let cy = (Math.abs(Math.sin(i * 7.432)) * 0.4 + 0.1) * height; // bias towards top half
        let cr = (Math.abs(Math.sin(i * 2.345)) * 0.01 + 0.005) * width;
        
        ctx.beginPath();
        ctx.arc(cx, cy, cr, 0, Math.PI * 2);
        ctx.fill();
    }

    // --- DRAW ORANGE "SPLAT" LOGO SHAPE IN BOTTOM RIGHT ---
    const baseR = Math.min(width, height) * 0.15;
    const centerSplatX = width - baseR * 1.3;
    const centerSplatY = height - baseR * 1.3;

    ctx.fillStyle = themeColor;
    
    // Central mass of the splat
    ctx.beginPath();
    ctx.arc(centerSplatX, centerSplatY, baseR, 0, Math.PI * 2);
    ctx.fill();
    
    // Outer lobes of the splat
    for (let i = 0; i < 11; i++) {
        let ang = (i / 11) * Math.PI * 2;
        let dist = baseR * (0.6 + Math.abs(Math.sin(i * 3.14)) * 0.6);
        let rad = baseR * (0.35 + Math.abs(Math.cos(i * 7)) * 0.4);
        
        ctx.beginPath();
        ctx.arc(
            centerSplatX + Math.cos(ang) * dist, 
            centerSplatY + Math.sin(ang) * dist, 
            rad, 
            0, Math.PI * 2
        );
        ctx.fill();
    }
    
    // Disconnected droplets for the orange splat
    for (let i = 0; i < 6; i++) {
        let ang = (i / 6) * Math.PI * 2 + 0.3;
        let dist = baseR * (1.6 + Math.abs(Math.sin(i * 2.1)) * 0.5);
        let rad = baseR * (0.08 + Math.abs(Math.cos(i * 1.7)) * 0.12);
        
        ctx.beginPath();
        ctx.arc(
            centerSplatX + Math.cos(ang) * dist,
            centerSplatY + Math.sin(ang) * dist,
            rad, 
            0, Math.PI * 2
        );
        ctx.fill();
    }

    return canvas;
}