Movie Studio Year ID Scanner And Converter Tool

function processImage(originalImg, studioName = "Mosfilm", year = "1979", uiColor = "#00ffcc") {
    // Create a canvas to draw the converted "scanned" image
    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 the original image as the background
    ctx.drawImage(originalImg, 0, 0);

    // Apply a slight dark greenish/cyan tint to simulate a scanner screen
    ctx.fillStyle = "rgba(0, 20, 20, 0.2)";
    ctx.fillRect(0, 0, w, h);

    // Scaling factor for responsive UI elements
    const scale = Math.min(w, h);
    const margin = scale * 0.05;
    const cornerSize = scale * 0.15;
    const strokeWidth = Math.max(2, scale * 0.01);

    ctx.strokeStyle = uiColor;
    ctx.fillStyle = uiColor;
    ctx.lineWidth = strokeWidth;
    ctx.lineJoin = "miter";

    // Draw corner "scanner" brackets
    // Top Left
    ctx.beginPath();
    ctx.moveTo(margin, margin + cornerSize);
    ctx.lineTo(margin, margin);
    ctx.lineTo(margin + cornerSize, margin);
    ctx.stroke();

    // Top Right
    ctx.beginPath();
    ctx.moveTo(w - margin - cornerSize, margin);
    ctx.lineTo(w - margin, margin);
    ctx.lineTo(w - margin, margin + cornerSize);
    ctx.stroke();

    // Bottom Left
    ctx.beginPath();
    ctx.moveTo(margin, h - margin - cornerSize);
    ctx.lineTo(margin, h - margin);
    ctx.lineTo(margin + cornerSize, h - margin);
    ctx.stroke();

    // Bottom Right
    ctx.beginPath();
    ctx.moveTo(w - margin - cornerSize, h - margin);
    ctx.lineTo(w - margin, h - margin);
    ctx.lineTo(w - margin, h - margin - cornerSize);
    ctx.stroke();

    // Draw a prominent horizontal scanning "laser" line
    ctx.beginPath();
    ctx.moveTo(0, h * 0.45);
    ctx.lineTo(w, h * 0.45);
    ctx.strokeStyle = uiColor + "66"; // Translucent
    ctx.lineWidth = strokeWidth * 2;
    ctx.stroke();

    // Generate a unique Studio/Year ID Hash
    let hash = 0;
    const strData = studioName + year;
    for (let i = 0; i < strData.length; i++) {
        hash = ((hash << 5) - hash) + strData.charCodeAt(i);
        hash |= 0;
    }
    const hexId = Math.abs(hash).toString(16).toUpperCase().padStart(8, '0');
    const fullId = `SCN-${year}-${hexId}`;

    // Dimensions for the ID Project Information Box
    const boxW = Math.min(w - margin * 2, scale * 0.7);
    const boxH = scale * 0.22;
    const boxX = margin * 1.2;
    const boxY = h - margin * 1.2 - boxH;

    // Draw info box background
    ctx.fillStyle = "rgba(0, 0, 0, 0.75)";
    ctx.strokeStyle = uiColor;
    ctx.lineWidth = Math.max(1, scale * 0.005);
    ctx.fillRect(boxX, boxY, boxW, boxH);
    ctx.strokeRect(boxX, boxY, boxW, boxH);

    // Draw a pseudo-barcode inside the box
    ctx.fillStyle = uiColor;
    const bcStartX = boxX + boxW * 0.05;
    const bcStartY = boxY + boxH * 0.15;
    const bcW = boxW * 0.9;
    const bcH = boxH * 0.3;

    let rngSeed = Math.abs(hash) || 12345;
    function randomFloat() {
        rngSeed = (rngSeed * 9301 + 49297) % 233280;
        return rngSeed / 233280;
    }

    let currX = bcStartX;
    while (currX < bcStartX + bcW) {
        const barWidth = 1 + Math.floor(randomFloat() * (scale * 0.008));
        const gap = 1 + Math.floor(randomFloat() * (scale * 0.008));
        if (currX + barWidth <= bcStartX + bcW) {
            ctx.fillRect(currX, bcStartY, barWidth, bcH);
        }
        currX += barWidth + gap;
    }

    // Prepare font for text UI
    const fontSize = Math.max(10, boxH * 0.12);
    ctx.font = `bold ${fontSize}px "Courier New", Courier, monospace`;
    ctx.textBaseline = "top";
    ctx.fillStyle = uiColor;

    // Draw text inside the info box
    const textStartX = boxX + boxW * 0.05;
    let textY = bcStartY + bcH + boxH * 0.1;
    
    ctx.fillText(`STUDIO : ${studioName.toUpperCase()}`, textStartX, textY);
    textY += fontSize * 1.4;
    ctx.fillText(`YEAR   : ${year}`, textStartX, textY);
    textY += fontSize * 1.4;
    ctx.fillText(`GEN ID : ${fullId}`, textStartX, textY);

    // Draw Top-Right scanning status text and terminology
    ctx.textAlign = "right";
    const trStartX = w - margin * 1.2;
    let trStartY = margin * 1.2;

    const topTexts = [
        "MOVIE STUDIO ID CONVERTER",
        "PROJECT SCANNER ACTIVE",
        "STATUS: IDENTIFIED",
        `TARGET: FILM CO / ${year}`
    ];

    for (let i = 0; i < topTexts.length; i++) {
        ctx.fillText(topTexts[i], trStartX, trStartY);
        trStartY += fontSize * 1.4;
    }

    // Add HUD decorators
    ctx.beginPath();
    ctx.arc(margin * 1.5, margin * 1.5, scale * 0.02, 0, Math.PI * 2);
    ctx.fill();

    return canvas;
}