Changing color fill with keyPressed in the function

Processing Coding Questions
1

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?

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

clouds

2

Welcome,

Please format your code:
https://discourse.processing.org/faq#format-your-code

:)

1 Like
3

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)

:wink:

if you want, use rect(0,0,width,height), not a quad… much less work…

4

Hyperion65 you dog! Thank you for your help!!!

5

[quote=“breadstixnsalad, post:1, topic:23828”]

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

problem
problem1001×1008 42.5 KB

1 Like
6

lol you’re welcome…

7

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.

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

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 :wink:

9

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.

10

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

11

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

13

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 !

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.