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

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() {
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
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);
noLoop(); //So the loop won’t repeat and only 10 arrows appear
void pfeileErstellen3Reihe() {
for (int i= 0; pfeil2<3; pfeil2++) {
image(pfeilRechts4Reihe, posXRechts2, posYVierteReihe, pU, pU);
image(pfeilLinks4Reihe, posXLinks2, posYVierteReihe, pU, pU);
void mousePressed() { //HERE’S THE PROBLEM:
if (dist (mouseX, mouseY, 45, 230) <35) {
hautzaehler= (hautzaehler +1) % haut.length;

1 Like

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
    if(start==true) {


    else {

I hope this solves your problem.