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

p5.js
1

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

1 Like
2

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.

1 Like
3

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