Trouble with angleBetween() in p5.js

p5.js Coding Questions
1

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

And here…

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);
}
2

Hello @jeffthompson,

I encourage you to find a good tutorial on PVectors.

Scrutinize this code:

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:

Reference:
https://p5js.org/reference/#/p5.Vector/copy

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

:)

3

Hello @jeffthompson,

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

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

:)

4

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?

5 
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.

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

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

Hello @jeffthompson,

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

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);

:)