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

Processing Coding Questions
1

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:

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.

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));
}
1 Like
2

make that

bColor=color(mouseX,mouseY…

?

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

3

another example



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);
}
2 Likes
4

Works great, thank you!

1 Like
5

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.

6

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));

7

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?

8

Show your entire code please

9

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);

10

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?

11

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

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

12

oh okay thanks i’ll try that right away

13

Let me know how you go

14

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?

15

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

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);
}
1 Like
16

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