Image Gothic Style Filter Converter

function processImage(originalImg, intensity = "1.0", vignetteAmount = "0.8") {
    // Parse the parameters, ensuring they act as multipliers
    const intensityVal = parseFloat(intensity) || 1.0;
    const vignetteVal = parseFloat(vignetteAmount) || 0.8;

    // Create the canvas and set its dimensions to match the image
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;

    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    // Get the pixel data from the canvas
    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;

    // Pre-calculate contrast factor for a moody, high-contrast look
    const contrastLevel = 50 * intensityVal;
    const contrastFactor = (259 * (contrastLevel + 255)) / (255 * (259 - contrastLevel));
    // Darken overall image for the gothic aesthetic
    const brightnessOffset = -30 * intensityVal;

    // Data for vignette centering
    const centerX = width / 2;
    const centerY = height / 2;
    const maxDist = Math.sqrt(centerX * centerX + centerY * centerY);

    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const i = (y * width + x) * 4;
            let r = data[i];
            let g = data[i + 1];
            let b = data[i + 2];

            // 1. Calculate luminance and heavily desaturate (e.g., 85% desaturation)
            const lum = 0.299 * r + 0.587 * g + 0.114 * b;
            const satAmount = Math.max(0, 1.0 - (0.85 * intensityVal));
            r = r * satAmount + lum * (1 - satAmount);
            g = g * satAmount + lum * (1 - satAmount);
            b = b * satAmount + lum * (1 - satAmount);

            // 2. Apply gothic cold tint (slightly reduce red/green, boost blue for a cold tone)
            r *= 0.95;
            g *= 0.95;
            b *= 1.08;

            // 3. Apply brightness and contrast manipulation
            r = contrastFactor * (r - 128) + 128 + brightnessOffset;
            g = contrastFactor * (g - 128) + 128 + brightnessOffset;
            b = contrastFactor * (b - 128) + 128 + brightnessOffset;

            // 4. Apply Vignette (darken corners)
            const dx = x - centerX;
            const dy = y - centerY;
            const dist = Math.sqrt(dx * dx + dy * dy);
            // Vignette multiplier approaches 0 (blacker) at the edges
            const v = 1.0 - ((dist / maxDist) * vignetteVal);

            r *= v;
            g *= v;
            b *= v;

            // 5. Clamp values to standard 0-255 range and update array
            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));
        }
    }

    // Apply the manipulated pixel data back onto the canvas
    ctx.putImageData(imgData, 0, 0);

    return canvas;
}