Image Of Piano And MIDI Visualizer

/**
 * Creates an animated piano and MIDI visualizer over a given image.
 *
 * This function takes an image and overlays a piano keyboard at the bottom
 * and an animation of falling notes, simulating a MIDI visualization. The notes
 * fall randomly onto the piano keys, which light up on impact. The animation
 * is self-contained and will run continuously on the returned canvas element.
 *
 * @param {HTMLImageElement} originalImg The original image to use as the background.
 * @param {string} noteColors A comma-separated string of hex colors for the falling notes (e.g., "#ff0000,#00ff00").
 * @param {number} noteSpeed The speed at which the notes fall, in pixels per frame.
 * @param {number} noteDensity Controls the rate of new notes appearing. Higher is more frequent (e.g., 1.0 means ~1 note per second).
 * @param {number} pianoHeight The height of the piano keyboard at the bottom of the image, in pixels.
 * @param {string} keyHighlightColor The color of a piano key when a note hits it.
 * @returns {HTMLCanvasElement} A canvas element with the running animation.
 */
function processImage(
    originalImg,
    noteColors = '#ff6e6e,#f8f391,#8be88b,#8babe8,#e88bf3',
    noteSpeed = 2,
    noteDensity = 0.5,
    pianoHeight = 100,
    keyHighlightColor = '#4dffff'
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    const colors = noteColors.split(',').map(c => c.trim()).filter(Boolean);
    if (colors.length === 0) {
        colors.push('#8be88b'); // A default fallback color
    }

    const keys = [];
    const notes = [];

    // --- Piano Setup ---
    const numWhiteKeys = 28; // 4 octaves worth of white keys
    const whiteKeyWidth = canvas.width / numWhiteKeys;
    const blackKeyWidth = whiteKeyWidth * 0.65;
    const blackKeyHeight = pianoHeight * 0.6;
    const pianoY = canvas.height - pianoHeight;
    const noteHeight = 20;

    // Create white key objects
    for (let i = 0; i < numWhiteKeys; i++) {
        keys.push({
            type: 'white',
            x: i * whiteKeyWidth,
            y: pianoY,
            width: whiteKeyWidth,
            height: pianoHeight,
            pressedTime: 0
        });
    }

    // Create black key objects
    for (let i = 0; i < numWhiteKeys - 1; i++) {
        const keyTypeMod = i % 7;
        // Don't place a black key after E (index 2 in an octave) or B (index 6)
        if (keyTypeMod !== 2 && keyTypeMod !== 6) {
            keys.push({
                type: 'black',
                x: (i + 1) * whiteKeyWidth - (blackKeyWidth / 2),
                y: pianoY,
                width: blackKeyWidth,
                height: blackKeyHeight,
                pressedTime: 0
            });
        }
    }


    function animate() {
        // --- 1. LOGIC UPDATES ---

        // Decrement the highlight timer for all keys
        keys.forEach(key => {
            if (key.pressedTime > 0) {
                key.pressedTime--;
            }
        });

        // Generate new notes based on density.
        // noteDensity / 60 gives an average of 'noteDensity' notes per second.
        if (Math.random() < noteDensity / 60 && keys.length > 0) {
            const keyIndex = Math.floor(Math.random() * keys.length);
            const key = keys[keyIndex];
            notes.push({
                x: key.x,
                y: -noteHeight,
                width: key.width,
                height: noteHeight,
                speed: noteSpeed,
                color: colors[Math.floor(Math.random() * colors.length)],
                keyIndex: keyIndex
            });
        }
        
        // Update note positions and check for collisions
        for (let i = notes.length - 1; i >= 0; i--) {
            const note = notes[i];
            note.y += note.speed;

            // If note hits the piano, trigger key highlight and remove the note
            if (note.y + note.height >= pianoY) {
                const key = keys[note.keyIndex];
                if (key) {
                   key.pressedTime = 15; // Set highlight duration (15 frames ≈ 250ms)
                }
                notes.splice(i, 1);
            }
        }
        

        // --- 2. DRAWING ---

        // Clear canvas and draw the background image
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

        // Draw the piano. White keys must be drawn before black keys.
        // Draw white keys
        keys.forEach(key => {
            if (key.type === 'white') {
                ctx.fillStyle = key.pressedTime > 0 ? keyHighlightColor : '#ffffff';
                ctx.fillRect(key.x, key.y, key.width, key.height);
                ctx.strokeStyle = '#333';
                ctx.strokeRect(key.x, key.y, key.width, key.height);
            }
        });

        // Draw black keys on top
        keys.forEach(key => {
            if (key.type === 'black') {
                ctx.fillStyle = key.pressedTime > 0 ? keyHighlightColor : '#000000';
                ctx.fillRect(key.x, key.y, key.width, key.height);
            }
        });
        
        // Draw the falling notes on top of the piano
        notes.forEach(note => {
            ctx.fillStyle = note.color;
            ctx.fillRect(note.x, note.y, note.width, note.height);
            ctx.strokeStyle = 'rgba(0,0,0,0.2)';
            ctx.strokeRect(note.x, note.y, note.width, note.height);
        });


        // --- 3. LOOP ---
        requestAnimationFrame(animate);
    }

    // Start the animation loop
    animate();

    // Return the canvas element
    return canvas;
}