# Pictures in for loop disappear when using other command(redraw();)

**URL:** <https://discourse.processing.org/t/pictures-in-for-loop-disappear-when-using-other-command-redraw/37000>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [May 21, 2022, 2:08pm UTC](https://discourse.processing.org/t/pictures-in-for-loop-disappear-when-using-other-command-redraw/37000 "2022-05-21T14:08:21Z")\
**Posts on this page:** 2\
**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 21, 2022, 2:08pm UTC](https://discourse.processing.org/t/pictures-in-for-loop-disappear-when-using-other-command-redraw/37000/1 "2022-05-21T14:08:21Z")

</div>

Before giving the Problem + code let me tell you my Programm. Im trying to create a dress up game for my schoolwork. You click on a bar and the game starts. I’ve created 3 lines of arrows (pfeil) for that: \<–(left) and --\>(right) using for loops.(but that’s not imporant) My goal for now is that when I click on the right arrow in the first row the body color changes. I’ve created an array full of pictures for that named “haut”. I got help for that but when I coded that if mousePressed the “haut” changes the picture to a different skintone the arrows that I made using for loops disappear.  
The menu Is a bigger picture and when I press the mouse the menu is overlaying the arrows which make them disappear.  
It’s probably because of the redraw(); command but I don’t know how to fix it.

The Problem is at the very end of the code

> PImage pfeilRechts1Reihe;  
> PImage pfeilLinks1Reihe;  
> PImage pfeilRechts2Reihe;  
> PImage pfeilLinks2Reihe;  
> PImage pfeilRechts3Reihe;  
> PImage pfeilLinks3Reihe;  
> PImage pfeilRechts4Reihe;  
> PImage pfeilLinks4Reihe;  
> int pU= 35;  
> int posYErsteReihe= 230;  
> int posYZweiteReihe= 340;  
> int posYDritteReihe= 450;  
> int posYVierteReihe= 550;  
> int posXRechts1=80;  
> int posXLinks1=45;  
> int posXRechts2=80;  
> int posXLinks2=45;  
> int pfeil;  
> int pfeil2;  
> int hautzaehler=0;  
> PImage base;  
> PImage haut1;  
> PImage haut2;  
> PImage haut3;  
> PImage haut4;  
> PImage haut;  
> void setup() { //loading Images  
> size(800, 600);  
> menu= loadImage(“AuswahlMenu.png”);  
> pfeilLinks1Reihe= loadImage(“PfeilLinks.png”);// Pfeile\<  
> pfeilRechts1Reihe= loadImage(“PfeilRechts.png”);  
> pfeilLinks2Reihe= loadImage(“PfeilLinks.png”);  
> pfeilRechts2Reihe= loadImage(“PfeilRechts.png”);  
> pfeilLinks3Reihe= loadImage(“PfeilLinks.png”);  
> pfeilRechts3Reihe= loadImage(“PfeilRechts.png”);  
> pfeilLinks4Reihe= loadImage(“PfeilLinks.png”);  
> pfeilRechts4Reihe= loadImage(“PfeilRechts.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”);  
> }  
> void draw() {  
> imageMode(CORNER);  
> image(haut[hautzaehler], 280, 00, 600, 600);//Haut  
> image(menu, 0, 0, 800, 600);  
> pfeileErstellen1Und2Reihe(); //function for the first an second row of arrows  
> pfeileErstellen3Reihe(); //function for the third row of arrows  
> }  
> void pfeileErstellen1Und2Reihe() {  
> for (int i= 0; pfeil\<5; pfeil++) { //using pfeil so it will only repeat once  
> imageMode(CENTER);  
> image(pfeilLinks1Reihe, posXLinks1, posYErsteReihe, pU, pU);  
> image(pfeilRechts1Reihe, posXRechts1, posYErsteReihe, pU, pU);  
> image(pfeilLinks2Reihe, posXLinks1, posYZweiteReihe, pU, pU);  
> image(pfeilRechts2Reihe, posXRechts1, posYZweiteReihe, pU, pU);  
> image(pfeilLinks3Reihe, posXLinks1, posYDritteReihe, pU, pU);  
> image(pfeilRechts3Reihe, posXRechts1, posYDritteReihe, pU, pU);  
> posXRechts1+=75;  
> posXLinks1+=75;  
> noLoop(); //So the loop won’t repeat and only 10 arrows appear  
> }  
> }  
> void pfeileErstellen3Reihe() {  
> for (int i= 0; pfeil2\<3; pfeil2++) {  
> imageMode(CENTER);  
> image(pfeilRechts4Reihe, posXRechts2, posYVierteReihe, pU, pU);  
> image(pfeilLinks4Reihe, posXLinks2, posYVierteReihe, pU, pU);  
> posXRechts2+=75;  
> posXLinks2+=75;  
> noLoop();  
> }  
> }  
> }  
> void mousePressed() { //HERE’S THE PROBLEM:  
> if (dist (mouseX, mouseY, 45, 230) \<35) {  
> hautzaehler= (hautzaehler +1) % haut.length;  
> redraw();  
> }  
> }

---

<div class="post-metadata">

**Author:** ![NumericPrime](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/numericprime/32/16318_2.png) [@NumericPrime](https://discourse.processing.org/u/NumericPrime)\
**Post date:** [May 21, 2022, 2:20pm UTC](https://discourse.processing.org/t/pictures-in-for-loop-disappear-when-using-other-command-redraw/37000/2 "2022-05-21T14:20:56Z")

</div>

I was about to respond earlier but then you deleted the thread…

I found the following problems:

- The loops that paint the arrows don't seem to reset `posXRechts2` and `posYRechts2` This has the effect that once the method is called the second/third time the arrows are off the screen
- If you look at the menu: Once you press the start button you start is set from false to true and in the same frame the methods are used
- when noLoop() is called draw actually gets executed once more. (I think...) so the methods that move the arrows are called once more.

How to solve these problems:

- reset the arrow position at the end of `pfeileErstellen3Reihe` and `pfeileErstellen1Und2Reihe`
- replace

```auto
if(start==true) {

```

with

```auto
else {

```

I hope this solves your problem.