Three Little Pigs Image Generator

function processImage(originalImg, titleText = "Три поросёнка") {
    // Determine canvas dimensions
    const w = originalImg.width;
    const h = originalImg.height;
    
    // Create the canvas and context
    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');

    // Draw the original image as a background
    ctx.drawImage(originalImg, 0, 0, w, h);

    // Three sections for the three pigs' houses: Straw, Wood, Brick
    const cw = w / 3;

    // --- House of Straw (Left Panel) ---
    ctx.fillStyle = 'rgba(218, 165, 32, 0.35)'; // Golden tint
    ctx.fillRect(0, 0, cw, h);
    
    const strawLines = Math.min(1000, Math.floor((cw * h) / 400));
    ctx.lineWidth = Math.max(1.5, w * 0.002);
    for (let i = 0; i < strawLines; i++) {
        let x = Math.random() * cw;
        let y = Math.random() * h;
        let len = Math.max(20, w * 0.04) + Math.random() * (w * 0.04);
        let angle = Math.random() * Math.PI;
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x + Math.cos(angle) * len, y + Math.sin(angle) * len);
        ctx.strokeStyle = `rgba(218, 165, 32, ${0.4 + Math.random() * 0.5})`;
        ctx.stroke();
    }

    // --- House of Sticks/Wood (Middle Panel) ---
    ctx.fillStyle = 'rgba(139, 69, 19, 0.35)'; // Brown tint
    ctx.fillRect(cw, 0, cw, h);
    
    const woodLines = Math.min(500, Math.floor((cw * h) / 800));
    for (let i = 0; i < woodLines; i++) {
        let x = cw + Math.random() * cw;
        let y = Math.random() * h;
        let len = Math.max(40, h * 0.08) + Math.random() * (h * 0.15);
        ctx.beginPath();
        ctx.moveTo(x, y);
        // Vertical-ish sticks
        ctx.lineTo(x + (Math.random() * (w * 0.02) - (w * 0.01)), y + len);
        ctx.strokeStyle = `rgba(101, 67, 33, ${0.5 + Math.random() * 0.4})`;
        ctx.lineWidth = Math.max(3, w * 0.005 + Math.random() * (w * 0.005));
        ctx.stroke();
    }

    // --- House of Bricks (Right Panel) ---
    ctx.fillStyle = 'rgba(178, 34, 34, 0.4)'; // Reddish tint
    ctx.fillRect(cw * 2, 0, cw, h);
    
    const bw = Math.max(30, cw / 6); // brick width
    const bh = bw / 2;               // brick height
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
    ctx.lineWidth = Math.max(1, w * 0.002);
    for (let y = 0; y < h; y += bh) {
        let offset = (Math.floor(y / bh) % 2 === 0) ? 0 : -bw / 2;
        for (let x = cw * 2; x < w + bw; x += bw) {
            // Clip to avoid drawing outside the rightmost third
            ctx.save();
            ctx.beginPath();
            ctx.rect(cw * 2, 0, cw, h);
            ctx.clip();
            ctx.strokeRect(x + offset, y, bw, bh);
            ctx.restore();
        }
    }

    // --- Dividers ---
    ctx.beginPath();
    ctx.moveTo(cw, 0); ctx.lineTo(cw, h);
    ctx.moveTo(cw * 2, 0); ctx.lineTo(cw * 2, h);
    ctx.strokeStyle = 'rgba(0, 0, 0, 0.8)';
    ctx.lineWidth = Math.max(3, w * 0.006);
    ctx.stroke();

    // --- Helper function to draw a cartoon pig face ---
    function drawPig(cx, cy, r, headColor, snoutColor) {
        ctx.strokeStyle = '#222';
        ctx.lineWidth = Math.max(2, r * 0.05);

        // Draw Ears
        ctx.fillStyle = headColor;
        // Left ear
        ctx.beginPath();
        ctx.moveTo(cx - r * 0.7, cy - r * 0.5);
        ctx.lineTo(cx - r * 1.1, cy - r * 1.1);
        ctx.lineTo(cx - r * 0.2, cy - r * 0.9);
        ctx.closePath();
        ctx.fill(); ctx.stroke();
        // Right ear
        ctx.beginPath();
        ctx.moveTo(cx + r * 0.7, cy - r * 0.5);
        ctx.lineTo(cx + r * 1.1, cy - r * 1.1);
        ctx.lineTo(cx + r * 0.2, cy - r * 0.9);
        ctx.closePath();
        ctx.fill(); ctx.stroke();

        // Draw Head
        ctx.beginPath();
        ctx.arc(cx, cy, r, 0, Math.PI * 2);
        ctx.fill(); ctx.stroke();

        // Draw Eyes
        ctx.fillStyle = 'white';
        // Left eye background
        ctx.beginPath(); ctx.arc(cx - r * 0.35, cy - r * 0.2, r * 0.22, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
        // Right eye background
        ctx.beginPath(); ctx.arc(cx + r * 0.35, cy - r * 0.2, r * 0.22, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
        // Left pupil
        ctx.fillStyle = 'black';
        ctx.beginPath(); ctx.arc(cx - r * 0.35, cy - r * 0.2, r * 0.1, 0, Math.PI * 2); ctx.fill();
        // Right Pupil
        ctx.beginPath(); ctx.arc(cx + r * 0.35, cy - r * 0.2, r * 0.1, 0, Math.PI * 2); ctx.fill();

        // Draw Snout
        ctx.fillStyle = snoutColor;
        ctx.beginPath();
        ctx.ellipse(cx, cy + r * 0.3, r * 0.5, r * 0.35, 0, 0, Math.PI * 2);
        ctx.fill(); ctx.stroke();

        // Draw Nostrils
        ctx.fillStyle = 'black';
        ctx.beginPath(); ctx.ellipse(cx - r * 0.18, cy + r * 0.3, r * 0.08, r * 0.15, 0, 0, Math.PI * 2); ctx.fill();
        ctx.beginPath(); ctx.ellipse(cx + r * 0.18, cy + r * 0.3, r * 0.08, r * 0.15, 0, 0, Math.PI * 2); ctx.fill();
    }

    // --- Draw the 3 Little Pigs (Nif-Nif, Nuf-Nuf, Naf-Naf) ---
    const pr = Math.min(cw * 0.25, h * 0.12);
    const py = h - pr - (h * 0.05);

    // Pig of Straw 
    drawPig(cw / 2, py, pr, '#ffd1dc', '#ffb6c1');
    // Pig of Sticks 
    drawPig(cw + cw / 2, py, pr, '#ffb6c1', '#ff69b4');
    // Pig of Brick 
    drawPig(cw * 2 + cw / 2, py, pr, '#ff69b4', '#db7093');

    // --- Draw Title Text ---
    if (titleText) {
        const fontSize = Math.max(24, Math.min(150, h * 0.1));
        ctx.font = `bold ${fontSize}px Impact, "Arial Black", sans-serif`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.lineWidth = Math.max(3, fontSize * 0.15);
        ctx.strokeStyle = '#000000';
        ctx.fillStyle = '#FFFFFF';

        const txtY = Math.max(10, h * 0.05);
        
        ctx.lineJoin = "round";
        ctx.miterLimit = 2;
        
        // Add a slight outline shadow
        ctx.strokeText(titleText, w / 2, txtY);
        ctx.fillText(titleText, w / 2, txtY);
    }

    return canvas;
}