#Why are the diagonal rectangles in my app moving up and down rather than left and right?

2 messages · Page 1 of 1 (latest)

lethal cypress
#

I thought if I kept the rotations in a matrix that the rotation wouldn't affect the rectangles


 int x;
 int y;
 int z;
//Creating variables
 int nSpeed;
 int aSpeed;
 int pSpeed;

void setup () {
//Creating canvas
//Assigning each variable
  size(600,600);
  x = 10;
  y = 10;
  z = 10;
//Assigning speed level to each letter
  nSpeed = 4;
  aSpeed = 2;
  pSpeed = 1;
}

void draw () {
//Drawing "N'
//Adding colour in sketch
 background(#E3EAF5);
 fill(#79A7F5);
 stroke(#79A7F5);
 strokeWeight(0);
  
 rect(x+30,125,10, 100);
 rect(x+25,125, 25,10);
 rect(x+25,225, 25,10);
  
 rect(x+100,130,10, 100);
 rect(x+90,125,25,10);
 rect(x+90,225,25,10);
  
 pushMatrix();
 rotate(radians(-30));
 rect(x-35,136,10,115);
 popMatrix();
  
 x = x + nSpeed;  //Letter "N" moves to the right (fastest)
 if (x > 500) 
 {
  nSpeed = -nSpeed;  //moves back left
 }
  if (x < -50) 
 {
  nSpeed = -nSpeed; //moves back right 
 }
 
//Drawing "A"
 pushMatrix();
 rotate(radians(15));
 rect(y+120,250,10,110);
 popMatrix();
  
 rect(y+45,269,40,10);
  
 pushMatrix();
 rotate(radians(-15));
 rect(y-4,283,10,110);
 popMatrix();
  
 rect(y+43,325,50,10);
 rect(y+15,377,25,10);
 rect(y+90,377,25,10);
 
 y = y + aSpeed;  //Letter "A" moves to the right (medium speed)
 if (y > 500) 
 {
  aSpeed = -aSpeed;  //moves back left
 }
  if (y < -50) 
 {
  aSpeed = -aSpeed; //moves back right 
 }
  
//Drawing "P"
 rect(z+30,450, 10, 100);
 rect(z+25, 550, 25,10);
 rect(z+30,450,75,10);
 rect(z+100,450,10,60);
 rect(z+30,500,75,10);
  
 z = z + pSpeed;  //Letter "P" moves to the right (slowest)
 if (z > 500) 
 {
  pSpeed = -pSpeed;  //moves back left
 }
  if (z < -50) 
 {
  pSpeed = -pSpeed; //moves back right 
 }
}
sacred shard
#

You are drawing the rectangle before popping the matrix, which makes sense since you want the rectangle to be rotated but that also means that the position coordinates of the rectangle are rotated.
You can use the translate function before rotate to prevent the rotation to affect the offset like this:

 int x;
 int y;
 int z;
//Creating variables
 int nSpeed;
 int aSpeed;
 int pSpeed;

void setup () {
//Creating canvas
//Assigning each variable
  size(600,600);
  x = 10;
  y = 10;
  z = 10;
//Assigning speed level to each letter
  nSpeed = 4;
  aSpeed = 2;
  pSpeed = 1;
}

void draw () {
//Drawing "N'
//Adding colour in sketch
 background(#E3EAF5);
 fill(#79A7F5);
 stroke(#79A7F5);
 strokeWeight(0);
  
 rect(x+30,125,10, 100);
 rect(x+25,125, 25,10);
 rect(x+25,225, 25,10);
  
 rect(x+100,130,10, 100);
 rect(x+90,125,25,10);
 rect(x+90,225,25,10);
  
 pushMatrix();
 translate(x, 0);
 rotate(radians(-30));
 rect(-35,136,10,115);
 popMatrix();
  
 x = x + nSpeed;  //Letter "N" moves to the right (fastest)
 if (x > 500) 
 {
  nSpeed = -nSpeed;  //moves back left
 }
  if (x < -50) 
 {
  nSpeed = -nSpeed; //moves back right 
 }
 
//Drawing "A"
 pushMatrix();
 translate(y, 0);
 rotate(radians(15));
 rect(120,250,10,110);
 popMatrix();
  
 rect(y+45,269,40,10);
  
 pushMatrix();
 translate(y, 0);
 rotate(radians(-15));
 rect(-4,283,10,110);
 popMatrix();
  
 rect(y+43,325,50,10);
 rect(y+15,377,25,10);
 rect(y+90,377,25,10);
 
 y = y + aSpeed;  //Letter "A" moves to the right (medium speed)
 if (y > 500) 
 {
  aSpeed = -aSpeed;  //moves back left
 }
  if (y < -50) 
 {
  aSpeed = -aSpeed; //moves back right 
 }
  
//Drawing "P"
 rect(z+30,450, 10, 100);
 rect(z+25, 550, 25,10);
 rect(z+30,450,75,10);
 rect(z+100,450,10,60);
 rect(z+30,500,75,10);
  
 z = z + pSpeed;  //Letter "P" moves to the right (slowest)
 if (z > 500) 
 {
  pSpeed = -pSpeed;  //moves back left
 }
  if (z < -50) 
 {
  pSpeed = -pSpeed; //moves back right 
 }
}