Image Filter For MQ1 Reaper Drone Targeting Pod

function processImage(originalImg, tintColor = '#33ff33', scanlineOpacity = 0.15, noiseAmount = 25, vignetteIntensity = 0.8) {

    /**
     * Helper function to parse a hex color string into an RGB object.
     * @param {string} hex - The hex color string (e.g., '#33ff33').
     * @returns {{r: number, g: number, b: number}}
     */
    const hexToRgb = (hex) => {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : { r: 51, g: 255, b: 51 }; // Default to night vision green
    };

    /**
     * Helper function to draw the Heads-Up Display (HUD) overlay.
     * @param {CanvasRenderingContext2D} ctx - The canvas context.
     * @param {number} width - The canvas width.
     * @param {number} height - The canvas height.
     * @param {string} color - The color for the HUD elements.
     */
    const drawHUD = (ctx, width, height, color) => {
        ctx.strokeStyle = color;
        ctx.fillStyle = color;
        ctx.lineWidth = 1;
        const fontSize = Math.max(12, Math.min(18, width * 0.025));
        ctx.font = `${fontSize}px 'Courier New', monospace`;
        ctx.textBaseline = 'top';

        // --- Telemetry Data (with some randomness for realism) ---
        const now = new Date();
        const timeString = `${String(now.getUTCHours()).padStart(2, '0')}:${String(now.getUTCMinutes()).padStart(2, '0')}:${String(now.getUTCSeconds()).padStart(2, '0')}`;
        const randomRng = (4.1 + Math.random() * 0.3).toFixed(2);
        const randomAlt = (15300 + Math.floor(Math.random() * 150));
        
        // Top-left info
        ctx.textAlign = 'left';
        ctx.fillText(`UTC: ${timeString}`, 20, 20);
        ctx.fillText('NFOV', 20, 20 + fontSize * 1.5);
        ctx.fillText('FLIR V2.1', 20, 20 + fontSize * 3);


        // Top-right info
        ctx.textAlign = 'right';
        ctx.fillText(`LAT: 34.0522 N`, width - 20, 20);
        ctx.fillText(`LON: 118.2437 W`, width - 20, 20 + fontSize * 1.5);
        ctx.fillText(`ALT: ${randomAlt} FT`, width - 20, 20 + fontSize * 3);

        // Bottom-left info
        ctx.textAlign = 'left';
        ctx.fillText('TGT: VEHICLE', 20, height - 20 - fontSize * 3);
        ctx.fillText(`RNG: ${randomRng} KM`, 20, height - 20 - fontSize * 1.5);

        // --- Center Targeting Reticle ---
        const centerX = width / 2;
        const centerY = height / 2;
        const crosshairSize = Math.min(width, height) * 0.05;

        ctx.lineWidth = 2;
        // Main cross
        ctx.beginPath();
        ctx.moveTo(centerX - crosshairSize, centerY);
        ctx.lineTo(centerX + crosshairSize, centerY);
        ctx.moveTo(centerX, centerY - crosshairSize);
        ctx.lineTo(centerX, centerY + crosshairSize);
        ctx.stroke();

        // Targeting box
        const boxSize = crosshairSize * 1.8;
        ctx.lineWidth = 3;
        ctx.strokeRect(centerX - boxSize / 2, centerY - boxSize / 2, boxSize, boxSize);

        // Targeting status
        ctx.textAlign = 'center';
        ctx.fillText('TARGET LOCKED', centerX, centerY - boxSize / 2 - fontSize * 1.5);
    };

    // --- Main Image Processing ---

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;

    // 1. Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    // 2. Apply color filter & noise
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;
    const tint = hexToRgb(tintColor);

    for (let i = 0; i < data.length; i += 4) {
        // Grayscale conversion using luminosity method
        const grayscale = 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2];
        
        // Add random noise
        const noise = (Math.random() - 0.5) * noiseAmount;
        const finalValue = Math.max(0, Math.min(255, grayscale + noise));

        // Apply tint
        data[i] = finalValue * (tint.r / 255);     // Red
        data[i + 1] = finalValue * (tint.g / 255); // Green
        data[i + 2] = finalValue * (tint.b / 255); // Blue
    }
    ctx.putImageData(imageData, 0, 0);

    // 3. Draw Scanlines for a CRT display effect
    if (scanlineOpacity > 0) {
      ctx.fillStyle = `rgba(0, 0, 0, ${scanlineOpacity})`;
      for (let y = 0; y < height; y += 3) {
          ctx.fillRect(0, y, width, 1);
      }
    }
    
    // 4. Draw Vignette (darkened corners)
    if (vignetteIntensity > 0) {
        const outerRadius = Math.sqrt(width * width + height * height) / 2;
        const gradient = ctx.createRadialGradient(width / 2, height / 2, height / 3, width / 2, height / 2, outerRadius);
        gradient.addColorStop(0, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, `rgba(0,0,0,${vignetteIntensity})`);
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, width, height);
    }

    // 5. Draw the HUD overlay
    drawHUD(ctx, width, height, tintColor);

    return canvas;
}