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.

Scuttlebutt

Answer 1

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

Gullible

This only functions if you remove the negative on the y. Other than that its perfect – Ishtar

Answer 2

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

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

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

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

Affirmation

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 – Mcphail

As noted above, this answer, while the most clearly presented, flips Cos and Sin and also incorrectly assumes where 0 deg is. Subtract 90 from the angle and flip Cos and Sin to get the correct answer. – Monoplegia

Answer 3

Should be

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

Working

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. – Ceceliacecil