# Find new point based on relative angle and distance

**URL:** <https://discourse.processing.org/t/find-new-point-based-on-relative-angle-and-distance/26921>\
**Category:** Coding Questions\
**Created:** [January 9, 2021, 5:29pm UTC](https://discourse.processing.org/t/find-new-point-based-on-relative-angle-and-distance/26921 "2021-01-09T17:29:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sarath.jasrin](https://avatars.discourse-cdn.com/v4/letter/s/f475e1/32.png) [@sarath.jasrin](https://discourse.processing.org/u/sarath.jasrin)\
**Post date:** [January 9, 2021, 5:29pm UTC](https://discourse.processing.org/t/find-new-point-based-on-relative-angle-and-distance/26921/1 "2021-01-09T17:29:59Z")

</div>

Hi how to find the new point based on relative angle and distance in the graph system. My drawing looks like below  
[![](https://i.stack.imgur.com/pT0h2.png) ](https://i.stack.imgur.com/pT0h2.png)

Lets say when I change angle between two points (A and c) 126 to 180 the drawing should change to below  
[![](https://i.stack.imgur.com/XTnZI.png) ](https://i.stack.imgur.com/XTnZI.png)

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

```auto
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:  
[![](https://i.stack.imgur.com/lyTLh.png) ](https://i.stack.imgur.com/lyTLh.png)

---

<div class="post-metadata">

**Author:** ![ErraticGenerator](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erraticgenerator/32/11304_2.png) [@ErraticGenerator](https://discourse.processing.org/u/ErraticGenerator)\
**Post date:** [January 10, 2021, 7:36pm UTC](https://discourse.processing.org/t/find-new-point-based-on-relative-angle-and-distance/26921/4 "2021-01-10T19:36:11Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![ReyzArtz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/reyzartz/32/11750_2.png) [@ReyzArtz](https://discourse.processing.org/u/ReyzArtz)\
**Post date:** [January 11, 2021, 8:31pm UTC](https://discourse.processing.org/t/find-new-point-based-on-relative-angle-and-distance/26921/5 "2021-01-11T20:31:13Z")

</div>

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](https://p5js.org/reference/#/p5/angleMode)