CODEWITHSUNDEEP
javascriptgeometrytrigonometryangle
gwydion93
gwydion93

Reputation: 1923

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

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‎°. enter image description here

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. enter image description here

Upvotes: 19

Views: 45615

Answers (3)

MaxZoom
MaxZoom

Reputation: 7753

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)

Upvotes: 21

PythonFanatic999
PythonFanatic999

Reputation: 33

Should be

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

Upvotes: 0

cjg
cjg

Reputation: 2684

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

Upvotes: 18

Related Questions