# How can I have my background change colors when I move my mouse across it?

**URL:** <https://discourse.processing.org/t/how-can-i-have-my-background-change-colors-when-i-move-my-mouse-across-it/10608>\
**Category:** Coding Questions\
**Created:** [April 24, 2019, 9:19pm UTC](https://discourse.processing.org/t/how-can-i-have-my-background-change-colors-when-i-move-my-mouse-across-it/10608 "2019-04-24T21:19:40Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![karatecake](https://avatars.discourse-cdn.com/v4/letter/k/b487fb/32.png) [@karatecake](https://discourse.processing.org/u/karatecake)\
**Post date:** [April 24, 2019, 9:19pm UTC](https://discourse.processing.org/t/how-can-i-have-my-background-change-colors-when-i-move-my-mouse-across-it/10608/1 "2019-04-24T21:19:40Z")

</div>

I’m trying to make a background that changes color when the mouse moves around the screen. I’ve found some code that works but when I try pasting the working parts into my code it stops working

The working parts:

```auto
fill(mouseX,mouseY,100);

```

This fill allows a rectangle to change colors as I move the mouse around. However, this does not work for any of the simple shapes I’ve made. I went through his code more but couldn’t find anything else that effects the color changing.I found some more code that changes the color when you click it and I’d like to know if I can change a few things and have it work for changing my background.

```auto
color bColor = color(255, 255, 255);

void setup() {
size(400, 400);
 }

void draw() {
background(bColor);
 }

void mousePressed() {
bColor = color(random(255), random(255), random(255));
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 24, 2019, 9:45pm UTC](https://discourse.processing.org/t/how-can-i-have-my-background-change-colors-when-i-move-my-mouse-across-it/10608/2 "2019-04-24T21:45:13Z")

</div>

> [@karatecake](#):
>
> bColor = color(random(255), random(255), random(255));

make that

bColor=color(mouseX,mouseY…

?

To have the background change throughout, also put the line into draw()

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 24, 2019, 9:56pm UTC](https://discourse.processing.org/t/how-can-i-have-my-background-change-colors-when-i-move-my-mouse-across-it/10608/3 "2019-04-24T21:56:02Z")

</div>

another example

```auto

color bColor = color(255, 255, 255);

void setup() {
  size(400, 400);
}

void draw() {
  background(0);

  fill(bColor); 
  rect(44, 44, 33, 100);
  bColor = color(mouseX, 255, mouseY);
}

```

---

<div class="post-metadata">

**Author:** ![karatecake](https://avatars.discourse-cdn.com/v4/letter/k/b487fb/32.png) [@karatecake](https://discourse.processing.org/u/karatecake)\
**Post date:** [April 24, 2019, 9:59pm UTC](https://discourse.processing.org/t/how-can-i-have-my-background-change-colors-when-i-move-my-mouse-across-it/10608/4 "2019-04-24T21:59:41Z")

</div>

Works great, thank you!

---

<div class="post-metadata">

**Author:** ![karatecake](https://avatars.discourse-cdn.com/v4/letter/k/b487fb/32.png) [@karatecake](https://discourse.processing.org/u/karatecake)\
**Post date:** [April 24, 2019, 10:05pm UTC](https://discourse.processing.org/t/how-can-i-have-my-background-change-colors-when-i-move-my-mouse-across-it/10608/5 "2019-04-24T22:05:32Z")

</div>

Is there anyway to make the colors in the background earth tones? My background is the back of a forest and I’d like it to change while interacting with it.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 24, 2019, 10:07pm UTC](https://discourse.processing.org/t/how-can-i-have-my-background-change-colors-when-i-move-my-mouse-across-it/10608/6 "2019-04-24T22:07:53Z")

</div>

nice one.

There is a color selector in the tools menu.

You could make notes of the ranges of RBG for the color that you want to allow.

Then you could replace bColor = color(random(255), random(255), random(255));

by the ranges you noticed : bColor = color(random(144,255), random(222,255), random(44,55));

---

<div class="post-metadata">

**Author:** ![HeardCase](https://avatars.discourse-cdn.com/v4/letter/h/b19c9b/32.png) [@HeardCase](https://discourse.processing.org/u/HeardCase)\
**Post date:** [May 31, 2022, 2:04pm UTC](https://discourse.processing.org/t/how-can-i-have-my-background-change-colors-when-i-move-my-mouse-across-it/10608/7 "2022-05-31T14:04:54Z")

</div>

hello there, i’m trying to incorporate this to my work but it’s saying syntaxe error on every other element in the sketch, how can i resolve it?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 31, 2022, 2:07pm UTC](https://discourse.processing.org/t/how-can-i-have-my-background-change-colors-when-i-move-my-mouse-across-it/10608/8 "2022-05-31T14:07:38Z")

</div>

Show your entire code please

---

<div class="post-metadata">

**Author:** ![HeardCase](https://avatars.discourse-cdn.com/v4/letter/h/b19c9b/32.png) [@HeardCase](https://discourse.processing.org/u/HeardCase)\
**Post date:** [May 31, 2022, 2:17pm UTC](https://discourse.processing.org/t/how-can-i-have-my-background-change-colors-when-i-move-my-mouse-across-it/10608/9 "2022-05-31T14:17:00Z")

</div>

size(500,500);  
background(000,000,000);

//PImage img;  
//img = loadImage(“ciel-etoile550x324.jpg”);  
//image(img,0,0,600,500);  
noStroke();  
fill(211,211,211);  
triangle(70,0,60,160,120,160);  
triangle(50,-1,-1,160,70,160);  
triangle(120,160,140,260,110,260);  
//triangle(100,320,100,350,130,350);  
//triangle(20,320,0,350,20,350);  
//rect(20,320,80,30);  
rect(30,300,70,200);  
fill(255,0,0);  
rect(50,0,20,280);  
noStroke();  
fill(211,211,211);  
rect(0,160,50,100);  
rect(70,160,50,100);  
rect(10,330,110,40);  
rect(30,370,70,50);  
rect(0,420,150,80);  
quad(0,260,140,260,100,300,30,300);  
fill(105,105,105);  
//rect(0,450,30,40);  
//rect(90,450,30,40);

//vaisseau droite  
fill(148,130,130);  
rect(380,30,80,380);  
triangle(380,410,460,410,420,490);  
fill(64,64,64);  
rect(410,380,20,210);  
rect(400,0,40,50);  
rect(360,80,120,213);  
fill(0,0,0);  
rect(390,80,60,80);

---

<div class="post-metadata">

**Author:** ![HeardCase](https://avatars.discourse-cdn.com/v4/letter/h/b19c9b/32.png) [@HeardCase](https://discourse.processing.org/u/HeardCase)\
**Post date:** [May 31, 2022, 2:17pm UTC](https://discourse.processing.org/t/how-can-i-have-my-background-change-colors-when-i-move-my-mouse-across-it/10608/10 "2022-05-31T14:17:32Z")

</div>

that’s my code without it, i’m still finishing drrawing things etc so it’s a bit messy…  
is it the size line messing?

---

<div class="post-metadata">

**Author:** ![Mikey83](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mikey83/32/17956_2.png) [@Mikey83](https://discourse.processing.org/u/Mikey83)\
**Post date:** [May 31, 2022, 2:26pm UTC](https://discourse.processing.org/t/how-can-i-have-my-background-change-colors-when-i-move-my-mouse-across-it/10608/11 "2022-05-31T14:26:04Z")

</div>

You could try using lerpColor with the map function for mouse x

```auto
void setup(){
  size(600,600);
}

void draw(){
  color colorA = color(203,161,68);
  color colorB = color(100,180,105);
  
  float value = map(mouseX, 0, width, 0, 1);
  
  color colorC = lerpColor(colorA, colorB, value);
  
  background(colorC);
  
}

```

just to give you a quick example

---

<div class="post-metadata">

**Author:** ![HeardCase](https://avatars.discourse-cdn.com/v4/letter/h/b19c9b/32.png) [@HeardCase](https://discourse.processing.org/u/HeardCase)\
**Post date:** [May 31, 2022, 2:39pm UTC](https://discourse.processing.org/t/how-can-i-have-my-background-change-colors-when-i-move-my-mouse-across-it/10608/12 "2022-05-31T14:39:21Z")

</div>

oh okay thanks i’ll try that right away

---

<div class="post-metadata">

**Author:** ![Mikey83](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mikey83/32/17956_2.png) [@Mikey83](https://discourse.processing.org/u/Mikey83)\
**Post date:** [May 31, 2022, 2:41pm UTC](https://discourse.processing.org/t/how-can-i-have-my-background-change-colors-when-i-move-my-mouse-across-it/10608/13 "2022-05-31T14:41:18Z")

</div>

Let me know how you go

---

<div class="post-metadata">

**Author:** ![HeardCase](https://avatars.discourse-cdn.com/v4/letter/h/b19c9b/32.png) [@HeardCase](https://discourse.processing.org/u/HeardCase)\
**Post date:** [May 31, 2022, 2:41pm UTC](https://discourse.processing.org/t/how-can-i-have-my-background-change-colors-when-i-move-my-mouse-across-it/10608/14 "2022-05-31T14:41:27Z")

</div>

where should i insert that code in the lines of my sketch? because i just tried but it’s still telling me syntax error, do i do something wrong?

---

<div class="post-metadata">

**Author:** ![Mikey83](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mikey83/32/17956_2.png) [@Mikey83](https://discourse.processing.org/u/Mikey83)\
**Post date:** [May 31, 2022, 2:47pm UTC](https://discourse.processing.org/t/how-can-i-have-my-background-change-colors-when-i-move-my-mouse-across-it/10608/15 "2022-05-31T14:47:34Z")

</div>

Oh ok, i had a look at your code and you’re using static mode, meaning you dont have a setup or draw function so you wont be able to but i converted it to active mode so you can get an idea

```auto
void setup() {
  size(500, 500);
}

void draw() {
  color colorA = color(203,161,68);
  color colorB = color(100,180,105);
  
  float value = map(mouseX, 0, width, 0, 1);
  
  color colorC = lerpColor(colorA, colorB, value);
  
  background(colorC);

  //PImage img;
  //img = loadImage(“ciel-etoile550x324.jpg”);
  //image(img,0,0,600,500);
  noStroke();
  fill(211, 211, 211);
  triangle(70, 0, 60, 160, 120, 160);
  triangle(50, -1, -1, 160, 70, 160);
  triangle(120, 160, 140, 260, 110, 260);
  //triangle(100,320,100,350,130,350);
  //triangle(20,320,0,350,20,350);
  //rect(20,320,80,30);
  rect(30, 300, 70, 200);
  fill(255, 0, 0);
  rect(50, 0, 20, 280);
  noStroke();
  fill(211, 211, 211);
  rect(0, 160, 50, 100);
  rect(70, 160, 50, 100);
  rect(10, 330, 110, 40);
  rect(30, 370, 70, 50);
  rect(0, 420, 150, 80);
  quad(0, 260, 140, 260, 100, 300, 30, 300);
  fill(105, 105, 105);
  //rect(0,450,30,40);
  //rect(90,450,30,40);

  //vaisseau droite
  fill(148, 130, 130);
  rect(380, 30, 80, 380);
  triangle(380, 410, 460, 410, 420, 490);
  fill(64, 64, 64);
  rect(410, 380, 20, 210);
  rect(400, 0, 40, 50);
  rect(360, 80, 120, 213);
  fill(0, 0, 0);
  rect(390, 80, 60, 80);
}

```

---

<div class="post-metadata">

**Author:** ![HeardCase](https://avatars.discourse-cdn.com/v4/letter/h/b19c9b/32.png) [@HeardCase](https://discourse.processing.org/u/HeardCase)\
**Post date:** [May 31, 2022, 3:01pm UTC](https://discourse.processing.org/t/how-can-i-have-my-background-change-colors-when-i-move-my-mouse-across-it/10608/16 "2022-05-31T15:01:31Z")

</div>

oh okay i didn’t know, thanks i’ll look