let maxBrightness = 0;

let brightestPixels = [];

​

function preload() {

  img = loadImage("colorfulImage.jpeg");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(HSB, 360, 100, 100); // Set color mode to HSB

}

​

function draw() {

  img.loadPixels(); // Load pixel data each frame

  maxBrightness = 0; // Reset max brightness each frame

  brightestPixels = []; // Reset brightest pixels array each frame

​

  // Step 1: Find the brightest pixels

  for (let x = 0; x < img.width; x++) {

    for (let y = 0; y < img.height; y++) {

      let i = (x + y * img.width) * 4;

      let r = img.pixels[i];

      let g = img.pixels[i + 1];

      let b = img.pixels[i + 2];

      let a = img.pixels[i + 3];

​

      // Calculate brightness in HSB mode

      colorMode(HSB, 360, 100, 100);

      let brightnessValue = brightness(color(r, g, b, a));

      colorMode(RGB, 255); // Switch back to RGB for other operations

​

      // Update maxBrightness and track pixels with this brightness

      if (brightnessValue > maxBrightness) {

        maxBrightness = brightnessValue;

        brightestPixels = [{ x, y, index: i }]; // Reset to this brightest pixel

      } else if (brightnessValue === maxBrightness) {

        brightestPixels.push({ x, y, index: i }); // Add pixel if it matches max brightness

      }

    }

  }

​

  // Step 2: Gradually change the brightest pixels to black

  for (let pixel of brightestPixels) {

    let i = pixel.index;

    let r = img.pixels[i];

    let g = img.pixels[i + 1];

    let b = img.pixels[i + 2];

​

    colorMode(HSB, 360, 100, 100);

    let currentColor = color(r, g, b);

    let newSaturation = max(saturation(currentColor) - 1, 0); // Gradually decrease saturation

    let newBrightness = max(brightness(currentColor) - 1, 0); // Gradually decrease brightness

    colorMode(RGB, 255);

​

    // Create a color closer to black

    let blackColor = color(0, newSaturation, newBrightness);

​

    // Update the pixel to the new color values

    img.pixels[i] = red(blackColor);

    img.pixels[i + 1] = green(blackColor);

    img.pixels[i + 2] = blue(blackColor);

    img.pixels[i + 3] = 255; // Keep alpha at full opacity

  }

​

  img.updatePixels(); // Apply all pixel changes

  image(img, 0, 0, windowWidth, windowHeight); // Draw the updated image

}

​