javascripthtmlcanvas

mathematics for drawing little lines around circle

I have to draw lines around a circle (like in clock). How can i achieve this using a for loop? alt text

Solution

  • I'm not sure how to do the actual drawing of a line in Java but to calculate co-ordinates from a central point (cx,cy) use

    px = cx+sin(a)*r
py = cy+cos(a)*r

    Where a is the angle (in radians - I think ie 180 degress=π radians) and r is the radius.

    To draw the little lines around the outside you would need to use this formula with say a radius of 100 and the also with a radius of 105 and draw between the two sets of co-ordinates.

    eg

    for (var a=0,aMax=(2*Math.PI),aStep=(Math.PI/30); a<aMax; a+=aStep){
    px1 = cx+Math.sin(a)*r;
    py1 = cy+Math.cos(a)*r;
    px2 = cx+Math.sin(a)*(r+5);
    py2 = cy+Math.cos(a)*(r+5);

    //draw line between (px1,py1) and (px2,py2)
};