pictures in a grid placed with random

GeromineP

Hello! For a project, I would like to do do a pattern with a system like this one, composed by differents pictures placed with random into a grid. How could I do it simply? With my own little pictures, to do my interactive pattern ? Thanks very very very much! I just begin with processing. Sorry for my english... :S

KevinWorkman

Either option would work fine. What happened when you put together a little example to test out each approach? Which did you like better?

TfGuy44

Each image will need a PImage variable to store the image so you can use it.

Each image will need to be loaded into its variable with loadImage().

You will a 2D array to remember which image is in which position.

The 2D array only needs to store numbers, because you can enumerate your images.

You will need two loops to put random numbers into this 2D array.

Then you will also need two loops to draw the images.

At each position, loop at the number in the 2D array at the matching position.

Then find the image associated with that number, and draw it at that position.

Attempt this yourself now and post the code of your attempt for more help.

GeromineP

Ok! I'm going to try it by this way. Thank you!

jeremydouglass

One extra thing to notice -- in your example, the images aren't just being randomly selected -- they are also sometimes being rotated 90, 180, or 270 degrees.

GeromineP

Hello. Thanks for you answers. I have a problem I don't understand now. I'm lost... When I launch the code, there are just 3 pictures which randomly appear (the 07, 03, and 01). But I have 7 pictures.. I dont know what I have to put into the "[]" after "myImageArray" for the 04, 05, and 06.

Thanks for your help! :')

THE CODE :

PImage[] myImageArray = new PImage[3];

void setup() { colorMode(RGB); size(1888, 944);

myImageArray[0] = loadImage("chiffre-07.png"); myImageArray[1] = loadImage("chiffre-01.png"); myImageArray[2] = loadImage("chiffre-03.png"); myImageArray[3] = loadImage("chiffre-04.png"); myImageArray[4] = loadImage("chiffre-05.png"); myImageArray[5] = loadImage("chiffre-06.png");

noLoop(); }

void draw() { //background(255, 204, 0);

image(myImageArray[(int)random(myImageArray.length)], 0, 0); image(myImageArray[(int)random(myImageArray.length)], 236, 0); image(myImageArray[(int)random(myImageArray.length)], 472, 0); image(myImageArray[(int)random(myImageArray.length)], 708, 0); image(myImageArray[(int)random(myImageArray.length)], 944, 0); image(myImageArray[(int)random(myImageArray.length)], 1180, 0); image(myImageArray[(int)random(myImageArray.length)], 1416, 0); image(myImageArray[(int)random(myImageArray.length)], 1652, 0);

image(myImageArray[(int)random(myImageArray.length)], 0, 236); image(myImageArray[(int)random(myImageArray.length)], 236, 236); image(myImageArray[(int)random(myImageArray.length)], 472, 236); image(myImageArray[(int)random(myImageArray.length)], 708, 236); image(myImageArray[(int)random(myImageArray.length)], 944, 236); image(myImageArray[(int)random(myImageArray.length)], 1180, 236); image(myImageArray[(int)random(myImageArray.length)], 1416, 236); image(myImageArray[(int)random(myImageArray.length)], 1652, 236);

image(myImageArray[(int)random(myImageArray.length)], 0, 472); image(myImageArray[(int)random(myImageArray.length)], 236, 472); image(myImageArray[(int)random(myImageArray.length)], 472, 472); image(myImageArray[(int)random(myImageArray.length)], 708, 472); image(myImageArray[(int)random(myImageArray.length)], 944, 472); image(myImageArray[(int)random(myImageArray.length)], 1180, 472); image(myImageArray[(int)random(myImageArray.length)], 1416, 472); image(myImageArray[(int)random(myImageArray.length)], 1652, 472);

image(myImageArray[(int)random(myImageArray.length)], 0, 708); image(myImageArray[(int)random(myImageArray.length)], 236, 708); image(myImageArray[(int)random(myImageArray.length)], 472, 708); image(myImageArray[(int)random(myImageArray.length)], 708, 708); image(myImageArray[(int)random(myImageArray.length)], 944, 708); image(myImageArray[(int)random(myImageArray.length)], 1180, 708); image(myImageArray[(int)random(myImageArray.length)], 1416, 708); image(myImageArray[(int)random(myImageArray.length)], 1652, 708); }

void mousePressed() { redraw(); }

jeremydouglass

First, format the code in your post for the forum.

https://forum.processing.org/two/discussion/15473/how-to-format-code-and-text

Then, convert all that repetitive code in draw into two nested for loops with a single image call.

GeromineP

Thanks. But I really don't understand how to convert the code in draw into two nested loops with a single image call..

KevinWorkman

Start smaller. Can you show a single image in a grid? Expand that to two images. Work your way forward in small steps. Which part of this is giving you trouble? Which line of code is behaving differently from what you expected?

GeromineP

Oh! It works now! Wow! :D Now I have to make them rotate. Thank you