I want to move an ellipse slightly using the keyPressed() in Processing but when I do so it adds another ellipse instead of getting rid of one

Question

Sorry if this is a silly question only started learning Java in processing and I am slightly confused. lol

boolean eyeMove = false;
boolean armMove = false;

void setup() {
  size(600, 800);
  smooth();
}

void draw() {

  stroke(1);
  fill(255);
  ellipse(300, 460, 230, 270);
  stroke(1);
  fill(188);
  ellipse(280, 220, 35, 95);
  ellipse(320, 220, 35, 95);
  fill(126);
  ellipse(280, 220, 20, 80);
  ellipse(320, 220, 20, 80);
  stroke(1);
  fill(255);
  ellipse(300, 300, 100, 100);
  fill(188);
  noStroke();
  ellipse(300, 460, 130, 170);
  fill(0);
  ellipse(240, 580, 40, 40);
  ellipse(360, 580, 40, 40);
  fill(0);
  ellipse(300, 320, 20, 10);
  fill(0);
  triangle(300, 330, 289, 344, 310, 344);
  fill(188);
  stroke(1);
  ellipse(280, 290, 20, 20);
  ellipse(320, 290, 20, 20);

  keyPressed();
}


void keyPressed() {
  if (!keyPressed) {
    fill(0);
    ellipse(390, 350, 40, 40);
    ellipse(210, 350, 40, 40);
  } else if (keyPressed) {
    armMove = true;
    fill(125);
    ellipse(390, 350, 40, 40);
    ellipse(230, 350, 40, 40);
  }

I have used mousePressed on the eyes of the rabbit and it works fine. I just am confused how this is causing problems now.

Answer 1

The `draw() method isn't exactly just a drawing loop. It's the main loop of your program. As such, it doesn't clear the screen at every iteration of the loop, but just paints whatever you tell it to paint. In fact, you can paint in any method, as long as it's being called at some point.

The problem here is that you are re-painting the bunny over the previous one. You never "erase" your previous drawing. People usually uses the background() method to do so. I modified your sketch a little bit to show you what I mean:

void setup() {
  size(600, 800);
  smooth();
}

void draw() {
  background(128);
  
  stroke(1);
  fill(255);
  ellipse(300, 460, 230, 270);
  fill(188);
  ellipse(280, 220, 35, 95);
  ellipse(320, 220, 35, 95);
  fill(126);
  ellipse(280, 220, 20, 80);
  ellipse(320, 220, 20, 80);
  fill(255);
  ellipse(300, 300, 100, 100);
  fill(188);
  noStroke();
  ellipse(300, 460, 130, 170);  
  fill(0);
  ellipse(240, 580, 40, 40);
  ellipse(360, 580, 40, 40);
  ellipse(300, 320, 20, 10);
  triangle(300, 330, 289, 344, 310, 344);
  fill(188);
  stroke(1);
  ellipse(280, 290, 20, 20);
  ellipse(320, 290, 20, 20);

  if (keyPressed) {
    ellipse(390, 350, 40, 40);
    ellipse(230, 350, 40, 40);
  } else {
    ellipse(390, 350, 40, 40);
    ellipse(210, 350, 40, 40);    
  }
}

I'll be around if you have follow-up questions. Have fun!