› › ›

Animating a rotation, but it isn't working

jojojojo
edited January 2018 in Questions about Code

Hello! I am making a project that involves a lots of shapes and then animating some of them. Awhile i was trying to make this one square with a circle inside rotate, I ran into multiple problems. This are the objects that I am trying to rotate (that are, of course, in void draw() ):

  fill(237, 26, 55);
  rect(336, 605, 112, 121);

  fill(255);
  ellipse(392, 662, 63, 63);

So, firstly I tried using only rotate(PI/2) before that, but it just disappeared. Then I tried translate, in case that was what was missing, but once again nothing. I thought that maybe rectMode(CENTER) would finally make everything work, but it actually made everything move out of place! I tried putting everything between push and pop matrix but it didn't work. I don't understand what is happening or what I am doing wrong. And the thing is that I moved these objects to the end of the code so it wouldn't interfere with the rest. I searched everywhere but I cannot find anything to help me. Thank you for your time.

Tagged:

Best Answer

Answers

  • KevinWorkmanKevinWorkman

    I'm not really sure what you're asking. Can you please post a MCVE instead of a disconnected snippet of code?

  • jojojojo

    Hi! So this is the original (with bits of it deleted so there is not too much code on the screen):

    void setup (){
size (560,846);

noStroke ();
}
void draw(){
  background (#FCFCE0);

  //line 1
  //i deleted all the letters, since they don't really matter for the problem

  fill(237,26,55);
  rect(112,0, 112, 121);      
  fill(0,0,0);
  rect (58, 98, 54, 23);        
  fill(245,157,178);
  rect(224,0, 112, 121);              
  fill(43,40,120);
  rect(448,0, 112, 121);      
  //line 1

  //line 2

  fill(146,216,239);
  rect(0,121, 112, 121);             
  fill(234,203,23);
  rect(112,121, 112, 121);      
   fill(0,0,0);
  rect(280,121, 112, 121);              
   fill(251,171,28);
  rect(448,121, 112, 121);

    // line 2

 //there are a few other lines of code here with lots of text
 //(a couple of letters) and rect

  //line 5

  fill(0,0,0);
  rect(0,484, 112, 121);       
  fill(252,252,224);
  rect(112,363, 112, 121);      
  fill(146,216,239);
  rect(448,484, 112, 121);        
  fill(234,203,23);
  rect(336,484, 112, 121);      

  //line 5

  //line 6 

  fill(49,165,163);
  rect(112,605, 112, 121);            
  fill(237,26,55);
  rect(224,605, 112, 121);             
  rect (300, 605, 36,36);


  fill(237,26,55);
  rect(336,605, 112, 121);

   fill(255);
  ellipse(392, 662, 63, 63);

  fill(146,216,239);
  rect(448,605, 112, 121);

  //line 6

 //there is another line of rects here
}

    then what i did was move what i wanted to the end and added rotate:

    void setup (){
size (560,846);

noStroke ();
}
void draw(){
  background (#FCFCE0);

  //line 1

  //i deleted all the letters, since they don't really matter for the problem

  fill(237,26,55);
  rect(112,0, 112, 121);

  fill(0,0,0);
  rect (58, 98, 54, 23);


  fill(245,157,178);
  rect(224,0, 112, 121);


  fill(43,40,120);
  rect(448,0, 112, 121);

  //line 1

  //line 2


  fill(146,216,239);
  rect(0,121, 112, 121);


  fill(234,203,23);
  rect(112,121, 112, 121);

   fill(0,0,0);
  rect(280,121, 112, 121);


   fill(251,171,28);
  rect(448,121, 112, 121);

    // line 2

 //there are a few other lines of code here with lots of text
 //(a couple of letters) and rect

  //line 5

  fill(0,0,0);
  rect(0,484, 112, 121);

  fill(252,252,224);
  rect(112,363, 112, 121);

  fill(146,216,239);
  rect(448,484, 112, 121); 

  fill(234,203,23);
  rect(336,484, 112, 121);


  //line 5

  //line 6 

  fill(49,165,163);
  rect(112,605, 112, 121);


  fill(237,26,55);
  rect(224,605, 112, 121);


  rect (300, 605, 36,36);


  fill(146,216,239);
  rect(448,605, 112, 121);

  //line 6

 //there is another line of rects here
 rotate(PI/2);
 fill(237,26,55);
  rect(336,605, 112, 121);

   fill(255);
  ellipse(392, 662, 63, 63);
}

    which made the rect disappear.

    Then I tried to use translate before that..

    translate(392,665);
 rotate(PI/2);
 fill(237,26,55);
  rect(336,605, 112, 121);

   fill(255);
  ellipse(392, 662, 63, 63);

    And then I tried to use rectMode(CENTER) and push/popMatrix but the rect mode only made things worse and the push/pop didn't do anything

    pushMatrix();
 translate(392,665);
 rotate(PI/2);
 rectMode(CENTER);
 fill(237,26,55);
  rect(336,605, 112, 121);

   fill(255);
  ellipse(392, 662, 63, 63);
  popMatrix();

    what I am trying to do is make it spin around it's center, but I can't find anything to help me with my problems.

    Thank you, I hope this helps you understand my problem better!

  • f41arduf41ardu

    Have a look Examples from Transformation.

    And my sample code:

    float x, y, z; 
PShape yellowBox, redBox, greenBox, whiteBox; 

void setup() { 
  size(800, 600, P3D);
  coloredboxes();
}

void draw() {
  background(0);
  lights();
  camera(width/2, height/2, (height/2) / tan(PI/6), width/2, height/2, 0, 0, 1, 0);
  float ZZ = PI/100*z++;

  translate(width/2, height/2, 0);



  //  rotateX(PI/8+ZZ/10); 
  //  rotateY(PI/3+ZZ/25); 
  // rotateZ(PI/3+ZZ/25);


  rotateX(radians(90-35.26)); 
  // rotateY(-radians(30));
  rotateZ(-radians(45));


  // rotateY(-PI/2); 
  drawAxes();
  ellipseMode(RADIUS);  // Set ellipseMode to RADIUS

  stroke(255, 0, 0);
  noFill();  
  ellipse(0, 0, sqrt(pow(150, 2)+pow(150, 2)), sqrt(pow(150, 2)+pow(150, 2)));  // Draw white ellipse using RADIUS mode
  //shape(yellowBox);

  pushMatrix(); 
  rotateZ(-ZZ/2);
  pushMatrix();
  translate(150, 150, 0);
  //  rotateX(-PI/8); 
  //  rotateY(PI/3); 
  rotateZ(PI/4);
  rotateY(-ZZ*2);
  //drawAxes();
  shape(redBox);
  popMatrix();
  popMatrix();
}   

void coloredboxes() {
  yellowBox = createShape(BOX, 95, 95, 95);
  yellowBox.setStroke(color(255, 255, 0));  
  yellowBox.setFill(color(255, 255, 0, 64));

  redBox = createShape(BOX, 50, 50, 50);
  redBox.setStroke(color(255, 0, 0));  
  redBox.setFill(color(255, 0, 0, 64));


  greenBox = createShape(BOX, 105, 105, 105);
  greenBox.setStroke(color(0, 255, 0));  
  greenBox.setFill(color(0, 255, 0, 32));

  whiteBox = createShape(BOX, 105, 105, 105);
  whiteBox.setStroke(color(255, 255, 255));  
  whiteBox.setFill(color(0, 0, 0, 0));
}

void drawAxes() {
  stroke(255, 0, 0);
  fill(255, 0, 0);
  box(400, 2, 2);
  stroke(0, 255, 0);
  box(2, 400, 2);
  stroke(0, 0, 255);
  fill(0, 0, 255);
  box(2, 2, 400);
  fill(255, 255, 255);
  text("x", 210, 0, 0);
  text("-x", -210, 0, 0);
  text("-y", 0, -210, 0);
  text("+y", 0, 210, 0);
  text("-z", 0, 0, -210);
  text("+z", 0, 0, 210);
}
  • jojojojo

    Thank you for answering. I tried to see if it could help, but I couldn't find a way to. I just wanted a simple (it doesn't seem that simple anymore :S) rotation motion. Is there any way to isolate rectMode(CENTER); to a single part of the code?

  • ChrisirChrisir
    edited January 2018 Answer ✓

    You wrote:

    Is there any way to isolate rectMode(CENTER); to a single part of the code?

    The answer is the usage of pushMatrix and popMatrix as demonstrated below.

    Rotating the Correct Way

    The correct way to rotate the square is to:

    • Translate the coordinate system’s origin (0, 0) to where you want the upper left of the square to be (or the square's center when using rectMode(CENTER);).
    • Rotate the grid in radians (or degree)
    • Draw the square at the origin (0,0).

    see

    https://www.processing.org/tutorials/transform2d/

    Example

    Here is an example.

    Key elements:

    • usage of rectMode(CENTER);

    • translate() command before rotate() command

    • call rect() with 0,0 as position (which is the origin of the coordinate system / Matrix)

    • pushMatrix and popMatrix isolate their section against the rest of the code: Note that the blue box is not rotating

    Here is the code:

    float myAngle=-90; // in degree measurement

void setup () {
  // Init
  size (600, 600);
  rectMode(CENTER);  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!
}

void draw () {
  // repeated continously
  background(22);

  // color for lines
  stroke(111);
  // 
  // 
  // green: rotates around itself  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  pushMatrix();
  translate(258, 248); 
  rotate(radians(myAngle));
  fill (2, 222, 2); // green
  rect(0, 0, 100, 100); 
  popMatrix();
  //

  fill(0, 0, 255);   // blue !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  rect(60, 60, 33, 66); 
  // 
  myAngle+=3; // speed of rotation 
  if (myAngle>=360) {
    myAngle=0; // keep in degree
  }
  //
}
  • jojojojo

    Hello! Yes, it was exactly that that I wanted to do! I ended up not using rectMode and just adjusting the rect coordinates to the translate, but the rest helped me so much! Thank you very much!

Sign In or Register to comment.