Photo Realistic Group Of Pets Effect Filter

function processImage(originalImg, petSize = "auto", petDensity = "1.0") {
    // Determine the base size for the pet emojis. 
    // "auto" scales them proportionally based on the original image dimensions.
    let ts = 20;
    if (petSize === "auto") {
        ts = Math.max(15, Math.floor(originalImg.width / 40));
    } else {
        ts = parseInt(petSize) || 20;
    }

    // Adjust spacing of the pets based on density parameter
    const density = parseFloat(petDensity) || 1.0;
    const spacing = ts * (1.2 - 0.5 * Math.min(2.0, Math.max(0.1, density))); 

    const w = originalImg.width;
    const h = originalImg.height;

    // Set up the main final canvas
    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');

    // Fill background with exact 50% neutral gray.
    // This is crucial because a 'hard-light' blend of an image over 50% gray
    // perfectly rebuilds the original image, ensuring transparent gaps look seamless.
    ctx.fillStyle = 'rgb(128, 128, 128)';
    ctx.fillRect(0, 0, w, h);

    // Set up an off-screen scratchpad canvas to draw the pet shapes
    const petCanvas = document.createElement('canvas');
    petCanvas.width = w;
    petCanvas.height = h;
    const pCtx = petCanvas.getContext('2d');

    // Assortment of diverse, adorable pet faces and bodies
    const pets = [
        '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', 
        '🦁', '🐮', '🐷', '🐸', '🐒', '🐕', '🐩', '🐈', '🐇', '🐿️', '🦔'
    ];
    
    pCtx.textBaseline = 'middle';
    pCtx.textAlign = 'center';

    // Tile the canvas densely with pet emojis, using staggering,
    // random rotations, scaling, and specific positioning offsets to form an organic layer.
    let rowIdx = 0;
    for (let y = -ts; y < h + ts; y += spacing) {
        let offsetX = (rowIdx % 2 === 0) ? 0 : spacing / 2;
        for (let x = -ts; x < w + ts; x += spacing) {
            const px = x + offsetX + (Math.random() - 0.5) * ts * 0.2;
            const py = y + (Math.random() - 0.5) * ts * 0.2;
            const rot = (Math.random() - 0.5) * 0.5; // Rotate from -0.25 rad to +0.25 rad
            const pSize = ts * (0.8 + Math.random() * 0.4); // Random scale 80% to 120%
            const pet = pets[Math.floor(Math.random() * pets.length)];

            pCtx.save();
            pCtx.translate(px, py);
            pCtx.rotate(rot);
            pCtx.font = `${pSize}px sans-serif`;
            pCtx.fillText(pet, 0, 0);
            pCtx.restore();
        }
        rowIdx++;
    }

    // Step 1: Draw the drawn pet layer to the main canvas as a purely grayscale layer.
    // By keeping the lighting variations but dropping color, they can act as a pseudo "bump texture" 
    // onto which we can project the original image colors.
    ctx.filter = `grayscale(100%)`;
    ctx.drawImage(petCanvas, 0, 0);
    ctx.filter = 'none';

    // Step 2: Remap realistic lighting, contrast, and color values of the original photo over the pets.
    // 'hard-light' calculates screening/multiplying based on the original image's brightness map.
    // So if the photo is dark, the pets get darkened. If bright, they get lightened.
    ctx.globalCompositeOperation = 'hard-light';
    ctx.drawImage(originalImg, 0, 0);

    // Step 3: Gently blend a standard source-over copy to soften extreme artifacts, giving the final polished photorealistic look.
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 0.25;
    ctx.drawImage(originalImg, 0, 0);
    
    // Reset canvas operational state before output
    ctx.globalAlpha = 1.0;

    return canvas;
}