# Why do radian degrees look different for arcs versus rotations?

**URL:** <https://discourse.processing.org/t/why-do-radian-degrees-look-different-for-arcs-versus-rotations/19856>\
**Category:** Coding Questions\
**Created:** [April 17, 2020, 3:01am UTC](https://discourse.processing.org/t/why-do-radian-degrees-look-different-for-arcs-versus-rotations/19856 "2020-04-17T03:01:56Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [April 17, 2020, 3:01am UTC](https://discourse.processing.org/t/why-do-radian-degrees-look-different-for-arcs-versus-rotations/19856/1 "2020-04-17T03:01:56Z")

</div>

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? 🙂

Radian degrees diagram for rotate:

 ![rotate](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ee7041809d22249f588529d0af4b8f1765093d84.png)

Radian degrees diagram for arc:  
 ![arc](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7d5214812074036258fc4dbe354ed19c75e6319d.png)

```auto
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

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 17, 2020, 3:16am UTC](https://discourse.processing.org/t/why-do-radian-degrees-look-different-for-arcs-versus-rotations/19856/2 "2020-04-17T03:16:13Z")

</div>

Hello,

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

Does this help?

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/894e69bf63aa5fa62a095dec654931be4db557ed.png)

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [April 17, 2020, 3:22am UTC](https://discourse.processing.org/t/why-do-radian-degrees-look-different-for-arcs-versus-rotations/19856/3 "2020-04-17T03:22:12Z")

</div>

Hello glv,

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 17, 2020, 3:23am UTC](https://discourse.processing.org/t/why-do-radian-degrees-look-different-for-arcs-versus-rotations/19856/4 "2020-04-17T03:23:54Z")

</div>

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:

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/54294b506f93546b6d335cc9a07933c3816149d5.png)

`:)`

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [April 17, 2020, 3:29am UTC](https://discourse.processing.org/t/why-do-radian-degrees-look-different-for-arcs-versus-rotations/19856/5 "2020-04-17T03:29:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [April 17, 2020, 3:30am UTC](https://discourse.processing.org/t/why-do-radian-degrees-look-different-for-arcs-versus-rotations/19856/6 "2020-04-17T03:30:54Z")

</div>

```auto
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

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 17, 2020, 3:30am UTC](https://discourse.processing.org/t/why-do-radian-degrees-look-different-for-arcs-versus-rotations/19856/7 "2020-04-17T03:30:57Z")

</div>

> [@mnoble](#):
>
> I wish I could break the curse of my visual confusion with the rectangle 🙂

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

`:)`

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [April 17, 2020, 3:32am UTC](https://discourse.processing.org/t/why-do-radian-degrees-look-different-for-arcs-versus-rotations/19856/8 "2020-04-17T03:32:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [April 17, 2020, 10:30am UTC](https://discourse.processing.org/t/why-do-radian-degrees-look-different-for-arcs-versus-rotations/19856/9 "2020-04-17T10:30:05Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/59c2054f7cf4788bc756022c86662b034edca921.png)

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 17, 2020, 1:50pm UTC](https://discourse.processing.org/t/why-do-radian-degrees-look-different-for-arcs-versus-rotations/19856/10 "2020-04-17T13:50:25Z")

</div>

Hello,

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

From above:  
 ![degrees](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/87baae755fceb42484489d5588fb0900ed5ba084.png)

`:) `

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [April 17, 2020, 4:56pm UTC](https://discourse.processing.org/t/why-do-radian-degrees-look-different-for-arcs-versus-rotations/19856/11 "2020-04-17T16:56:12Z")

</div>

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

```auto
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
 

```