Motor Vs Luchshebot Image Comparison Tool

function processImage(originalImg, topName = "Мотор", bottomName = "Лучшебот", vsTxt = "VS", splitThickness = "5") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

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

    // Manipulate pixels for the "VS" filters
    const imgData = ctx.getImageData(0, 0, w, h);
    const data = imgData.data;

    // Determine thickness of scanlines for the bot side based on image height
    const scanlineHeight = Math.max(1, Math.floor(h / 250));

    // Process each pixel
    for (let i = 0; i < data.length; i += 4) {
        const pixelIndex = i / 4;
        const x = pixelIndex % w;
        const y = Math.floor(pixelIndex / w);

        // Diagonal split from Top-Right (w, 0) to Bottom-Left (0, h)
        // Equation: x/w + y/h = 1. If < 1, it's the Top-Left portion.
        const isMotor = (x / w + y / h) < 1;

        if (isMotor) {
            // "Motor" Side (Top-Left): Warm, gritty, industrial tint
            data[i]     = Math.min(255, data[i] * 1.15); // Red boost
            data[i + 1] = Math.min(255, data[i + 1] * 0.95); // Slight green reduction
            data[i + 2] = Math.min(255, data[i + 2] * 0.80); // Blue reduction
        } else {
            // "Luchshebot" Side (Bottom-Right): Cold, cyber tint with scanlines
            const isScanline = (y % (scanlineHeight * 3)) < scanlineHeight;
            const scanMult = isScanline ? 0.5 : 1.0; // Darken on scanlines

            data[i]     = Math.min(255, data[i] * 0.6 * scanMult); // Red reduction
            data[i + 1] = Math.min(255, data[i + 1] * 1.2 * scanMult); // Green boost
            data[i + 2] = Math.min(255, data[i + 2] * 1.5 * scanMult); // Blue boost
        }
    }
    
    // Apply the manipulated pixels back to canvas
    ctx.putImageData(imgData, 0, 0);

    // Draw the dividing line
    const thick = parseFloat(splitThickness) || 5;
    const lineW = Math.max(thick, w * 0.008);
    
    ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
    ctx.shadowBlur = lineW * 2;
    ctx.beginPath();
    ctx.moveTo(w, 0);
    ctx.lineTo(0, h);
    ctx.lineWidth = lineW;
    ctx.strokeStyle = '#ffffff';
    ctx.stroke();
    
    // Reset shadow
    ctx.shadowBlur = 0;
    ctx.shadowColor = 'transparent';

    // Helper function for drawing meme-style text with outlines
    function drawMemeText(text, x, y, align, baseline, size, fillColor) {
        ctx.textAlign = align;
        ctx.textBaseline = baseline;
        ctx.font = `bold italic ${size}px Impact, "Arial Black", sans-serif`;
        
        // Multi-layered stroke to act as a thick exterior outline
        ctx.lineWidth = Math.max(3, size * 0.1);
        ctx.lineJoin = "round";
        ctx.miterLimit = 2;
        ctx.strokeStyle = '#000000';
        
        ctx.shadowColor = '#000000';
        ctx.shadowBlur = size * 0.1;
        ctx.shadowOffsetX = size * 0.05;
        ctx.shadowOffsetY = size * 0.05;
        
        ctx.strokeText(text, x, y);
        
        // Reset shadow so the fill text is clean inside
        ctx.shadowColor = 'transparent';
        ctx.fillStyle = fillColor;
        ctx.fillText(text, x, y);
    }

    const pad = Math.max(10, w * 0.03);
    const nameFs = Math.max(20, w * 0.06);

    // Draw Top-Left text (Motor)
    drawMemeText(topName, pad, pad, 'left', 'top', nameFs, '#ff6633');

    // Draw Bottom-Right text (Luchshebot)
    drawMemeText(bottomName, w - pad, h - pad, 'right', 'bottom', nameFs, '#33eeff');

    // Draw VS Badge in the center
    const vsFs = Math.max(30, w * 0.12);
    ctx.save();
    ctx.translate(w / 2, h / 2);
    
    // Badge Background
    const r = vsFs * 0.7;
    ctx.beginPath();
    ctx.arc(0, 0, r, 0, Math.PI * 2);
    ctx.fillStyle = 'rgba(20, 20, 20, 0.85)';
    ctx.fill();
    ctx.lineWidth = Math.max(2, r * 0.08);
    ctx.strokeStyle = '#ffffff';
    ctx.stroke();

    // Minor badge ring
    ctx.beginPath();
    ctx.arc(0, 0, r * 0.85, 0, Math.PI * 2);
    ctx.lineWidth = Math.max(1, r * 0.02);
    ctx.strokeStyle = '#aaaaaa';
    ctx.stroke();

    // VS Text
    drawMemeText(vsTxt, 0, 0, 'center', 'middle', vsFs, '#ffffff');
    ctx.restore();

    return canvas;
}