Image Wind Pattern Filter Effect Tool

async function processImage(originalImg, direction = "right", strength = 10, threshold = 150) {
    // Ensure the image is fully loaded and decoded.
    // The originalImg is expected to be an HTMLImageElement.
    if (!originalImg.complete || originalImg.naturalWidth === 0) { // Also check naturalWidth for uninitialized/broken images
        try {
            await originalImg.decode();
        } catch (error) {
            console.error("Image decoding failed:", error);
            // Create and return a minimal canvas on decoding error.
            const errorCanvas = document.createElement('canvas');
            errorCanvas.width = originalImg.width || 1; 
            errorCanvas.height = originalImg.height || 1;
            // Optionally, draw an error indicator on this canvas
            // const errorCtx = errorCanvas.getContext('2d');
            // if (errorCtx) { errorCtx.fillText('Error',10,10); }
            return errorCanvas;
        }
    }

    // Create a canvas element for processing
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { 
        willReadFrequently: true // Optimization hint for frequent getImageData/putImageData
    });

    // Use natural dimensions for processing, which are the intrinsic dimensions of the image.
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    
    // Handle cases where dimensions might be zero (e.g., if image source is invalid but 'complete' was true)
    if (width === 0 || height === 0) {
        canvas.width = 1; // Minimal canvas
        canvas.height = 1;
        return canvas; // Return empty 1x1 canvas
    }

    canvas.width = width;
    canvas.height = height;

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

    // Get image data from the canvas
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, width, height);
    } catch (error) {
        console.error("Failed to getImageData:", error, "This may be due to a tainted canvas (e.g., cross-origin image without CORS).");
        // Return the canvas with the original image drawn, as no pixel manipulation can be done.
        return canvas;
    }
    
    const inputPixels = imageData.data; // This is a view on the imageData's buffer
    // Create a new buffer for output, initialized with input pixels.
    // This ensures we read from the original state while modifying.
    const outputPixels = new Uint8ClampedArray(inputPixels); 

    // Sanitize and parse parameters
    strength = Math.max(0, parseInt(String(strength), 10) || 0);
    threshold = Math.max(0, Math.min(255, parseInt(String(threshold), 10) || 0));
    direction = String(direction).toLowerCase();

    // Apply the wind effect
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const sourceIndex = (y * width + x) * 4;
            const r = inputPixels[sourceIndex];
            const g = inputPixels[sourceIndex + 1];
            const b = inputPixels[sourceIndex + 2];
            const a = inputPixels[sourceIndex + 3]; // Alpha of the source pixel

            // Calculate brightness (simple average). 
            // For perceptual brightness, luminance could be used: (0.299*r + 0.587*g + 0.114*b)
            const brightness = (r + g + b) / 3;

            if (brightness > threshold) {
                // This pixel is bright enough to potentially start a streak
                if (direction === "right") {
                    for (let s = 1; s <= strength; s++) {
                        const targetX = x + s;
                        if (targetX < width) { // Ensure target is within image bounds
                            const targetIndex = (y * width + targetX) * 4;
                            outputPixels[targetIndex]     = r;
                            outputPixels[targetIndex + 1] = g;
                            outputPixels[targetIndex + 2] = b;
                            outputPixels[targetIndex + 3] = a; // Propagate source alpha
                        } else {
                            break; // Streak goes out of bounds
                        }
                    }
                } else if (direction === "left") {
                    for (let s = 1; s <= strength; s++) {
                        const targetX = x - s;
                        if (targetX >= 0) { // Ensure target is within image bounds
                            const targetIndex = (y * width + targetX) * 4;
                            outputPixels[targetIndex]     = r;
                            outputPixels[targetIndex + 1] = g;
                            outputPixels[targetIndex + 2] = b;
                            outputPixels[targetIndex + 3] = a; // Propagate source alpha
                        } else {
                            break; // Streak goes out of bounds
                        }
                    }
                }
                // Other directions like "up" or "down" could be added here similarly,
                // by adjusting targetY and iterating along the y-axis.
            }
        }
    }

    // Put the modified pixel data back into the imageData object
    imageData.data.set(outputPixels);
    // And then paint this modified imageData back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    return canvas;
}