Image Lava Flow Filter Effect Tool

function processImage(originalImg, distortion = 15, scale = 60, lavaColorStrength = 0.75) {
    // Helper function for clamping values within a min-max range
    const _clamp = (value, min, max) => Math.max(min, Math.min(max, value));

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

    // Use naturalWidth/Height for accuracy, fallback to width/height if natural dimensions aren't available
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

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

    // If the image dimensions are zero (e.g., image not loaded or invalid), return an empty canvas.
    if (width === 0 || height === 0) {
        // Optionally, log a warning or draw a placeholder on the canvas
        console.warn("Image has zero dimensions. Returning empty canvas.");
        return canvas;
    }

    ctx.drawImage(originalImg, 0, 0, width, height);
    
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        // This can happen if the image is tainted (e.g., loaded from a different origin without CORS headers)
        console.error("Could not get image data. Image might be tainted or invalid.", e);
        // Draw an error message on the canvas as a visual indicator
        ctx.clearRect(0, 0, width, height); // Clear any partial drawing
        ctx.fillStyle = "#FF0000"; // Red background for error
        ctx.fillRect(0, 0, width, height);
        ctx.fillStyle = "#FFFFFF"; // White text
        ctx.textAlign = "center";
        ctx.font = "16px Arial";
        ctx.fillText("Error: Cannot process image.", width / 2, height / 2 - 10);
        ctx.fillText("(May be cross-origin)", width / 2, height / 2 + 10);
        return canvas; // Return the canvas showing the error
    }
    
    const pixels = imageData.data;
    const outputPixels = new Uint8ClampedArray(pixels.length); // Array for the new pixel data

    // Distortion parameters for the "flow" effect
    // Frequencies determine the "waviness" of the distortion
    const freqX1 = 1.0 / scale;
    const freqY1 = 0.6 / scale; 
    const freqX2 = 1.4 / scale;
    const freqY2 = 1.1 / scale; 

    // Phase constants add variation to the wave patterns
    const phase1 = 1.1; 
    const phase2 = 3.3; 
    const phase3 = 2.2; 
    const phase4 = 4.4; 

    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            // Calculate distortion offsets using a sum of sine/cosine waves.
            // This creates a pseudo-random, flowing displacement field.
            const waveValX = Math.sin(y * freqY1 + x * freqX1 + phase1) + 
                             Math.sin(x * freqX2 + y * freqY2 + phase2); // Result is roughly in [-2, 2]
            const waveValY = Math.cos(y * freqY1 + x * freqX1 + phase3) + 
                             Math.cos(x * freqX2 + y * freqY2 + phase4); // Result is roughly in [-2, 2]

            // Normalize wave values (approx. to [-1, 1] range) and scale by the distortion amount.
            // This determines the maximum pixel displacement.
            const offsetX = (waveValX / 2) * distortion; 
            const offsetY = (waveValY / 2) * distortion;

            // Calculate the source pixel coordinates after applying distortion.
            // Clamp coordinates to be within the image boundaries.
            const srcX = _clamp(Math.round(x + offsetX), 0, width - 1);
            const srcY = _clamp(Math.round(y + offsetY), 0, height - 1);

            // Get the color of the source pixel from the original image data
            const srcIndex = (srcY * width + srcX) * 4;
            const r_s = pixels[srcIndex];
            const g_s = pixels[srcIndex + 1];
            const b_s = pixels[srcIndex + 2];
            const a_s = pixels[srcIndex + 3];

            // Calculate "lava" target colors based on the (distorted) source pixel's color.
            // These formulas enhance reds and oranges, and reduce blues, to simulate a lava glow.
            const targetLavaR = _clamp(r_s + g_s * 0.4, 0, 255);
            const targetLavaG = _clamp(r_s * 0.6 + g_s * 0.3, 0, 255); 
            const targetLavaB = _clamp(r_s * 0.1 + b_s * 0.2, 0, 255);

            // Determine the index for the current pixel in the output array
            const destIndex = (y * width + x) * 4;

            // Blend the original (distorted) source color with the target lava color.
            // The `lavaColorStrength` parameter (0 to 1) controls the intensity of this lava coloration.
            outputPixels[destIndex]     = _clamp(r_s * (1 - lavaColorStrength) + targetLavaR * lavaColorStrength, 0, 255);
            outputPixels[destIndex + 1] = _clamp(g_s * (1 - lavaColorStrength) + targetLavaG * lavaColorStrength, 0, 255);
            outputPixels[destIndex + 2] = _clamp(b_s * (1 - lavaColorStrength) + targetLavaB * lavaColorStrength, 0, 255);
            outputPixels[destIndex + 3] = a_s; // Preserve the original alpha channel
        }
    }

    // Create a new ImageData object from the modified pixel array
    const outputImageData = new ImageData(outputPixels, width, height);
    // Put the new image data back onto the canvas
    ctx.putImageData(outputImageData, 0, 0);

    return canvas;
}