Circle Drawing Asst. Prof. Dr. Ahmet Sayar Kocaeli University Computer Engineering Advanced Computer Graphics Spring 2012.

Circle Drawing

Asst. Prof. Dr. Ahmet SayarKocaeli University

Computer EngineeringAdvanced Computer Graphics

Spring 2012

A circle is a set of points that are all at a given distance r from a center position ( xc , yc ).

For any circle point ( x , y ), this distance relationship is expressed by the Pythagorean theorem in Cartesian coordinates as

We could use this equation to calculate the position of points on a circle circumference by stepping along the x axis in unit steps from xc - r to xc + r and calculating the corresponding y values at each position as

Properties of Circle

A Simple Circle Drawing Algorithm

The equation for a circle is:

where r is the radius of the circle

So, we can write a simple circle drawing algorithm by solving the equation for y at unit x intervals using:

222 ryx

22 xry

Brute Force Method

20020 220 y

20120 221 y

20220 222 y

61920 2219 y

02020 2220 y

Computational cost: floating point multiplications, subtraction, square-root, rounding

Issues on Brute Force Method

Problems in the brute force method– Involves considerable computations at each steps. Lots of float-

point calculations– Spacing between plotted pixel positions is not uniform

Eliminating unequal spacing– Expressing the circle equation in parametric polar form

x= xc+ r cos(alpha), y= yc+ r sin(alpha) for 0o < alpha < 360o

– For a more continuous boundary, set the step size at 1/r

Reducing computation cost– Considering the symmetry of circles– Still require a good deal of computation time for a octant

Common approach

However, unsurprisingly this is not a brilliant solution!Firstly, the resulting circle has large gaps where the slope approaches the verticalSecondly, the calculations are not very efficient

– The square (multiply) operations– The square root operation – try really hard to

avoid these!

We need a more efficient, more accurate solution

Midpoint Circle Algorithm (1/4)

Only need to draw the arc between (0, r) and (r/sqrt(2),r/sqrt(2))

The coordinates of the other pixels can be implied from the 8-way symmetry rule.

45o

Eight-Way Symmetry

The first thing we can notice to make our circle drawing algorithm more efficient is that circles centred at (0, 0) have eight-way symmetry

(x, y)

(y, x)

(y, -x)

(x, -y)(-x, -y)

(-y, -x)

(y, -x)

(-x, y)

2

R

Mid-Point Circle Algorithm

Similarly to the case with lines, there is an incremental algorithm for drawing circles – the mid-point circle algorithm

In the mid-point circle algorithm we use eight-way symmetry so only ever calculate the points for the top right eighth of a circle, and then use symmetry to get the rest of the points

Midpoint Circle Algorithm),( pp yxP E

SE

M

Choose E as the next pixel if M lies inside the circle, and SE otherwise.

d =d<0: Select E

dnew = d + (2xp+3)

d>0: Select SEdnew = d + (2xp–2yp+5)

22

2

2

1)1(

2

1,1 RyxyxF

xp xp+1

y-1/2

d

r2 = x2+y2

d= F(x,y) = x2+y2-r2

Choosing the Next Pixel

M

(x, y) (x+1, y)

(x+1, y-1)

E

SE

0)2/1,1( yxF

0)2/1,1( yxF

choose SE

choose E

)2/1,1()( yxFMFddecision variable d

Change of d when E is chosen

Mold

(x, y) (x+1, y)

(x+1, y-1)

E

SE

(x+2, y)

(x+2, y-1)

Mnew

32

)2/1()1(

)2/1()2(222

222

xddd

Ryxd

Ryxd

oldnew

old

new

Change of d when SE is chosen

Mold

(x, y) (x+1, y)E

SE

(x+1, y-2) (x+2, y-2)

Mnew

522

)2/1()1(

)2/3()2(222

222

yxddd

Ryxd

Ryxd

oldnew

old

new

Initial value of d

Rd

RRd

RFd

MFd

4/5

)2/1()1(

)2/1,1(

)(

0

2220

0

00

(0,R)

M0

(1,R)

(1,R-1)

Remember f(x+1,y+1/2) when we talked about midpoint line drawing

Midpoint Circle Algorithm (3/4)

Start with P (x = 0, y = R).

x = 0;y = R;d = 5/4 – R; /* real */While (x < y) {

If (d >= 0) // SE is chosen y = y – 1 d = d + 2 * (x – y) + 5

else // E is chosen d = d + 2 * x + 3

x = x+1; WritePixel(x, y)

}

Where is the arch drawn?

New Decision Variable

Our circle algorithm requires arithmetic with real numbers.

Let’s create a new decision variable kdkd=d-1/4

Substitute kd+1/4 for d in the code.

Note kd > -1/4 can be replaced with h > 0 since kd will always have an integer value.

Midpoint Circle Algorithm

Start with P (x = 0, y = R).

x = 0;y = R;kd = 1 – R;While (x < y) {

If (kd >= 0) // SE is chosen y = y – 1 kd = kd + 2 * (x – y) + 5

else // E is chosen kd = kd + 2 * x + 3

x = x+1; WritePixel(x, y)

}

LINE DRAWING with Midpoint Algorithm

x=xL y=yL

d=xH - xL c=yL - yH

sum=2c+d //initial value // decision param sum is multiplied with 2, act val (c+d/2)draw(x,y)

while ( x < xH) // iterate until reaching the end pointif ( sum < 0 ) // below the line and choose NE

sum += 2dy++

x++sum += 2cdraw(x,y)

Compare this with the algorithm presented in the previous slide

EXPLAIN !

Initial value of decision param: sum

What about starting value?

eydxcyxf LLLL )()1(),1( 21

21

dcyxfyxf LLLL 21

21 ),(),1(

(xL+1,yL+1/2)

dcyxfyxf LLLL 21

21 ),(),1(

is on the line!),( LL yx

dcyxf LL 21

21 ),1(

Sum = 2c + d

Drawing circle in OpenGL

OpenGL does not have any primitives for drawing curves or circles. However we can approximate a circle using a triangle fan like this:

glBegin(GL_TRIANGLE_FAN)

glVertex2f(x1, y1)

for angle# = 0 to 360 step 5

glVertex2f(x1 + sind(angle#) * radius#, y1 + cosd(angle#) * radius#)

next

glEnd()

If you want to use mid-point to draw circle

If you calculate the points on circle through the given mid-point algorithm, then use

glBegin(GL_POINTS)

glVertex2f(x1, y1)

glEnd()