# Algorithm for drawing arc?

• 01-08-2009
6tr6tr
Algorithm for drawing arc?
I'm trying to find an algorithm for drawing an arc but have been unable to find one (most simply use existing libraries). Does anyone know where I might look for some sample code to play with? (And no, this is not homework. I actually need this for javascript, which has no pre-existing libraries for this, so i'll be altering the code).

Thanks!
• 01-08-2009
King Mir
http://cs.unc.edu/~mcmillan/comp136/...e7/circle.html

It's for circles, but you can use it to make an arc.
• 01-08-2009
6tr6tr
Quote:

Originally Posted by King Mir
http://cs.unc.edu/~mcmillan/comp136/...e7/circle.html

It's for circles, but you can use it to make an arc.

Thanks for posting that but for some reason, the arc (or circle) dissapears as it nears the left and right extremes. Any idea why and how to adjust that? The top and bottom show perfectly.
• 01-08-2009
6tr6tr
Quote:

Originally Posted by 6tr6tr
Thanks for posting that but for some reason, the arc (or circle) dissapears as it nears the left and right extremes. Any idea why and how to adjust that? The top and bottom show perfectly.

Found one on wikipedia that works really well! (I altered it slightly)

Code:

```function drawCircle( xMidPoint,  yMidPoint,  radius) {         var f = 1 - radius;         var ddF_x = 1;         var ddF_y = -2 * radius;         var x = 0;         var y = radius;                 //Bottom middle         drawPixel(xMidPoint, yMidPoint + radius);                 //Top Middle         drawPixel(xMidPoint, yMidPoint - radius);                 //Right Middle         drawPixel(xMidPoint + radius, yMidPoint);                 //Left Middle         drawPixel(xMidPoint - radius, yMidPoint);                 while( x < y )         {                 if(f >= 0)                 {                         y--;                         ddF_y += 2;                         f += ddF_y;                 }                 x++;                 ddF_x += 2;                 f += ddF_x;                                    //Lower Right                 drawPixel(xMidPoint + x, yMidPoint + y);                 drawPixel(xMidPoint + y, yMidPoint + x);                                 //Lower Left                 drawPixel(xMidPoint - x, yMidPoint + y);                 drawPixel(xMidPoint - y, yMidPoint + x);                                 //Top Right                 drawPixel(xMidPoint + x, yMidPoint - y);                 drawPixel(xMidPoint + y, yMidPoint - x);                                 //Top Left                 drawPixel(xMidPoint - x, yMidPoint - y);                 drawPixel(xMidPoint - y, yMidPoint - x);         } }```
• 01-08-2009
6tr6tr
The above draws an arc properly, but it's not anti-aliased. Any idea how to calculate where to draw pixels (and of what opacity) to do anti-aliasing?
• 01-08-2009
King Mir
Quote:

Originally Posted by 6tr6tr
Thanks for posting that but for some reason, the arc (or circle) dissapears as it nears the left and right extremes. Any idea why and how to adjust that? The top and bottom show perfectly.

Read/scroll to the end of the article. The bottom examples work perfectly.
• 01-08-2009
brewbuck
Quote:

Originally Posted by 6tr6tr
The above draws an arc properly, but it's not anti-aliased. Any idea how to calculate where to draw pixels (and of what opacity) to do anti-aliasing?

There's no way to do correct antialiasing with this kind of algorithm (the one you refer to from Wikipedia -- which page, exactly?) Antialiasing requires some concept of line thickness which just isn't present in an algorithm which computes grid points.
• 01-09-2009
VirtualAce
To antialias you will need to sample 2 to 8 neighbors of the pixel you are drawing and use a linear filter or an average filter to compute the final color you want to put on the screen. Doing this while drawing will be expensive. This should be more of a post process filter. High quality antialias filters require more samples which means good quality at the expense of performance.