Calculating evenly spaced points on the perimeter of a circle

Question

The math behind this question has been asked numerous times, so that's not specifically what I'm after. Rather, I'm trying to program the equation for determining these points into a loop in JavaScript, so that I can display points the evenly around the circle.

So with the equations for the X and Y positions of the points:

pointX = r * cos(theta) + centerX 
pointY = r * sin(theta) + centerY

I should be able to calculate it with this:

var centerX = 300;
var centerY = 175;
var radius = 100;
var numberOfPoints = 8;
var theta = 360/numberOfPoints;

for ( var i = 1; i <= numberOfPoints; i++ ) {

    pointX = ( radius * Math.cos(theta * i) + centerX );
    pointY = ( radius * Math.sin(theta * i) + centerY );
    // Draw point ( pointX , pointY )
}

And it should give me the x,y coordinates along the perimeter for 8 points, spread 45° from each other. But this doesn't work, and I'm not understanding why.

This is the output that I get (using the HTML5 Canvas element). The points should reside on the innermost red circle, as that one has a

Incorrect:

When it "should" look like this (although this is with just 1 point, placed manually):

Correct:

Could someone help me out? It's been years since I took trig, but even with looking at other examples (from various languages), I don't see why this isn't working.

I've edited to remove your solution from the question, since you posted it as an answer. Thanks for sharing your solution as an answer below! — Aurora0001, Aug 22 '17 at 12:27
@Aurora0001 ....sure, if that's important, go for it. I mean, at this point (over three years later), I suppose it's relevant, hahaha — SalarianEngineer, Aug 22 '17 at 16:21

score 16 · Accepted Answer · edited Aug 25 '17 at 04:17

Update: Figured it out!

I didn't need to add the centerX and centerY to each calculation, because in my code, those points were already relative to the center of the circle. So, while the canvas center was at point (300, 175), all points were relative to the circle that I created (the stroke line that they need to be placed on), and so the center for them was at (0, 0). I removed this from the code, and split the theta and angle calculations into two variables for better readability, and voila!

totalPoints = 8;

for (var i = 1; i <= totalPoints  ; i++) {
    drawPoint(100, i, totalPoints);
}

function drawPoint(r, currentPoint, totalPoints) {  

    var theta = ((Math.PI*2) / totalPoints);
    var angle = (theta * currentPoint);

    electron.pivot.x = (r * Math.cos(angle));
    electron.pivot.y = (r * Math.sin(angle));

    return electron;
}

Correct:

Nice math! Using your math but adding back in the + centerx +centery worked for me. Thank you. — edencorbin, Sep 01 '17 at 17:08

score 4 · Answer 2 · answered Jun 17 '14 at 22:03

4

cos and sin in Javascript accept an argument in radians, not degrees. You can change your theta calculation to

var theta = (Math.PI*2)/numberOfPoints;

See the Math.cos documentation for details

answered Jun 17 '14 at 22:03

Emmett Butler

5,969
2
29
47

1

Oops, thanks for pointing that out. Unfortunately, there's got to be something else that I'm missing, because it now places the point out 1 ring farther, just past the green ring (in always the same angle as the one shown in my first screenshot). – SalarianEngineer Jun 17 '14 at 22:11
1

Figured it out. The center of the canvas is at point (300, 175), but from each point's perspective, the center of the canvas was point (0, 0). I had to strip that out of the calculation, and it worked wonders. – SalarianEngineer Jun 17 '14 at 22:51

score 3 · Answer 3 · answered Jun 17 '14 at 22:32

@Emmett J. Butler's solution should work. The following is a complete working example

// canvas and mousedown related variables
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();

// save canvas size to vars b/ they're used often
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;


var centerX = 150;
var centerY = 175;
var radius = 100;
var numberOfPoints = 8;
var theta = 2.0*Math.PI/numberOfPoints;

ctx.beginPath();
for ( var i = 1; i <= numberOfPoints; i++ ) {

    pointX = ( radius * Math.cos(theta * i) + centerX );
    pointY = ( radius * Math.sin(theta * i) + centerY );
    ctx.fillStyle = "Red";
    ctx.fillRect(pointX-5,pointY-5,10,10);

    ctx.fillStyle = "Green";
}
ctx.stroke();

Calculating evenly spaced points on the perimeter of a circle

3 Answers3

Update: Figured it out!