Random Image Generation + Random Rotation

Processing Coding Questions
1

Hi, I have generated a bit of code whereby a random image, selected from my array, appears on screen where the user clicked. It currently is working but need the images that appear to randomly rotate (around the centre point). Any help would be greatly appreciated!

(I have a uni deadline coming up soon!)

(would love for these images to be able to be moved and dragged around the page too, but think it could be quite complex?)

Hope this makes sense!

PImage [] rubbish = new PImage[21];
int index = 0;
Names[] name = new Names[rubbish.length];

void setup(){
  size(1000,600);
  
  smooth();
  frameRate(3);
  
  rubbish[0] = loadImage("porridge.png");
  rubbish[1] = loadImage("bread 1.png");
  rubbish[2] = loadImage("biscuits.png");
  rubbish[3] = loadImage("bread 2.png");
  rubbish[4] = loadImage("black plastic.png");
  rubbish[5] = loadImage("bottle.png");
  rubbish[6] = loadImage("biscuits 2.png");
  rubbish[7] = loadImage("apple juice.png");
  rubbish[8] = loadImage("hot cross buns.png");
  rubbish[9] = loadImage("choccy.png");
  rubbish[10] = loadImage("coffee.png");
  rubbish[11] = loadImage("falafel.png");
  rubbish[12] = loadImage("cranberry.png");
  rubbish[13] = loadImage("muffins.png");
  rubbish[14] = loadImage("pasta.png");
  rubbish[15] = loadImage("rice packet.png");
  rubbish[16] = loadImage("shampoo.png");
  rubbish[17] = loadImage("strawberries.png");
  rubbish[18] = loadImage("toilet roll.png");
  rubbish[19] = loadImage("rice packet.png");
  rubbish[20] = loadImage("wrap packet.png");
 
  for(int i = 0; i < rubbish.length; i++){
    name[i] = new Names(rubbish[i]);

  }
}


void mousePressed(){
  index = int(random(0,rubbish.length));
  name[index].display();
  println(index);
}

class Names{
  
 PImage img;
 
 Names(PImage tempImg){
   img = tempImg;
 }
 
 void display(){
   stroke(0);
   imageMode(CENTER);
   img.resize(300,200);
   image(img,mouseX,mouseY);
 }
}
1 Like
2

Right now you draw the image with this line:

image(img, mouseX, mouseY);

This is okay, but what you really want to do it move the point (0,0) to (mouseX, mouseY) first (that is, use translate() to move the origin of the coordinate system), and then rotate some random amount so when you draw the image, it is drawn rotated (using rotate(), which rotates the X and Y axis about the origin).

Of course, before you do these transformations, you will want to save the original position and rotation of the un-moved, un-rotated origin with a call to pushMatrix().

And after you have moved it, you will want to restore it with a call to popMatrix().

You can search in the Reference for how these four functions work.

As this is a homework assignment, post the code of your attempt for more help.

1 Like
3

Thanks,

have attempted to change the point (0,0) to (mouseX,mouseY) but nothing seems to have changed? Feel like I’m potentially almost there but can’t figure out what’s wrong.

PImage [] rubbish = new PImage[21];
int index = 0;
Names[] name = new Names[rubbish.length];

void setup(){
  size(1000,600);
  
  smooth();
  frameRate(3);
  
  rubbish[0] = loadImage("porridge.png");
  rubbish[1] = loadImage("bread 1.png");
  rubbish[2] = loadImage("biscuits.png");
  rubbish[3] = loadImage("bread 2.png");
  rubbish[4] = loadImage("black plastic.png");
  rubbish[5] = loadImage("bottle.png");
  rubbish[6] = loadImage("biscuits 2.png");
  rubbish[7] = loadImage("apple juice.png");
  rubbish[8] = loadImage("hot cross buns.png");
  rubbish[9] = loadImage("choccy.png");
  rubbish[10] = loadImage("coffee.png");
  rubbish[11] = loadImage("falafel.png");
  rubbish[12] = loadImage("cranberry.png");
  rubbish[13] = loadImage("muffins.png");
  rubbish[14] = loadImage("pasta.png");
  rubbish[15] = loadImage("rice packet.png");
  rubbish[16] = loadImage("shampoo.png");
  rubbish[17] = loadImage("strawberries.png");
  rubbish[18] = loadImage("toilet roll.png");
  rubbish[19] = loadImage("rice packet.png");
  rubbish[20] = loadImage("wrap packet.png");
 
  for(int i = 0; i < rubbish.length; i++){
    name[i] = new Names(rubbish[i]);

  }
}

void draw (){

}


void mousePressed(){
  index = int(random(0,rubbish.length));
  name[index].display();
  println(index);
}

class Names{
  
 PImage img;
 
 Names(PImage tempImg){
   img = tempImg;
 }
 
void display(){
 
 stroke(0);
 imageMode(CENTER);
 img.resize(300,200); 
 image(img,mouseX,mouseY);
 
pushMatrix();
 
translate (mouseX,mouseY);
rotate(int(random(0,2)));
 
popMatrix();
   
 
}
}
4

Hello @GDlauren20!

Two issues pop out:

  1. The order of when lines are called is important, and
  2. The concept of what translate(mouseX, mouseY) is doing in relation to image(img, mouseX, mouseY) 
image(img,mouseX,mouseY);
pushMatrix();
translate (mouseX, mouseY);
rotate(int(random(0,2)));
popMatrix();

Should be:

pushMatrix();
image(img, 0, 0);
translate (mouseX, mouseY);
rotate(int(random(0,2)));
popMatrix();

Take a look at the examples in the reference here for translate:
https://processing.org/reference/translate_.html

and here for pushMatrix:
https://processing.org/reference/pushMatrix_.html

Also the text tutorial on 2D Transformations is excellent in explaining how it all works under the hood:
https://processing.org/tutorials/transform2d/

AND, re-read @TfGuy44’s post. He laid out all the steps. Plus the reference clearly explains this too…

:nerd_face:

5

Hello @GDlauren20!

My apologies for previous post and if it caused an confusion!! My solution was not correct.
I revisited the code and loaded a couple of my own images and ran the new code to make sure this is the proper approach.

Try this below (and still read the reference links for further understanding about what is happening in terms of concepts and flow):

pushMatrix();
translate (mouseX, mouseY);
imageMode(CENTER);
img.resize(200, 150);
rotate(int(random(90)));
image(img, 0, 0);
popMatrix();

:nerd_face: