Мелкотрон Крузо

function processImage(originalImg, dotSize = 8, shape = 'circle', bgColor = '#ffffff', elementColor = '#222222') {
    // Parameter casting and validation
    dotSize = Number(dotSize);
    if (isNaN(dotSize) || dotSize < 2) {
        dotSize = 8;
    }
    shape = String(shape).toLowerCase();
    bgColor = String(bgColor);
    elementColor = String(elementColor);

    // Create and size the canvas
    const canvas = document.createElement('canvas');
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    canvas.width = width;
    canvas.height = height;

    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    
    // Draw original image to sample pixel data
    ctx.drawImage(originalImg, 0, 0, width, height);
    
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, width, height);
    } catch(e) {
        // Fallback if cross-origin image blocks getImageData
        console.error("Canvas tainted by cross-origin data.");
        return canvas; 
    }
    
    // Clear canvas and fill with the background color
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, width, height);
    
    // Set fill style to element pattern color
    ctx.fillStyle = elementColor;

    const data = imageData.data;
    
    // Maximum radius mathematically calculated to perfectly cover a cell's diagonal when strictly black
    const maxRadius = dotSize / Math.SQRT2; 
    
    // Loop through image in steps of dotSize (Grid processing like a Halftone "Megatron/Melkotron" effect)
    for (let y = 0; y < height; y += dotSize) {
        for (let x = 0; x < width; x += dotSize) {
            let brightnessSum = 0;
            let count = 0;
            
            // Calculate regional brightness average
            for (let dy = 0; dy < dotSize; dy++) {
                for (let dx = 0; dx < dotSize; dx++) {
                    let px = x + dx;
                    let py = y + dy;
                    if (px < width && py < height) {
                        let idx = (py * width + px) * 4;
                        let r = data[idx];
                        let g = data[idx + 1];
                        let b = data[idx + 2];
                        
                        // Standard luminance formula
                        brightnessSum += (r * 0.299 + g * 0.587 + b * 0.114);
                        count++;
                    }
                }
            }
            
            let avgBrightness = brightnessSum / count;
            
            // Normalize darkness: 0.0 (pure white) to 1.0 (pure black)
            let darkness = Math.max(0, Math.min(1, 1 - avgBrightness / 255));
            
            // Only draw element if it has discernible weight
            if (darkness > 0.02) {
                const cx = x + dotSize / 2;
                const cy = y + dotSize / 2;
                
                if (shape === 'square') {
                    let size = dotSize * Math.sqrt(darkness);
                    ctx.fillRect(cx - size / 2, cy - size / 2, size, size);
                } else if (shape === 'diamond') {
                    let size = dotSize * Math.sqrt(darkness) * 1.2;
                    ctx.save();
                    ctx.translate(cx, cy);
                    ctx.rotate(Math.PI / 4);
                    ctx.fillRect(-size / 2, -size / 2, size, size);
                    ctx.restore();
                } else if (shape === 'cross') {
                    let size = dotSize * Math.sqrt(darkness) * 1.2;
                    let thickness = size / 3;
                    ctx.fillRect(cx - size / 2, cy - thickness / 2, size, thickness);
                    ctx.fillRect(cx - thickness / 2, cy - size / 2, thickness, size);
                } else {
                    // Default fallback is 'circle'
                    let radius = maxRadius * Math.sqrt(darkness);
                    ctx.beginPath();
                    ctx.arc(cx, cy, radius, 0, Math.PI * 2);
                    ctx.fill();
                }
            }
        }
    }
    
    return canvas;
}