# Need help changing background with mouse!

**URL:** <https://discourse.processing.org/t/need-help-changing-background-with-mouse/904>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [June 12, 2018, 8:00pm UTC](https://discourse.processing.org/t/need-help-changing-background-with-mouse/904 "2018-06-12T20:00:27Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![QuazArxx](https://avatars.discourse-cdn.com/v4/letter/q/7ba0ec/32.png) [@QuazArxx](https://discourse.processing.org/u/QuazArxx)\
**Post date:** [June 12, 2018, 8:00pm UTC](https://discourse.processing.org/t/need-help-changing-background-with-mouse/904/1 "2018-06-12T20:00:27Z")

</div>

i understand coding it is as simple as `background(mouseX)` or anything in those variations. My concern is getting the top left corner in a 250x250 window to be `background(255)` and the bottom right corner to be `background(0)`. i got:

```auto
void draw()
{
  background((mouseX + mouseY) / 2);
}

```

But this way is opposite of what i need and the bottom right corner only ends up at 250 not 255

---

<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:** [June 12, 2018, 9:11pm UTC](https://discourse.processing.org/t/need-help-changing-background-with-mouse/904/2 "2018-06-12T21:11:04Z")

</div>

[http://Studio.ProcessingTogether.com/sp/pad/export/ro.9PDcp7xMBknWz](http://Studio.ProcessingTogether.com/sp/pad/export/ro.9PDcp7xMBknWz)

---

<div class="post-metadata">

**Author:** ![QuazArxx](https://avatars.discourse-cdn.com/v4/letter/q/7ba0ec/32.png) [@QuazArxx](https://discourse.processing.org/u/QuazArxx)\
**Post date:** [June 12, 2018, 9:26pm UTC](https://discourse.processing.org/t/need-help-changing-background-with-mouse/904/3 "2018-06-12T21:26:04Z")

</div>

That’s not really it. I just need to use greyscale from white(255) at 0,0 and black (0) at 250,250 with the mouse movement

---

<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:** [June 12, 2018, 9:30pm UTC](https://discourse.processing.org/t/need-help-changing-background-with-mouse/904/4 "2018-06-12T21:30:13Z")

</div>

Use **fill()** + **rect()** to have sections of the canvas w/ diff. colors. 😐

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [June 12, 2018, 10:51pm UTC](https://discourse.processing.org/t/need-help-changing-background-with-mouse/904/5 "2018-06-12T22:51:41Z")

</div>

`background( 250 - ((mouseX + mouseY) / 2));`

---

<div class="post-metadata">

**Author:** ![QuazArxx](https://avatars.discourse-cdn.com/v4/letter/q/7ba0ec/32.png) [@QuazArxx](https://discourse.processing.org/u/QuazArxx)\
**Post date:** [June 13, 2018, 12:43am UTC](https://discourse.processing.org/t/need-help-changing-background-with-mouse/904/6 "2018-06-13T00:43:39Z")

</div>

That’s close but point 0,0 needs to be exactly at white(255). That leaves it at (250) doesn’t it?

---

<div class="post-metadata">

**Author:** ![MilesWilliams](https://avatars.discourse-cdn.com/v4/letter/m/858c86/32.png) [@MilesWilliams](https://discourse.processing.org/u/MilesWilliams)\
**Post date:** [June 13, 2018, 4:12am UTC](https://discourse.processing.org/t/need-help-changing-background-with-mouse/904/7 "2018-06-13T04:12:18Z")

</div>

How about using the `norm()` or `map()` function?

```auto
float x;
void draw(){
    x = norm(250 - ((mouseX + mouseY) / 2),0,250)*255;
    println(x);
    background(x);
}

```

This is normalising your mouse position value, returning a value between 0 and 1, which is then multiplied by 255 to get your colour value.

Or…

```auto
float x;
void draw(){
    x = map(250 - ((mouseX + mouseY) / 2), 0, 250, 0, 255);
    println(x);
    background(x);
}

```

This is “mapping” your mouse position value from the range it currently occupies (0-250) to a value in the range of numbers you require (0-255).

These both will get you closer, but not entirely there. The lowest value will be 1.02, but you could always throw in an if clause to minus one on values below an arbitrary threshold, then you would have a slight “jump” at that chosen point though.

```auto
float x;
void draw(){
    x = map(250 - ((mouseX + mouseY) / 2), 0, 250, 0, 255);
    if(x < 122.5){
        x -= 1;
    }
    println(x);
    background(x);
}

```

There is probably a better way to achieve a minimum value of 0 but I am only new to Processing (only my second day here) so I would be keen to find out.

\*edited to give brief explanations on functions.

---

<div class="post-metadata">

**Author:** ![QuazArxx](https://avatars.discourse-cdn.com/v4/letter/q/7ba0ec/32.png) [@QuazArxx](https://discourse.processing.org/u/QuazArxx)\
**Post date:** [June 13, 2018, 12:42pm UTC](https://discourse.processing.org/t/need-help-changing-background-with-mouse/904/8 "2018-06-13T12:42:34Z")

</div>

today is my second day on this site. i started using this about a week ago so im still extremely new myself. Unfortunately it’s for a project and the professor said it needs to be exact which is why this is driving me up the walls.

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [June 13, 2018, 1:32pm UTC](https://discourse.processing.org/t/need-help-changing-background-with-mouse/904/9 "2018-06-13T13:32:14Z")

</div>

Hi QuazArxx,

You should have a look at the map() function, which converts any input number from one range to another.

[https://processing.org/reference/map\_.html](https://processing.org/reference/map_.html)