Image Ultraviolet Effect Creator

/**
 * Applies an ultraviolet-like photo effect to an image.
 * This function manipulates the image's pixel data to create a surreal,
 * high-contrast visual style often associated with blacklight or UV art,
 * characterized by shifts towards purple, magenta, and cyan.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @returns {HTMLCanvasElement} A new canvas element displaying the image with the ultraviolet effect.
 */
function processImage(originalImg) {
  // Create a new canvas element to work with.
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // Set the canvas dimensions to match the original image.
  // Using naturalWidth/Height ensures we get the image's actual size.
  const width = originalImg.naturalWidth;
  const height = originalImg.naturalHeight;
  canvas.width = width;
  canvas.height = height;

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

  // Get the pixel data from the canvas. This returns a flat array of
  // RGBA values for every pixel (e.g., [R1, G1, B1, A1, R2, G2, B2, A2, ...]).
  const imageData = ctx.getImageData(0, 0, width, height);
  const data = imageData.data;

  // Iterate over every pixel in the data array. We increment by 4 each time
  // to jump from one pixel's RGBA set to the next.
  for (let i = 0; i < data.length; i += 4) {
    // Get the original RGB values for the current pixel.
    const r = data[i];
    const g = data[i + 1];
    const b = data[i + 2];
    // The alpha channel (data[i + 3]) is left unchanged.

    // To create the ultraviolet effect, we manipulate the color channels:
    // 1. The new Red value is set to the original Blue value.
    // 2. The new Green value is inverted (255 - original Green).
    // 3. The new Blue value is set to the original Red value.
    // This swapping of Red and Blue channels and inverting the Green
    // produces a vibrant, psychedelic color scheme.
    data[i] = b;         // New Red = Old Blue
    data[i + 1] = 255 - g; // New Green = Inverted Old Green
    data[i + 2] = r;         // New Blue = Old Red
  }

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

  // Return the canvas element, which now holds the processed image.
  return canvas;
}