Please bookmark this page to avoid losing your image tool!

Audio And Video Big Hero 6 Alternate Universe Replacement Tool

(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.
function processImage(
    originalImg, 
    intensity = 15, 
    overlayColor = "rgba(148, 0, 211, 0.2)", 
    addHexGrid = 1, 
    addVideoHUD = 1
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;
    
    // Draw original image
    ctx.drawImage(originalImg, 0, 0);
    
    // Apply "Audio/Video Glitch" (Chromatic Aberration & Static)
    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;
    const outputData = new Uint8ClampedArray(data.length);
    
    const rOffset = Math.floor(intensity);
    const bOffset = -Math.floor(intensity);
    
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const i = (y * width + x) * 4;
            
            // Clamp shifted X coordinates
            let rX = Math.max(0, Math.min(width - 1, x + rOffset));
            let bX = Math.max(0, Math.min(width - 1, x + bOffset));
            
            const iR = (y * width + rX) * 4;
            const iB = (y * width + bX) * 4;
            
            // RGB Split / Chromatic Aberration
            outputData[i]     = data[iR];       // Red
            outputData[i + 1] = data[i + 1];    // Green
            outputData[i + 2] = data[iB + 2];   // Blue
            outputData[i + 3] = data[i + 3];    // Alpha
            
            // Add Audio/Video Static Noise
            if (intensity > 0) {
                const noise = (Math.random() - 0.5) * intensity * 2;
                outputData[i]     = Math.min(255, Math.max(0, outputData[i] + noise));
                outputData[i + 1] = Math.min(255, Math.max(0, outputData[i + 1] + noise));
                outputData[i + 2] = Math.min(255, Math.max(0, outputData[i + 2] + noise));
            }
        }
    }
    
    ctx.putImageData(new ImageData(outputData, width, height), 0, 0);
    
    // Add Alternate Universe Color Tint
    ctx.fillStyle = overlayColor;
    ctx.fillRect(0, 0, width, height);
    
    // Add Video Scanlines
    ctx.fillStyle = "rgba(0, 0, 0, 0.25)";
    for (let y = 0; y < height; y += 4) {
        ctx.fillRect(0, y, width, 2);
    }
    
    // Abstract Big Hero 6 Tech Vibe (Hexagonal Grid overlay)
    if (Number(addHexGrid) === 1) {
        ctx.strokeStyle = "rgba(0, 255, 255, 0.15)";
        ctx.lineWidth = 1;
        const hexRadius = Math.max(20, width / 40);
        const hexHeight = Math.sqrt(3) * hexRadius;
        const hexWidth = 2 * hexRadius;
        
        ctx.beginPath();
        for (let y = 0; y < height + hexHeight; y += hexHeight) {
            for (let x = 0, row = 0; x < width + hexWidth; x += (hexWidth * 0.75), row++) {
                const yOffset = (row % 2 === 1) ? hexHeight / 2 : 0;
                const cX = x;
                const cY = y + yOffset;
                
                for (let i = 0; i < 6; i++) {
                    const angle = (Math.PI / 3) * i;
                    const pX = cX + hexRadius * Math.cos(angle);
                    const pY = cY + hexRadius * Math.sin(angle);
                    if (i === 0) ctx.moveTo(pX, pY);
                    else ctx.lineTo(pX, pY);
                }
                ctx.lineTo(cX + hexRadius, cY);
            }
        }
        ctx.stroke();
    }
    
    // Add Audio/Video HUD Overlay Screen
    if (Number(addVideoHUD) === 1) {
        ctx.fillStyle = "white";
        ctx.shadowColor = "black";
        ctx.shadowBlur = 5;
        
        const fontSize = Math.max(16, width / 30);
        ctx.font = `bold ${fontSize}px monospace`;
        
        // REC Indicator
        const pad = fontSize;
        ctx.fillText("REC \u25CF", pad, pad * 1.5);
        ctx.fillStyle = "red";
        ctx.fillText("\u25CF", pad + ctx.measureText("REC ").width, pad * 1.5);
        
        // Timecode and AU format indicator
        ctx.fillStyle = "white";
        const h = Math.floor(Math.random() * 24).toString().padStart(2, '0');
        const m = Math.floor(Math.random() * 60).toString().padStart(2, '0');
        const s = Math.floor(Math.random() * 60).toString().padStart(2, '0');
        const timecode = `${h}:${m}:${s} [BH6-AU]`;
        
        ctx.fillText(timecode, width - ctx.measureText(timecode).width - pad, pad * 1.5);
        
        // Corner brackets / Crosshairs overlay
        ctx.strokeStyle = "rgba(255, 255, 255, 0.7)";
        ctx.lineWidth = Math.max(2, width / 300);
        const bracketSize = Math.max(20, width / 15);
        
        ctx.beginPath();
        // Top Left
        ctx.moveTo(pad, pad + bracketSize); ctx.lineTo(pad, pad); ctx.lineTo(pad + bracketSize, pad);
        // Top Right
        ctx.moveTo(width - pad - bracketSize, pad); ctx.lineTo(width - pad, pad); ctx.lineTo(width - pad, pad + bracketSize);
        // Bottom Left
        ctx.moveTo(pad, height - pad - bracketSize); ctx.lineTo(pad, height - pad); ctx.lineTo(pad + bracketSize, height - pad);
        // Bottom Right
        ctx.moveTo(width - pad - bracketSize, height - pad); ctx.lineTo(width - pad, height - pad); ctx.lineTo(width - pad, height - pad - bracketSize);
        
        ctx.stroke();
        
        // Center crosshair
        ctx.beginPath();
        const cX = width / 2;
        const cY = height / 2;
        ctx.moveTo(cX - 15, cY); ctx.lineTo(cX + 15, cY);
        ctx.moveTo(cX, cY - 15); ctx.lineTo(cX, cY + 15);
        ctx.stroke();
    }
    
    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

This tool applies a high-tech, glitch-style aesthetic to images, simulating an advanced audio/video heads-up display (HUD). It can transform images by adding chromatic aberration, static noise, scanlines, and color tints to create a digital distortion effect. Users can also overlay technical graphic elements such as a hexagonal grid, crosshairs, corner brackets, and a recording indicator with a timecode. This tool is ideal for creators looking to produce sci-fi themed concept art, digital glitch aesthetics, or stylized social media content.

Leave a Reply

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