Image UV Converter

/**
 * Generates a UV map visualization based on the dimensions of an input image.
 * A UV map represents 2D texture coordinates. This function creates an image
 * where the color of each pixel corresponds to its normalized coordinates (U, V).
 * The U (horizontal) coordinate is mapped to the red channel, and the
 * V (vertical) coordinate is mapped to the green channel. The blue channel is set to 0.
 *
 * The content of the original image is ignored; only its width and height are used.
 *
 * @param {HTMLImageElement} originalImg The source image object to get dimensions from.
 * @returns {HTMLCanvasElement} A new canvas element displaying the generated UV map.
 */
function processImage(originalImg) {
    // Get the dimensions from the original image.
    const width = originalImg.width;
    const height = originalImg.height;

    // Create a new canvas element to draw the UV map on.
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;

    // Get the 2D rendering context for the canvas.
    const ctx = canvas.getContext('2d');

    // Create an ImageData object to hold the pixel data for efficient manipulation.
    const imageData = ctx.createImageData(width, height);
    const data = imageData.data; // This is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

    // Iterate over each pixel position in the image grid.
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            // Calculate the normalized U (horizontal) and V (vertical) coordinates.
            // These values will range from 0.0 to 1.0.
            // Using (dimension - 1) ensures the last pixel correctly maps to 1.0.
            // A check is included to prevent division by zero for 1px dimensions.
            const u = (width > 1) ? x / (width - 1) : 0;
            const v = (height > 1) ? y / (height - 1) : 0;

            // Convert the normalized 0.0-1.0 UV values to 0-255 color values.
            // U -> Red channel
            // V -> Green channel
            const r = u * 255;
            const g = v * 255;
            const b = 0;   // Blue channel is typically unused in basic UV maps.
            const a = 255; // Alpha channel is set to fully opaque.

            // Calculate the starting index for the current pixel in the 1D data array.
            // Each pixel takes up 4 array elements (R, G, B, A).
            const index = (y * width + x) * 4;

            // Set the RGBA values for the current pixel.
            data[index] = r;
            data[index + 1] = g;
            data[index + 2] = b;
            data[index + 3] = a;
        }
    }

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

    // Return the resulting canvas element.
    return canvas;
}