# Trying to load random images from an array into rows and columns

**URL:** <https://discourse.processing.org/t/trying-to-load-random-images-from-an-array-into-rows-and-columns/34950>\
**Category:** p5.js\
**Created:** [February 3, 2022, 4:18am UTC](https://discourse.processing.org/t/trying-to-load-random-images-from-an-array-into-rows-and-columns/34950 "2022-02-03T04:18:29Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rico22](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rico22/32/15611_2.png) [@Rico22](https://discourse.processing.org/u/Rico22)\
**Post date:** [February 3, 2022, 4:18am UTC](https://discourse.processing.org/t/trying-to-load-random-images-from-an-array-into-rows-and-columns/34950/1 "2022-02-03T04:18:29Z")

</div>

Hello! I am new here and this is my first post.

I looked around and wasn’t able to quite find a solution. I am relatively new to coding and am stuck.

I have created a pattern of four squares and have attempted to set up a group of png images that I want to randomly load (one into each square) continuously with a slow frame rate.

I am not sure if how I attempted this is completely incorrect or close to being there and could really use some suggestions. I have tried two different ways with the images and neither will load.

Thank you in advance for your advice.

Here is a link to my sketch: [p5.js Web Editor](https://editor.p5js.org/Rico2022/sketches/aQKiNELzC)

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [February 3, 2022, 4:50am UTC](https://discourse.processing.org/t/trying-to-load-random-images-from-an-array-into-rows-and-columns/34950/2 "2022-02-03T04:50:22Z")

</div>

You are real close. Add this line `image(randImg, c*stepX, r*stepY, stepX, stepY);` right after the line randImg = pics[int(random(0, pics.length))];

Thank you for having the code and images pre-loaded. Makes our job much easier.

---

<div class="post-metadata">

**Author:** ![Rico22](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rico22/32/15611_2.png) [@Rico22](https://discourse.processing.org/u/Rico22)\
**Post date:** [February 3, 2022, 12:49pm UTC](https://discourse.processing.org/t/trying-to-load-random-images-from-an-array-into-rows-and-columns/34950/3 "2022-02-03T12:49:58Z")

</div>

Thank you, Svan! That was exactly what I was missing.

I am still trying to get my head around what is actually happening with the stepX, and stepY variables. Once I am able to better understand that, I will be able to do this!

It took me about a week or so to comfortably read “for (let i = 0; I\>4; i++)” and follow what is going on in it.

Thanks again!  
Rich