# Rotate png in 90 degree

**URL:** <https://discourse.processing.org/t/rotate-png-in-90-degree/22492>\
**Category:** Coding Questions\
**Created:** [July 8, 2020, 11:25pm UTC](https://discourse.processing.org/t/rotate-png-in-90-degree/22492 "2020-07-08T23:25:09Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![aerob](https://avatars.discourse-cdn.com/v4/letter/a/ecd19e/32.png) [@aerob](https://discourse.processing.org/u/aerob)\
**Post date:** [July 8, 2020, 11:25pm UTC](https://discourse.processing.org/t/rotate-png-in-90-degree/22492/1 "2020-07-08T23:25:09Z")

</div>

Hello guys,

I am very short on time and new to processing but i need help on fixing my code. I have a large screen filled with a png. It looks like this:

 ![example](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cb8babdf70e2c87050c29464ed1d76e180a23b72.png)  
my goal is that they all spin every second for random 90-180 or 270 degree around their center. The rotating image is 150x100 pixels large.

The code:

```auto
PImage pim;
float rot=0;
int y=0;
int x=0;

void setup(){
    size (3840,1080);
    frameRate(50);
    background(255);
  pim = loadImage("Schwarz_erweiteter_doppel_Grau.png");

}

void draw(){
 
  
  translate(y+75, x+50);
  rotate(rot);
  image(pim,-pim.width/2,-pim.height/2);

 rot+=PI/2;    
y= y+75;

if (y >= 3750) {
    x = x + 75;
    y = 0;
     
     if (x >= 1000){
    y=0;
    x=0;

        background(255);
    
   
}   

}

}

```

Thank you in advance!!  
and kind regards  
aerob

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 8, 2020, 11:34pm UTC](https://discourse.processing.org/t/rotate-png-in-90-degree/22492/2 "2020-07-08T23:34:09Z")

</div>

us a for loop to loop through the amount of times you are going to rotate the image.

use rotate();

[https://processing.org/reference/rotate\_.html](https://processing.org/reference/rotate_.html)

pass a variable to rotate which changes every second for random 90-180 or 270 degree around their center.

in combination with matrix push() pop(),translate();

[https://processing.org/reference/pushMatrix\_.html](https://processing.org/reference/pushMatrix_.html)

matrix is used to separate each transformation from the other, otherwise all images will be rotated at the same time. Translate sets the location around which the location needs to be applied, and this should change for each image and be set t the center (x,y) position of each image.

---

<div class="post-metadata">

**Author:** ![aerob](https://avatars.discourse-cdn.com/v4/letter/a/ecd19e/32.png) [@aerob](https://discourse.processing.org/u/aerob)\
**Post date:** [July 10, 2020, 3:32pm UTC](https://discourse.processing.org/t/rotate-png-in-90-degree/22492/3 "2020-07-10T15:32:49Z")

</div>

Hey paul,

im sorry thats a bit too much for me…  
maybe you can help me and guide me through this.  
what i have now is a different try.

```auto
PImage pim;
float rot=0;
int y=0;
int x=0;
int rand;
int counter=1;

void setup() {
  size (3840, 1080);
  frameRate(100);
  background(255);
  pim = loadImage("Schwarz_erweiteter_doppel.png");
}

void draw() {
 x=counter*pim.width/2;
 y=pim.height/2;
  int rand = (int)random(1,4);
  println("rand= "+ rand);
 zeichnen(rand,x,y);
  counter++;
  println("x= " + x);
  println("y= " + y);

}   

void zeichnen (int rand, int locX, int locY) {
 pushMatrix(); 
 imageMode(CENTER);
  translate(x,y);
  rot= rand*PI/2;    
  rotate(rot);
  image(pim,locX ,locY);
popMatrix();
 
 if (x >= 3750) {
    y = y + 75;
    x = 0;
}
}

```

maybe you can help me clean up the code and make my vision come true.

kind regards  
aerob

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 10, 2020, 4:26pm UTC](https://discourse.processing.org/t/rotate-png-in-90-degree/22492/4 "2020-07-10T16:26:42Z")

</div>

providing you know how to make a grid using nested for loops, this is fairly straightforward. Here is a little example of how to use push pop in combination with rotate.

note in standard mode the coordinates you pass to rect match the top left corner position.

```auto
void setup(){
  size(200,200);
};

void draw(){
  background(255);
  
  push();
  translate(100,100);
  rotate(radians(90));
  rect(0,0,50,50);
  pop();
  
  push();
  translate(50,50);
  rotate(radians(30));
  rect(0,0,50,50);
  pop();
  
};

```

for comparison here is what happens if you do not separate the transformations with push pop

```auto
void setup(){
  size(200,200);
};

void draw(){
  background(255);
  
  push();
  translate(100,100);
  rotate(radians(90));
  rect(0,0,50,50);
  translate(50,50);
  rotate(radians(30));
  rect(0,0,50,50);
  pop();
  
};

```

---

<div class="post-metadata">

**Author:** ![aerob](https://avatars.discourse-cdn.com/v4/letter/a/ecd19e/32.png) [@aerob](https://discourse.processing.org/u/aerob)\
**Post date:** [July 11, 2020, 11:59pm UTC](https://discourse.processing.org/t/rotate-png-in-90-degree/22492/5 "2020-07-11T23:59:12Z")

</div>

Hey Paul,

Thanks on that one i think i got it!  
maybe you can help me on this one aswell:

with this code:

```auto
PImage pim;
float rot=0;
int y=0;
int x=0;
int rand;
void setup(){
    size (3840,1080);
    frameRate(50);
    background(255);
  pim = loadImage("Schwarz_erweiteter_doppel_Grau.png");

}

void draw(){
 
  int rand = (int)random(1,4);
  translate(y+75, x+50);
  rot= rand*PI/2;
  rotate(rot);
  image(pim,-pim.width/2,-pim.height/2);

   
y= y+75;

if (y >= 3750) {
    x = x + 75;
    y = 0;
     
     
   
}   
if (x > 1045){
  image(pim, 3700,1025);
 background(255);
    
    delay(5000);
   
     y=0;
    x=0;
    
}

}

```

it creates this image:

 ![pic](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0c7b2efec2b77e27b2b7f153a51b077227a89152.png)

Can you tell me why it doesnt draw the last one?

i dont get it…

thanks,  
aerob

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 12, 2020, 1:13pm UTC](https://discourse.processing.org/t/rotate-png-in-90-degree/22492/6 "2020-07-12T13:13:42Z")

</div>

> [@aerob](#):
>
> Can you tell me why it doesnt draw the last one?

Read the description (second paragraph):

> **[delay() / Reference](https://processing.org/reference/delay_.html)**
>
> The delay() function causes the program to halt for a specified time. Delay times are specified in thousandths of a second. For example, running delay(3000) will stop the program for thr…

I wrote some code that may help understand this in your example:

> **Example Code**
>
> ```auto
> int y=0;
> int x=0;
> 
> public void settings() 
> {  
> size (100, 100);
> }
> 
> public void setup() 
> {
> frameRate(1);
> background(255);
> }
> 
> public void draw()
> {
> //translate(x+10, y+10); //columns
> translate(y+10, x+10); //rows
>   
> stroke(0);
> strokeWeight(5);
> point(0, 0);
>   
> y = y+10;
>   
> if (y > 20)
> {
> x = x + 10;
> y = 0;
> }
> //println(x, y);
>   
> if (x > 25)
> {
> point(0, 0);
> background(255);
> println("Before delay");
> delay(5000);
> println("After delay");
> y=0;
> x=0;
> }
> println(x, y);
> }
> 
> ```

You should include a timer for this; try first and then ask if you have questions.

`:)`

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 13, 2020, 2:38pm UTC](https://discourse.processing.org/t/rotate-png-in-90-degree/22492/7 "2020-07-13T14:38:42Z")

</div>

I would likely opt for a nested for loop to display your images;

```auto
for (y rows){
   for(x cols){
   translate(x1,y1);
   rotate(theta);
   image(someImage,x*20,y*20);
}}

```