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
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
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:
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
* 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);
}
I’m trying to convert the code into javascript but what are the equivalent of
mask.beginDraw e mask.endDraw ?
None! Just ignore them! 
Sorry – I somehow missed that this was a p5.js question.
For p5.js reference examples to see the equivalent code, see: