Computer

Graphics
CPCS-391
Drawing Circles
DR. MOHAMED Y. DAHAB
MOHAMED.DAHAB@GMAIL.COM

1
 Bresenham’s Line Algorithm
An accurate and efficient raster line-generating algorithm

scan converts lines using only incrementa1 integer calculations

we- consider only the scan-conversion process for lines with positive slope less than 1 (i.e. 𝑚 ≤ 1).

2
 Bresenham’s Line Algorithm
(Cont’)
This equation is very important and it represents the core of bresnham’s algorithm

𝒑𝒌+𝟏 = 𝒑𝒌 + 𝟐 ∆𝒚 − 𝟐∆𝒙 (𝒚𝒌+𝟏 − 𝒚𝒌 )

The term (𝒚𝒌+𝟏 − 𝒚𝒌 ) 𝒉𝒂𝒔 𝒐𝒏𝒍𝒚 𝒕𝒘𝒐 𝒑𝒐𝒔𝒔𝒊𝒃𝒍𝒆 𝒗𝒂𝒍𝒖𝒆𝒔 𝟎 𝒐𝒓 1

If the previous parameter 𝑝𝑘 is negative ➔ 𝒚𝒌+𝟏 = 𝒚𝒌

𝒑𝒌+𝟏 = 𝒑𝒌 + 𝟐 ∆𝒚

If the previous parameter 𝑝𝑘 is positive ➔ 𝒚𝒌+𝟏 = 𝒚𝒌 +𝟏

