# Changing color fill with keyPressed in the function
**URL:** https://discourse.processing.org/t/changing-color-fill-with-keypressed-in-the-function/23828
**Category:** Coding Questions
**Created:** [September 12, 2020, 10:18pm UTC](https://discourse.processing.org/t/changing-color-fill-with-keypressed-in-the-function/23828 "2020-09-12T22:18:56Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@breadstixnsalad](https://discourse.processing.org/u/breadstixnsalad)
#### Post date: [September 12, 2020, 10:18pm UTC](https://discourse.processing.org/t/changing-color-fill-with-keypressed-in-the-function/23828/1 "2020-09-12T22:18:56Z")
> I am a noob at Processing and looking to make it so that if you press an arrow, t hebackground goes from ‘day’ color to either ‘sunset’ or ‘night’, while hiding the trails left by the moving cloud when it follows your mouse. Any suggestions?
```auto
PImage img1;
PImage img2;
PImage img3;
float offset = .3;
float easing = .02;
color day = color(122, 199, 254);
color sunset = color(190, 88, 120);
color night = color(100, 80, 120);
// DESERT LANDSCAPE
void setup() {
size(1000, 1000);
img1 = loadImage("sun.png");
img2 = loadImage("moon.png");
img3 = loadImage("clouds.png");
}
void draw () {
// MOVABLE CLOUDS
float dx = (mouseX - img3.width/4) - offset;
offset += dx * easing;
fill(day);
DrawBackground (0, 0);
image(img3, offset, 0);
DrawDunes (0, 0);
}
// SAND DUNES
void DrawDunes(int x, int y) {
fill(202, 127, 85);
noStroke();
quad( 0, 500, 1000, 500, 1000, 1000, 0, 1000);
bezier( 0, 500, 400, 400, 200, 300, 1700, 578);
fill(230, 160, 100);
noStroke();
bezier(290, 410, 400, 400, 200, 300, 1800, 578);
quad(290, 410, 470, 1000, 1000, 1000, 1000, 480);
}
// BACKGROUND
void DrawBackground(int x, int y) {
fill(day);
quad(0, 0, 0, 1000, 1000, 1000, 1000, 0);
if ( keyPressed == true) {
if (key == CODED) { //activate sunset
if (keyCode == LEFT) {
fill(sunset);
image(img1, 570, 120);
} else if (keyCode == RIGHT) { //activate night
fill(night);
stroke(255);
strokeWeight(10);
point(500, 100);
point(900, 250);
point(50, 300);
image(img2, 150, 20);
}
}
}
}
```
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [September 12, 2020, 10:27pm UTC](https://discourse.processing.org/t/changing-color-fill-with-keypressed-in-the-function/23828/2 "2020-09-12T22:27:59Z")
Welcome,
Please format your code:
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)
`:)`
---
### Author:  [@Hyperion65](https://discourse.processing.org/u/Hyperion65)
#### Post date: [September 13, 2020, 3:40am UTC](https://discourse.processing.org/t/changing-color-fill-with-keypressed-in-the-function/23828/3 "2020-09-13T03:40:58Z")
since you use fill(day) before you call DrawBackground() AND a second time before you draw the sky,
whatever your key-recognition changes (fill(sunset) or fill(night), gets changed before the sky can be drawn.
remove fill(day) from draw();
draw the sky (quad(…)) BEFORE you write fill(day)
😉
if you want, use rect(0,0,width,height), not a quad… much less work…
---
### Author:  [@breadstixnsalad](https://discourse.processing.org/u/breadstixnsalad)
#### Post date: [September 13, 2020, 6:20pm UTC](https://discourse.processing.org/t/changing-color-fill-with-keypressed-in-the-function/23828/4 "2020-09-13T18:20:37Z")
Hyperion65 you dog! Thank you for your help!!!
---
### Author:  [@breadstixnsalad](https://discourse.processing.org/u/breadstixnsalad)
#### Post date: [September 13, 2020, 6:38pm UTC](https://discourse.processing.org/t/changing-color-fill-with-keypressed-in-the-function/23828/5 "2020-09-13T18:38:08Z")
[quote=“breadstixnsalad, post:1, topic:23828”]
```auto
PImage img1;
PImage img2;
PImage img3;
float offset = .3;
float easing = .02;
color day = color(122, 199, 254);
color sunset = color(190, 88, 120);
color night = color(100, 80, 120);
// DESERT LANDSCAPE
void setup() {
size(1000, 1000);
img1 = loadImage("sun.png");
img2 = loadImage("moon.png");
img3 = loadImage("clouds.png");
}
void draw () {
// MOVABLE CLOUDS
float dx = (mouseX - img3.width/4) - offset;
offset += dx * easing;
fill(day);
DrawBackground (0, 0);
image(img3, offset, 0);
DrawDunes (0, 0);
}
// SAND DUNES
void DrawDunes(int x, int y) {
fill(202, 127, 85);
noStroke();
quad( 0, 500, 1000, 500, 1000, 1000, 0, 1000);
bezier( 0, 500, 400, 400, 200, 300, 1700, 578);
fill(230, 160, 100);
noStroke();
bezier(290, 410, 400, 400, 200, 300, 1800, 578);
quad(290, 410, 470, 1000, 1000, 1000, 1000, 480);
}
// BACKGROUND
void DrawBackground(int x, int y) {
fill(day);
quad(0, 0, 0, 1000, 1000, 1000, 1000, 0);
if ( keyPressed == true) {
if (key == CODED) { //activate sunset
if (keyCode == LEFT) {
fill(sunset);
image(img1, 570, 120);
} else if (keyCode == RIGHT) { //activate night
fill(night);
stroke(255);
strokeWeight(10);
point(500, 100);
point(900, 250);
point(50, 300);
image(img2, 150, 20);
}
}
}
}
```
[/quote] this is the result of getting rid of those two fills
---
### Author:  [@Hyperion65](https://discourse.processing.org/u/Hyperion65)
#### Post date: [September 13, 2020, 6:50pm UTC](https://discourse.processing.org/t/changing-color-fill-with-keypressed-in-the-function/23828/6 "2020-09-13T18:50:33Z")
lol you’re welcome…
---
### Author:  [@breadstixnsalad](https://discourse.processing.org/u/breadstixnsalad)
#### Post date: [September 13, 2020, 6:59pm UTC](https://discourse.processing.org/t/changing-color-fill-with-keypressed-in-the-function/23828/7 "2020-09-13T18:59:28Z")
> I am actually running into a problem, resulting in the image above. When i remove that called fill(day) in draw and then draw the rect(0,0, 1000, 1000), following with fill(day), and ends up being the color of the dune. I don’t get this because I use quad and bezier so the background shouldn’t also be changed.
```auto
PImage img1;
PImage img2;
PImage img3;
float offset = .3;
float easing = .02;
color day = color(122, 199, 254);
color sunset = color(190, 88, 120);
color night = color(100, 80, 120);
// DESERT LANDSCAPE
void setup() {
size(1000, 1000);
img1 = loadImage("sun.png");
img2 = loadImage("moon.png");
img3 = loadImage("clouds.png");
}
void draw () {
// MOVABLE CLOUDS
float dx = (mouseX - img3.width/4) - offset;
offset += dx * easing;
DrawBackground (0, 0);
image(img3, offset, 0);
// fill(day);
DrawDunes (0, 0);
}
// BACKGROUND
void DrawBackground(int x, int y) {
rect(0, 0, 1000, 1000);
fill(day);
if ( keyPressed == true) {
if (key == CODED) { //activate sunset
if (keyCode == LEFT) {
fill(sunset);
image(img1, 570, 120);
} else if (keyCode == RIGHT) { //activate night
fill(night);
stroke(255);
strokeWeight(10);
point(500, 100);
point(900, 250);
point(50, 300);
image(img2, 150, 20);
}
}
}
}
// SAND DUNES
void DrawDunes(int x, int y) {
fill(202, 127, 85);
noStroke();
quad( 0, 500, 1000, 500, 1000, 1000, 0, 1000);
bezier( 0, 500, 400, 400, 200, 300, 1700, 578);
fill(230, 160, 100);
noStroke();
bezier(290, 410, 400, 400, 200, 300, 1800, 578);
quad(290, 410, 470, 1000, 1000, 1000, 1000, 480);
}
```
---
### Author:  [@Hyperion65](https://discourse.processing.org/u/Hyperion65)
#### Post date: [September 13, 2020, 7:48pm UTC](https://discourse.processing.org/t/changing-color-fill-with-keypressed-in-the-function/23828/8 "2020-09-13T19:48:37Z")
yes, because you write “rect” BEFORE you write “fill”.
so. it uses the color from the last moment you set it.
which is the thing you do last in draw() inside DrawDunes.
if I have changes of color occurring very often, I usually put it right in front of the things to be drawn 😉
---
### Author:  [@breadstixnsalad](https://discourse.processing.org/u/breadstixnsalad)
#### Post date: [September 13, 2020, 7:55pm UTC](https://discourse.processing.org/t/changing-color-fill-with-keypressed-in-the-function/23828/9 "2020-09-13T19:55:24Z")
I get what you mean but I want it so that it changes the color of the sunset and night when you press the keys and if you correct for it so that the dune color stops being displayed, it stays only on the day color, and these fixes you recommended did not help.
---
### Author:  [@Hyperion65](https://discourse.processing.org/u/Hyperion65)
#### Post date: [September 13, 2020, 7:58pm UTC](https://discourse.processing.org/t/changing-color-fill-with-keypressed-in-the-function/23828/10 "2020-09-13T19:58:19Z")
ok, let me put it differently:
in the beginning of drawBackground you make several decisions which color to use.
so put “rect” after that decision making is done. the same you do with alternately showing the sun or the moon
---
### Author:  [@breadstixnsalad](https://discourse.processing.org/u/breadstixnsalad)
#### Post date: [September 13, 2020, 7:58pm UTC](https://discourse.processing.org/t/changing-color-fill-with-keypressed-in-the-function/23828/11 "2020-09-13T19:58:34Z")
I found the error, I had to redraw the quad for the keypressed statements, where the fill sunset and fill night exist, otherwise nothing is getting filled because the other objects are pictures not objects
---
### Author:  [@Hyperion65](https://discourse.processing.org/u/Hyperion65)
#### Post date: [September 13, 2020, 8:31pm UTC](https://discourse.processing.org/t/changing-color-fill-with-keypressed-in-the-function/23828/13 "2020-09-13T20:31:28Z")
no worries.
I think anyway that it is more clear to separate calculating stuff from drawing stuff.
personally I would use switch… and more methods.
also I LOVE separating comment lines !
```auto
int myMoment = 0;
color currentColor;
//--------------------------------------------
void draw () {
selectBeautifulMomentInTime ();
drawBackground();
drawDunes();
}
//--------------------------------------------
void drawBackground () {
//----- draw the back
fill(currentColor);
rect(0,0,1000,1000);
//----- draw heavenly objects:
switch (myMoment) {
case 1:
image(img1,570,120); // show the sun
break;
case 2:
image(img2,150,20); // show the moon
break;
}
}
//--------------------------------------------
void drawDunes () {
// drawing the Dunes
}
//--------------------------------------------
void selectBeautifulMomentInTime () {
if ( keyPressed == true && key == CODED) {
switch (keyCode) {
case LEFT:
myMoment = 1;
currentColor = sunset;
break;
case RIGHT:
myMoment = 2;
currentColor = night;
break;
default:
myMoment = 0;
currentColor = day;
break;
}
}
}
```
that’s of course a little generic, but my point is that you decide the current time of day in one place and fork into each drawing style in another.
if you want to change something during day, you only have to concern yourself with case 1 inside drawBackground (). change a color there, add objects, whatever.
but it is a more orderly structure imo
and I really like my draw() to be as “empty” as possible, so I can see the order in which things happen better.