CODEWITHSUNDEEP
javascripttrigonometry
tonejac
tonejac

Reputation: 1103

How do I move the starting point of X,Y coordinates plotted on a circle perimeter?

I want to plot a range of points on the lower left section (6 to 9 o'clock) of the perimeter of a circle. However, the starting point of rendering X,Y coordinates always begins at 3 o'clock. !https://dl.dropboxusercontent.com/u/55849501/plotting-xy.png

Here is the rendering portion of my code:

var items = 5;
for(var i = 0; i < items; i++) {
    var x = 96 + 100 * Math.cos(0.665 * Math.PI * i / items);
    var y = 96 + 100 * Math.sin(0.665 * Math.PI * i / items);   
    $("#center").append("<div class='point' style='left:"+ x +"px;top:"+ y +"px'></div>");    
}

And here is a jsfiddle of the code in action: http://jsfiddle.net/jE26S/198/

In summary: I want the points to render starting at the 6 o'clock position instead of the 3 o'clock position.

Upvotes: 0

Views: 933

Answers (3)

kecklabs
kecklabs

Reputation: 43

Everything in Richard Shurtz's answer, except for the "items - 1" in the first line in the loop.

This worked for any number of items:

var items = 5;
var startTheta = .5 * Math.PI;
var endTheta = 1 * Math.PI;
var outerCircleRadius = 112;
var cx = 90;
var cy = 90;
for(var i = 0; i < items; i++) {
    var theta = startTheta + (endTheta - startTheta) * i / items
    var x = cx + outerCircleRadius * Math.cos(theta);
    var y = cy + outerCircleRadius * Math.sin(theta);   
    $("#center").append("<div class='point' style='left:"+ x +"px;top:"+ y +"px'></div>");    
}

Upvotes: 0

Richard Shurtz
Richard Shurtz

Reputation: 1661

What you are really doing here is interpolating between two values of theta. In your case, you want to start at Pi/2 and end at Pi. I took the liberty of re-writing your snippet using this interpolation paradigm. Also, you can adjust how far you want the dots/items away from the circle using outerCircleRadius.

var items = 5;
var startTheta = .5 * Math.PI;
var endTheta = 1 * Math.PI;
var outerCircleRadius = 112;
var cx = 90;
var cy = 90;
for(var i = 0; i < items; i++) {
    var theta = startTheta + (endTheta - startTheta) * i / (items - 1)
    var x = cx + outerCircleRadius * Math.cos(theta);
    var y = cy + outerCircleRadius * Math.sin(theta);   
    $("#center").append("<div class='point' style='left:"+ x +"px;top:"+ y +"px'></div>");    
}

Upvotes: 2

Scott Hunter
Scott Hunter

Reputation: 49803

Something like this?

var x = 86 + 100 * Math.cos(0.665 * Math.PI * (items-1+i-0.5) / items);
var y = 96 + 100 * Math.sin(0.665 * Math.PI * (items-1+i-0.5) / items);

Upvotes: 1

Related Questions