Image Cokin Sunset Filter Effect Application

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can be an optimization hint for contexts
    // where getImageData/putImageData are used often. For a single pass, impact may be minor.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

    // If the image has no dimensions (e.g., not loaded or empty), return the empty canvas.
    if (imgWidth === 0 || imgHeight === 0) {
        return canvas;
    }

    const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    const data = imageData.data; // Uint8ClampedArray: [R,G,B,A, R,G,B,A, ...]

    // Parameters for the Cokin-style sunset filter effect.
    // These define the color transformation at its full strength.
    // These values are chosen to give a warm, orangey-red appearance.
    const fullEffectRedFactor = 1.4;   // Multiplicative factor for the red channel
    const fullEffectRedOffset = 40;    // Additive offset for the red channel
    const fullEffectGreenFactor = 1.15; // Multiplicative factor for the green channel
    const fullEffectGreenOffset = 20;   // Additive offset for the green channel (enhances yellow/orange hues)
    const fullEffectBlueFactor = 0.7;  // Multiplicative factor for the blue channel (dampens blue tones)
    // No specific additive offset for blue; the factor handles the reduction.

    // Graduation parameters:
    // This simulates a graduated filter, strongest at the top and fading out.
    // - Top 1/3 of the image: Full effect strength.
    // - Middle 1/3 of the image: Effect strength transitions linearly from full to none.
    // - Bottom 1/3 of the image: No effect.
    // These are typical proportions for a generic graduated filter.
    const fullEffectEndY = imgHeight / 3;
    const transitionEndY = 2 * imgHeight / 3;
    const transitionZoneHeight = transitionEndY - fullEffectEndY; // Conceptually, imgHeight / 3

    for (let i = 0; i < data.length; i += 4) {
        const r_orig = data[i];
        const g_orig = data[i+1];
        const b_orig = data[i+2];
        // Alpha channel (data[i+3]) is preserved.

        // Determine the y-coordinate of the current pixel
        const pixelIndex = i / 4;
        const y_pixel = Math.floor(pixelIndex / imgWidth);

        let strength_y = 0.0; // Effect strength for the current row (0.0 to 1.0)

        if (y_pixel < fullEffectEndY) {
            strength_y = 1.0; // Full effect
        } else if (y_pixel < transitionEndY) {
            // Linear transition in the middle zone
            // Guard against division by zero if transitionZoneHeight is 0 (e.g. imgHeight is extremely small, though imgHeight=0 is caught)
            if (transitionZoneHeight > 0.0001) { // Use a small epsilon for float comparison
                strength_y = 1.0 - (y_pixel - fullEffectEndY) / transitionZoneHeight;
            } else {
                // If no distinct transition zone, apply full strength if "above" midpoint, else none.
                // This case is rare for imgHeight >= 1.
                strength_y = (y_pixel < (fullEffectEndY + transitionEndY) / 2) ? 1.0 : 0.0;
            }
        } else {
            strength_y = 0.0; // No effect
        }
        
        // Optimization: if strength is effectively zero, the pixel colors don't change.
        if (strength_y < 0.001) { // Using a small epsilon for floating point comparison
            continue; 
        }

        // Calculate the target color values as if the filter applies with full strength
        const r_full_effect = r_orig * fullEffectRedFactor + fullEffectRedOffset;
        const g_full_effect = g_orig * fullEffectGreenFactor + fullEffectGreenOffset;
        const b_full_effect = b_orig * fullEffectBlueFactor;

        // Linearly interpolate between original color and full_effect color based on strength_y
        // newColor = originalColor * (1 - strength) + fullEffectColor * strength
        const newR = r_orig * (1 - strength_y) + r_full_effect * strength_y;
        const newG = g_orig * (1 - strength_y) + g_full_effect * strength_y;
        const newB = b_orig * (1 - strength_y) + b_full_effect * strength_y;

        // Clamp values to the [0, 255] range and assign back to the imageData array
        data[i]   = Math.max(0, Math.min(255, newR));
        data[i+1] = Math.max(0, Math.min(255, newG));
        data[i+2] = Math.max(0, Math.min(255, newB));
    }

    // Write the modified pixel data back to the canvas
    ctx.putImageData(imageData, 0, 0);

    return canvas;
}