Lesson 6: More on 3D Translations and Rotations

A lineup of boxes that revolve around the center of the window.

//twirling squares
//they revolve around the center of the window
//press the mouse inside the window to make them go
 
float boxDiam = 40;
float boxAngle1 =0;
 
 
void setup(){
  size(400,200);
 
}
 
void draw(){
  rectMode(CENTER);
  background(247); 
  stroke(0);
  translate(200,100);
  rotate(boxAngle1);
  fill(255,0,0);
  rect(0,0,boxDiam,boxDiam);
  fill(250,108,13);
  rect(60,0,boxDiam,boxDiam);
  fill(250,203,13);
  rect(120,0,boxDiam,boxDiam);
  fill(182,250,13);
  rect(180,0,boxDiam,boxDiam);
   
  if (mousePressed == true){
    boxAngle1 += .05;
  }
   
   
}

Here is a 13 second video demonstration (video has no sound)

A line of boxes that each rotate about their own axes

Note the difference between this program and the previous one. In this one I use a series of pushMatrix() / popMatrix() pairs around each rectangle so that they each rotate about their own centers.

//twirling squares 
//they each rotate about their own centers 
//press the mouse in the window to make them go 
 
float boxDiam = 40; 
float boxAngle1 =0; 
 
void setup(){ 
   size(400,200); 
} 
 
void draw(){ 
   rectMode(CENTER); 
   background(247); 
   stroke(0); 
   pushMatrix(); 
    translate(200,100); 
    rotate(boxAngle1); 
    fill(255,0,0); 
    rect(0,0,boxDiam,boxDiam); 
   popMatrix(); 
   pushMatrix(); 
    translate(260,100); 
    rotate(boxAngle1); 
    fill(250,108,13); 
    rect(0,0,boxDiam,boxDiam); 
   popMatrix(); 
   pushMatrix(); 
    translate(320,100); 
    rotate(boxAngle1); 
    fill(250,203,13); 
    rect(0,0,boxDiam,boxDiam); 
   popMatrix(); 
   pushMatrix(); 
    translate(380,100); 
    rotate(boxAngle1); 
    fill(182,250,13); 
    rect(0,0,boxDiam,boxDiam); 
   popMatrix(); 
   if (mousePressed == true){ 
      boxAngle1 += .05; 
   } 
} 

Here is a 13 second video demonstration (video has no sound)

A line of boxes that revolve in 3D space

In this one, I translate to (200,100) so that the center of the red box is the origin around which the rotation happens. The important thing to remember with rotations is to translate first, and then rotate.

//twirling squares 
//they revolve around the center of the window 
//in 3D! 
//press the mouse to make them go 
 
float boxDiam = 40; 
float boxAngle1 =0; 
void setup(){
 size(400,200,P3D);
 } 
void draw(){
 rectMode(CENTER);
 background(247);
 smooth();
 stroke(0);
 translate(200,100);
 rotateY(boxAngle1);
 fill(255,0,0);
 rect(0,0,boxDiam,boxDiam);
 fill(250,108,13);
 rect(60,0,boxDiam,boxDiam);
 fill(250,203,13);
 rect(120,0,boxDiam,boxDiam);
 fill(182,250,13);
 rect(180,0,boxDiam,boxDiam);
 if (mousePressed == true){
  boxAngle1 += .05; 
 } 
} 

Here is a 13 second video demonstration (video has no sound)