# My pictures in array don't disappear, they overlap

**URL:** <https://discourse.processing.org/t/my-pictures-in-array-dont-disappear-they-overlap/37020>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [May 22, 2022, 1:45pm UTC](https://discourse.processing.org/t/my-pictures-in-array-dont-disappear-they-overlap/37020 "2022-05-22T13:45:22Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Katharina](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@Katharina](https://discourse.processing.org/u/Katharina)\
**Post date:** [May 22, 2022, 1:45pm UTC](https://discourse.processing.org/t/my-pictures-in-array-dont-disappear-they-overlap/37020/1 "2022-05-22T13:45:22Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/5/d5981406953dd9839715294abd4d4782ec9d7f53.jpeg)

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 22, 2022, 3:02pm UTC](https://discourse.processing.org/t/my-pictures-in-array-dont-disappear-they-overlap/37020/2 "2022-05-22T15:02:13Z")

</div>

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

It deletes everything.

Then draw everything you need: arrows, skin etc.

---

<div class="post-metadata">

**Author:** ![Katharina](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@Katharina](https://discourse.processing.org/u/Katharina)\
**Post date:** [May 22, 2022, 3:07pm UTC](https://discourse.processing.org/t/my-pictures-in-array-dont-disappear-they-overlap/37020/3 "2022-05-22T15:07:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 22, 2022, 4:48pm UTC](https://discourse.processing.org/t/my-pictures-in-array-dont-disappear-they-overlap/37020/4 "2022-05-22T16:48:55Z")

</div>

Hi

In this video you can see image array and background effects

[![](https://img.youtube.com/vi/xlLShhnzA14/maxresdefault.jpg "Processing Tutorial: Arrays and Images") ](https://www.youtube.com/watch?v=xlLShhnzA14&t=14s)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 22, 2022, 10:04pm UTC](https://discourse.processing.org/t/my-pictures-in-array-dont-disappear-they-overlap/37020/5 "2022-05-22T22:04:06Z")

</div>

> [@Katharina](#):
>
> use it after draw nothing else but the background will be shown.

Background must be the 1st line in draw()

---

<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:** [May 22, 2022, 10:12pm UTC](https://discourse.processing.org/t/my-pictures-in-array-dont-disappear-they-overlap/37020/6 "2022-05-22T22:12:39Z")

</div>

Hello @Katharina ,

Please format your code as per instructions here:  
[FAQ - Processing Foundation](https://discourse.processing.org/faq#format-your-code)

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

> **Click here to see code!**
>
> ```auto
> 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:

> **[for / Reference](https://processing.org/reference/for.html)**
>
> Controls a sequence of repetitions. A basic for structure has three parts: init, test, and update. Each part must be separated by a semicolon (;). The loop continues until …

> [@Katharina](#):
>
> Meaning when I click the button “blush” or “Gesicht” the blush or face from the previous option can still be seen.

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!

`:)`