Brightness with original background image

p5.js Coding Questions
1

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

https://p5js.org/examples/color-brightness.html

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

Fade

1 Like
2

can you link to your current code at
https://editor.p5js.org
with your color foto?

3

https://editor.p5js.org/Fadelast/sketches/3T1qqZu44

1 Like
4

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

https://editor.p5js.org/kll/sketches/EKhQl7jNB

1 Like
5

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.

https://editor.p5js.org/jeremydouglass/sketches/IBh3m1mpG

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

https://p5js.org/reference/#/p5.Image/mask

2 Likes
6

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

7

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
 * https://discourse.processing.org/t/brightness-with-original-background-image/15792/6
 * https://processing.org/reference/PImage_mask_.html
 */

PImage source, display;
PGraphics mask;

void setup() {
  size(480, 480);
  // load source image to be revealed
  source = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Processing_3_logo.png/480px-Processing_3_logo.png");

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

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

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

MaskScratcherEffect--screenshot

1 Like
8

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

9

None! Just ignore them! :smiling_imp:

1 Like
10

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