Rotate png in 90 degree

Processing Coding Questions
1

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
example1294×772 51.4 KB

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:

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

2

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

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

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.

3

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.

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

4

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.

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

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

Hey Paul,

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

with this code:

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
pic3952×1214 384 KB

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

i dont get it…

thanks,
aerob

6

Read the description (second paragraph):

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

Example Code 
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.

:)

7

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

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