Image To THX Logo History 1983-2023 Search Tool

function processImage(originalImg, searchQuery = "THX logo history 1983-2023", tintColor = "rgba(0, 10, 30, 0.8)") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas dimensions to match the original image
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;
    
    // Draw the original image as background
    ctx.drawImage(originalImg, 0, 0, width, height);
    
    // Apply a cinematic deep-blue tint overlay (THX style)
    ctx.fillStyle = tintColor;
    ctx.fillRect(0, 0, width, height);
    
    // Calculate dimensions for the Search Bar
    const barWidth = Math.min(width * 0.8, 800);
    const barHeight = Math.max(height * 0.08, 50);
    const barX = (width - barWidth) / 2;
    const barY = (height - barHeight) / 2;
    const radius = barHeight / 2;
    
    // Draw THX-style glowing "SEARCH" text above the bar
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    const headerFontSize = Math.max(barHeight * 0.6, 20);
    ctx.font = `bold ${headerFontSize}px "Arial Black", Arial, sans-serif`;
    ctx.fillStyle = '#ffffff';
    ctx.shadowColor = '#00ccff';
    ctx.shadowBlur = 15;
    ctx.fillText("IMAGE SEARCH ENGINE", width / 2, barY - 20);
    
    // Reset shadow for the search bar
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    ctx.shadowBlur = 15;
    ctx.shadowOffsetY = 5;
    
    // Draw the rounded search bar
    ctx.fillStyle = '#ffffff';
    ctx.beginPath();
    ctx.moveTo(barX + radius, barY);
    ctx.lineTo(barX + barWidth - radius, barY);
    ctx.quadraticCurveTo(barX + barWidth, barY, barX + barWidth, barY + radius);
    ctx.lineTo(barX + barWidth, barY + barHeight - radius);
    ctx.quadraticCurveTo(barX + barWidth, barY + barHeight, barX + barWidth - radius, barY + barHeight);
    ctx.lineTo(barX + radius, barY + barHeight);
    ctx.quadraticCurveTo(barX, barY + barHeight, barX, barY + barHeight - radius);
    ctx.lineTo(barX, barY + radius);
    ctx.quadraticCurveTo(barX, barY, barX + radius, barY);
    ctx.closePath();
    ctx.fill();
    
    // Reset shadow and draw search text
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetY = 0;
    
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    const inputFontSize = barHeight * 0.45;
    ctx.font = `${inputFontSize}px Arial, sans-serif`;
    ctx.fillStyle = '#202124';
    ctx.fillText(searchQuery, barX + barHeight, barY + barHeight / 2);
    
    // Draw magnifying glass icon inside search bar
    ctx.strokeStyle = '#9aa0a6';
    ctx.lineWidth = Math.max(2, barHeight * 0.05);
    ctx.beginPath();
    const magX = barX + barHeight / 2;
    const magY = barY + barHeight / 2;
    const magR = barHeight * 0.15;
    ctx.arc(magX - magR * 0.2, magY - magR * 0.2, magR, 0, Math.PI * 2);
    ctx.moveTo(magX + magR * 0.5, magY + magR * 0.5);
    ctx.lineTo(magX + magR * 1.5, magY + magR * 1.5);
    ctx.stroke();

    // Draw THX "Deep Note" audio spectrum visualizer at the bottom
    const barCount = 50;
    const maxBarHeight = height * 0.2;
    const visualizerY = height;
    const visualizerWidth = width / barCount;
    
    ctx.fillStyle = '#00aaff';
    ctx.shadowColor = '#00aaff';
    ctx.shadowBlur = 10;
    
    for (let i = 0; i < barCount; i++) {
        // Mathematical curve to simulate an audio wave crescendo (like the Deep Note)
        const normalize = i / (barCount - 1);
        const wave1 = Math.sin(normalize * Math.PI);
        const wave2 = Math.abs(Math.cos(normalize * Math.PI * 4));
        const combined = (wave1 * 0.6) + (wave2 * 0.4);
        
        let bHeight = combined * maxBarHeight;
        
        // Add minimal height so empty spaces still have a line
        bHeight = Math.max(bHeight, height * 0.01);
        
        const bX = i * visualizerWidth;
        const bY = visualizerY - bHeight;
        
        // Leave a tiny gap between bars
        ctx.fillRect(bX + visualizerWidth * 0.1, bY, visualizerWidth * 0.8, bHeight);
    }
    
    return canvas;
}