Flashlight example, Image and Pixels tut

Processing Coding Questions
1

Hi,

This is my first post, so please be kind if I missed something regarding rules/etiquette.

So, working through all the tuts so far and everything is fine, except I’m really trying to conceptualize what two lines are doing from the Images and Pixels page, the flashlight example, here is the full code with both the loops provided.

for (int x = 0; x < crawl.width; x++)
  {
    for (int y = 0; y < crawl.height; y++ )
    {
      // Calculate the 1D pixel location
      int loc = x + y * crawl.width;
      
      // Get the R,G,B values from image
      float r = red   (crawl.pixels[loc]);
      float g = green (crawl.pixels[loc]);
      float b = blue  (crawl.pixels[loc]);
      
      // Calculate an amount to change brightness based on proximity to the mouse.      
      float distance = dist(x, y, mouseX, mouseY);
      float adjustBrightness = (100 - distance) / 100;  // first num = radius of effect, larger num = greater radius. second num = brightness of effect, smaller num = brighter.
      
      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;
    }
  }

full code can be found here: https://processing.org/tutorials/pixels/

about halfway down the page.

The part, I can’t quite grasp is are these two lines:

float distance = dist(x, y, mouseX, mouseY);
float adjustBrightness = (100 - distance) / 100;

I understand that we’re calculating the distance from our (x, y) point in the loops to the mouse cursors position and then setting brightness using that distance. I also understand that the first 100 affects the diameter of the ‘torch’ effect, and I also understand that the second 100 affects the brightness of the ‘torch’ effect.

But even knowing all this I still can’t grasp how this is calculated.

If the loops are continually looping in draw(), then why if I keep my mouse still in the center of the image does the brightness not change, as surely even without the mouse moving we are still looping from (0, 0) to whatever the coord of the last pixel is, which in turn would then change the distance as we move across and down the screen left to right, top to bottom as the loc variable is updated based on pixel location at (x, y) and as it moves closer to the mouse pos at the center.

I would expect the brightness to increase as the loop (x, y) approaches the centre pixel where the mouse cursor is, and then decrease as the loop (x, y) moves away from the centre pixel where the mouse cursor is.

I hope all that makes sense.

Thanks in advance.

Fib.

1 Like
2

Do you mean, why doesn’t it get brighter and brighter?

because we load pixels from the image

img.loadPixels();

and then modify them and draw them to the canvas. But we never change the image pixels. So each frame, the image of the sunflower – unchanged – is loaded, then copied onto the canvas modified with the current mouse location. That is why if you keep the mouse still you get the same flashlight effect each frame.

3

Of course, that makes complete sense.

The loops are there to find the (x, y) loc and then apply the brightness based on that.

If the (x, y) loc hasn’t changed by the time it’s drawn again then of course nothing will change.

Not sure why my brain wasn’t getting this in the first place, I think it was late when messing around with this.

Thanks for clearing this up.

Fib.

1 Like