Image Orchestra Generator

function processImage(originalImg, resolution = "100", fontSize = "14", bgColor = "#000000") {
    // Parse parameters
    const res = parseInt(resolution, 10) || 100;
    const fontSz = parseInt(fontSize, 10) || 14;

    // Create an offscreen canvas to scale down the image and sample pixels
    const offCanvas = document.createElement('canvas');
    const offCtx = offCanvas.getContext('2d', { willReadFrequently: true });
    
    // Calculate aspect ratio and dimensions for the grid
    const aspectRatio = originalImg.height / originalImg.width;
    const w = res;
    const h = Math.floor(res * aspectRatio);
    
    offCanvas.width = w;
    offCanvas.height = h;
    offCtx.drawImage(originalImg, 0, 0, w, h);
    
    const imgData = offCtx.getImageData(0, 0, w, h).data;
    
    // Create the final output canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = w * fontSz;
    canvas.height = h * fontSz;
    
    // Fill the background color
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Use sans-serif as it often covers Unicode musical symbols more consistently across OSs
    ctx.font = `bold ${fontSz}px "Arial", sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // "Orchestra" musical characters sorted from densest (darkest) to lightest
    const chars = ['♬', '♫', '♪', '♩', '♯', '♮', '♭', '+', '-', '.', ' '];
    
    // Determine if the destination background is dark to adjust contrast mapping
    let isDarkBg = true;
    const tempCtxCvs = document.createElement('canvas');
    tempCtxCvs.width = 1;
    tempCtxCvs.height = 1;
    const tempCtx = tempCtxCvs.getContext('2d');
    tempCtx.fillStyle = bgColor;
    tempCtx.fillRect(0, 0, 1, 1);
    const bgPx = tempCtx.getImageData(0, 0, 1, 1).data;
    const bgLuma = 0.299 * bgPx[0] + 0.587 * bgPx[1] + 0.114 * bgPx[2];
    
    if (bgLuma >= 128) {
        isDarkBg = false;
    }
    
    // Map through the sampled pixels and draw the musical orchestra characters
    for (let y = 0; y < h; y++) {
        for (let x = 0; x < w; x++) {
            const idx = (y * w + x) * 4;
            const r = imgData[idx];
            const g = imgData[idx + 1];
            const b = imgData[idx + 2];
            const a = imgData[idx + 3];
            
            // Skip fully/mostly transparent pixels
            if (a < 128) continue;
            
            // Calculate luminance
            let luma = 0.299 * r + 0.587 * g + 0.114 * b;
            let density = luma / 255;
            
            // If background is dark, lighter pixels should use visually denser characters
            if (isDarkBg) {
                density = 1.0 - density;
            }
            
            // Map the density to a character index
            const charIdx = Math.min(chars.length - 1, Math.floor(density * chars.length));
            const char = chars[charIdx];
            
            // Draw the musical symbol in the original pixel color
            ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
            ctx.fillText(char, x * fontSz + fontSz / 2, y * fontSz + fontSz / 2);
        }
    }
    
    return canvas;
}