𝒑𝒌+𝟏 = 𝒑𝒌 + 𝟐 ∆𝒚 − 𝟐 ∆𝒙
3
private void BresenhamsDrawingLine(int X1, int Y1, int X2, int Y2, GL gl) {

int DX= X2-X1; int DY=Y2-Y1; int DY2=2*DY; int DX2=2*DY-2*DX; int p=2*DY-DX; float m = (float)DY /DX; int y=Y1; int x= X1;

gl.glBegin(GL.GL_POINTS);

gl.glVertex2i(X1, Y1);

gl.glEnd();

Bresenham’s
if (m<=1){

gl.glBegin(GL.GL_POINTS);

for(int xi=X1+1;xi<=X2;xi++){

if (p<0){
Line
gl.glVertex2i(xi, y);
AlgorithmUsing
JOGL
p=p+DY2;

}else{

gl.glVertex2i(xi, ++y);

p=p+DX2;

gl.glEnd();

}else{

4
 Midpoint Line Algorithm

What is the value of this point?

What is the value of this point?

What is the value of this point?

5
 Midpoint Line Algorithm
Derivation
Line Properties
𝑦=𝑚𝑥+𝑏
∆𝑦
𝑦= 𝑥+𝑏
∆𝑥
∆𝑥 . 𝑦 = ∆𝑦 . 𝑥 + ∆𝑥 . 𝑏
∆𝑦 . 𝑥 − ∆𝑥 . 𝑦 + ∆𝑥 . 𝑏 = 0
𝐹 𝑥, 𝑦 = ∆𝑦 . 𝑥 − ∆𝑥 . 𝑦 + ∆𝑥 . 𝑏 = 0

6
Midpoint Line Algorithm
Derivation(Cont’)
Line Properties
𝐹 𝑥, 𝑦 = ∆𝑦 . 𝑥 − ∆𝑥 . 𝑦 + ∆𝑥 . 𝑏 = 0

if x and y aren't in the line

7
 Midpoint Line Algorithm
Derivation(Cont’)
𝐹 𝑥, 𝑦 = ∆𝑦 . 𝑥 − ∆𝑥 . 𝑦 + ∆𝑥 . 𝑏 = 0

Decision 𝑑 = 𝐹 Midpoint

𝑑 = 𝐹 Midpoint = 𝐹(𝑥𝑝+1 , 𝑦𝑝 + 0.5)

𝐹(𝑥𝑝+1 , 𝑦𝑝 + 0.5) =∆𝑦 . (𝑥𝑝 + 1) − ∆𝑥 . (𝑦𝑝 + 0.5) + ∆𝑥 . 𝑏

8
Midpoint Line Algorithm
Derivation(Cont’)
If 𝑑 < 0 If 𝑑 ≥ 0

9
 Midpoint Line Algorithm derivation
(Cont’)
𝐹 𝑥, 𝑦 = ∆𝑦 . 𝑥 − ∆𝑥 . 𝑦 + ∆𝑥 . 𝑏 = 0

Decision 𝑑 = 𝐹 Midpoint
𝑑 = 𝐹 Midpoint = 𝐹(𝑥𝑝+1 , 𝑦𝑝 + 0.5)

𝐹(𝑥𝑝+1 , 𝑦𝑝 + 0.5) =∆𝑦 . 𝑥𝑝 + 1 − ∆𝑥 . 𝑦𝑝 + 0.5 + ∆𝑥 . 𝑏

If 𝒅 ≥ 𝟎 then choose NE
𝑑𝑛𝑒𝑤 = 𝐹(𝑥𝑝 + 2 , 𝑦𝑝 + 1.5)

=∆𝑦 . (𝑥𝑝 + 2) − ∆𝑥 . (𝑦𝑝 + 1.5) + ∆𝑥 . 𝑏

𝑑𝑛𝑒𝑤 − 𝑑 = ∆𝑦 − ∆𝑥
𝑑𝑛𝑒𝑤 = 𝑑 + ∆𝑦 − ∆𝑥 10
Midpoint Line Algorithm
Derivation(Cont’)
If 𝒅 ≥ 𝟎

𝑑 =∆𝑦 . (𝑥𝑝 + 1) − ∆𝑥 . (𝑦𝑝 + 0.5) + ∆𝑥 . 𝑏

𝑑𝑛𝑒𝑤 = ∆𝑦 . (𝑥𝑝 + 2) − ∆𝑥 . (𝑦𝑝 + 1.5) + ∆𝑥 . 𝑏
𝑑𝑛𝑒𝑤 − 𝑑 = ∆𝑦 − ∆𝑥
𝑑𝑛𝑒𝑤 = 𝑑 + ∆𝑦 − ∆𝑥
𝑑𝑛𝑒𝑤 = 𝑑 + ∆𝑁𝐸

If 𝒅 < 𝟎
𝑑𝑛𝑒𝑤 = ∆𝑦 . (𝑥𝑝 + 2) − ∆𝑥 . (𝑦𝑝 + 0.5) + ∆𝑥 . 𝑏
𝑑𝑛𝑒𝑤 = 𝑑 + ∆𝑦
𝑑𝑛𝑒𝑤 = 𝑑 + ∆𝐸

11
 Midpoint Line Algorithm
Derivation(Cont’)
Finding the initial value of decision 𝑑0

𝑑0 = 𝐹 first Midpoint = 𝐹 𝑥0+1 , 𝑦0 + 0.5

𝑑0 =∆𝑦 . (𝑥0 + 1) − ∆𝑥 . (𝑦0 + 0.5) + ∆𝑥 . 𝑏

𝑑0 =∆𝑦 . 𝑥0 + ∆𝑦 − ∆𝑥 . 𝑦0 − 0.5∆𝑥 + ∆𝑥 . 𝑏

𝑑0 =∆𝑦 . 𝑥0 − ∆𝑥 . 𝑦0 + ∆𝑥 . 𝑏 +∆𝑦 − 0.5∆𝑥

𝑑0 =𝐹 𝑥0 , 𝑦0 + ∆𝑦 − 0.5∆𝑥

𝑑0 =∆𝑦 − 0.5∆𝑥

12
 Midpoint Line Algorithm
Derivation(Cont’)
Finding the initial value of decision 𝑑0

𝑑0 =∆𝑦 − 0.5∆𝑥

We are interested with the sign of 𝑑 not the value. So to avoid the fraction multiply by 2

𝑑0 = 2. ∆𝑦 − ∆𝑥
∆𝑁𝐸 = 2. (∆𝑦 − ∆𝑥)
∆𝐸 = 2∆𝑦

13
 Midpoint Line Algorithm
function [x,y]=mpla(x0,y0,x1,y1)

x0=round(x0);x1=round(x1); y0=round(y0);
dx=x1-x0; dy=y1-y0; dne=2*dy-2*dx; de=2*dy; d=2*dy-dx;

y(1)=y0; x=x0:x1;

k=1;

for i=x0+1:x1

if d<0

y(k+1)=y(k);

d=d+de;

else

y(k+1)=y(k)+1;

d=d+dne;

end

k=k+1;

end 14
 Midpoint Line Algorithm
Use Midpoint Line Algorithm to draw the following line: from (1, 1) to (10, 5)
x0 y0 x1 y1 ΔE ΔNE p
1 1 10 5 8 -10 -1
2 1 7
3 2 -3
4 2 5
5 3 -5
6 3 3
7 4 -7
8 4 1
9 5 -9
10 5

15
 Tracing Bresenham’s Algorithm
Use Bresenham’s algorithm to draw the following line: from (1, 1) to (10, 5)
x0 y0 x1 y1 2Δy 2Δy-2Δx p
1 1 10 5 8 -10 -1
2 1 7
3 2 -3
4 2 5
5 3 -5
6 3 3
7 4 -7
8 4 1
9 5 -9
10 5

16
 Quick Revision
Draw a line from (2, 1) to (12, 7) using midpoint line algorithm. Show all intermediate computations
and draw pixels on the figures

17
 Quick Revision (Cont’)
Name the following algorithm:
increment 𝑥 by 1 from the starting point (𝑥0 , 𝑦0 ) to the ending point (𝑥1 ,𝑦1 ) calculate y at
each point, 𝑦1 = 𝑚 . 𝑥1 + 𝑏 turn on pixel (𝑥1 ,round(𝑦1 ))

18
 Properties of Circles
A circle is defined as the set of points that are all at a given distance 𝑟 from
a center position (𝑥𝑐 ,𝑦𝑐 )

This distance relationship is expressed by the Pythagorean theorem in

Cartesian coordinates as
𝑥 − 𝑥𝑐 2 + 𝑦 − 𝑦𝑐 2 = 𝑟 2

We could use this equation to calculate the position of points on a circle

circumference by stepping along the 𝑥 axis in unit steps from 𝑥𝑐 − 𝑟 to 𝑥𝑐 +
𝑟 and calculating the corresponding 𝑦 values at each position

But this is not the best method for generating a circle. One problem with
this approach is that it involves considerable computation at each step

19
Properties of Circles
(Cont’)
Moreover, the spacing between plotted pixel positions is not uniform, as
demonstrated in the Figure

We could adjust the spacing by interchanging 𝑥 and 𝑦 (stepping through 𝑦

values and calculating 𝑥 values) whenever the absolute value of the slope
of the circle is greater than 1

Another way to eliminate the unequal spacing shown in the Figure is to

calculate points along the circular boundary using polar coordinates 𝑟 and
Ѳ. This distance relationship is expressed by :
𝑥 = 𝑥𝑐 + 𝑟 cos Ѳ
𝑦 = 𝑦𝑐 + 𝑟 sin Ѳ

For a more continuous boundary on a raster display, we can set the step
1
size at
𝑟

20
Properties of Circles
(Cont’)
Computation can be reduced by considering the symmetry of
circles

The shape of the circle is similar in each quadrant

We can take this one step further and note that there is also
symmetry between octants. Circle sections in adjacent octants
within one quadrant are symmetric with respect to the 45º line
dividing the two octants

21
 Drawing Circle Algorithm
Determining pixel positions along a circle circumference still requires a good deal of computation
time.

The Cartesian equation involves multiplications and square root calculations, while the parametric
equations contain multiplications and trigonometric calculations

More efficient circle algorithms are based on incremental calculation of decision-parameters, as in

the Bresenham’s line algorithm, which involves only simple integer operations

22
 Midpoint Circle Algorithm
Implicit of equation of circle is : 𝑥 2 + 𝑦 2 − 𝑟 2 = 0

Eight way symmetry require to calculate one octant

Taking advantage of the circle symmetry, in this way we can generate all pixel positions around a
circle by calculating only the points within the sector from 𝑥 = 0 to 𝑥 = 𝑦

Point at position (𝑥, 𝑦) on a one-eighth circle sector is mapped into the seven circle points in the
other octants of the 𝑥𝑦 plane

In each iteration only calculate one pixel, but plot 8 pixels

23
 Midpoint Circle Algorithm (Cont’)
Define decision variable 𝑑 as:
2 2
𝑑 = 𝐹 𝑥𝑝 + 1 , 𝑦𝑝 − 0.5 = 𝑥𝑝 + 1 + 𝑦𝑝 − 0.5 − 𝑟2

𝑖𝑓 𝑑 < 0
𝑚 inside the circle, choose 𝐸
𝑦 remains unchanged

𝑖𝑓 𝑑 > 0
𝑚 outside the circle, choose 𝑆𝐸
Decrement 𝑦

𝑖𝑓 𝑑 = 0
choose 𝑆𝐸 or 𝐸

24
 Midpoint Circle Algorithm (Cont’)
𝑖𝑓 𝑑 < 0
2 2
𝑑 = 𝐹 𝑥𝑝 + 1 , 𝑦𝑝 − 0.5 = 𝑥𝑝 + 1 + 𝑦𝑝 − 0.5 − 𝑟2
2 2
𝑑𝑛𝑒𝑤 = 𝐹 𝑥𝑝 + 2 , 𝑦𝑝 − 0.5 = 𝑥𝑝 + 2 + 𝑦𝑝 − 0.5 − 𝑟2

𝑑𝑛𝑒𝑤 − 𝑑 = 2𝑥𝑝 + 3

𝑑𝑛𝑒𝑤 − 𝑑 = ∆𝐸

𝑑𝑛𝑒𝑤 = 𝑑 + ∆𝐸

𝑑𝑛𝑒𝑤 = 𝑑 + ∆𝐸

25
 Midpoint Circle Algorithm (Cont’)
𝑖𝑓 𝑑 > 0
2 2
𝑑 = 𝐹 𝑥𝑝 + 1 , 𝑦𝑝 − 0.5 = 𝑥𝑝 + 1 + 𝑦𝑝 − 0.5 − 𝑟2
2 2
𝑑𝑛𝑒𝑤 = 𝐹 𝑥𝑝 + 2 , 𝑦𝑝 − 1.5 = 𝑥𝑝 + 2 + 𝑦𝑝 − 1.5 − 𝑟2

𝑑𝑛𝑒𝑤 − 𝑑 = 2𝑥𝑝 − 2𝑦𝑝 + 5

𝑑𝑛𝑒𝑤 − 𝑑 = ∆𝑆𝐸

𝑑𝑛𝑒𝑤 = 𝑑 + ∆𝑆𝐸

𝑑𝑛𝑒𝑤 = 𝑑 + ∆𝑆𝐸

26
 Midpoint Circle Algorithm (Cont’)
Initial condition 𝑑0

Starting pixel 0, 𝑟 and next midpoint 1, 𝑟 − 0.5

𝑑0 = 𝐹 1, 𝑟 − 0.5 − 𝐹 0, 𝑟 = 1.25 − 𝑟 = 1 − 𝑟

𝑑0 = 1 − 𝑟

27
Midpoint Circle Algorithm using
matlab
function [xo,yo]=MidpointCircleAlgorithm (r)

y0=round(r); x0=0; x1=round(r*sind(45)); h=1-y0; y(1)=y0; x=x0:x1; k=1;

for i=x0+1:x1 % while y> x

if h<0

y(k+1)=y(k);

h=h+2*x(k)+3;

else

y(k+1)=y(k)-1;

h=h+2*x(k)-2*y(k)+5;

end

k=k+1;

end

xo=[x -x -y -y -x x y y];

yo=[y y x -x -y -y -x x];

plot(xo,yo,'ro')

28
Tracing Midpoint Circle Algorithm
MidpointCircleAlgorithm (0,0,5)

𝑑0 = 1 − 𝑟
R x y 𝑑h
𝑖𝑓 𝑑 < 0 5 0 5 -4
1 5 -1
𝑑𝑛𝑒𝑤 = 𝑑 + ∆𝐸 = 𝑑 + 2𝑥𝑝 + 3 2 5 4
3 4

𝑖𝑓 𝑑 > 0

𝑑𝑛𝑒𝑤 = 𝑑 + ∆𝑆𝐸 = 𝑑 + 2𝑥𝑝 − 2𝑦𝑝 + 5

What are the mapped seven circle points in the other octants

29
Tracing Midpoint Circle Algorithm
(cont’)
For the point (0,5) there are only three circle points:
(0,-5)
(5, 0)
(-5, 0)

For the point (1,5) there are seven circle points:

(1, -5)
(-1, -5)
(5, 1)
(-5, 1)
(-5, -1)
(5, -1)
(-1, 5)

30
Midpoint Ellipse
Algorithm
Loosely stated, an ellipse is an elongated circle
𝑥2 𝑦2
𝐹 𝑥, 𝑦 = + −1=0
𝑎2 𝑏2

To avoid float values: 𝐹 𝑥, 𝑦 = 𝑏 2 𝑥 2 + 𝑎2 𝑦 2 − 𝑎2 𝑏 2 = 0

We have only 4-way symmetry
We have only three additional pixels, unlike circle, will be drawn
with the pixel 𝑥, 𝑦 :
◦ 𝑥, −𝑦
◦ −𝑥, 𝑦
◦ −𝑥, −𝑦
31
Derivation of Midpoint
Ellipse Algorithm
There exists two regions
𝐹 𝑥, 𝑦 = 𝑏2 𝑥 2 + 𝑎2 𝑦 2 − 𝑎2 𝑏2 = 0
𝜕𝐹 𝜕𝐹
𝑑𝑥 = 𝜕𝑥 = 2𝑏 2 𝑥 and 𝑑𝑦 = 𝜕𝑦 = 2𝑎2 𝑦

In Region 1 𝑑𝑥 > 𝑑𝑦 (2𝑏 2 𝑥 < 2𝑎2 𝑦 ≡ 𝑏 2 𝑥 < 𝑎2 𝑦)

◦ Increase 𝑥 at each step
◦ 𝑦 may decrease

In Region 2 𝑑𝑥 < 𝑑𝑦 (2𝑏 2 𝑥 > 2𝑎2 𝑦 ≡ 𝑏 2 𝑥 > 𝑎2 𝑦)

◦ Decrease 𝑦 at each step
◦ 𝑥 may increase

32
Quick Revision (Cont’)

• What are the points that will be drawn with the

point (3,7)to fulfill the symmetric in both circle

and ellipse shapes?

• Show how to derive the initial decision in

midpoint circle algorithm

33