# Change background colour with a map

**URL:** <https://discourse.processing.org/t/change-background-colour-with-a-map/36370>\
**Category:** Coding Questions\
**Created:** [April 16, 2022, 6:04am UTC](https://discourse.processing.org/t/change-background-colour-with-a-map/36370 "2022-04-16T06:04:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![hannymymy](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@hannymymy](https://discourse.processing.org/u/hannymymy)\
**Post date:** [April 16, 2022, 6:04am UTC](https://discourse.processing.org/t/change-background-colour-with-a-map/36370/1 "2022-04-16T06:04:56Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

Hi everyone!  
I have a code where the abckground color right now changes ray values when I move my mouse. I want it to change in colour though, but somehow I can get it to work so that I can insert my 3 color values. Do I need to change anything somewhere else or is it just npot possible to get away from the grayscale in that form?  
Thanks so much in advance!

void setup()  
{ size(700, 820); }

void draw()

{ if (mousePressed) {  
{  
fill(90); } fill(92, 90, 153);  
ellipse(mouseX, mouseY, 90, 90); }  
else { fill(map(mouseX, 0, width, 54, 200), 15);  
rect(0, 0, width, height);  
fill(102, 20, 453);  
strokeWeight(1);  
ellipse(mouseX, mouseY, 60, 60);  
strokeWeight(10);  
stroke(300, 100, 4);  
line(150, 25, mouseX, mouseY);  
}}

void mousePressed() {  
background(10, 90, 123);  
}

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [April 16, 2022, 6:45am UTC](https://discourse.processing.org/t/change-background-colour-with-a-map/36370/2 "2022-04-16T06:45:43Z")

</div>

Please use Ctrl+t in processing ide to format the code before you copy it to discource. I think it improves your changes to get answers.

```auto
void setup()
{
  size(700, 820);
}

void draw()

{
  if (mousePressed) {
    {
      fill(90);
    }
    fill(92, 90, 153);
    ellipse(mouseX, mouseY, 90, 90);
  } else {
    fill(map(mouseX, 0, width, 54, 200), 15);
    rect(0, 0, width, height);
    fill(102, 20, 453);
    strokeWeight(1);
    ellipse(mouseX, mouseY, 60, 60);
    strokeWeight(10);
    stroke(300, 100, 4);
    line(150, 25, mouseX, mouseY);
  }
}

void mousePressed() {
  background(10, 90, 123);
}

```

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [April 16, 2022, 6:51am UTC](https://discourse.processing.org/t/change-background-colour-with-a-map/36370/3 "2022-04-16T06:51:13Z")

</div>

And please, don’t feel that I’m picking on you. There shouldn’t be any unformated code, but it happens all the time and it starts to irritate.

---

<div class="post-metadata">

**Author:** ![hannymymy](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@hannymymy](https://discourse.processing.org/u/hannymymy)\
**Post date:** [April 16, 2022, 7:47am UTC](https://discourse.processing.org/t/change-background-colour-with-a-map/36370/4 "2022-04-16T07:47:27Z")

</div>

ahh thank you so much I’m new to this so I didn’t know how to format it!!

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [April 16, 2022, 10:46am UTC](https://discourse.processing.org/t/change-background-colour-with-a-map/36370/5 "2022-04-16T10:46:33Z")

</div>

So [fill](https://processing.org/reference/fill_.html) has three different forms, 1) grayscale with single value, 2) rgb or hsb with three values and 3) rgba or hsba with four value.  
Second is easiest for colour changes. If you want to change colour hue then hsb is your choice.  
To use HSB (Hue, Saturation and Brightness) you need to set [colorMode()](https://processing.org/reference/colorMode_.html) to use HSB, like `colorMode(360,100,100)`. You can choose the range of values. With SB I would use values in range of 40-60 and let H change by mapping from mouse values.