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!

http://cs.unc.edu/~mcmillan/comp136/...e7/circle.html

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

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.

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);
        }
}

---

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?

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.

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.

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.