# Using Pictures in Arrays

**URL:** <https://discourse.processing.org/t/using-pictures-in-arrays/36957>\
**Category:** Beginners\
**Tags:** homework\
**Created:** [May 19, 2022, 7:48am UTC](https://discourse.processing.org/t/using-pictures-in-arrays/36957 "2022-05-19T07:48:11Z")\
**Posts on this page:** 5\
**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 19, 2022, 7:48am UTC](https://discourse.processing.org/t/using-pictures-in-arrays/36957/1 "2022-05-19T07:48:11Z")

</div>

So I have this little problem here. I want to use my pictures that I made with arrays.  
The goal is when you click your mouse the fist picture (array[0]) comes up and when u click again the second picture in array[2] comes up, this goes on until array[4]. I don’t know how to programm it. I wanted to do it with a for loop but it’s not really working. Does any of you have an Idea on how to do it?  
Here’s the code I have so far:

> PImage base;  
> PImage haut1;  
> PImage haut2;  
> PImage haut3;  
> PImage haut4;  
> PImage haut;  
> int hautzaehler;  
> void setup(){  
> 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(){  
> if (mousePressed){  
> haut[hautzaehler];  
> hautzaehler++;

}  
}

>

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 19, 2022, 8:16am UTC](https://discourse.processing.org/t/using-pictures-in-arrays/36957/2 "2022-05-19T08:16:54Z")

</div>

```auto
// ...

void setup() {
  // ...

  noLoop();
  imageMode(CENTER);
}

void draw() {
  // ...

  image(haut[hautzaehler], width >> 1, height >> 0);
}

void mousePressed() {
  hautzaehler = (hautzaehler + 1) % haut.length;
  redraw();
}

```

> **[Reference](https://processing.org/reference/imageMode_.html)**
>
> Modifies the location from which images are drawn by changing the way in which parameters given to image() are interpreted. The default mode is imageMode(CORNER), which inte…

> **[Reference](https://processing.org/reference/mousePressed_.html)**
>
> The mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used to determine which button ha…

> **[Reference](https://processing.org/reference/modulo.html)**
>
> Calculates the remainder when one number is divided by another. For example, when 52.1 is divided by 10, the divisor (10) goes into the dividend (52.1) five times (5 \* 10 == 50), and there is a remain…

> **[Reference](https://processing.org/reference/noLoop_.html)**
>
> Stops Processing from continuously executing the code within draw(). If loop() is called, the code in draw() begin to run continuously again. If using noLoop() in setup(…

> **[Reference](https://processing.org/reference/redraw_.html)**
>
> Executes the code within draw() one time. This functions allows the program to update the display window only when necessary, for example when an event registered by mousePressed() or

---

<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, 11:56am UTC](https://discourse.processing.org/t/using-pictures-in-arrays/36957/3 "2022-05-21T11:56:00Z")

</div>

Thank you for your reply but it’s not really working. I’ve tried it but then when I press my mouse my other pictures I’ve used in a for loop dissapear (I haven’t shared that part of the code). If I use a function and if loop to write your code nothing happens.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 21, 2022, 5:17pm UTC](https://discourse.processing.org/t/using-pictures-in-arrays/36957/4 "2022-05-21T17:17:08Z")

</div>

> [@Katharina](#):
>
> … my other pictures I’ve used in a for loop disappear (I haven’t shared that part of the code).

Do you have more PImage besides those in _haut[]_?

Or is your intention to reveal them 1 by 1 after each **mousePressed()** w/o erasing previous 1s?

---

<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, 12:57pm UTC](https://discourse.processing.org/t/using-pictures-in-arrays/36957/5 "2022-05-22T12:57:57Z")

</div>

I have other Pimages beside the ones in haut[]. I know where the problem was and I could fix it! thank you for your help!