My pictures in array don't disappear, they overlap

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(){}

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

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

It deletes everything.

Then draw everything you need: arrows, skin etc.

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

Hi

In this video you can see image array and background effects

Background must be the 1st line in draw()

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!

:)