Image Song Visualizer

/**
 * Creates a static visualization of a song waveform over an image.
 * This simulates a snapshot of an audio visualizer, drawing bars
 * on top of the provided image to resemble an equalizer.
 *
 * @param {HTMLImageElement} originalImg The original image object. Should be fully loaded.
 * @param {number} barCount The number of bars in the visualizer.
 * @param {string} barColor The color of the visualizer bars (e.g., 'white', '#FF0000', 'rgba(255,0,0,0.5)').
 * @param {string} position The vertical position of the visualizer ('top', 'center', 'bottom').
 * @param {number} visualizerWidth The percentage of the image width the visualizer should occupy (1-100).
 * @param {number} maxBarHeight The maximum possible height of a bar as a percentage of the image height (1-100).
 * @returns {HTMLCanvasElement} A canvas element with the image and the visualizer drawn on it.
 */
function processImage(originalImg, barCount = 64, barColor = 'rgba(255, 255, 255, 0.8)', position = 'bottom', visualizerWidth = 80, maxBarHeight = 30) {
    // Create a canvas and set its dimensions to match the image
    const canvas = document.createElement('canvas');
    // Use naturalWidth/naturalHeight to ensure we get the original image dimensions
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    const ctx = canvas.getContext('2d');

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

    // --- Visualizer Drawing Logic ---

    // Clamp parameters to sensible ranges to prevent errors
    const clampedWidthPercent = Math.max(0, Math.min(100, visualizerWidth));
    const clampedHeightPercent = Math.max(0, Math.min(100, maxBarHeight));
    const clampedBarCount = Math.max(1, Math.floor(barCount));

    // Calculate dimensions and positions for the visualizer bars
    const totalVisualizerWidth = canvas.width * (clampedWidthPercent / 100);
    const startX = (canvas.width - totalVisualizerWidth) / 2;
    const maxHeight = canvas.height * (clampedHeightPercent / 100);

    // The total width for one bar and its adjacent gap
    const barSlotWidth = totalVisualizerWidth / clampedBarCount;
    // Let's make the bar take up 75% of the slot, and the gap 25% for spacing
    const barWidth = barSlotWidth * 0.75;

    ctx.fillStyle = barColor;

    // Determine the vertical baseline for the bars based on the 'position' parameter
    let yBase;
    switch (position.toLowerCase().trim()) {
        case 'top':
            yBase = 0;
            break;
        case 'center':
            yBase = canvas.height / 2;
            break;
        case 'bottom':
        default:
            yBase = canvas.height;
            break;
    }

    // Loop and draw each bar
    for (let i = 0; i < clampedBarCount; i++) {
        // --- Bar Height Calculation ---
        // This logic creates a random but structured look, resembling a snapshot of a real visualizer.
        const progress = i / (clampedBarCount > 1 ? clampedBarCount - 1 : 1); // Value from 0.0 to 1.0 across the bars
        // A sine wave creates a nice "hump" shape, often seen in frequency visualizers (low/high freq at edges)
        const humpFactor = Math.sin(progress * Math.PI);
        // Add randomness for a more natural, dynamic feel
        const randomFactor = Math.random() * 0.6 + 0.4; // A random value between 0.4 and 1.0

        let barHeight = maxHeight * humpFactor * randomFactor;
        
        // Ensure bars are at least 1 pixel high to be visible
        barHeight = Math.max(1, barHeight);

        const x = startX + i * barSlotWidth;

        // Draw the bar rectangle based on the calculated position and height
        switch (position.toLowerCase().trim()) {
            case 'top':
                ctx.fillRect(x, yBase, barWidth, barHeight);
                break;
            case 'center':
                ctx.fillRect(x, yBase - barHeight / 2, barWidth, barHeight);
                break;
            case 'bottom':
            default:
                ctx.fillRect(x, yBase - barHeight, barWidth, barHeight);
                break;
        }
    }

    // Return the final canvas element, which can be appended to the DOM
    return canvas;
}