# Display images randomly by clicking
**URL:** https://discourse.processing.org/t/display-images-randomly-by-clicking/17380
**Category:** Coding Questions
**Created:** [January 27, 2020, 6:46pm UTC](https://discourse.processing.org/t/display-images-randomly-by-clicking/17380 "2020-01-27T18:46:37Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@nicolas](https://discourse.processing.org/u/nicolas)
#### Post date: [January 27, 2020, 6:46pm UTC](https://discourse.processing.org/t/display-images-randomly-by-clicking/17380/1 "2020-01-27T18:46:37Z")
Hello,
I’m trying to display images (10 or more) randomly when you click on the canvas. At the moment there is only one image displayed, and I don’t know how to proceed for the rest. Should I use `img();` or `createImg();` ?
Here is my code: [https://editor.p5js.org/NicolasTilly/sketches/dZUpAB3rd](https://editor.p5js.org/NicolasTilly/sketches/dZUpAB3rd)
Thanks for your help.
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [January 27, 2020, 7:04pm UTC](https://discourse.processing.org/t/display-images-randomly-by-clicking/17380/2 "2020-01-27T19:04:30Z")
Although it’s for Processing’s Java Mode, this article about arrays is very relevant for your code: 👼
- [Forum.Processing.org/two/discussion/8082/from-several-variables-to-arrays](http://Forum.Processing.org/two/discussion/8082/from-several-variables-to-arrays)
---
### Author:  [@nicolas](https://discourse.processing.org/u/nicolas)
#### Post date: [January 27, 2020, 8:32pm UTC](https://discourse.processing.org/t/display-images-randomly-by-clicking/17380/3 "2020-01-27T20:32:25Z")
I changed my code 🙂
```auto
let imgs = [];
function preload() {
for (var i = 1; i < 10; i++) {
imgs[i] = loadImage("assets/img_" + i + ".png");
}
}
```
but displaying a random image at the click doesn’t work yet.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 27, 2020, 8:41pm UTC](https://discourse.processing.org/t/display-images-randomly-by-clicking/17380/4 "2020-01-27T20:41:29Z")
In function mousePressed assign a random value to index and say image(imgs[index], mouseX,mouseY);
---
### Author:  [@nicolas](https://discourse.processing.org/u/nicolas)
#### Post date: [January 27, 2020, 8:58pm UTC](https://discourse.processing.org/t/display-images-randomly-by-clicking/17380/5 "2020-01-27T20:58:41Z")
something like that?
```auto
function mouseClicked() {
var index = random([0,1,2,3,4,5,6,7,8,9]);
image(imgs[index], mouseX, mouseY, 200, 360);
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 27, 2020, 9:01pm UTC](https://discourse.processing.org/t/display-images-randomly-by-clicking/17380/6 "2020-01-27T21:01:45Z")
var index=int(random(9));
---
### Author:  [@nicolas](https://discourse.processing.org/u/nicolas)
#### Post date: [January 27, 2020, 9:14pm UTC](https://discourse.processing.org/t/display-images-randomly-by-clicking/17380/7 "2020-01-27T21:14:49Z")
Thank you! It’s working!
The result: [https://editor.p5js.org/NicolasTilly/full/dZUpAB3rd](https://editor.p5js.org/NicolasTilly/full/dZUpAB3rd)
And the code:
```auto
let imgs = [];
function preload() {
for (var i = 0; i < 10; i++) {
imgs[i] = loadImage("assets/img_" + i + ".png");
}
}
function setup() {
createCanvas(windowWidth, windowHeight);
background(245);
imageMode(CENTER);
}
function mouseClicked() {
var index=int(random(9));
image(imgs[index], mouseX, mouseY, 200, 360);
}
function draw() {
}
function keyTyped() {
if (key === 'a') {
clear();
}
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 27, 2020, 9:17pm UTC](https://discourse.processing.org/t/display-images-randomly-by-clicking/17380/8 "2020-01-27T21:17:55Z")
not sure whether image #9 appears though?
---
### Author:  [@nicolas](https://discourse.processing.org/u/nicolas)
#### Post date: [January 27, 2020, 9:21pm UTC](https://discourse.processing.org/t/display-images-randomly-by-clicking/17380/9 "2020-01-27T21:21:17Z")
you’re right, the image #9 doesn’t appears 😕
And it’s very strange because, the code working on the editor, but in present mode the images do not load… The error in the console: “Failed to load resource: the server responded with a status of 404 ()”
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 27, 2020, 9:22pm UTC](https://discourse.processing.org/t/display-images-randomly-by-clicking/17380/10 "2020-01-27T21:22:20Z")
> [@nicolas](#):
>
> you’re right, the image #9 doesn’t appears 😕
I think use random with 10 as parameter
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 27, 2020, 9:23pm UTC](https://discourse.processing.org/t/display-images-randomly-by-clicking/17380/11 "2020-01-27T21:23:44Z")
> [@nicolas](#):
>
> The error in the console: “Failed to load resource: the server responded with a status of 404 ()”
I don’t know. Did you upload the images as ressources?