# How can i put random images on random position on a grid

**URL:** <https://discourse.processing.org/t/how-can-i-put-random-images-on-random-position-on-a-grid/39525>\
**Category:** Coding Questions\
**Created:** [October 31, 2022, 5:49pm UTC](https://discourse.processing.org/t/how-can-i-put-random-images-on-random-position-on-a-grid/39525 "2022-10-31T17:49:44Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![yoyo](https://avatars.discourse-cdn.com/v4/letter/y/41988e/32.png) [@yoyo](https://discourse.processing.org/u/yoyo)\
**Post date:** [October 31, 2022, 5:49pm UTC](https://discourse.processing.org/t/how-can-i-put-random-images-on-random-position-on-a-grid/39525/1 "2022-10-31T17:49:44Z")

</div>

now I have the image on the grid with a sequence. I want to know how to put the image in a random position.  
Link: [p5.js Web Editor](https://editor.p5js.org/fishball/sketches/K3go1i1tX)

> let imgs = ;
> 
> function preload() {  
> for (let i = 1; i \< 10; i++) {  
> imgs[i] = loadImage(i + “.jpg”);  
> }  
> }
> 
> function setup() {  
> createCanvas(400, 400);  
> background(255);  
> }
> 
> function draw() {  
> let cx = floor(mouseX / (width / 3));  
> let cy = floor(mouseY / (height / 3));  
> for (let x = 0; x \< 3; x++) {  
> for (let y = 0; y \< 3; y++) {  
> for (let z = 1; z \<= x+y\*3+1 ; z++) {  
> rect((x \* width) / 3, (y \* height) / 3, width / 3, height / 3);  
> if (cx == x && cy == y) {  
> image(  
> imgs[z],  
> (x \* width) / 3 + 1,  
> (y \* height) / 3 + 1,  
> width / 3,  
> height / 3  
> );  
> }  
> }  
> }  
> }  
> }

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [November 1, 2022, 12:00pm UTC](https://discourse.processing.org/t/how-can-i-put-random-images-on-random-position-on-a-grid/39525/2 "2022-11-01T12:00:52Z")

</div>

Hi @yoyo,

first I would change the imgs array that way that there are no undefined in it (Arrays start with index 0, so in your approach the element at 0 is undefined as you are starting with 1).  
Afterwards you can use the following function to shuffle it.

> **[reference | p5.js](https://p5js.org/reference/#/p5/shuffle)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

Cheers  
— mnse