# Understanding the Atan2, Please help

**URL:** <https://discourse.processing.org/t/understanding-the-atan2-please-help/26928>\
**Category:** Beginners\
**Created:** [January 9, 2021, 6:44pm UTC](https://discourse.processing.org/t/understanding-the-atan2-please-help/26928 "2021-01-09T18:44:55Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![laptophead](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/laptophead/32/2701_2.png) [@laptophead](https://discourse.processing.org/u/laptophead)\
**Post date:** [January 9, 2021, 6:44pm UTC](https://discourse.processing.org/t/understanding-the-atan2-please-help/26928/1 "2021-01-09T18:44:55Z")

</div>

I was expecting to get the degrees from the center of the sketch to the mouse from 0 to 360 or zero to 2PI.

Instead I am getting zero to 180 from horizontal to the belly of the sketch and then I get negative numbers on the top…  
This makes it very hard to send angle coordinates to Arduino,  
What am I doing wrong?  
Thanks

```auto

void setup()
{size(640, 840, JAVA2D);
}

void draw() {
  background(204);
  translate(width/2, height/2);
  float a = atan2(mouseY-height/2, mouseX-width/2);
  println(degrees (a));

 
  rotate(a);
  rect(-30, -5, 60, 10);
}

```

---

<div class="post-metadata">

**Author:** ![jay\_m](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jay_m/32/11020_2.png) [@jay\_m](https://discourse.processing.org/u/jay_m)\
**Post date:** [January 9, 2021, 6:48pm UTC](https://discourse.processing.org/t/understanding-the-atan2-please-help/26928/2 "2021-01-09T18:48:15Z")

</div>

The doc states

> Calculates the angle (in radians) from a specified point to the coordinate origin as measured from the positive x-axis. Values are returned as a **float** in the range from **PI** to **-PI**

Did you check what degrees() returns for -PI/2 or -PI?

> **[atan2() / Reference](https://processing.org/reference/atan2_.html)**
>
> Calculates the angle (in radians) from a specified point to the coordinate origin as measured from the positive x-axis. Values are returned as a float in the range from PI to -PI.…

---

<div class="post-metadata">

**Author:** ![laptophead](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/laptophead/32/2701_2.png) [@laptophead](https://discourse.processing.org/u/laptophead)\
**Post date:** [January 9, 2021, 6:54pm UTC](https://discourse.processing.org/t/understanding-the-atan2-please-help/26928/3 "2021-01-09T18:54:35Z")

</div>

I simply don’t get that , The origin is top right corner right?

But the angle I get seems to from the center of the sketch to my mouse.  
The center of the sketch is not the origin. Right? Don’t get it…

---

<div class="post-metadata">

**Author:** ![jay\_m](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jay_m/32/11020_2.png) [@jay\_m](https://discourse.processing.org/u/jay_m)\
**Post date:** [January 9, 2021, 7:10pm UTC](https://discourse.processing.org/t/understanding-the-atan2-please-help/26928/4 "2021-01-09T19:10:05Z")

</div>

> [@laptophead](#):
>
> The center of the sketch is not the origin. Right? Don’t get it…

You translated to the center of the drawing area with `translate(width/2, height/2);`  
So that’s your (0,0) position

---

<div class="post-metadata">

**Author:** ![laptophead](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/laptophead/32/2701_2.png) [@laptophead](https://discourse.processing.org/u/laptophead)\
**Post date:** [January 9, 2021, 7:18pm UTC](https://discourse.processing.org/t/understanding-the-atan2-please-help/26928/5 "2021-01-09T19:18:58Z")

</div>

OK, then why don’t I get a complete 360 deg reading from the center of the sketch to the mouse?  
As I circle the mouse around the center…

Thanks

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 9, 2021, 7:20pm UTC](https://discourse.processing.org/t/understanding-the-atan2-please-help/26928/6 "2021-01-09T19:20:23Z")

</div>

you need to swap from `atan2(y1-y2,x1-x2)` to `atan2(y2-y1,x2-x1)`

---

<div class="post-metadata">

**Author:** ![laptophead](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/laptophead/32/2701_2.png) [@laptophead](https://discourse.processing.org/u/laptophead)\
**Post date:** [January 9, 2021, 7:26pm UTC](https://discourse.processing.org/t/understanding-the-atan2-please-help/26928/7 "2021-01-09T19:26:37Z")

</div>

OK so I tried

a = atan2((height/2)-mouseY,(width/2) -mouseX);

Half the screen is still generating negative numbers…

---

<div class="post-metadata">

**Author:** ![behreajj](https://avatars.discourse-cdn.com/v4/letter/b/b5a626/32.png) [@behreajj](https://discourse.processing.org/u/behreajj)\
**Post date:** [January 9, 2021, 7:54pm UTC](https://discourse.processing.org/t/understanding-the-atan2-please-help/26928/8 "2021-01-09T19:54:49Z")

</div>

Hi @laptophead ,

If you want an unsigned range in [0, TAU] or [0, 360], then use floor modulo (or a specialized version for degrees or radians, which would spare you a divide, `/`).

> **[Modulo operation](https://en.wikipedia.org/wiki/Modulo_operation)**
>
> In computing, the modulo operation returns the remainder or signed remainder of a division, after one number is divided by another (called the modulus of the operation).
> Given two positive numbers a and n, a modulo n (abbreviated as a mod n) is the remainder of the Euclidean division of a by n, where a is the dividend and n is the divisor. The modulo operation is to be distinguished from the symbol mod, which refers to the modulus (or divisor) one is operating from.
> For example, the expression ...

This applies for any angle, not just the range of values returned by `atan2`.

```java
float floorMod(float a, float b) {
  return a - b * floor( a / b);
}

float floorModDeg(float a) {
  return a - 360.0 * floor(a * 0.0027777778);
}

```

It also applies to hue in HSB color. If the second operand, `b`, is `1`, you can also simplify by just subtracting the `floor` of `a` from `a`.

Hope that helps. Best,  
Jeremy

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 9, 2021, 8:52pm UTC](https://discourse.processing.org/t/understanding-the-atan2-please-help/26928/9 "2021-01-09T20:52:55Z")

</div>

Remember that 0° is not at top but at right side in processing

This works with 0° at right side :

```auto

void setup()
{
  size(640, 840);
}

void draw() {
  background(204);

  translate(width/2, height/2);
  //float a = atan2(height/2-mouseY, width/2-mouseX);
  float a = atan2(mouseY-height/2, mouseX-width/2);
  if (a<0)
    a=TWO_PI+a;
  println(degrees (a));

  rotate(a);
  rect(-30, -5, 60, 10);
}

```

This version has 0° at the top / north

```auto

void setup()
{
  size(640, 840);
}

void draw() {
  background(204);

  translate(width/2, height/2);
  //float a = atan2(height/2-mouseY, width/2-mouseX);
  float a = atan2(mouseY-height/2, mouseX-width/2);
  if (a<0)
    a=TWO_PI+a;

  a+=HALF_PI;  
  if (a>TWO_PI)
    a-=TWO_PI; 
  println(degrees (a));

  rotate(a);
  rect(-30, -5, 60, 10);
}

```

Regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![laptophead](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/laptophead/32/2701_2.png) [@laptophead](https://discourse.processing.org/u/laptophead)\
**Post date:** [January 9, 2021, 9:07pm UTC](https://discourse.processing.org/t/understanding-the-atan2-please-help/26928/10 "2021-01-09T21:07:00Z")

</div>

OK I got it  
Thanks guys

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 9, 2021, 9:46pm UTC](https://discourse.processing.org/t/understanding-the-atan2-please-help/26928/11 "2021-01-09T21:46:42Z")

</div>

to make the rect point upwards for 0°

```auto

  rect(-5, -30, 10, 60);

```

---

<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:** [January 10, 2021, 10:22am UTC](https://discourse.processing.org/t/understanding-the-atan2-please-help/26928/12 "2021-01-10T10:22:34Z")

</div>

> [@behreajj](#):
>
> `return a - 360.0 * floor(a * 0.0027777778);`

Hello @behreajj,

I always appreciate your insights.

Not everyone may understand the example…

```auto
float num = 1.0/360;
println(num); // This prints 0.0027777778

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b553902379fb1bca8ae24c29ad55cbd266fbfc86.png)

`:)`

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [January 10, 2021, 11:29am UTC](https://discourse.processing.org/t/understanding-the-atan2-please-help/26928/13 "2021-01-10T11:29:15Z")

</div>

As atan2 returns values from -180 to 180 or its radian equivalent you can always just add 180 degrees to get rid of the negative. This will give you values from 0 to 360 or its.

Also here is a sketch I made a while back to understand the atan2 and atan functions.

```auto
PVector a,c;

void setup(){
   size(200,200);
   a = new PVector(width/2,height/2);
   c = new PVector(width,height/2);
};

void draw(){
  PVector b = new PVector(mouseX,mouseY);
   background(0);
   stroke(255);
   line(a.x,a.y,b.x,b.y);
   line(a.x,a.y,c.x,c.y);
   
   //float t1 = map(atan2(b.y-a.y,b.x-a.x),-PI,PI,0,360);
   //float t1 = map(atan((b.x-a.x)/(b.y-a.y)),-PI/2,PI/2,0,180);
   float t1 = degrees(atan2(b.y-a.y,b.x-a.x));
   float t2 = degrees(atan2(b.y-a.y,b.x-a.x)+PI);
   
   float t3 = (atan2(b.y-a.y,b.x-a.x)-PI/2);
   float t4 = (atan2(b.y-a.y,b.x-a.x)+PI/2);
   stroke(255,0,0);
   line(a.x,a.y,a.x + 20*cos(t3),a.y + 20*sin(t3));
   stroke(255,0,255);
   line(a.x,a.y,a.x + 20*cos(t4),a.y + 20*sin(t4));
   
   fill(255);
   text(t1,10,10);
   text(t2,10,20);
   text(round(cos(t3)),10,30);
   text(round(sin(t3)),10,40);
};

```

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [January 11, 2021, 11:04am UTC](https://discourse.processing.org/t/understanding-the-atan2-please-help/26928/14 "2021-01-11T11:04:03Z")

</div>

Hi !  
You can find it helpful [https://www.instagram.com/p/CGKdsJVnyfH/](https://www.instagram.com/p/CGKdsJVnyfH/)