2

Im trying to use a forumla to convert degrees into X and Y coordinates, so that I can place points around the circumference of a circle with CSS by means of "top" and "left" offsets.

These posts describe trigonomic functions to help with this:

Dozens of searches keep bringing up this formula:

X = r * cosine(angle)
Y = r * sine(angle)

But I cannot get it to work in the context of my code. This code:

// angle is amount in degrees that the point should be at
// pieHeight is distance between bottom of semicircle and top of semicircle (i.e. radius)
var angle = ((amount / range) * 180);
offLeft = pieHeight + ((pieHeight) * Math.cos(angle));
offTop = (pieHeight / 3) + ((pieHeight) * Math.sin(angle));
console.log(amount, angle, Math.round(offLeft), Math.round(offTop));

// Update display
$(val).css('left', offLeft);
$(val).css('top', offTop);

Yields this result:

Incorrect dials

Console output is:

0 0 268 45
20 36 117 -88
40 72 4 79
60 108 184 169
80 144 251 -21
100 180 54 -63

The numbers are in a circular arc as the should be, but they are not in order, and I can't get them to conform to be within only a semicircle. Can someone tell me what I am doing wrong?

Community
  • 1
  • 1
kohloth
  • 742
  • 1
  • 7
  • 21

1 Answers1

2

The problem is that Math.sin() and Math.cos() take an angle in radians. I guess you are multiplying by 180 to get an angle in degrees.

Try changing

var angle = ((amount / range) * 180);

with 

var angle = ((amount / range) * Math.PI);
syymza
  • 679
  • 1
  • 8
  • 23
  • Legend! Thats fixed it. It looks like this now: http://postimg.org/image/cnxuginfb/ I just need to adjust some offsets and invert some numbers and it will be functioning as expected. – kohloth May 13 '15 at 14:01