Brightness with original background image

Hi to all, it is possible to modify the code for brightness, preserving the original color background ?

In the example above, the image is only black and white,and i’m trying to preserve the original colors when mouse is enlight a specific area.

Thanks to all


1 Like

can you link to your current code at
with your color foto?

1 Like

i like to work on the example, ( and not on your code… as i run into error )
and recommend just to use add to ‘r’
also g,b too, what makes it even slower

1 Like

Great discussion! You can also make this more efficient / higher performance in several ways.

First, 95% of your screen is always going to be black. Don’t compute distances and component weights on each black pixel in that huge area – just fill them black, then compute pixels only in the box around the mouse cursor.

Second, you could do this with a mask() – then all your weights are computed once, and you just repopulate the spotlight image (square) each frame, then apply the circular gradient mask and display. Two-pass, but flexible.

Here is a demo that takes the sketch from kll and computes the gradient only in a small box around the mouse cursor.

Next, if you want to change computing the distances and weights every frame into a pre-computed mask image, see:


This is awesome.

What if i want to realize a scratcher ticket effect ?

I would like to make permanent the brightness when mouse is pressed, until all the image appear.

Is it possible?

Thank u all

Yes, that is the mask() in a nutshell. If you use a drawable PGraphics as a mask and draw on it, you will be “scratching” the source image into view.

 * Mask Scratcher Effect
 * 2019-12-04 Jeremy Douglass - Processing 3.4 
 * Press mouse to draw on mask image, revealing source image ("like a scratcher ticket")
 * Press any key to reset mask

PImage source, display;
PGraphics mask;

void setup() {
  size(480, 480);
  // load source image to be revealed
  source = loadImage("");

  // create drawable mask image (PGraphics)
  mask = createGraphics(480, 480);
  // and configure draw properties

  // copy source to display
  display = source.copy();
  // the mask is empty, so display is masked completely.

void draw() {
  if (mousePressed || keyPressed) {
    if (mousePressed) mask.ellipse(mouseX, mouseY, 60, 60);
    if (keyPressed) mask.background(0);
    // copy original source to display and re-mask the display
    display = source.copy();
  image(display, 0, 0);


1 Like

I’m trying to convert the code into javascript but what are the equivalent of
mask.beginDraw e mask.endDraw ?

None! Just ignore them! :smiling_imp:

1 Like

Sorry – I somehow missed that this was a p5.js question.
For p5.js reference examples to see the equivalent code, see: