# Brightness with original background image

**URL:** <https://discourse.processing.org/t/brightness-with-original-background-image/15792>\
**Category:** Coding Questions\
**Created:** [November 25, 2019, 10:50am UTC](https://discourse.processing.org/t/brightness-with-original-background-image/15792 "2019-11-25T10:50:53Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fadelast](https://avatars.discourse-cdn.com/v4/letter/f/ba8739/32.png) [@Fadelast](https://discourse.processing.org/u/Fadelast)\
**Post date:** [November 25, 2019, 10:50am UTC](https://discourse.processing.org/t/brightness-with-original-background-image/15792/1 "2019-11-25T10:50:53Z")

</div>

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

[https://p5js.org/examples/color-brightness.html](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

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 25, 2019, 11:28am UTC](https://discourse.processing.org/t/brightness-with-original-background-image/15792/2 "2019-11-25T11:28:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Fadelast](https://avatars.discourse-cdn.com/v4/letter/f/ba8739/32.png) [@Fadelast](https://discourse.processing.org/u/Fadelast)\
**Post date:** [November 25, 2019, 11:41am UTC](https://discourse.processing.org/t/brightness-with-original-background-image/15792/3 "2019-11-25T11:41:23Z")

</div>

[https://editor.p5js.org/Fadelast/sketches/3T1qqZu44](https://editor.p5js.org/Fadelast/sketches/3T1qqZu44)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 25, 2019, 12:04pm UTC](https://discourse.processing.org/t/brightness-with-original-background-image/15792/4 "2019-11-25T12:04:31Z")

</div>

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](https://editor.p5js.org/kll/sketches/EKhQl7jNB)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [November 29, 2019, 10:09pm UTC](https://discourse.processing.org/t/brightness-with-original-background-image/15792/5 "2019-11-29T22:09:09Z")

</div>

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](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](https://p5js.org/reference/#/p5.Image/mask)

---

<div class="post-metadata">

**Author:** ![Fadelast](https://avatars.discourse-cdn.com/v4/letter/f/ba8739/32.png) [@Fadelast](https://discourse.processing.org/u/Fadelast)\
**Post date:** [December 4, 2019, 1:46pm UTC](https://discourse.processing.org/t/brightness-with-original-background-image/15792/6 "2019-12-04T13:46:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 4, 2019, 6:07pm UTC](https://discourse.processing.org/t/brightness-with-original-background-image/15792/7 "2019-12-04T18:07:30Z")

</div>

> [@Fadelast](#):
>
> a scratcher ticket effect

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.

```auto
/**
 * 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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c0fb3ae662027afc589222369254719a9f59a0e3.png)

---

<div class="post-metadata">

**Author:** ![Fadelast](https://avatars.discourse-cdn.com/v4/letter/f/ba8739/32.png) [@Fadelast](https://discourse.processing.org/u/Fadelast)\
**Post date:** [December 5, 2019, 9:01am UTC](https://discourse.processing.org/t/brightness-with-original-background-image/15792/8 "2019-12-05T09:01:15Z")

</div>

> [@jeremydouglass](#):
>
> display

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 5, 2019, 10:23am UTC](https://discourse.processing.org/t/brightness-with-original-background-image/15792/9 "2019-12-05T10:23:34Z")

</div>

> [@Fadelast](#):
>
> but what are the equivalent of  
> `mask.beginDraw` e `mask.endDraw`?

None! Just ignore them! 😈

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 5, 2019, 6:12pm UTC](https://discourse.processing.org/t/brightness-with-original-background-image/15792/10 "2019-12-05T18:12:35Z")

</div>

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

- [https://p5js.org/reference/#/p5.Image/mask](https://p5js.org/reference/#/p5.Image/mask)
- [https://p5js.org/examples/image-alpha-mask.html](https://p5js.org/examples/image-alpha-mask.html)