My pictures in array don't disappear, they overlap

Processing Coding Questions
1

so I made a programm. I dress up game to be excact. I’ve programmed it but there’s one problem:
The pictures I use in arrays,when executed only overlap themselves not disappear. Meaning when I click the button “blush” or “Gesicht” the blush or face from the previous option can still be seen.
How do I programm it that when I click the button the picture disappears and another picture comes?
The coding for that is at the botton of the code at: void mousePressed(){}

grafik
grafik1366×768 210 KB

boolean start= false; //StartBildschirm
boolean load1TimeStartFalse = true;
boolean load1TimeStartTrue = true;
PImage menu;//Menübildschirm
PImage pfeilOben1;
PImage pfeilOben2;
PImage pfeilOben3;
PImage pfeilOben4;
int pU= 35; //Umfang Pfeil
int posY1= 230; // Pfeil Y Position 1 Reihe
int posY2= 340; // Pfeil Y Position 2 Reihe
int posY3= 450; //Pfeil Y Position 3 Reihe
int posY4= 550; //Pfeil Y Position 4 Reihe
float posX=62.5;
float posX2=62.5; //Pfeil X Position Links 2 for schleife
int pfeil; //Variable für for Schleife1
int pfeil2; //Variable für for Schleife2
int hautzaehler=0;
int gesichtzaehler=0;
int blushzaehler=0;
PImage startBildschirm;
PImage clickbarStartbildschirm;
PImage clickToStartText;
PImage titel;
PImage leer;
PImage base;
PImage haut1;
PImage haut2;
PImage haut3;
PImage haut4;
PImage haut;
PImage blush1;
PImage blush2;
PImage blush;
PImage Gesicht1;
PImage Gesicht2;
PImage Gesicht3;
PImage Gesicht4;
PImage Gesicht5;
PImage Gesicht6;
PImage Gesicht7;
PImage Gesicht8;
PImage gesicht;
PImage haar1;
PImage haar2;
PImage haar3;
PImage haar4;
PImage haar5;
PImage haar6;
PImage haar7;
PImage haar8;
PImage haar;
PImage hintergrund1;
PImage hintergrund2;
PImage hintergrund3;
PImage hintergrund4;
PImage hintergrund5;
PImage hintergrund6;
PImage hintergrund;
void setup() {
size(800, 600);
menu= loadImage(“AuswahlMenu.png”);
pfeilOben1 = loadImage(“PfeilOben.png”);
pfeilOben2 = loadImage(“PfeilOben.png”);
pfeilOben3 = loadImage(“PfeilOben.png”);
pfeilOben4 = loadImage(“PfeilOben.png”);
startBildschirm= loadImage(“StartBildschirm.png”);
clickbarStartbildschirm= loadImage(“ClickbarStartbildschirm.png”);
clickToStartText= loadImage(“ClickToStartText.png”);
titel= loadImage(“Titel.png”);
haut= new PImage[5];//
haut[0]= loadImage(“Base.png”);
haut[1]= loadImage(“Haut1.png”);
haut[2]= loadImage(“Haut2.png”);
haut[3]= loadImage(“Haut3.png”);
haut[4]= loadImage(“Haut4.png”);
gesicht= new PImage[8];
gesicht[0]= loadImage(“Gesicht1.png”);
gesicht[1]= loadImage(“Gesicht2.png”);
gesicht[2]= loadImage(“Gesicht3.png”);
gesicht[3]= loadImage(“Gesicht4.png”);
gesicht[4]= loadImage(“Gesicht5.png”);
gesicht[5]= loadImage(“Gesicht6.png”);
gesicht[6]= loadImage(“Gesicht7.png”);
gesicht[7]= loadImage(“Gesicht8.png”);
blush= new PImage[3];
blush[0]= loadImage(“leer.png”);
blush[1]= loadImage(“Blush1.png”);
blush[2]= loadImage(“Blush2.png”);
}
void draw() {
if (start==false) {
imageMode(CENTER);
if (load1TimeStartFalse == true) {
image(startBildschirm, width/2, height/2, width, height);
image(titel, 405, 350, 700, 700);
rect(250, 350, 300, 100);
image(clickToStartText, 405, 310, 650, 600);
}
load1TimeStartFalse = false;
starten();
//!!Fehlt: knopf programmieren
}
if (start==true) {
//Hintergrund fehlt
imageMode(CORNER);
image(haut[hautzaehler], 280, 0, 600, 600);//Haut
image(gesicht[gesichtzaehler], 280, 0, 600, 600);//Gesicht
image(blush[blushzaehler], 280, 0, 600, 600);
if (load1TimeStartTrue == true) {
image(menu, 0, 0, 800, 600);//Menü
load1TimeStartTrue = false;
}
pfeileErstellen1und2und3Reihe();
pfeileErstellen3Reihe();
}
}
void pfeileErstellen1und2und3Reihe() {
for (int i= 0; pfeil<5; pfeil++) {//Pfeil ++ damit es sich nur einmal wiederholt
imageMode(CENTER);
image(pfeilOben1, posX, posY1, pU, pU);
image(pfeilOben2, posX, posY2, pU, pU);
image(pfeilOben3, posX, posY3, pU, pU);
posX+=75;
}
}
void pfeileErstellen3Reihe() {
for (int i= 0; pfeil2<3; pfeil2++) {//Pfeil ++ damit es sich nur einmal wiederholt
imageMode(CENTER);
image(pfeilOben3, posX2, posY4, pU, pU);
posX2+=75;
}
}
void starten() {
if (mousePressed &&mouseX > 250 && 450 > mouseX && mouseY > 350 && 450 > mouseY) {
start=true;
background(255);
}
}
void mousePressed() {
if (dist (mouseX, mouseY, 62.5, 230) <17.5 && start == true) {
if (hautzaehler < 4) {
hautzaehler++;
} else if (hautzaehler == 4) {
hautzaehler = 0;
}
}
if (dist (mouseX, mouseY, 137.5, 230) < 17.5 && start ==true) {
if (gesichtzaehler < 7) {
gesichtzaehler++;
} else if (gesichtzaehler==7) {
gesichtzaehler=0;
}
}
if (dist (mouseX, mouseY, 212.5, 230) < 17.5 && start ==true) {
if (blushzaehler < 2) {
blushzaehler++;
} else if (blushzaehler==2) {
blushzaehler=0;
}
}
}

