Image Baroque Ceiling Filter Effect

function processImage(originalImg, effectStrength = 0.7, vignetteStrength = 0.6, vignetteSoftness = 0.5) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;

    canvas.width = w;
    canvas.height = h;

    if (w === 0 || h === 0) {
        // Return an empty canvas if image dimensions are zero
        return canvas;
    }

    // --- 1. Apply main color and tone adjustments ---

    // Clamp parameters to ensure they are within a [0, 1] range for calculations
    const clampedEffectStrength = Math.max(0, Math.min(1, effectStrength));

    // Calculate filter values based on effectStrength
    // Baroque style often features high contrast, rich (sometimes aged/desaturated) colors, and dramatic lighting.
    const contrast = 1.0 + 0.5 * clampedEffectStrength;         // Range: 1.0 (no change) to 1.5 (high contrast)
    const sepia = 0.6 * clampedEffectStrength;                 // Range: 0 (no change) to 0.6 (strong sepia for aged look)
    const brightness = 1.0 - 0.15 * clampedEffectStrength;     // Range: 1.0 (no change) to 0.85 (slightly darker for mood)
    const saturation = 1.0 + 0.2 * clampedEffectStrength;      // Range: 1.0 (no change) to 1.2 (boost richness)

    // Construct the filter string
    // Increased saturation helps counteract sepia's desaturation if we want rich but aged colors.
    // Order can matter slightly.
    ctx.filter = `brightness(${brightness}) contrast(${contrast}) sepia(${sepia}) saturate(${saturation})`;

    // Draw the original image onto the canvas, applying the filter
    ctx.drawImage(originalImg, 0, 0, w, h);

    // Reset filter for subsequent operations (like vignette) that should not re-apply these filters
    ctx.filter = 'none';


    // --- 2. Apply Vignette Effect ---
    // A vignette helps draw focus to the center, common in ceiling art, and adds to the dramatic/aged feel.

    // Clamp vignette parameters
    const clampedVignetteStrength = Math.max(0, Math.min(1, vignetteStrength));
    const clampedVignetteSoftness = Math.max(0, Math.min(1, vignetteSoftness)); // 0 = sharp/small clear area, 1 = soft/large clear area

    if (clampedVignetteStrength > 0) {
        const centerX = w / 2;
        const centerY = h / 2;

        // The outer radius of the gradient should at least reach the corners of the canvas
        const gradientOuterRadius = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2));
        
        // The inner radius determines the size of the central clear area.
        // vignetteSoftness = 0 (sharpest) => innerRadius = 0.2 * outerRadius (small clear area)
        // vignetteSoftness = 1 (softest)  => innerRadius = 0.9 * outerRadius (large clear area, subtle vignette)
        // This makes 'softness' intuitive: higher softness = gentler, more peripheral vignette.
        const gradientInnerRadius = gradientOuterRadius * (0.15 + 0.75 * clampedVignetteSoftness);


        // Create a radial gradient
        // The gradient goes from transparent in the center to a dark color at the edges.
        const vignetteGradient = ctx.createRadialGradient(
            centerX, centerY, gradientInnerRadius,
            centerX, centerY, gradientOuterRadius
        );

        // Define the vignette color (dark, warm brown often suits a Baroque feel)
        // The alpha of this color is controlled by clampedVignetteStrength
        const vignetteBaseRGB = "30,15,0"; // A dark, warm, desaturated brown (gold-ish shadow)

        // Gradient stops:
        // Start: Fully transparent inside the inner radius
        vignetteGradient.addColorStop(0, `rgba(${vignetteBaseRGB}, 0)`);
        // End: The vignette color (with strength-controlled alpha) at the outer radius
        vignetteGradient.addColorStop(1, `rgba(${vignetteBaseRGB}, ${clampedVignetteStrength})`);
        
        // Apply the vignette gradient
        ctx.fillStyle = vignetteGradient;
        ctx.fillRect(0, 0, w, h);
    }

    return canvas;
}