# Trouble with angleBetween() in p5.js

**URL:** <https://discourse.processing.org/t/trouble-with-anglebetween-in-p5-js/43387>\
**Category:** Coding Questions\
**Created:** [December 3, 2023, 7:21pm UTC](https://discourse.processing.org/t/trouble-with-anglebetween-in-p5-js/43387 "2023-12-03T19:21:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeffthompson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeffthompson/32/743_2.png) [@jeffthompson](https://discourse.processing.org/u/jeffthompson)\
**Post date:** [December 3, 2023, 7:21pm UTC](https://discourse.processing.org/t/trouble-with-anglebetween-in-p5-js/43387/1 "2023-12-03T19:21:07Z")

</div>

Ok, I’m totally stuck and could use some help! I’m trying to use the `angleBetween()` function with two vectors, but am getting very weird results. I feel like this is probably something boneheaded and obvious, but just can’t see it!

When I try to get the angle between the mouse and another point, the angle changes as my mouse moves closer/further away. It also doesn’t go to 360º (in DEGREES mode).

Example in the online editor: [p5.js Web Editor](https://editor.p5js.org/jeffThompson/sketches/jSjRx_wya)

And here…

```auto
let mouse, center;

function setup() {
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES);
  
  center = createVector(width/2, height/2);
  mouse = createVector(100,100);
}

function draw() {
  background(220);
  
  mouse.x = mouseX;
  mouse.y = mouseY;
  
  stroke(50);
  line(center.x,center.y, mouse.x, mouse.y);
  
  let a = mouse.angleBetween(center);
  fill(50);
  noStroke();
  text(a, width/2, height-height/4);
}

```

---

<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:** [December 3, 2023, 9:15pm UTC](https://discourse.processing.org/t/trouble-with-anglebetween-in-p5-js/43387/2 "2023-12-03T21:15:38Z")

</div>

Hello @jeffthompson,

I encourage you to find a good tutorial on PVectors.

Scrutinize this code:

```auto
let mouse, center;

function setup() {
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES);
  
  center = createVector(width/2, height/2);
  mouse = createVector(100,100);
  ref = createVector(100, 0); // Reference line to get angle from
}

function draw() {
  background(220);
  
  mouse.x = mouseX;
  mouse.y = mouseY;
  
  stroke(50);
  line(center.x,center.y, mouse.x, mouse.y);
  
  let a = mouse.sub(center).angleBetween(ref);
  fill(50);
  noStroke();
  text(a + ' deg', width/2, height-height/4);
}

```

I learned a lot from these and was able to adapt to p5.js:

- [The Nature of Code](https://natureofcode.com/book/chapter-1-vectors)
- [PVector / Processing.org](https://processing.org/tutorials/pvector)

Reference:  
[https://p5js.org/reference/#/p5.Vector/copy](https://p5js.org/reference/#/p5.Vector/copy)

Edit: Removed the _copy()_ from above code as it was not needed in this example.

`:)`

---

<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:** [December 4, 2023, 9:03am UTC](https://discourse.processing.org/t/trouble-with-anglebetween-in-p5-js/43387/3 "2023-12-04T09:03:08Z")

</div>

Hello @jeffthompson,

Your code with some changes to show the 2 vectors you defined and angle between them:

```auto
let mouse, center;

function setup() 
  {
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES);
  
  center = createVector(width/2, height/2); // A vector; fixed value
  mouse = createVector(100, 100); // A vector; will change in code with mouse
  }

function draw() {
  background(220);
  
  mouse.x = mouseX;
  mouse.y = mouseY;
  
  stroke(50);
  line(0, 0, center.x, center.y); // draw vector
  line(0, 0, mouse.x, mouse.y); // draw vector
  
  let a = mouse.angleBetween(center);
  fill(50);
  noStroke();
  text(a, width/2, height-height/4);
}

```

Reference:  
[https://p5js.org/reference/#/p5.Vector](https://p5js.org/reference/#/p5.Vector)

`:)`

---

<div class="post-metadata">

**Author:** ![jeffthompson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeffthompson/32/743_2.png) [@jeffthompson](https://discourse.processing.org/u/jeffthompson)\
**Post date:** [December 4, 2023, 3:08pm UTC](https://discourse.processing.org/t/trouble-with-anglebetween-in-p5-js/43387/4 "2023-12-04T15:08:49Z")

</div>

Thanks @glv, I appreciate the quick reply! I also appreciate the code, but it doesn’t really explain why mine isn’t working. Does this require three points?

---

<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:** [December 4, 2023, 3:26pm UTC](https://discourse.processing.org/t/trouble-with-anglebetween-in-p5-js/43387/5 "2023-12-04T15:26:45Z")

</div>

```auto
center = createVector(width/2, height/2);
mouse = createVector(mouseX, mouseY);

```

These two statements define either

- two positions `[width/2, height/2]` and `[mouseX, mouseY]` or
- two vectors `[0, 0, width/2, height/2]` and `[0, 0, mouseX, mouseY]`

The statement  
`let a = mouse.angleBetween(center);`

returns the angle between the two vectors.

> [@jeffthompson](#):
>
> Does this require three points?

Yes, in this case the third point is `[0, 0]` the intersection of the two vectors.

If the intersection of the two vectors is not at `[0, 0]` but at position `[a, b]` then we can modify these statements to

```auto
center = createVector(width/2 - a, height/2 - b);
mouse = createVector(mouseX - a, mouseY - b);
let a = mouse.angleBetween(center);

```

---

<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:** [December 5, 2023, 12:19pm UTC](https://discourse.processing.org/t/trouble-with-anglebetween-in-p5-js/43387/6 "2023-12-05T12:19:39Z")

</div>

Hello @jeffthompson,

My last example is your code with this modification that draws the two vectors and shows angle between them:

```auto
line(0, 0, center.x, center.y); // draw vector
line(0, 0, mouse.x, mouse.y); // draw vector

```

Work through and understand that example and then progress to moving vectors origins.  
Keep in mind that the origin of the mouse is _always_ upper left at 0, 0;

I often print to console in development of code:  
`print(mouse);`

`:)`