Image To Ultraviolet Photography Converter

/**
 * Converts an image to simulate an ultraviolet photography effect.
 * This is an artistic interpretation, as true UV photography requires special equipment.
 * The filter shifts the image's colors towards a blue/violet palette and adjusts contrast,
 * mimicking the appearance of subjects under UV light.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @returns {HTMLCanvasElement} A new canvas element with the ultraviolet effect applied.
 */
function processImage(originalImg) {
  // Create a canvas element to draw the image and manipulate its pixels
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // Set the 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, canvas.width, canvas.height);

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

  // Iterate over each pixel (4 values 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];

    // Apply a color matrix transformation to simulate a UV effect.
    // This formula is designed to emphasize the blue channel and create a
    // purple/dark blue cast, which is characteristic of false-color UV images.
    const newR = (r * 0.5) + (g * 0.1) + (b * 0.4);
    const newG = (r * 0.1) + (g * 0.2) + (b * 0.1);
    const newB = (r * 0.2) + (g * 0.2) + (b * 1.0);

    // Assign the new RGB values, ensuring they are clamped within the 0-255 range.
    data[i] = Math.max(0, Math.min(255, newR));     // Red channel
    data[i + 1] = Math.max(0, Math.min(255, newG)); // Green channel
    data[i + 2] = Math.max(0, Math.min(255, newB)); // Blue channel
    // Alpha channel (data[i + 3]) is left unchanged
  }

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

  // Return the canvas element with the final image
  return canvas;
}