# Change Background Color on Key Press

**URL:** <https://discourse.processing.org/t/change-background-color-on-key-press/37970>\
**Category:** Beginners\
**Created:** [July 15, 2022, 3:04pm UTC](https://discourse.processing.org/t/change-background-color-on-key-press/37970 "2022-07-15T15:04:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![roaringcrex](https://avatars.discourse-cdn.com/v4/letter/r/9f8e36/32.png) [@roaringcrex](https://discourse.processing.org/u/roaringcrex)\
**Post date:** [July 15, 2022, 3:04pm UTC](https://discourse.processing.org/t/change-background-color-on-key-press/37970/1 "2022-07-15T15:04:53Z")

</div>

Hey, I’d like to change the background Color and it should stay the same after choosing one, but I can’t wrap my head around how that should be possible…

Can someone please help me out on this? I’ve tried to google my way through, but after 3 hours I still have no clue.

Here’s my Code:

> CosDing cd1;  
> RandomBackground rbc1;  
> void setup() {  
> cd1 = new CosDing();  
> rbc1 = new RandomBackground();  
> size(900, 900, P3D);  
> strokeWeight(3);  
> background(0);  
> }  
> class CosDing {  
> void display() {  
> translate(width/2, height/2);  
> float mag = 300;  
> float s = 1;  
> for (int i = 0; i \< 100; i++) {  
> float w = map(cos(radians(frameCount)), -1, 1, -100, 100);  
> float wave1 = map(cos(radians(frameCount \* 0.5 + i + w)), -1, 1, -100, 100);  
> float wave2 = map(cos(radians(frameCount + i)), -1, 1, -mag, mag);  
> float wave3 = map(tan(radians(frameCount + i++)), -1, 1, -100, 100);  
> fill(random (0, 360), 0, 360);  
> stroke(#7CFF03, 70);  
> ellipse(wave1, wave2, wave3, s);  
> ellipse (wave3, wave1, s, s);  
> }  
> }  
> }  
> class RandomBackground {  
> void display() {  
> background(random(255),random(255),random(255));  
> }  
> }

And Page 2

> void draw() {  
> if (key==‘0’ || key == ‘0’) { //Reset-Key  
> background (0);  
> }  
> if (keyPressed) {  
> if (key == ‘1’ || key == ‘1’) {  
> background(0);  
> {  
> rbc1.display();  
> }  
> }  
> }  
> if (key == ‘2’ || key == ‘2’) {  
> beginShape();  
> vertex(120, 80);  
> vertex(340, 80);  
> vertex(340, 300);  
> vertex(120, 300);  
> endShape(CLOSE);  
> }  
> if (key == ‘3’ || key == ‘3’) {  
> rotateY(map(mouseY, 0, width, 0, PI));  
> rotateX(map(mouseX, 0, height, 0, PI));  
> }  
> if (key == ‘4’ || key == ‘4’) {  
> }  
> if (key == ‘5’ || key == ‘5’) {  
> }  
> if (key == ‘6’ || key == ‘6’) {  
> }  
> if (key == ‘7’ || key == ‘7’) {  
> }  
> if (key == ‘8’ || key == ‘8’) {  
> }  
> if (key == ‘9’ || key == ‘9’) {  
> }  
> cd1.display(); // definiertes Objekt, welches sich per Tastendruck verändert, läuft die ganze Zeit, kann per 0 resetted werden  
> }

I also would like to remove the shape that is assigned to key “2”, when for example pressing “3” - it should switch into a new mode of the program without still displaying the additional shape in “2”…

I’m still very new to processing, but maybe somebody understands the issue… ☹

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [July 15, 2022, 6:51pm UTC](https://discourse.processing.org/t/change-background-color-on-key-press/37970/2 "2022-07-15T18:51:36Z")

</div>

Hi @roaringcrex,

Please [format your code](https://discourse.processing.org/faq#format-your-code). This makes use easier to help you. 🙂

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [July 16, 2022, 1:11pm UTC](https://discourse.processing.org/t/change-background-color-on-key-press/37970/3 "2022-07-16T13:11:50Z")

</div>

Hi @roaringcrex,

even if I think there are more elegant variations, I tried to take your code (stripped down a bit) and apply what you maybe want…

Cheers  
— mnse

```auto
// helper classen
class CosDing {
  void display() {
    pushStyle();
    translate(width/2, height/2);
    float mag = 300;
    float s = 1;
    for (int i = 0; i < 100; i++) {
      float w = map(cos(radians(frameCount)), -1, 1, -100, 100);
      float wave1 = map(cos(radians(frameCount * 0.5 + i + w)), -1, 1, -100, 100);
      float wave2 = map(cos(radians(frameCount + i)), -1, 1, -mag, mag);
      float wave3 = map(tan(radians(frameCount + i++)), -1, 1, -100, 100);
      fill(random (0, 360), 0, 360);
      stroke(#7CFF03, 70);
      ellipse(wave1, wave2, wave3, s);
      ellipse (wave3, wave1, s, s);
    }
    popStyle();
  }
}
class RandomBackground {
  int col = color(0);
  void reset() {
    col = color(0);
  }
  void select() {
    col = color(random(255), random(255), random(255));
  }
  void display() {
    background(col);
  }
}
// main sketch
CosDing cd1;
RandomBackground rbc1;

void setup() {
  cd1 = new CosDing();
  rbc1 = new RandomBackground();
  size(900, 900, P3D);
  strokeWeight(3);
}

void keyPressed() {
  if (key=='0') { //Reset-Key
    rbc1.reset();
  } else if (key == '1') {
    rbc1.select();
  }
}

void draw() {
  rbc1.display();
  if (keyPressed) {
    if (key == '2') {
      fill(255, 0, 255);
      beginShape();
      vertex(120, 80);
      vertex(340, 80);
      vertex(340, 300);
      vertex(120, 300);
      endShape(CLOSE);
    } else if (key == '3') {
      rotateY(map(mouseY, 0, width, 0, PI));
      rotateX(map(mouseX, 0, height, 0, PI));
    }
  }
  cd1.display(); // definiertes Objekt, welches sich per Tastendruck verändert, läuft die ganze Zeit, kann per 0 resetted werden
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 16, 2022, 1:55pm UTC](https://discourse.processing.org/t/change-background-color-on-key-press/37970/4 "2022-07-16T13:55:00Z")

</div>

Hello,

To change background on a keyPressed event:  
[https://processing.org/reference/keyPressed\_.html](https://processing.org/reference/keyPressed_.html)

Hint:  
`background(value);`

Reference:  
[https://processing.org/tutorials/interactivity](https://processing.org/tutorials/interactivity)

`:)`