2

I'm trying to draw the perimeter of a circle depending on the angle inputed by the user. The angle determines the perimeter completion : 360° being the full circle, 180 half of the circle, and so on.

My problem is : given the radius, the angle and the center coordinates of the circle, how can I dynamically compute the path of the perimeter ?

I know it's probably basic math but everything I tried so far didn't work.

Here is my fiddle : https://jsfiddle.net/Hal_9100/L311qq88/ My problem is finding the right formula for the x and y coordinates of the path : 

var x = i * (radius * Math.cos(angle)) + centerX;
var y = i * (radius * Math.sin(angle)) + centerY;

Am I going all wrong here ?

Here is an example of what I'm trying to do : please note that only the black perimeter should be drawn : I just used the dotted red lines to give a visual example of how the perimeter should be drawn depending on the value given by the user.

enter image description here

Hal_9100
  • 773
  • 1
  • 7
  • 17
  • Possible duplicate of [How to calculate the SVG Path for an arc (of a circle)](https://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle) – Kaiido Jun 06 '17 at 03:37

1 Answers1

2

Yes, the problem is your maths. Here is the correct way to calculate the x,y coordinate pairs (note that the iteration is from zero to the required angle, not from zero to the radius):

for (var i = 0; i <= angle; i++) {
        var x = (radius * Math.cos((i-90)*Math.PI/180)) + centerX;
        var y = (radius * Math.sin((i-90)*Math.PI/180)) + centerY;

Your fiddle works fine if you substitute these three lines.

KevB
  • 361
  • 1
  • 2
  • 5