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

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

PImage img;

void setup() {
  img = loadImage( "sunflower.jpg" );

void draw() {
  // 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;
  • 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!

  • LIU Lu

    I am learning Processing and my teacher said that when dealing with the picture, it is better to for(y) first then for (x) because of the way that Processing deals with the pixels.He has explained it is quicker for the computer. I am wondering if the order of for x&y matters.

  • shiffman

    I think that’s a reasonable argument though I don’t believe it is necessarily faster. I would love to learn why I may be wrong though.

  • AaronR

    How would you do two flashlight effects on the same image?

  • shiffman

    Tricky, but one idea is to add/average the distances from each flashlight point and map that to brightness.