Why do radian degrees look different for arcs versus rotations?

Processing Coding Questions
1

Hello Forum,

I have math confusion. Radian degrees seem to work differently for rotate() versus arc(). Below, I use the first image as a guide for rotating a rect() and the second image as guide for controlling the opening and closing part of the arc. Why aren’t they the same - what don’t I get in my code? :slight_smile:

Radian degrees diagram for rotate:

rotate
rotate755×753 70.4 KB

Radian degrees diagram for arc:
arc

void setup (){
  size (400,400);
}

void draw() {
 background (255);

   //Rect
  pushMatrix (); 
  translate (100,100);    
  rotate(radians(0));
  fill (0);
  rect (0,0,25,150); 
  popMatrix(); 
  
  //ARC 
  arc(300,100, 150, 150, radians(0), radians(90),PIE);
  } //close draw
1 Like
2

Hello,

You can always plot the first graph to have the zero reference anywhere you want; its just a label.

Does this help?

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

void draw() 
  {
  background (255);

  //line before rotate
  pushMatrix (); 
  translate (width/3, height/2);    
  rotate(radians(0));
  line (0, 0, 50, 0); 
  popMatrix(); 

  //line after rotate
  pushMatrix (); 
  translate (width/3, height/2);    
  rotate(radians(90));
  line (0, 0, 50, 0); 
  popMatrix(); 
  
  //Arc 
  arc(2*width/3, height/2, 100, 100, radians(0), radians(90), PIE);
  }

image

3

Hello glv,

So, you are saying that the reason I am getting confused is because a rectangle behaves differently?

4

Hello,

A line is easier to visualize and you know exactly where the x and y are.

I always have to fiddle with width and height with a rectangle to get it right.

Same thing with rectangle:

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

void draw() 
  {
  background (255);
  strokeWeight(3);

  //line before rotate
  pushMatrix (); 
  translate (width/3, height/2);    
  rotate(radians(0));
  rect(0, 0, 50, 5);
  //line (0, 0, 50, 0); 
  popMatrix(); 

  //line after rotate
  pushMatrix (); 
  translate (width/3, height/2);    
  rotate(radians(90));
  rect(0, 0, 50, 5);
  //line (0, 0, 5, 50); 
  popMatrix(); 
  
  //Arc 
  arc(2*width/3, height/2, 100, 100, radians(0), radians(90), PIE);
  }

image

:)

1 Like
5

Yes definitely makes things clearer to visualize. Thank you! I wish I could break the curse of my visual confusion with the rectangle :slight_smile:

6 
void setup (){
  size (400,400);
}

void draw() {

  background (255);

  
  //Rect
  pushMatrix (); 
  translate (100,100);    
  rotate(radians(0));
  fill (0);
  rect (0,0,25,150); 
  popMatrix(); 
  
    //Rect
  pushMatrix (); 
  translate (100,100);    
  rotate(radians(90));
  fill (0);
  rect (0,0,25,150); 
  popMatrix(); 
  
  //ARC 
  arc(300,100, 150, 150, radians(0), radians(90),PIE);
  
  
  
  
 
} //close draw
7

It took me a couple of edits… I may be cursed as well.

:)

8

I see now, horizontally longer for a rect fits nice and tidy with radian degrees in second guide!

2 Likes
9

The problem is in the very first diagram. It shows 0° being NORTH which is fine when doing geometry in mathematics but on computers 0° it is EAST so it should look like

angles
angles753×755 72.8 KB

Think 0° == EAST == poisitve X direction and you can’t go far wrong :smile:

4 Likes
10

Hello,

There is further discussion here for visitors to this topic:
https://processing.org/tutorials/transform2d/
https://processing.org/tutorials/trig/

From above:
degrees

:)

3 Likes
11

This sketch helped me untangle the troubles I was having with seeing the rectangle radian degrees:

void setup (){
  size (400,400);
}

void draw() {

  background (255);
  //black
  stroke(0);
  fill (0);
  rect (50,50,25,150);
  line (100,50,300,50);
  float a = mouseX;
  
  //Red
  pushMatrix (); 
  translate (100,100);    
  rotate(radians(a));
  fill (255,0,0);
  rect (50,50,25,150);
  stroke (255,0,0);
  line (100,50,300,50);
  popMatrix(); 
  
  println (a);
  
 } //close draw
2 Likes