Image Black And White HUD Style With VHS Effects

async function processImage(originalImg, noiseAmount = 0.2, scanlineIntensity = 0.2, distortionAmount = 2) {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Set canvas dimensions to match the image
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

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

    // Get the image data from the original drawing
    const originalImageData = ctx.getImageData(0, 0, width, height);
    const originalData = originalImageData.data;
    
    // Create a new image data object to store the processed pixels
    const processedImageData = ctx.createImageData(width, height);
    const processedData = processedImageData.data;

    // Define VHS effect parameters
    const distortionFrequency = 0.03; // Controls the frequency of the wavy distortion
    const distortionPhase = Math.random() * Math.PI * 2; // Randomizes the starting point of the wave

    // Iterate over each pixel of the destination image
    for (let y = 0; y < height; y++) {
        // Calculate the horizontal distortion for this scanline using a sine wave
        const horizontalShift = Math.sin(y * distortionFrequency + distortionPhase) * distortionAmount;

        for (let x = 0; x < width; x++) {
            // Calculate the source x coordinate by applying the horizontal shift
            const srcX = Math.round(x + horizontalShift);
            
            // Clamp the source coordinate to stay within the image bounds
            const clampedSrcX = Math.max(0, Math.min(width - 1, srcX));
            
            // Calculate the array indices for the source and destination pixels
            const srcIndex = (y * width + clampedSrcX) * 4;
            const destIndex = (y * width + x) * 4;

            // Get the RGB values from the source pixel
            const r = originalData[srcIndex];
            const g = originalData[srcIndex + 1];
            const b = originalData[srcIndex + 2];

            // 1. Convert to grayscale using the luminosity method for better visual results
            let gray = 0.299 * r + 0.587 * g + 0.114 * b;

            // 2. Apply Scanlines by darkening every other row
            if (y % 2 === 0) {
                gray *= (1.0 - scanlineIntensity);
            }
            
            // 3. Add random noise for a grainy VHS look
            const noise = (Math.random() - 0.5) * 255 * noiseAmount;
            gray += noise;

            // 4. Posterize the image to create a low-quality, retro feel
            const levels = 6.0; // Number of gray levels
            gray = Math.round(gray / 255.0 * (levels - 1.0)) / (levels - 1.0) * 255.0;

            // Clamp the final gray value to be within the 0-255 range
            gray = Math.max(0, Math.min(255, gray));

            // Set the pixel in the processed image data
            processedData[destIndex] = gray;     // Red
            processedData[destIndex + 1] = gray; // Green
            processedData[destIndex + 2] = gray; // Blue
            processedData[destIndex + 3] = 255;  // Alpha (fully opaque)
        }
    }

    // Put the newly created image data back onto the canvas
    ctx.putImageData(processedImageData, 0, 0);

    // Add a vignette effect to darken the edges, simulating an old monitor screen
    const gradient = ctx.createRadialGradient(
        width / 2, height / 2, Math.min(width, height) / 3, 
        width / 2, height / 2, Math.max(width, height) / 1.5
    );
    gradient.addColorStop(0, 'rgba(0,0,0,0)');
    gradient.addColorStop(1, 'rgba(0,0,0,0.5)');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);

    // Return the final canvas element
    return canvas;
}