Vincilin Major Image Effect Generator

function processImage(originalImg, intensity = 1.0, colorTone = "warm") {
    // Determine effect strength from the intensity parameter
    const str = parseFloat(intensity);
    
    // Create canvas
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;
    
    const ctx = canvas.getContext('2d');
    
    // 1. Draw the base original image
    ctx.drawImage(originalImg, 0, 0, width, height);

    // 2. Cinematic Soft Glow (Bloom) using composite operations
    ctx.globalCompositeOperation = 'soft-light';
    ctx.filter = `blur(${Math.min(width, height) * 0.02}px) contrast(1.2)`;
    ctx.globalAlpha = 0.5 * str;
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Reset context before pixel manipulation
    ctx.globalCompositeOperation = 'source-over';
    ctx.filter = 'none';
    ctx.globalAlpha = 1.0;

    // 3. Pixel Manipulation for the "Vincilin Major" color grade
    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;

    const cx = width / 2;
    const cy = height / 2;
    const maxDist = Math.sqrt(cx * cx + cy * cy);

    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        // Calculate luminance
        let luma = 0.299 * r + 0.587 * g + 0.114 * b;

        // Apply Tone Mapping
        if (colorTone.toLowerCase() === 'warm') {
            // Push warm highlights (golden / sepia feel) and cool deep shadows
            r += (luma / 255) * 45 * str;
            g += (luma / 255) * 20 * str;
            b += ((255 - luma) / 255) * 25 * str; 
        } else {
            // Cool alternative look inspired by classic cyanotypes or twilight
            r += ((255 - luma) / 255) * 30 * str;
            g += (luma / 255) * 10 * str;
            b += (luma / 255) * 50 * str;
        }

        // Apply a gentle contrast S-Curve
        const contrast = 1.0 + (0.18 * str);
        r = ((r / 255 - 0.5) * contrast + 0.5) * 255;
        g = ((g / 255 - 0.5) * contrast + 0.5) * 255;
        b = ((b / 255 - 0.5) * contrast + 0.5) * 255;

        // Apply Vignette (darken edges)
        let px = (i / 4) % width;
        let py = Math.floor((i / 4) / width);
        let dist = Math.sqrt(Math.pow(px - cx, 2) + Math.pow(py - cy, 2));
        
        // Intensity of vignette is based on the distance from center
        let vignetteAmount = 1 - (dist / maxDist) * 0.45 * str;
        vignetteAmount = Math.max(0, vignetteAmount);
        
        r *= vignetteAmount;
        g *= vignetteAmount;
        b *= vignetteAmount;

        // Add Film Grain / Noise for a vintage texturized feel
        const noise = (Math.random() - 0.5) * 24 * str;
        r += noise;
        g += noise;
        b += noise;

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

    // Write updated pixels back
    ctx.putImageData(imgData, 0, 0);

    // 4. Final Cinematic Color Wash Overlay
    ctx.globalCompositeOperation = 'overlay';
    ctx.fillStyle = colorTone.toLowerCase() === 'warm' 
        ? `rgba(255, 170, 0, ${0.1 * str})` 
        : `rgba(0, 140, 255, ${0.1 * str})`;
    ctx.fillRect(0, 0, width, height);

    return canvas;
}