How to find x and y coordinates on a flipped circle using javascript methods

Question

I am trying to find the X, Y points on a circle where 0 degrees starts at the top of the circle and moves clockwise. Typically, to find the x, y coordinates on a circle with a known radius and angle you could simply use the formula x = r(cos(degrees‎°)), y = r(sin(degrees‎°)). The circle would look like this and the degrees would expand counterclockwise from 0‎°.

However, I am using a circle where the 0‎° starts at the top and the degrees expand as one moves clockwise around the circle. Supposing that var r = 60; and var degrees = 130; what formula could I use (or javascript methods) to determine the X, Y values. Note: I can assume an origin point of 0, 60 because r = 60. Thanks.

score 20 · Answer 1 · answered Apr 26 '17 at 18:53

20

As full circle has 2 radiants so you could calculate point coordinates for your circle with following formula:

x = radius * Math.sin(Math.PI * 2 * angle / 360);

y = radius * Math.cos(Math.PI * 2 * angle / 360);

var radius = 60;
var angle  = 140;
var x = radius * Math.sin(Math.PI * 2 * angle / 360);
var y = radius * Math.cos(Math.PI * 2 * angle / 360);
console.log('Points coors are  x='+ 
   Math.round(x * 100) / 100 +', y=' +
   Math.round(y * 100) / 100)

answered Apr 26 '17 at 18:53

MaxZoom

7,619
5
28
44

Don't know why this has the most upvotes, but your formula is wrong. Cos is used in x-coordinate calculation and sin is used in y-coordinate calc. You have them flipped – Isaac Aug 03 '23 at 23:34

score 11 · Accepted Answer · answered Apr 26 '17 at 19:00

The trick is to convert your problem into the problem you know how to solve. You can do this by subtracting 90 degrees from your angle and negating y, i.e. x=r cos(theta-90) and y = -r sin(theta-90). In JavaScript:

function circleXY(r, theta) {
  // Convert angle to radians
  theta = (theta-90) * Math.PI/180;

  return {x: r*Math.cos(theta),
          y: -r*Math.sin(theta)}
}

for (var theta=0; theta<=360; theta += 30) {
  var answer = circleXY(60, theta);
  console.log('(x, y) = ' + '(' + answer.x + ', ' + answer.y + ') for theta=' + theta);
}

produces the following result:

(x, y) = (3.67394039744206e-15, 60) for theta=0

(x, y) = (30.000000000000007, 51.96152422706631) for theta=30

(x, y) = (51.96152422706632, 29.999999999999996) for theta=60

(x, y) = (60, 0) for theta=90

(x, y) = (51.96152422706632, -29.999999999999996) for theta=120

(x, y) = (30.000000000000007, -51.96152422706631) for theta=150

(x, y) = (3.67394039744206e-15, -60) for theta=180

(x, y) = (-29.999999999999986, -51.96152422706632) for theta=210

(x, y) = (-51.96152422706632, -29.999999999999996) for theta=240

(x, y) = (-60, -7.34788079488412e-15) for theta=270

(x, y) = (-51.96152422706631, 30.000000000000007) for theta=300

(x, y) = (-30.00000000000003, 51.961524227066306) for theta=330

(x, y) = (-1.1021821192326178e-14, 60) for theta=360

score 0 · Answer 3 · answered Feb 16 '22 at 20:34

0

Should be

x = Math.cos(Math.PI * 2 * angle/360); and y = Math.sin(Math.PI * 2 * angle/360);

answered Feb 16 '22 at 20:34

PythonFanatic999

33
4

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 16 '22 at 22:33

How to find x and y coordinates on a flipped circle using javascript methods

3 Answers3

Linked