Two words that aptly describe how the image changes over time in this project are :

  1. Dimming
  2. Unveiling

As the brightest pixels in the image gradually fade to black, we process of dimming that reveals the underlying structure of the image. What is lost is the initial vibrancy and luminosity, while what is shows is a new perspective on the image’s composition, emphasizing its darker elements and creating a sense of depth that wasn’t initially apparent.

Technical Implementation

The core of this project lies in its pixel manipulation technique.

  1. Identifying the Brightest Pixels

    1. The code scans the entire image in each frame, finding the pixels with the highest brightness value in the HSB color space
    2. Referenced a “Get Brightest Pixel” Code online created by shfitz:

    https://editor.p5js.org/shfitz/sketches/0D-ql8qTo

  2. Gradual Transformation

    1. Once identified, these brightest pixels are slowly transformed. Their saturation and brightness are decreased incrementally, pushing them toward black

  3. Continuous Update

    1. This process repeats each frame, creating a dynamic, evolving image that slowly loses its brightest element
  for (let i of brightestPixels) {
      let currentColor = color(srcImg.pixels[i], srcImg.pixels[i + 1], srcImg.pixels[i + 2]);
      let newBrightness = max(brightness(currentColor) - 5, 0);
      let newColor = color(hue(currentColor), saturation(currentColor), newBrightness);
      
      srcImg.pixels[i] = red(newColor);
      srcImg.pixels[i + 1] = green(newColor);
      srcImg.pixels[i + 2] = blue(newColor);
    }

    srcImg.updatePixels();
  }

Inspiration :