Image Monumentality Effect Generator

/**
 * Applies a "Monumentality" (Монументальность) effect to an image, simulating massive scale, 
 * stone/metal carving, and dramatic lighting.
 * 
 * @param {HTMLImageElement} originalImg - The source image object.
 * @param {string} material - The style/material of the monument: 'stone', 'bronze', or 'brutalism' (default: 'stone').
 * @param {number|string} intensity - The intensity of the effect from 0 to 100 (default: 50).
 * @returns {HTMLCanvasElement} - A canvas element with the processed image.
 */
function processImage(originalImg, material = 'stone', intensity = 50) {
    const canvas = document.createElement('canvas');
    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;
    
    // Fallback if dimensions are invalid
    if (!w || !h) return canvas;

    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');
    
    // Draw initial image to extract pixel data
    ctx.drawImage(originalImg, 0, 0, w, h);

    const imgData = ctx.getImageData(0, 0, w, h);
    const data = imgData.data;
    
    const outData = ctx.createImageData(w, h);
    const out = outData.data;

    // Normalize intensity so that 50 equals a multiplier of 1.0
    let inten = Number(intensity);
    if (isNaN(inten)) inten = 50;
    const str = inten / 50; 

    const mat = String(material).toLowerCase();

    // Calculate center for dramatic vignette effect
    const cx = w / 2;
    const cy = h / 2;
    const maxDist = Math.sqrt(cx * cx + cy * cy);

    for (let y = 0; y < h; y++) {
        for (let x = 0; x < w; x++) {
            const i = (y * w + x) * 4;

            const r = data[i];
            const g = data[i + 1];
            const b = data[i + 2];

            // 1. Calculate Base Luminance
            const L = 0.2126 * r + 0.7152 * g + 0.0722 * b;

            // 2. Calculate Directional Relief (pseudo-emboss for carved depth)
            let L_prev = L;
            if (x > 0 && y > 0) {
                const i_prev = ((y - 1) * w + (x - 1)) * 4;
                L_prev = 0.2126 * data[i_prev] + 0.7152 * data[i_prev + 1] + 0.0722 * data[i_prev + 2];
            }
            // difference between current pixel and top-left creates an edge highlight
            const relief = L - L_prev;

            let L_adj = L;
            let finalR, finalG, finalB;

            // 3. Apply style-specific rendering (Contrast, Tinting, Texture)
            if (mat === 'bronze') {
                // Bronze: Sepia, high contrast, warm darks, golden highlights
                L_adj = (L - 128) * (1.2 + str * 0.3) + 128 + (relief * str * 2.0);
                L_adj = Math.max(0, Math.min(255, L_adj));
                const lNorm = L_adj / 255;
                
                finalR = Math.pow(lNorm, 0.8) * 255 * 1.15;
                finalG = Math.pow(lNorm, 0.95) * 255 * 0.95;
                finalB = Math.pow(lNorm, 1.2) * 255 * 0.65;

                // Simulate greenish copper patina in the mid-shadows
                if (L_adj > 40 && L_adj < 140) {
                    const patina = Math.sin(((L_adj - 40) / 100) * Math.PI);
                    finalG += patina * 35 * str; // Add green
                    finalB += patina * 25 * str; // Add blue
                }

            } else if (mat === 'brutalism') {
                // Brutalism: Extreme contrast, harsh black and white, heavy concrete grain
                L_adj = (L - 128) * (1.8 + str * 0.6) + 128 + (relief * str * 2.5);
                const noise = (Math.random() - 0.5) * 45 * str;
                L_adj += noise;
                L_adj = Math.max(0, Math.min(255, L_adj));
                
                finalR = L_adj;
                finalG = L_adj * 0.98; // slight sepia tint for aged paper/concrete
                finalB = L_adj * 0.95;

            } else {
                // Stone/Concrete (Default): Cool desaturated tones, moderate contrast, fine grain
                L_adj = (L - 128) * (1.15 + str * 0.4) + 128 + (relief * str * 1.8);
                const noise = (Math.random() - 0.5) * 15 * str;
                L_adj += noise;
                L_adj = Math.max(0, Math.min(255, L_adj));
                const lNorm = L_adj / 255;
                
                // Bluish-cyan tint to simulate solid cool stone
                finalR = lNorm * 215;
                finalG = lNorm * 225;
                finalB = Math.pow(lNorm, 0.95) * 245;
            }

            // 4. Dramatic Vignette (darkens edges to simulate massive scale / spotlight)
            const dx = x - cx;
            const dy = y - cy;
            const dist = Math.sqrt(dx * dx + dy * dy);
            // Str controls how deep the vignette goes
            const vignette = 1.0 - (dist / maxDist) * (0.3 + 0.2 * str); 

            finalR *= vignette;
            finalG *= vignette;
            finalB *= vignette;

            // Clamp final color values and preserve original alpha
            out[i] = finalR > 255 ? 255 : (finalR < 0 ? 0 : finalR);
            out[i + 1] = finalG > 255 ? 255 : (finalG < 0 ? 0 : finalG);
            out[i + 2] = finalB > 255 ? 255 : (finalB < 0 ? 0 : finalB);
            out[i + 3] = data[i + 3];
        }
    }

    // Write processed pixels back
    ctx.putImageData(outData, 0, 0);

    return canvas;
}