Image Thermal Effect Tool

/**
 * Applies a thermal imaging effect to an image.
 * This function converts the image to grayscale and then maps the brightness
 * of each pixel to a color in a thermal color gradient (from black/blue for
 * cold/dark areas to red/yellow/white for hot/bright areas).
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @returns {HTMLCanvasElement} A new canvas element with the thermal effect applied.
 */
function processImage(originalImg) {
    // Create a canvas element to draw on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Define the thermal color map (stops from 0.0 to 1.0)
    // This gradient goes from Black -> Indigo -> Red -> Orange -> White
    const colorMap = [
        { pos: 0.0,  color: { r: 0,   g: 0,   b: 0   }},
        { pos: 0.25, color: { r: 75,  g: 0,   b: 130 }},
        { pos: 0.5,  color: { r: 237, g: 33,  b: 33  }},
        { pos: 0.75, color: { r: 255, g: 165, b: 0   }},
        { pos: 1.0,  color: { r: 255, g: 255, b: 255 }}
    ];

    /**
     * Gets an interpolated color from the color map for a given value.
     * @param {number} value - A normalized value between 0 and 1.
     * @returns {{r: number, g: number, b: number}} The interpolated RGB color.
     */
    function getThermalColor(value) {
        let stop1, stop2;
        
        // Find the two color stops the value is between
        for (let i = 0; i < colorMap.length - 1; i++) {
            if (value >= colorMap[i].pos && value <= colorMap[i + 1].pos) {
                stop1 = colorMap[i];
                stop2 = colorMap[i + 1];
                break;
            }
        }

        // This should not happen with a well-formed map, but as a fallback
        if (!stop1) {
             stop1 = colorMap[colorMap.length - 2];
             stop2 = colorMap[colorMap.length - 1];
        }

        // Calculate the position (0-1) between the two stops
        const range = stop2.pos - stop1.pos;
        // Avoid division by zero if stops are at the same position
        const posInRange = range === 0 ? 0 : (value - stop1.pos) / range;

        // Linearly interpolate the R, G, B values
        const r = stop1.color.r + posInRange * (stop2.color.r - stop1.color.r);
        const g = stop1.color.g + posInRange * (stop2.color.g - stop1.color.g);
        const b = stop1.color.b + posInRange * (stop2.color.b - stop1.color.b);

        return { r, g, b };
    }

    // Iterate through every pixel (4 bytes at a time: R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];

        // Calculate the luminance (brightness) of the pixel using a standard formula
        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
        
        // Normalize the luminance to a value between 0 and 1
        const normalizedLuminance = luminance / 255;

        // Get the corresponding thermal color from our map
        const newColor = getThermalColor(normalizedLuminance);

        // Update the pixel data with the new thermal color
        data[i] = newColor.r;     // Red
        data[i + 1] = newColor.g; // Green
        data[i + 2] = newColor.b; // Blue
        // Alpha (data[i + 3]) remains unchanged
    }

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

    // Return the final canvas element
    return canvas;
}