Random Image Array Generator- 2 images on screen

Programming Questions

jessica_6..

Random Image Array Generator- 2 images on screen

in Programming Questions • 1 year ago

Hello! I have 20 pictures and I would like to randomly place 2 at a time on the screen next to each other. (possibly using a mouse click to change the pictures). Is it possible to randomly place two pictures next to each other? I have read another similar forum and it has helped me to get this far.

---Aside note: My pictures are 300x450 so I set my stage to 600x450 to allow for two pictures. Is this correct?

PImage[] myImageArray = new PImage[22];

void setup() {

size(600,450);

background(10,10,10);

smooth();

}

void draw() {

imageMode (CENTER);

for (int i=0; i < myImageArray.length; i++) {

myImageArray [0] = loadImage( "boat.jpg");

myImageArray [1] = loadImage( "boy.jpg");

myImageArray [2] = loadImage( "chicken.jpg");

myImageArray [3] = loadImage( "cross.jpg");

myImageArray [4] = loadImage( "dierks.jpg");

myImageArray [4] = loadImage( "drink.jpg");

myImageArray [5] = loadImage( "eye.jpg");

myImageArray [6] = loadImage( "fish.jpg");

myImageArray [7] = loadImage( "flag.jpg");

myImageArray [8] = loadImage( "food.jpg");

myImageArray [9] = loadImage( "girl.jpg");

myImageArray [10] = loadImage( "golf.jpg");

myImageArray [11] = loadImage( "hawaii.jpg");

myImageArray [12] = loadImage( "hole.jpg");

myImageArray [13] = loadImage( "mail.jpg");

myImageArray [14] = loadImage( "mexico.jpg");

myImageArray [15] = loadImage( "pole.jpg");

myImageArray [16] = loadImage( "rose.jpg");

myImageArray [17] = loadImage( "sign.jpg");

myImageArray [18] = loadImage( "surf.jpg");

myImageArray [19] = loadImage( "underside.jpg");

myImageArray [20] = loadImage( "weeds.jpg");

}

void mousePressed(){

image(myImageArray[(int)random(20)],width/4,height/2);

image(myImageArray[(int)random(20)],width-width/4,height/2);

}

-When I run it I just get a black screen with no errors. Is something in this wrong?

Thank You!!!

Replies(6)

calsign

Re: Random Image Array Generator- 2 images on screen

1 year ago

You are loading each of the images every frame...
Put all of the code from draw() inside setup(), and you should get something.

And, your side note: Yes, that is correct, as is your placement for the images, as long as you don't want any padding around the images...

amnon.owed

Re: Random Image Array Generator- 2 images on screen

1 year ago

A couple of things:

There are 21 images in your array (0 to 20).
Don't put the manual loading of the images inside a for loop.
Do not load images in the draw loop repeatedly. Load them in setup once.
Use myImageArray[10] <= no space! ...instead of myImageArray [10]
It's probably easier to not use imageMode center with normal coordinates (but that is taste).
You could use noLoop() and redraw() to change the images.

Try this...

Adapted Code

PImage[] myImageArray = new PImage[21];
void setup() {
size(600, 450);
myImageArray[0] = loadImage("boat.jpg");
myImageArray[1] = loadImage("boy.jpg");
myImageArray[2] = loadImage("chicken.jpg");
myImageArray[3] = loadImage("cross.jpg");
myImageArray[4] = loadImage("dierks.jpg");
myImageArray[4] = loadImage("drink.jpg");
myImageArray[5] = loadImage("eye.jpg");
myImageArray[6] = loadImage("fish.jpg");
myImageArray[7] = loadImage("flag.jpg");
myImageArray[8] = loadImage("food.jpg");
myImageArray[9] = loadImage("girl.jpg");
myImageArray[10] = loadImage("golf.jpg");
myImageArray[11] = loadImage("hawaii.jpg");
myImageArray[12] = loadImage("hole.jpg");
myImageArray[13] = loadImage("mail.jpg");
myImageArray[14] = loadImage("mexico.jpg");
myImageArray[15] = loadImage("pole.jpg");
myImageArray[16] = loadImage("rose.jpg");
myImageArray[17] = loadImage("sign.jpg");
myImageArray[18] = loadImage("surf.jpg");
myImageArray[19] = loadImage("underside.jpg");
myImageArray[20] = loadImage("weeds.jpg");
noLoop();
}
void draw() {
image(myImageArray[(int)random(myImageArray.length)], 0, 0);
image(myImageArray[(int)random(myImageArray.length)], width/2, 0);
}
void mousePressed() {
redraw();
}

jessica_6..

Re: Random Image Array Generator- 2 images on screen

1 year ago

Thanks for the responses it worked!

My next question is- is there any way to make it so that there is never a duplicate? (i.e. Both pictures on the screen are the same picture)

Also, I want to have a random word placed on the screen during each mouse click. (I would have a bank of words and have processing pick one word to display during each mouse click) Is this possible??

So this makes better sense, the purpose of this project is to show that we automatically make associations between pictures, even if they are completely unrelated. By adding a random word also, we try to make an association between the word and the pictures as well.

calsign

Re: Random Image Array Generator- 2 images on screen

1 year ago

You'd need to generate the numbers beforehand...
Then repetitively test to see if the second one is the same as the first one and regenerate the number if necessary...
For example:

int firstImageNum = (nt) random(0, myImageArray.length);
int secondImageNum = (int) random(0, myImageArray.length);
while(firstImageNum != secondImageNum) secondImageNum = (int) random(0, myImageArray.length);

That should work...

Yes, your second requirement is also possible... similarly to the way you have done the first part.
You'd need the bank of words, probably loaded from a text file with each word on every line... see loadStrings().
Then, just like before, load the words into a String[] and pick a random one as necessary...

jessica_6..

Re: Random Image Array Generator- 2 images on screen

1 year ago

Ok I just made a .csv file in excel with a list of 20 words.

Do I put this under draw();?

String lines[] = loadStrings("data.csv");

println("there are " + lines.length + " lines");

for (int i=0; i < lines.length; i++) {

println(lines[i]);

And is there any way to start showing the words after clicking through about 15 times?? I don't want the words to start right away if that's possible.

Thanks for all of your help, I really appreciate it.

calsign

Re: Random Image Array Generator- 2 images on screen

1 year ago

Create a variable that stores the number of times that the mouse has been clicked...
And every time that the mouse is clicked, increment it by one.

When you test to see if it should display a new word, see if the variable is greater than or equal to fifteen...

Like so:

//Global Code
//Number of clicks
int clickCount = 0;
//mouseClicked() Code
//Increment the number of clicks by one and see if it is greater than or equal to fifteen
if(clickCount ++ >= 15) {
//Display text
}