# Cycle Images on Mouse Click P5Js

**URL:** <https://discourse.processing.org/t/cycle-images-on-mouse-click-p5js/29447>\
**Category:** Coding Questions\
**Created:** [April 17, 2021, 1:51pm UTC](https://discourse.processing.org/t/cycle-images-on-mouse-click-p5js/29447 "2021-04-17T13:51:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wiltraveller](https://avatars.discourse-cdn.com/v4/letter/w/858c86/32.png) [@Wiltraveller](https://discourse.processing.org/u/Wiltraveller)\
**Post date:** [April 17, 2021, 1:51pm UTC](https://discourse.processing.org/t/cycle-images-on-mouse-click-p5js/29447/1 "2021-04-17T13:51:37Z")

</div>

```auto
var img1;

var img2;

var img3;

function preload() {

 img1 = loadImage("bckgrnd.png");

 img2 = loadImage("moon.png");

 img3 = loadImage("tuktuk2.png");

}

function setup() {

  createCanvas(windowWidth, windowHeight);/*System variable that stores the width and heigth of the window, 

  it maps to window.innerWidth and window.innerHeight*/

}

function draw() {

 //image(img1, -120, 0);

 background(img1);//set the background image

 image(img2, 700, -50, 700, 700);

 image(img3, 850, 50, 400, 500);

 

}Preformatted text

```

Hi, I wanted to know how to cycle through images on a mouse click event. My idea is to cycle through multiple images whenever the mouse is clicked.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [April 17, 2021, 2:11pm UTC](https://discourse.processing.org/t/cycle-images-on-mouse-click-p5js/29447/2 "2021-04-17T14:11:11Z")

</div>

Hello,

You will need to store your images in an array for this.  
Once it is done, you can have a global variable holding the index of the current image.  
On mouse clicked, you simply increase that index and it will change the image.

Here’s a little example:

```auto
let imgs = [];
let idx;

function setup() {
  createCanvas(windowWidth, windowHeight);
  imgs[0] = 0;
  imgs[1] = 1;
  imgs[2] = 2;
  idx = 0;
}

function draw() {
  background(20);
  fill(220);
  textSize(100);
  text(imgs[idx], windowWidth / 2, windowHeight / 2);
}

function mouseClicked() {
  idx++;
  if (idx > imgs.length - 1) {
    idx = 0;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Wiltraveller](https://avatars.discourse-cdn.com/v4/letter/w/858c86/32.png) [@Wiltraveller](https://discourse.processing.org/u/Wiltraveller)\
**Post date:** [April 17, 2021, 2:14pm UTC](https://discourse.processing.org/t/cycle-images-on-mouse-click-p5js/29447/3 "2021-04-17T14:14:27Z")

</div>

Hi,  
Thank you for your feedback. I am new to P5Js. I guess ‘idx’ stands for index. How do I add images to the array?

Thanks

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 17, 2021, 3:44pm UTC](https://discourse.processing.org/t/cycle-images-on-mouse-click-p5js/29447/4 "2021-04-17T15:44:02Z")

</div>

If you need to know the basics, I recommend to watch some tutorials!

[![](https://img.youtube.com/vi/VIQoUghHSxU/hqdefault.jpg "7.1: What is an array? - p5.js Tutorial") ](https://www.youtube.com/watch?v=VIQoUghHSxU)

---

<div class="post-metadata">

**Author:** ![Wiltraveller](https://avatars.discourse-cdn.com/v4/letter/w/858c86/32.png) [@Wiltraveller](https://discourse.processing.org/u/Wiltraveller)\
**Post date:** [April 17, 2021, 3:50pm UTC](https://discourse.processing.org/t/cycle-images-on-mouse-click-p5js/29447/5 "2021-04-17T15:50:36Z")

</div>

Thanks a lot. This works out.