Image Baroque Style Filter

/**
 * Applies a Baroque style filter to an image, characterized by strong contrast (chiaroscuro),
 * rich warm tones, and a dramatic vignette effect.
 *
 * @param {Image} originalImg The original Javascript Image object.
 * @param {number} [contrast=75] The intensity of the contrast, from 0 to 100. Higher values create stronger light/dark differences.
 * @param {number} [brightness=-20] Adjusts the overall brightness, from -100 to 100. Negative values darken the image, enhancing shadows.
 * @param {number} [warmth=40] The intensity of the warm, golden-brown tint, from 0 to 100.
 * @param {number} [vignette=60] The strength of the vignette effect (darkened corners), from 0 to 100.
 * @returns {HTMLCanvasElement} A new canvas element with the filter applied.
 */
function processImage(originalImg, contrast = 75, brightness = -20, warmth = 40, vignette = 60) {
    // Create a new canvas to draw on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

    // Set canvas dimensions to match the image
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    canvas.width = width;
    canvas.height = height;

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

    // Get the image data to manipulate pixels
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // --- Normalize parameters for calculation ---
    // Map contrast (0-100) to a more effective range for the formula
    const contrastFactor = (259 * (contrast * 1.5 + 259)) / (259 * (259 - contrast * 1.5));
    const warmthIntensity = warmth / 100;
    const vignetteAmount = vignette / 100;

    // --- Pre-calculate vignette constants ---
    const centerX = width / 2;
    const centerY = height / 2;
    // Use the distance to the farthest corner as the maximum distance
    const maxDist = Math.sqrt(centerX * centerX + centerY * centerY);

    // Loop through every pixel (RGBA)
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        const origR = r,
            origG = g,
            origB = b;

        // --- 1. Apply Warmth (Sepia-like tint) ---
        // This gives the image the rich, aged, golden tones typical of Baroque paintings.
        if (warmthIntensity > 0) {
            const warmR = 0.393 * origR + 0.769 * origG + 0.189 * origB;
            const warmG = 0.349 * origR + 0.686 * origG + 0.168 * origB;
            const warmB = 0.272 * origR + 0.534 * origG + 0.131 * origB;
            // Linearly interpolate between the original color and the full warm color
            r = (warmR * warmthIntensity) + (origR * (1 - warmthIntensity));
            g = (warmG * warmthIntensity) + (origG * (1 - warmthIntensity));
            b = (warmB * warmthIntensity) + (origB * (1 - warmthIntensity));
        }

        // --- 2. Apply Brightness ---
        // Darkening the image slightly enhances the dramatic, shadowy feel.
        r += brightness;
        g += brightness;
        b += brightness;

        // --- 3. Apply Contrast (Chiaroscuro effect) ---
        // This is the core of the Baroque style, creating dramatic contrast between light and dark.
        r = contrastFactor * (r - 128) + 128;
        g = contrastFactor * (g - 128) + 128;
        b = contrastFactor * (b - 128) + 128;

        // --- 4. Apply Vignette ---
        // Darkens the corners to draw the viewer's eye to the center, adding to the drama.
        if (vignetteAmount > 0) {
            const x = (i / 4) % width;
            const y = Math.floor((i / 4) / width);
            const dx = x - centerX;
            const dy = y - centerY;
            const dist = Math.sqrt(dx * dx + dy * dy);
            const relativeDist = dist / maxDist;
            
            // Use a power function for a smoother, more pronounced falloff
            const vignetteFactor = Math.pow(relativeDist, 1.5) * vignetteAmount;
            const multiplier = 1.0 - vignetteFactor;

            r *= multiplier;
            g *= multiplier;
            b *= multiplier;
        }

        // Clamp the values to the valid 0-255 range
        data[i] = Math.max(0, Math.min(255, r));
        data[i + 1] = Math.max(0, Math.min(255, g));
        data[i + 2] = Math.max(0, Math.min(255, b));
    }

    // Put the manipulated data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // Return the final canvas
    return canvas;
}