# Darken the background of my animation with mouse

**URL:** <https://discourse.processing.org/t/darken-the-background-of-my-animation-with-mouse/26749>\
**Category:** Libraries\
**Tags:** homework\
**Created:** [January 4, 2021, 12:30am UTC](https://discourse.processing.org/t/darken-the-background-of-my-animation-with-mouse/26749 "2021-01-04T00:30:34Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![elifworks](https://avatars.discourse-cdn.com/v4/letter/e/f6c823/32.png) [@elifworks](https://discourse.processing.org/u/elifworks)\
**Post date:** [January 4, 2021, 12:30am UTC](https://discourse.processing.org/t/darken-the-background-of-my-animation-with-mouse/26749/1 "2021-01-04T00:30:34Z")

</div>

Hello there  
At the end of this work, which interacts with sound and visual, I want to add one more thing: darkening the background color with mouse movement as I pinch the sound effect.  
How can I do that?

```auto
PImage img;
import processing.sound.*;
Sound s;

void setup() {
  size(600,600, P3D);
  img = loadImage("eye02.jpg");
  img.resize(600,600);

  SinOsc sin = new SinOsc(this);
  sin.play(150, 0.2);
  sin = new SinOsc(this);
  sin.play(205, 0.2);

  s = new Sound(this);
}

void draw() {
  float amplitude = map(mouseY, 0, height, 0.4, 0.0);
  s.volume(amplitude);
  background(#e6e6e6);
  float s = mouseX / float(width);
  specular(s, s, s);
  noStroke();
  fill(#000000);
    ellipse(mouseX, mouseY,10,10);
     

  sphereDetail(2); 
  float tiles = mouseX; 
  float tileSize = width/tiles;
  
  push();
  translate(width/2, height/2);
  rotateY(radians(frameCount));
  for (int x = 0; x < tiles; x++){
    for (int y = 0; y < tiles; y++){
      
      color c = img.get(int(x*tileSize),int(y*tileSize));
      float b = map(brightness(c),0,255,1,0);
      
      float z = map(b,0,0,-100,100);
      
      push();
      translate(x*tileSize - width/2, y*tileSize - height/2);
      sphere(tileSize*b*0.8);
      pop();
            
    }
  }
  
  pop();
}

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [January 4, 2021, 6:44am UTC](https://discourse.processing.org/t/darken-the-background-of-my-animation-with-mouse/26749/2 "2021-01-04T06:44:20Z")

</div>

Hi, @elifworks Welcome to the forum.  
A nice sketch! I want to ask you though if it runs smoothly on your PC. Maybe I really need to buy a graphics card, because I had to set the image to size(250, 250); and use box() instead of sphere() to see at least the rotation of the sketch. To add the effect you want you can draw a black rectangle and change its transparency like:

```auto
  fill(0, 255-mouseY);
  rect(0, 0, width, height);

```

---

<div class="post-metadata">

**Author:** ![elifworks](https://avatars.discourse-cdn.com/v4/letter/e/f6c823/32.png) [@elifworks](https://discourse.processing.org/u/elifworks)\
**Post date:** [January 4, 2021, 7:20am UTC](https://discourse.processing.org/t/darken-the-background-of-my-animation-with-mouse/26749/3 "2021-01-04T07:20:05Z")

</div>

Sketch works fine on my computer, but now it only slows down when I add something new.

I tried your method, but I’m not sure if I put it in the right place. The rectangle rotates with my animation.  
I’m working on it, I’ll report the result

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [January 4, 2021, 7:24am UTC](https://discourse.processing.org/t/darken-the-background-of-my-animation-with-mouse/26749/4 "2021-01-04T07:24:29Z")

</div>

@GoToLoop I Just answered a similar question and gave a link to this one and asked if it was a question of the same class. It was confirmed but then the topic disappeared, and when I searched in my visited page history, the message I got was " Oops! That page doesn’t exist or is private.".  
Is it possible on this forum to set a page as private?

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [January 4, 2021, 7:27am UTC](https://discourse.processing.org/t/darken-the-background-of-my-animation-with-mouse/26749/5 "2021-01-04T07:27:17Z")

</div>

> [@elifworks](#):
>
> but I’m not sure if I put it in the right place

Yes, but I’m sure you’ll find out to place it in the right place. 😃

---

<div class="post-metadata">

**Author:** ![elifworks](https://avatars.discourse-cdn.com/v4/letter/e/f6c823/32.png) [@elifworks](https://discourse.processing.org/u/elifworks)\
**Post date:** [January 4, 2021, 7:44am UTC](https://discourse.processing.org/t/darken-the-background-of-my-animation-with-mouse/26749/6 "2021-01-04T07:44:39Z")

</div>

I opened this account personally, I will use it actively because I will continue the process, not just my homework.  
I never found the other account. So thanks for your quick reply 😄

---

<div class="post-metadata">

**Author:** ![elifworks](https://avatars.discourse-cdn.com/v4/letter/e/f6c823/32.png) [@elifworks](https://discourse.processing.org/u/elifworks)\
**Post date:** [January 4, 2021, 9:30am UTC](https://discourse.processing.org/t/darken-the-background-of-my-animation-with-mouse/26749/7 "2021-01-04T09:30:08Z")

</div>

> [@noel](#):
>
> ```auto
> fill(0, 255-mouseY);
> rect(0, 0, width, height);
> 
> ```

It perfectly works! 😄 😄 😄