Image Plasma Filter Application

async function processImage(originalImg, plasmaScale = 16, blendMode = "overlay", plasmaTime = 0) {
    const width = originalImg.width;
    const height = originalImg.height;

    // Ensure width and height are valid. If not, return a minimal canvas.
    if (width === 0 || height === 0) {
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = 1; // Minimal size
        emptyCanvas.height = 1;
        // Optionally, you could draw a red pixel or throw an error
        // const emptyCtx = emptyCanvas.getContext('2d');
        // emptyCtx.fillStyle = 'red';
        // emptyCtx.fillRect(0,0,1,1);
        console.warn("Original image has zero width or height. Returning 1x1 empty canvas.");
        return emptyCanvas;
    }

    // Main canvas for the final result
    const mainCanvas = document.createElement('canvas');
    mainCanvas.width = width;
    mainCanvas.height = height;
    const mainCtx = mainCanvas.getContext('2d');

    // 1. Draw original image onto the main canvas
    mainCtx.drawImage(originalImg, 0, 0, width, height);

    // 2. Generate Plasma layer on a temporary canvas
    const plasmaCanvas = document.createElement('canvas');
    plasmaCanvas.width = width;
    plasmaCanvas.height = height;
    const plasmaCtx = plasmaCanvas.getContext('2d');
    const plasmaImageData = plasmaCtx.createImageData(width, height);
    const plasmaPixels = plasmaImageData.data;

    const PI = Math.PI;
    // Ensure plasmaScale is positive and not excessively small to prevent division by zero or extreme results.
    // A scale of 1 means a sine wave cycle per pixel, which is very noisy. Larger values are smoother.
    const effPlasmaScale = Math.max(1.0, plasmaScale); 

    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            // Calculate components for plasma pattern. These are summed sine waves.
            // Each sine wave component adds a layer of "waviness" to the pattern.
            // plasmaTime acts as a phase shift, "animating" the pattern if changed over time.
            
            const val_x = Math.sin((x / effPlasmaScale) + plasmaTime);
            const val_y = Math.sin((y / effPlasmaScale) + plasmaTime);
            
            // Diagonal component
            const val_xy = Math.sin(((x + y) / effPlasmaScale) + plasmaTime);
            
            // Radial component (distance from origin)
            // Using a slightly different scale factor for the radial part adds more complexity.
            const distOrigin = Math.sqrt(x * x + y * y); // or Math.hypot(x, y)
            const val_dist = Math.sin(distOrigin / (effPlasmaScale * 0.75) + plasmaTime);

            // Combine the values. Dividing by 4 keeps the sum in approx -1 to 1 range.
            const combinedVal = (val_x + val_y + val_xy + val_dist) / 4.0;
            
            // Normalize the combined value from [-1, 1] to [0, 1]
            // This normalized value will drive the color selection.
            const normalizedVal = (combinedVal + 1.0) / 2.0;

            // Map normalizedVal to an RGB color for the plasma.
            // This creates a rainbow-like effect that cycles as normalizedVal changes.
            // The plasmaTime * 0.1 term in color phase makes colors shift slightly if plasmaTime is varied.
            const colorPhaseOffset = plasmaTime * 0.1; 
            const r = Math.floor((0.5 + 0.5 * Math.sin(normalizedVal * PI * 2 + colorPhaseOffset)) * 255);
            const g = Math.floor((0.5 + 0.5 * Math.sin(normalizedVal * PI * 2 + (2 * PI / 3) + colorPhaseOffset)) * 255);
            const b = Math.floor((0.5 + 0.5 * Math.sin(normalizedVal * PI * 2 + (4 * PI / 3) + colorPhaseOffset)) * 255);
            
            const index = (y * width + x) * 4; // Calculate pixel index in ImageData array
            plasmaPixels[index]     = r;
            plasmaPixels[index + 1] = g;
            plasmaPixels[index + 2] = b;
            plasmaPixels[index + 3] = 255; // Full alpha for the plasma layer itself
        }
    }
    // Put the generated plasma pixel data onto the plasma canvas
    plasmaCtx.putImageData(plasmaImageData, 0, 0);

    // 3. Blend the plasma canvas onto the main canvas (which already has the original image)
    // List of valid blend modes for HTML CanvasRenderingContext2D.globalCompositeOperation
    const validBlendModes = [
        "source-over", "source-in", "source-out", "source-atop",
        "destination-over", "destination-in", "destination-out", "destination-atop",
        "lighter", "copy", "xor", "multiply", "screen", "overlay", "darken",
        "lighten", "color-dodge", "color-burn", "hard-light", "soft-light",
        "difference", "exclusion", "hue", "saturation", "color", "luminosity"
    ];

    const lowerBlendMode = blendMode.toLowerCase();
    if (validBlendModes.includes(lowerBlendMode)) {
        mainCtx.globalCompositeOperation = lowerBlendMode;
    } else {
        console.warn(`Invalid blend mode "${blendMode}". Defaulting to "overlay".`);
        mainCtx.globalCompositeOperation = "overlay"; // Default to "overlay" if an invalid mode is provided
    }
    
    // Draw the plasma canvas onto the main canvas, applying the blend mode
    mainCtx.drawImage(plasmaCanvas, 0, 0, width, height);
    
    // Reset globalCompositeOperation to its default value ("source-over").
    // This is good practice if the mainCanvas might be used for further drawing operations.
    mainCtx.globalCompositeOperation = "source-over";

    return mainCanvas;
}