Please bookmark this page to avoid losing your image tool!

Image Black And White HUD Style With VHS Effects

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
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;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The ‘Image Black And White HUD Style With VHS Effects’ tool transforms images into a stylized black and white representation reminiscent of old VHS tapes. This tool applies various effects such as grainy noise, scanlines, and distortion to create a retro aesthetic. Users can customize the level of noise, scanline intensity, and distortion to achieve their desired look. This tool is particularly useful for graphic designers, digital artists, or anyone looking to add a nostalgic vintage touch to their images for personal projects, social media, or art presentations.

Leave a Reply

Your email address will not be published. Required fields are marked *

Other Image Tools:

Black and White MQ1 Reaper Drone Targeting Pod Image

Image Filter for MQ1 Reaper Drone Targeting Pod

Image Hyper-Realistic Portrait Triptych Generator

Image To Professional Architectural Render Blueprint Converter

Image Ultraviolet Camera Filter

Image Portrait Generator with Warm Golden Hour Lighting

Image Softly Lit Portrait Generator

Image Petal Count Identifier

Image Ball Creator

Image To CAD-Style Blueprint Converter

Image To Blueprint CAD Style Converter

Image To Clean CAD Blueprint Generator

Image To CAD Blueprint Generator

Image To Technical Blueprint Style Converter

Image To Blueprint-Style Drawing Converter

Image To Technical Blueprint Converter

Architectural Plan to Technical Blueprint Image Converter

Architectural Plan To Blueprint-Style Image Converter

Image To Blueprint Architectural Style Converter

Image Background Replacement To White

Image To Dot Outline Converter

Image To Vertical Halftone Converter

Image Transparent Hologram Effect Generator

Image Blue Twilight Filter Applicator

Image Golden Ratio Spiral Generator for A4

Photo Black and White Floyd-Steinberg Dithering for Acrylic Engraving

Image Cover Texture Generator

Image Arabic Text Overlay Tool

Image Arabic Style Enhancer

Arabic Style Image Designer

Image Heart Music Note Creator

Image CRT Lens Effect Enhancer for Nostalgic Wallpaper Design

Image Security Camera Effect Creator

Image Processing Tool

Image 1001 Utility Tool

Image Binary String Table To Numeric Table Converter

See All →