Grid of circles made with images randomly selected

https://editor.p5js.org/rfcanas/sketches/X-c_v8L9n

Hi! I’m starting a little school project and I’m quite a newbie to Processing. I do not know if I can ask in this forum, but our work if or if we should do it in p5.js. My problem: the little interactivity consists of a 5x5 grid of png round images. There are 4 varieties of “balls”, and I need those varieties to be chosen at the time of execution, so that the 5x5 grid is randomly created by different images, and that not all balls are the same.

If someone can help me I share the link of the code that I have developed so far. My biggest problem is that I manage to embed the images through an array but either the random runs and I keep all the identical balls (because the random was run in the setup and established a result) or if I put it in the DRAW it runs 60 times per second and the balls constantly change image.

I had this exact same issue yesterday!

If you want to slow down how fast the balls are changing, you can do something like this inside draw():

if (Date.now % 17 == 0) {
     //run random functions again, etc.
}

The trick is to only do this function when the time is divisible by a prime number. You can use 107, 1007, etc (larger prime numbers) to slow it down even more.

I hope this helped!

1 Like

thanks but I need them to not change, just be randomly selected at start and stay that way until runned again.

I see - you could try making a random number function like rand(min, max) (the internet can help you with this, you have to make it yourself), using a random number from 1 to 4, and then choosing that from your array of images to fill the circles with.

1 Like

hi! i’ve done exactly that, but when the code runs it changes the image 60 times per second because the rand instruction keeps happening. if I insert the random instruction in the setup portion then all the grid of images looks the same. thanks anyway!

setup() function is the way to go

please show your code so we can check it out