Dog Image Viewer

function processImage(originalImg, effectType = "vision", intensityStr = "1") {
    // Create canvas matching the original image dimensions
    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 initial original image
    ctx.drawImage(originalImg, 0, 0, width, height);
    
    // Parse parameters
    const mode = effectType.toLowerCase();
    const intensity = parseFloat(intensityStr);
    const actualIntensity = isNaN(intensity) ? 1 : Math.max(0, Math.min(1, intensity));
    
    // "vision" mode simulates Dog Vision (Deuteranopia / Red-Green colorblindness)
    // Dogs have dichromatic vision, interpreting the world primarily in shades of yellow, blue, and gray.
    if (mode === "vision" || mode === "both") {
        const imageData = ctx.getImageData(0, 0, width, height);
        const data = imageData.data;
        
        for (let i = 0; i < data.length; i += 4) {
            let r = data[i];
            let g = data[i+1];
            let b = data[i+2];
            
            // Standard Deuteranopia matrix mapping Reds & Greens to Yellow/Gray spectrum
            let newR = (0.625 * r) + (0.375 * g) + (0.000 * b);
            let newG = (0.700 * r) + (0.300 * g) + (0.000 * b);
            let newB = (0.000 * r) + (0.300 * g) + (0.700 * b);
            
            // Blend based on intensity parameter
            data[i] = r + (Math.max(0, Math.min(255, newR)) - r) * actualIntensity;
            data[i+1] = g + (Math.max(0, Math.min(255, newG)) - g) * actualIntensity;
            data[i+2] = b + (Math.max(0, Math.min(255, newB)) - b) * actualIntensity;
        }
        
        ctx.putImageData(imageData, 0, 0);
    }
    
    // "paws" mode draws a cute dog paw-print frame/border
    if (mode === "paws" || mode === "both") {
        const drawPaw = (x, y, size, rotation) => {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(rotation);
            
            // Stylistic paw properties
            ctx.fillStyle = "rgba(255, 255, 255, 0.85)";
            ctx.shadowColor = "rgba(0, 0, 0, 0.6)";
            ctx.shadowBlur = size * 0.15;
            ctx.shadowOffsetX = size * 0.05;
            ctx.shadowOffsetY = size * 0.05;
            
            // Main central pad
            ctx.beginPath();
            ctx.ellipse(0, 0, size * 0.4, size * 0.35, 0, 0, Math.PI * 2);
            ctx.fill();
            
            // Outer left toe
            ctx.beginPath();
            ctx.ellipse(-size * 0.35, -size * 0.4, size * 0.15, size * 0.2, -Math.PI/6, 0, Math.PI * 2);
            ctx.fill();
            
            // Inner left toe
            ctx.beginPath();
            ctx.ellipse(-size * 0.12, -size * 0.55, size * 0.15, size * 0.2, -Math.PI/12, 0, Math.PI * 2);
            ctx.fill();
            
            // Inner right toe
            ctx.beginPath();
            ctx.ellipse(size * 0.12, -size * 0.55, size * 0.15, size * 0.2, Math.PI/12, 0, Math.PI * 2);
            ctx.fill();
            
            // Outer right toe
            ctx.beginPath();
            ctx.ellipse(size * 0.35, -size * 0.4, size * 0.15, size * 0.2, Math.PI/6, 0, Math.PI * 2);
            ctx.fill();
            
            ctx.restore();
        };
        
        const minDim = Math.min(width, height);
        const pawSize = minDim * 0.08; 
        const margin = pawSize * 2;
        
        // Draw paws facing inward in all four corners of the image
        drawPaw(margin, margin, pawSize, Math.PI / 4);
        drawPaw(width - margin, margin, pawSize, -Math.PI / 4);
        drawPaw(margin, height - margin, pawSize, Math.PI * 3 / 4);
        drawPaw(width - margin, height - margin, pawSize, -Math.PI * 3 / 4);
    }
    
    return canvas;
}