Example
// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 15-9: Adjusting image brightness based on pixel location (Flashlight effect)

PImage img;

void setup() {
  size(200,200);
  img = loadImage( "sunflower.jpg" );
}

void draw() {
  loadPixels();
  
  // We must also call loadPixels() on the PImage since we are going to read its pixels.  img.loadPixels(); 
  for (int x = 0; x < img.width; x++ ) {
    for (int y = 0; y < img.height; y++ ) {
      
      // Calculate the 1D pixel location
      int loc = x + y*img.width;
      
      // Get the R,G,B values from image
      float r = red (img.pixels[loc]);
      float g = green (img.pixels[loc]);
      float b = blue (img.pixels[loc]);
      
      // Calculate an amount to change brightness
      // based on proximity to the mouse
      float distance = dist(x,y,mouseX,mouseY);
      
      // The closer the pixel is to the mouse, the lower the value of "distance" 
      // We want closer pixels to be brighter, however, so we invert the value with the formula: adjustBrightness = (50-distance)/50 
      // Pixels with a distance of 50 (or greater) have a brightness of 0.0 (or negative which is equivalent to 0 here)
      // Pixels with a distance of 0 have a brightness of 1.0.
      float adjustBrightness = (50-distance)/50;
      r *= adjustBrightness;
      g *= adjustBrightness;
      b *= adjustBrightness;
      
      // Constrain RGB to between 0-255
      r = constrain(r,0,255);
      g = constrain(g,0,255);
      b = constrain(b,0,255);
      
      // Make a new color and set pixel in the window
      color c = color(r,g,b);
      pixels[loc] = c;
    }
  }
  
  updatePixels();  
}
  • Angelsfan1

    How would I make this work using an image with processing shapes/designs on top of the image?

  • Anonymous

    You could create the same effect by drawing to an offscreen PGraphics buffer and then manipulating the pixels.  Or possibly using a mask to cover the drawn Processing shapes (setting transparency according to distance from mouse)

  • Angelsfan1

    Awesome, thanks! Now I want to have moving objects behind the “flashlight” and I am completely stumped. Is there a way to animate the PGraphics, or would it be best to use the mask with moving objects? I tried the mask and didn’t have much luck but I was able to get the PGraphics to work.

  • Angelsfan1

    I decided to use a mask and that seems like the way to go. Someone else explained a mask in a different way so I was a bit confused but it seems easier the way you described. Thanks for your help! :D

  • Sometwothings

    I think you forgot to put img.loadPixels(); at the place where you mention it in the comment. :)

  • Sometwothings

    Sorry for the position of the last post, I didn’t mean to make it a reply to the other posts.

  • Sometwothings

     I just noticed that img.loadPixels(); is there, but it is on the wrong line (same line as the comment) and thus not executed. Same thing for 15.8 btw.

  • shiffman

    ah, thanks for pointing that out, will fix for next version!