CODEWITHSUNDEEP
javascriptmathcanvas
Keleko
Keleko

Reputation: 243

Drawing points on a canvas with Math.PI calculations

I'm having some math problems with drawing points on a canvas that are spaced out around a circle. I have the radius, the spacing of each point and even the angles around the circle but the issue is I want it to start at a specified angle and end at a specified angle.

Code

function getPoints(x,y,radius,ticks)
{
    var spacing = Math.PI*2/ticks;
    var points = [];
    for(var i=0; i<ticks;i++)
    {
        var angle = (spacing * i)+((ticks*Math.PI)/ticks);
        var x1 = x+radius*Math.cos(angle);
        var y1 = y+radius*Math.sin(angle);
        points.push({'x':x1,'y':y1});
    } 
    return points;
}

I'm having difficulty figuring out the needed math.

here is also a jsFiddle of the project: http://jsfiddle.net/Keleko34/EMeG2/ to help get the idea, the degrees I want to start at are -45 and end at 225.

the current degrees it starts at is 0 and it does the entire 360. as seen above code and example :/

Upvotes: 0

Views: 1420

Answers (1)

Shadow Man
Shadow Man

Reputation: 3402

Your spacing value is based on 360 degrees (or Math.PI*2 radians).

Your starting value (see the angle calculation) is Math.PI (or 180 degrees).

Your span is therefore 180 degrees to 540 degrees (Math.PI to 3*Math.PI radians).

You likely need to change your angle calculation (which should probably be renamed to radians) to have a different starting angle.

You also need to modify your spacing calculation to be based on the number of degrees/radians of your desired arc.

Upvotes: 1

Related Questions