Find new point based on relative angle and distance

p5.js Coding Questions
1

Hi how to find the new point based on relative angle and distance in the graph system. My drawing looks like below

Lets say when I change angle between two points (A and c) 126 to 180 the drawing should change to below

I tried to find new point by using below method but its giving wrong values.

let A={x:97,y:445},
    B={"x":99,"y":325},
    C={"x":218,"y":242}; 
function findNewPoint(point, angle, distance) {           
     angle = angle * 0.0174533;
     let x = Math.round((Math.cos(angle) * distance) + point[0]);
     let y = Math.round((Math.sin(angle) * distance) + point[1]);

     return [x, y];
}
let newPoint=findNewPoint([B.x,B.y],180,145);
line(B.x,B.y,newPoint.x,newPoint.y)

When I draw the line by using B and newPoint the drawing looks like below:

4

It might be easier to use p5.Vector.
Below is my take.
I am sure there are more efficient ways to do this, which I hope someone will comment below.

let center

function setup() {
  createCanvas(400, 400);
  noStroke()

  center = createVector(width / 2, height / 2)
}

function draw() {
  background(220);

  fill(255, 0, 0)
  ellipse(center.x, center.y, 20, 20)

  const orig = createVector(mouseX, mouseY)
  fill(0, 200, 0)
  ellipse(orig.x, orig.y, 10, 10)

  const rotated = getRotatedVector(center, orig, PI / 2) // rotate 90 deg

  fill(0, 0, 200)
  ellipse(rotated.x, rotated.y, 10, 10)
}

function getRotatedVector(center, v, angle) {
  const diff = p5.Vector.sub(v, center)
  const len = diff.mag()
  const origAngle = diff.heading()

  const rotated = p5.Vector.fromAngle(origAngle + angle, len)
  rotated.add(center)

  return rotated
}
1 Like
5

I think the above code solved ur problem but still if u are trying to use degrees and don’t want to convert the angle from radian to degrees or vice-versa try using angleMode(DEGREES); in the setup function. try this reference link below if u have any confusion
https://p5js.org/reference/#/p5/angleMode