Image To I Killed X Losky Effect Color Filter Converter

function processImage(originalImg, intensity = 1) {
    // Ensure intensity is a valid number
    let filterIntensity = Number(intensity);
    if (isNaN(filterIntensity)) filterIntensity = 1;

    // Create canvas to process 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');
    
    // Draw original image
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Extract pixel data
    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;

    // Calculate contrast factor for a punchy, grungy look
    // 35 is our base contrast increment
    const contrastVal = 35 * filterIntensity;
    const contrastFactor = (259 * (contrastVal + 255)) / (255 * (259 - contrastVal));

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

        // 1. Apply Contrast
        r = contrastFactor * (r - 128) + 128;
        g = contrastFactor * (g - 128) + 128;
        b = contrastFactor * (b - 128) + 128;

        // 2. Gritty Color Desaturation / Blend
        // This mix flattens distinct bright colors for a moodier aesthetic
        let newR = r * 0.85 + g * 0.15 + b * 0.0;
        let newG = r * 0.1 + g * 0.8 + b * 0.1;
        let newB = r * 0.0 + g * 0.15 + b * 0.85;

        r = r + (newR - r) * filterIntensity;
        g = g + (newG - g) * filterIntensity;
        b = b + (newB - b) * filterIntensity;

        // 3. Edgy Split Toning
        // Approximate luma (brightness)
        let luma = 0.3 * r + 0.59 * g + 0.11 * b;
        
        if (luma < 128) {
            // Dark areas get a red/warm lift
            r += (128 - luma) * 0.25 * filterIntensity;
        } else {
            // Bright areas get a slight cool/cyan lift
            b += (luma - 128) * 0.2 * filterIntensity;
            g += (luma - 128) * 0.05 * filterIntensity;
        }

        // 4. Subtle Film Grain / Noise
        let noise = (Math.random() - 0.5) * 12 * filterIntensity;

        // Uint8ClampedArray handles underflow/overflow bounds (clamping 0-255) automatically
        data[i] = r + noise;
        data[i + 1] = g + noise;
        data[i + 2] = b + noise;
    }

    // Apply modified pixels back to the Canvas
    ctx.putImageData(imgData, 0, 0);

    // 5. Apply Vignette Effect (Darkened Edges)
    const cx = width / 2;
    const cy = height / 2;
    const maxDist = Math.sqrt(cx * cx + cy * cy);
    
    ctx.globalCompositeOperation = 'multiply';
    
    // Create radial gradient for vignette
    const gradient = ctx.createRadialGradient(cx, cy, maxDist * 0.25, cx, cy, maxDist);
    // Control edge darkness intensity
    const edgeAlpha = Math.min(1, Math.max(0, 0.5 * filterIntensity));
    
    gradient.addColorStop(0, 'rgba(0, 0, 0, 0)'); // Center transparent
    gradient.addColorStop(1, `rgba(0, 0, 0, ${edgeAlpha})`); // Edges dark
    
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);
    
    // Reset composite operation just to maintain clean state
    ctx.globalCompositeOperation = 'source-over';

    return canvas;
}