Image Iridescent Filter Application

function processImage(originalImg, strength = 0.3, scale = 50) {
    // Validate and adjust parameters
    // Strength determines the intensity of the color shifts (0.0 to 1.0 is a common range for noticeable effects)
    strength = Math.max(0, strength); // Ensure strength is not negative

    // Scale determines the size/frequency of the iridescent patterns (e.g., wavelength of rings)
    // Larger scale results in larger, wider patterns/rings. Must be positive.
    if (scale <= 0) {
        scale = 50; // Default to a safe, visible value if input is invalid (e.g. 0 or negative)
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

    // If image has no dimensions, return an empty canvas.
    if (imgWidth === 0 || imgHeight === 0) {
        canvas.width = 0;
        canvas.height = 0;
        console.warn("Image has zero dimensions. Returning empty canvas.");
        return canvas;
    }

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

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

    // Get the image data from the canvas. This can fail due to CORS restrictions if image is from another origin.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error getting ImageData, possibly due to CORS policy:", e);
        // In case of error (e.g. CORS), return the canvas with the original image drawn.
        // The processing cannot be done, but this provides a somewhat graceful fallback.
        return canvas;
    }
    
    const data = imageData.data; // RGBA array: R, G, B, A, R, G, B, A, ...

    const centerX = imgWidth / 2;
    const centerY = imgHeight / 2;
    
    // Amplitude of the sine wave color shift. Max offset for a channel with strength=1.0 is 127.
    // This means a color component can be shifted by up to half its full range (0-255).
    const amplitude = 127 * strength; 

    for (let y = 0; y < imgHeight; y++) {
        for (let x = 0; x < imgWidth; x++) {
            const index = (y * imgWidth + x) * 4; // Index of the R component for the current pixel

            const originalR = data[index];
            const originalG = data[index + 1];
            const originalB = data[index + 2];
            // Alpha channel (data[index + 3]) is not modified

            // Calculate distance from the center of the image
            const dx = x - centerX;
            const dy = y - centerY;
            const dist = Math.sqrt(dx*dx + dy*dy);
            
            // Calculate the angle for the sine wave based on distance from center and scale factor.
            // This creates radial iridescent patterns (rings).
            const waveAngle = (dist / scale) * 2 * Math.PI;

            // Calculate RGB offsets using sine waves with phase shifts.
            // Phase shifts (0, 120 degrees, 240 degrees) create a rainbow-like color separation.
            const r_offset = Math.sin(waveAngle) * amplitude;
            const g_offset = Math.sin(waveAngle + (2 * Math.PI / 3)) * amplitude; // Shift phase by 120deg
            const b_offset = Math.sin(waveAngle + (4 * Math.PI / 3)) * amplitude; // Shift phase by 240deg

            // Apply offsets to original RGB values, clamping to the valid 0-255 range
            data[index]     = Math.max(0, Math.min(255, originalR + r_offset));
            data[index + 1] = Math.max(0, Math.min(255, originalG + g_offset));
            data[index + 2] = Math.max(0, Math.min(255, originalB + b_offset));
        }
    }

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

    return canvas;
}