Extra Eyes Image Effect Generator

function processImage(originalImg, eyeStartYPercent = 35, eyeHeightPercent = 16, numExtraPairs = 1, shiftYPercent = 14, featherPercent = 25) {
    // 1. Sanitize and parse parameters
    let startY = parseFloat(eyeStartYPercent);
    if (isNaN(startY)) startY = 35; // Default: start extracting at 35% down

    let heightP = parseFloat(eyeHeightPercent);
    if (isNaN(heightP)) heightP = 16; // Default: extract a 16% height band

    let count = parseInt(numExtraPairs, 10);
    if (isNaN(count)) count = 1; // Default: add 1 extra set of eyes

    let shift = parseFloat(shiftYPercent);
    if (isNaN(shift)) shift = 14; // Default: shift duplicates down by 14% image height

    let feather = parseFloat(featherPercent);
    if (isNaN(feather)) feather = 25; // Default: feather top and bottom 25% of the strip for blending

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

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

    // If count is 0 or less, just return the original unaltered image
    if (count <= 0) return canvas;

    // 4. Calculate dimensions for extraction
    const sy = height * (startY / 100);
    const sh = height * (heightP / 100);
    const dyStep = height * (shift / 100);

    if (sh <= 0) return canvas; // Prevent errors if height is 0

    // 5. Create an offscreen canvas to hold and feather the extracted "eyes" strip
    const stripCanvas = document.createElement('canvas');
    stripCanvas.width = width;
    stripCanvas.height = sh;
    const stripCtx = stripCanvas.getContext('2d');

    // Draw the horizontal strip containing the eyes from the original image
    stripCtx.drawImage(originalImg, 0, sy, width, sh, 0, 0, width, sh);

    // 6. Apply feathering mask top and bottom to seamlessly blend into the face
    const safeFeather = Math.min(Math.max(feather / 100, 0), 0.5);
    if (safeFeather > 0) {
        // 'destination-in' composite means the image will only be kept 
        // where we draw an opaque shape (our gradient)
        stripCtx.globalCompositeOperation = 'destination-in';
        
        const grad = stripCtx.createLinearGradient(0, 0, 0, sh);
        grad.addColorStop(0, 'rgba(0,0,0,0)');                        // Transparent top
        grad.addColorStop(safeFeather, 'rgba(0,0,0,1)');              // Opaque top-middle
        grad.addColorStop(1 - safeFeather, 'rgba(0,0,0,1)');          // Opaque bottom-middle
        grad.addColorStop(1, 'rgba(0,0,0,0)');                        // Transparent bottom

        stripCtx.fillStyle = grad;
        stripCtx.fillRect(0, 0, width, sh);
        
        // Reset composite operation implicitly (since we just discard the context soon)
    }

    // 7. Draw the extra eyes onto the main canvas, duplicating them shifted down (or up if shift is negative)
    for (let i = 1; i <= count; i++) {
        const dy = sy + (dyStep * i);
        ctx.drawImage(stripCanvas, 0, dy);
    }

    // Return the altered canvas
    return canvas;
}