# Random Image Generation + Random Rotation

**URL:** <https://discourse.processing.org/t/random-image-generation-random-rotation/20372>\
**Category:** Coding Questions\
**Created:** [May 1, 2020, 11:57pm UTC](https://discourse.processing.org/t/random-image-generation-random-rotation/20372 "2020-05-01T23:57:16Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![GDlauren20](https://avatars.discourse-cdn.com/v4/letter/g/b19c9b/32.png) [@GDlauren20](https://discourse.processing.org/u/GDlauren20)\
**Post date:** [May 1, 2020, 11:57pm UTC](https://discourse.processing.org/t/random-image-generation-random-rotation/20372/1 "2020-05-01T23:57:16Z")

</div>

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!

```auto
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);
 }
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [May 2, 2020, 12:23am UTC](https://discourse.processing.org/t/random-image-generation-random-rotation/20372/2 "2020-05-02T00:23:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![GDlauren20](https://avatars.discourse-cdn.com/v4/letter/g/b19c9b/32.png) [@GDlauren20](https://discourse.processing.org/u/GDlauren20)\
**Post date:** [May 2, 2020, 10:53am UTC](https://discourse.processing.org/t/random-image-generation-random-rotation/20372/3 "2020-05-02T10:53:23Z")

</div>

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.

```auto
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();
   
 
}
}

```

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [May 2, 2020, 2:05pm UTC](https://discourse.processing.org/t/random-image-generation-random-rotation/20372/4 "2020-05-02T14:05:55Z")

</div>

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)**

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

```

**Should be:**

```auto
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](https://processing.org/reference/translate_.html)

and here for **pushMatrix** :  
[https://processing.org/reference/pushMatrix\_.html](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/](https://processing.org/tutorials/transform2d/)

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

🤓

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [May 2, 2020, 7:14pm UTC](https://discourse.processing.org/t/random-image-generation-random-rotation/20372/5 "2020-05-02T19:14:10Z")

</div>

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):

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

```

🤓