2

background (255); should be the first line in draw()

It deletes everything.

Then draw everything you need: arrows, skin etc.

3

if I use it after draw nothing else but the background will be shown.

4

Hi

In this video you can see image array and background effects

5

Background must be the 1st line in draw()

6

Hello @Katharina ,

Please format your code as per instructions here:
FAQ - Processing Foundation

I tinkered with your code and replaced images with shapes so I could see what it was doing:

Click here to see code! 
boolean start= false; //StartBildschirm
boolean load1TimeStartFalse = true;
boolean load1TimeStartTrue = true;
//PImage menu;//Menübildschirm
//PImage pfeilOben1;
//PImage pfeilOben2;
//PImage pfeilOben3;
//PImage pfeilOben4;
int pU= 35; //Umfang Pfeil
int posY1= 230; // Pfeil Y Position 1 Reihe
int posY2= 340; // Pfeil Y Position 2 Reihe
int posY3= 450; //Pfeil Y Position 3 Reihe
int posY4= 550; //Pfeil Y Position 4 Reihe
float posX=62.5;
float posX2=62.5; //Pfeil X Position Links 2 for schleife
int pfeil; //Variable für for Schleife1
int pfeil2; //Variable für for Schleife2
int hautzaehler=0;
int gesichtzaehler=0;
int blushzaehler=0;
//PImage startBildschirm;
//PImage clickbarStartbildschirm;
//PImage clickToStartText;
//PImage titel;
//PImage leer;
//PImage base;
//PImage haut1;
//PImage haut2;
//PImage haut3;
//PImage haut4;
//PImage[] haut;
//PImage blush1;
//PImage blush2;
//PImage[] blush;
//PImage Gesicht1;
//PImage Gesicht2;
//PImage Gesicht3;
//PImage Gesicht4;
//PImage Gesicht5;
//PImage Gesicht6;
//PImage Gesicht7;
//PImage Gesicht8;
//PImage[] gesicht;
//PImage haar1;
//PImage haar2;
//PImage haar3;
//PImage haar4;
//PImage haar5;
//PImage haar6;
//PImage haar7;
//PImage haar8;
//PImage[] haar;
//PImage hintergrund1;
//PImage hintergrund2;
//PImage hintergrund3;
//PImage hintergrund4;
//PImage hintergrund5;
//PImage hintergrund6;
//PImage[] hintergrund;
void setup() {
  size(800, 600);
  //menu= loadImage("AuswahlMenu.png");
  //pfeilOben1 = loadImage("PfeilOben.png");
  //pfeilOben2 = loadImage("PfeilOben.png");
  //pfeilOben3 = loadImage("PfeilOben.png");
  //pfeilOben4 = loadImage("PfeilOben.png");
  //startBildschirm= loadImage("StartBildschirm.png");
  //clickbarStartbildschirm= loadImage("ClickbarStartbildschirm.png");
  //clickToStartText= loadImage("ClickToStartText.png");
  //titel= loadImage("Titel.png");
  //haut= new PImage[5];//
  //haut[0]= loadImage("Base.png");
  //haut[1]= loadImage("Haut1.png");
  //haut[2]= loadImage("Haut2.png");
  //haut[3]= loadImage("Haut3.png");
  //haut[4]= loadImage("Haut4.png");
  //gesicht= new PImage[8];
  //gesicht[0]= loadImage("Gesicht1.png");
  //gesicht[1]= loadImage("Gesicht2.png");
  //gesicht[2]= loadImage("Gesicht3.png");
  //gesicht[3]= loadImage("Gesicht4.png");
  //gesicht[4]= loadImage("Gesicht5.png");
  //gesicht[5]= loadImage("Gesicht6.png");
  //gesicht[6]= loadImage("Gesicht7.png");
  //gesicht[7]= loadImage("Gesicht8.png");
  //blush= new PImage[3];
  //blush[0]= loadImage("leer.png");
  //blush[1]= loadImage("Blush1.png");
  //blush[2]= loadImage("Blush2.png");
}
void draw() {
  
  if (start==false) {
    //imageMode(CENTER);
    //if (load1TimeStartFalse == true) {
    //  image(startBildschirm, width/2, height/2, width, height);
    //  image(titel, 405, 350, 700, 700);
    //  rect(250, 350, 300, 100);
    //  image(clickToStartText, 405, 310, 650, 600);
    //}
    //load1TimeStartFalse = false;
    //starten();
    //!!Fehlt: knopf programmieren
    println("Hit any key to start!");
  }
  
  if (start==true) {
    //Hintergrund fehlt
    //imageMode(CORNER);
    //image(haut[hautzaehler], 280, 0, 600, 600);//Haut
    rectMode(CORNER);
    fill(hautzaehler*255/4);
    rect(280, 0, 600, 600);
    //image(gesicht[gesichtzaehler], 280, 0, 600, 600);//Gesicht
    fill(gesichtzaehler*255/7);
    rect(280, 0, 600, 500);
    //image(blush[blushzaehler], 280, 0, 600, 600);
    fill(blushzaehler*255/2);
    rect(280, 0, 600, 400);
    
    if (load1TimeStartTrue == true) {
      //image(menu, 0, 0, 800, 600);//Menü
      fill(255);
      rect(0, 0, 800, 600);
      load1TimeStartTrue = false;
    }
    pfeileErstellen1und2und3Reihe();
    pfeileErstellen3Reihe();
  }
}

void pfeileErstellen1und2und3Reihe() {
  for (int i= 0; pfeil<5; pfeil++) {//Pfeil ++ damit es sich nur einmal wiederholt
    //imageMode(CENTER);
    fill(255, 0, 0);
    //image(pfeilOben1, posX, posY1, pU, pU);
    circle(posX, posY1, pU);
    //image(pfeilOben2, posX, posY2, pU, pU);
    circle(posX, posY2, pU);
    //image(pfeilOben3, posX, posY3, pU, pU);
    circle(posX, posY3, pU);
    posX+=75;
  }
}

void pfeileErstellen3Reihe() {
  for (int i= 0; pfeil2<3; pfeil2++) {//Pfeil ++ damit es sich nur einmal wiederholt
    imageMode(CENTER);
    //image(pfeilOben3, posX2, posY4, pU, pU);
    fill(0, 255, 0);
    circle(posX2, posY4, pU);
    posX2+=75;
  }
}

void starten() {
  if (mousePressed &&mouseX > 250 && 450 > mouseX && mouseY > 350 && 450 > mouseY) {
    start=true;
    background(255);
  }
}

//Replaces above
void keyPressed()
  {
  background(0);
  
  //Initialize everything
  start = true;
  load1TimeStartTrue = true;
  posY2= 340; // Pfeil Y Position 2 Reihe
  posY3= 450; //Pfeil Y Position 3 Reihe
  posY4= 550; //Pfeil Y Position 4 Reihe
  posX=62.5;
  posX2=62.5; //Pfeil X Position Links 2 for schleife
  pfeil = 0; //Variable für for Schleife1
  pfeil2 = 0; //Variable für for Schleife2
  hautzaehler=0;
  gesichtzaehler=0;
  blushzaehler=0;
  }

void mousePressed() {
  if (dist (mouseX, mouseY, 62.5, 230) <17.5 && start == true) {
    println("Over 1");
    if (hautzaehler < 4) {
      hautzaehler++;
    } else if (hautzaehler == 4) {
      hautzaehler = 0;
    }
  println(hautzaehler);  
  }

  if (dist (mouseX, mouseY, 137.5, 230) < 17.5 && start ==true) {
    println("Over 2");
    if (gesichtzaehler < 7) {
      gesichtzaehler++;
    } else if (gesichtzaehler==7) {
      gesichtzaehler=0;
    }
  println(gesichtzaehler);   
  }

  if (dist (mouseX, mouseY, 212.5, 230) < 17.5 && start ==true) {
    println("Over 3");
    if (blushzaehler < 2) {
      blushzaehler++;
    } else if (blushzaehler==2) {
      blushzaehler=0;
    }
  println(blushzaehler);
  }
}

I used keyPressed() to reset all the variables and color changes for mousePressed() over button.

I also added some println() statements to see what was going on.

Take another look at your for() loops and the reference for these:

Do your images have some transparency in them?

I made the rectangles in right 1/2 (replaced images) in my edit smaller in height to see color changes since they were overlaying on top of other images and not visible.

Keep at it!

:)