Chapter 2 Computer graphics by Kushal Bhattarai

Scan Conversion Algorithm
Er. Kushal Bhattarai

Scan Conversion Algorithm - 6H
● Scan Converting a Point and a straight line: DDA Line Algorithm, Bresenham’s Line Algorithm
● Scan Converting Circle and Ellipse: Mid Point Circle and Ellipse Algorithm
● Area Filling: Scan Line Polygon fill Algorithm, Inside-outside Test, Scan line fill of Curved Boundary
Area, Boundary-fill and Flood-fill Algorithm.
2

Scan Conversion Algorithm
● Scan conversion is a process of representing graphics objects as a collection of pixels. The graphics
objects are continuous.
● Scan conversion algorithms, also known as rasterization algorithms, are fundamental in computer
graphics for rendering vector graphics or 3D models onto a raster display, such as a monitor. These
algorithms help convert mathematical descriptions of shapes and objects into a grid of pixels.
Following are some common scan conversion algorithms:
● Line Drawing Algorithms:
○ Direct Use of Line Equation
○ DDA (Digital Differential Analyzer)
○ Bresenham's Line Algorithm
● Circle Drawing Algorithms
● Ellipse Drawing Algorithms
3

Line Drawing Algorithm
● It is a graphical algorithm for approximating a line segment on discrete graphical media
● On discrete media, such as pixel-based displays and printers, line drawing requires such an
approximation
● Basic algorithms rasterizing lines in one colour
4

Line Equation
● This is the simplest form of drawing a line.
● We all know that the equation of the line is y = mx + c. Here m is slope and c is the length from
origin to the point where the line cuts y-axis.
● In this method, we will be having the start and endpoint of the line and by the help of that points,
we'll calculate the other points which lie on the line.
● We have to ﬁnd the slope of the line by using the given points.
5

Digital Diﬀerential Analyzer (DDA) Algorithm
● The incremental technique is used in this algorithm.
● It means that we can ﬁnd the next coordinates by using past coordinates as a guide.
● In this method, the difference of pixel point is analyzed and according to the analysis, the line can
be drawn.
● We’ll start with the initial position and work our way to the ending position by looking for
intermediate places.
● The slope of the line will be the ratio of difference of y-coordinates and the difference of
x-coordinates.
● DDA algorithm is faster method for calculating pixel position than simple line drawing algorithm.
● It may suffer from accuracy issues, especially when dealing with steep or near-horizontal lines.
There could be round off error.
8

Working of DDA Algorithm
Suppose we have to draw a line PQ with coordinates P (x1, y1) and Q (x2, y2).
● First, Calculate dx = (x2 - x1) and dy = (y2 - y1)
● Now calculate the slope m = (dy / dx)
● Calculate the number of points to be plotted (i.e. n) by ﬁnding the maximum of dx and dy, i.e.
n = abs (max (dx , dy))
○ To draw an accurate line, more number of points are required. Therefore, the maximum of the two values is
used here.
● Now as the n is calculated, to know by how much each source point should be incremented,
calculate xinc and yinc as follows: xinc = (dx / n) and yinc = (dy / n)
● Now we draw the points from P to Q. The successive points are calculated as follows:
(xnext, ynext) = (x + xinc, y + yinc)
● Start plotting the points from P and stop when Q is reached. In case the incremented values are
decimal, use the round off values.
9

Advantages of DDA Algorithm
● It is the simplest line generation algorithm.
● Implementation of the DDA algorithm is very easy as compared to other line generation
algorithms.
● It does not use multiplication which reduces the time complexity of implementation
● It is a faster and a better method than using the direct method of the line equation: i.e. y = mx + c
Disadvantages of DDA Algorithm
● DDA algorithm use floating-point arithmetic as it involves the use of division in the calculation of
xinc and yinc. This floating-point arithmetic makes the algorithm time-consuming.
● The use of floating-point arithmetic decreases the accuracy of the generated points. Hence the
points that we get are not accurate, i.e. they may not lie accurately on the line.
● As the points that we get from the DDA algorithm are not accurate, the lines generated by this
algorithm are not smooth, i.e. some discontinuation and zigzag nature can be commonly seen in the
lines drawn through this algorithm.
12

Bresenham's Line Drawing Algorithm
● Bresenham's algorithm was proposed to overcome the drawback of the DDA
algorithm, it produced ﬂoating-point results which reduced the overall complexity.
● This algorithm is used for calculating intermediate coordinate points between the
given source and ending points by only using integer addition and subtraction.
● This algorithm determines the points which should be selected to form a close
approximation to a line between two points.
● It is also an incremental method for creating a line.
● It is faster than the DDA algorithm as it does not involves the use of heavy operations
such as multiplication and division.
13

When (t - s) < 0 => t < s, then the closest pixel will be C.
When (t - s) > 0 => s < t, then the closest pixel will be B.
Putting the value of eq.(1) in eq.(2);
t – s = 2m ( xk + 1 ) + 2c - 2yk - 1
Now, substituting the value of m;
t – s = 2dy ( xk + 1 ) / dx + 2c - 2yk - 1
To remove dx from denominator, multiply dx on both sides;
dx (t - s) = dx ( 2dy ( xk + 1 ) / dx + 2c - 2yk – 1 )
let Pk = dx (t - s), thus introducing the decision variable
Pk = 2dy . xk - 2dx . yk + b
b = 2dy + dx ( 2c – 1 )........Constant terms
16

Let us calculate next decision variable:
Pk+1 = 2dy . xk+1 - 2dx . yk+1 + b
Now, solve the difference Pk+1 - Pk
Pk+1 - Pk = 2dy . xk+1 - 2dx . yk+1 + b - ( 2dy . xk - 2dx . yk + b )
= 2dy . xk+1 - 2dx . yk+1 - 2dy . xk + 2dx . yk
Since xk+1 = xk + 1
Pk+1 - Pk = 2dy . (xk + 1) - 2dx . yk+1 - 2dy . xk + 2dx . yk
Pk+1 = Pk + 2dy - 2dx . yk+1 + 2dx . yk
17

Special Cases:
When Pk >= 0 => yk+1 = yk + 1 i.e. point B is chosen
Pk+1 = Pk + 2dy - 2dx
When Pk < 0 => yk+1 = yk i.e. point C is chosen
Pk+1 = Pk +2dy
Now, we will calculate the initial decision variable by using
P0 = dx ( 2dy ( x0 + 1 ) / dx + 2c - 2y0 – 1 )
Put c = y0 - x0. ( dy / dx )
We get
P0 = 2dy – dx 18

Calculate the points between the starting coordinates (9, 18) and ending coordinates (14, 22).
Given
● Starting coordinates = (X0, Y0) = (9, 18)
● Ending coordinates = (Xn, Yn) = (14, 22)
Calculate ΔX and ΔY from the given input.
● ΔX = Xn – X0 = 14 – 9 = 5
● ΔY =Yn – Y0 = 22 – 18 = 4
Calculate the decision parameter.
Pk = 2ΔY – ΔX = 2 x 4 – 5 = 3
So, decision parameter Pk = 3
As Pk >= 0:
Pk+1 = Pk + 2ΔY – 2ΔX = 3 + (2 x 4) – (2 x 5) = 1
Xk+1 = Xk + 1 = 9 + 1 = 10
Yk+1 = Yk + 1 = 18 + 1 = 19
Similarly, the above step is executed until the end point is reached or number of iterations equals to 4 times.
(Number of iterations = ΔX – 1 = 5 – 1 = 4)
20

Calculate the points between the starting coordinates (20, 10) and ending coordinates (30, 18).
Given
● Starting coordinates = (X0, Y0) = (20, 10)
● Ending coordinates = (Xn, Yn) = (30, 18)
Calculate ΔX and ΔY from the given input.
● ΔX = Xn – X0 = 30 – 20 = 10
● ΔY =Yn – Y0 = 18 – 10 = 8
Calculate the decision parameter.
Pk = 2ΔY – ΔX = 2 x 8 – 10 = 6
So, decision parameter Pk = 6
As Pk >= 0:
Pk+1 = Pk + 2ΔY – 2ΔX = 6 + (2 x 8) – (2 x 10) = 2
Xk+1 = Xk + 1 = 20 + 1 = 21
Yk+1 = Yk + 1 = 10 + 1 = 11
Similarly, the above step is executed until the end point is reached or number of iterations equals to 9 times.
(Number of iterations = ΔX – 1 = 10 – 1 = 9)
21

Advantages of Bresenham's Algorithm
● It is faster because it does not involve ﬂoating-point calculations.
● It involves only integer arithmetic. Hence, it is easier to implement.
Disadvantages of Bresenham's Algorithm
● It also does not provide smooth lines though accuracy has been improved.
22

DDA Algorithm Bresenham's Line Algorithm
DDA Algorithm use floating point, i.e., Real
Arithmetic.
Bresenham's Line Algorithm use fixed
point, i.e., Integer Arithmetic
DDA Algorithms uses multiplication &
division its operation
Bresenham's Line Algorithm uses only
subtraction and addition its operation
DDA Algorithm is slowly than Bresenham's
Line Algorithm in line drawing because it
uses real arithmetic (Floating Point
operation)
Bresenham's Algorithm is faster than DDA
Algorithm in line because it involves only
addition & subtraction in its calculation and
uses only integer arithmetic.
DDA Algorithm is not accurate and efficient
as Bresenham's Line Algorithm
Bresenham's Line Algorithm is more
accurate and efficient at DDA Algorithm.
DDA Algorithm can draw circle and curves
but are not accurate as Bresenham's Line
Algorithm
Bresenham's Line Algorithm can draw
circle and curves with more accurate than
DDA Algorithm. 23

Circle
● A circle is deﬁned as a set of points that all are the same distance from a
common point. The common point is known as the center and the distance from
the center of the circle to any point on its circumference is called the radius.
● It is an eight-way symmetric ﬁgure which can be divided into four quadrants and
each quadrant has two octants. This symmetry helps in drawing a circle on a
computer by knowing only one point of any octant.
24

A circle is a closed curve that is drawn from the ﬁxed point called the center, in which all the points on the
curve are having the same distance from the center point of the center. The equation of a circle with (h, k)
center and r radius is given by:
(x-h)2
+ (y-k)2
= r2
This is the standard form of the equation. Thus, if we know the coordinates of the center of the circle and
its radius as well, we can easily ﬁnd its equation.
Similarly, the coordinates can also be converted into polar coordinates. The coordinates are thus given
will be:
x = r cosθ ...(1)
y = r sinθ ...(2)
r = radius
Where, θ = current angle
25

Mid-Point Circle Drawing Algorithm
● In computer graphics, the mid-point circle drawing algorithm is used to
calculate all the perimeter points of a circle. In this algorithm, the
mid-point between the two pixels is calculated which helps in
calculating the decision parameter.
● The value of the decision parameter will decide which pixel should be
chosen for drawing the circle.
● This algorithm only calculates the points for one octant and the points
for other octants are generated using the eight-way symmetry for the
circle. 26

Procedure:
Given: Centre point of Circle = (X0
, Y0
); Radius of Circle = R
The points generation using Mid Point Circle Drawing Algorithm involves the following
steps:
● Step 1: Assign the starting point coordinates (X0
, Y0
) as: X0
= 0, Y0
= R
● Step 2: Calculate the value of initial decision parameter P0
as: P0
= 1 – R
● Step 3:
○ Case 1: Pk
< 0
■ Set Pk
= Pk
+ 2xk+1
+ 3
■ Xk+1
= Xk
+ 1
■ Yk+1
= Yk
○ Case 2: Pk
>= 0
■ Set P = P + 2(xk+1
-yk+1
) + 5
■ Xk+1
= Xk
+ 1
■ Yk+1
= Yk
- 1 27

● Step 4: If the given centre point (X0
, Y0
) is not (0, 0), then do the
following and plot the point:
Xplot
= Xc
+ X0
Yplot
= Yc
+ Y0
Here, (Xc
, Yc
) denotes the current value of X and Y coordinates.
● Step 5: Keep repeating Step 3 and Step 4 until Xplot
>= Yplot
● Step 6: Step 5 generates all the points for one octant. To ﬁnd the
points for other seven octants, follow the eight symmetry
property of circle
28

30
Given the centre point coordinates (0, 0) and radius
as 10, generate all the points to form a circle.
Given: Centre Coordinates of Circle (X0
, Y0
) = (0, 0); Radius of Circle = 10
Assign the starting point coordinates (X0
, Y0
) as: X0
= 0; Y0
= R = 10
Calculate the value of initial decision parameter P0
as: P0
= 1 – R = 1 – 10 = -9
As Pinitial
< 0, so Case 1 is satisﬁed.
Thus,
Xk+1
= Xk
+ 1 = 0 + 1 = 1
Yk+1
= Yk
= 10
Pk+1
= Pk
+ 2 x Xk+1
+ 1 = -9 + (2 x 1) + 1 = -6
Execute the above step simultaneously until executed similarly until Xk+1
>= Yk+1

32
● Algorithm calculates all the
points of octant-1 and
terminates.
● Now, the points of octant-2 are
obtained using the mirror effect
by swapping X and Y
coordinates.
● Similarly, the points for rest of
the part are generated by
following the signs of other
quadrants.
● The other points can also be
generated by calculating each
octant separately.

Here, all the points have been generated with
respect to quadrant-1
33

Given: Centre Coordinates of Circle (X0
, Y0
) = (4, -4); Radius of Circle = 10
As stated in the algorithm, We ﬁrst calculate the points assuming the centre
coordinates is (0, 0).
At the end, we translate the circle.
Assign the starting point coordinates (X0
, Y0
) as: X0
= 0; Y0
= R = 10
Calculate the value of initial decision parameter P0
as: P0
= 1 – R = 1 – 10 = -9
34
Given the centre point coordinates (4, -4) and radius
as 10, generate all the points to form a circle.

As Pinitial
< 0, so Case 1 is satisﬁed.
Thus,
Xk+1
= Xk
+ 1 = 0 + 1 = 1
Yk+1
= Yk
= 10
Pk+1
= Pk
+ 2 x Xk+1
+ 1 = -9 + (2 x 1) + 1 = -6
Execute the above step simultaneously until executed similarly until Xk+1
>= Yk+1
Now, we ﬁnd the values of Xplot
and Yplot
using the formula given in Step 4 of the main algorithm.
The following table shows the generation of points for Quadrant-1-
Xplot
= Xc
+ X0
= 4 + X0
Yplot
= Yc
+ Y0
= 4 + Y0
35

37
Advantages:
● It is a powerful and efﬁcient algorithm.
● The entire algorithm is based on the simple equation of circle X2
+ Y2
= R2
.
● It is easy to implement from the programmer’s perspective.
● This algorithm is used to generate curves on raster displays.
Disadvantages:
● Accuracy of the generating points is an issue in this algorithm.
● The circle generated by this algorithm is not smooth.
● This algorithm is time consuming.

Important Points
● Circle drawing algorithms take the advantage of 8 symmetry property of circle.
● Every circle has 8 octants and the circle drawing algorithm generates all the points for
one octant.
● The points for other 7 octants are generated by changing the sign towards X and Y
coordinates.
● To take the advantage of 8 symmetry property, the circle must be formed assuming
that the centre point coordinates is (0, 0).
● If the centre coordinates are other than (0, 0), then we add the X and Y coordinate
values with each point of circle with the coordinate values generated by assuming (0,
0) as centre point.
38

Ellipse
● Ellipse is defined as the geometric figure which is the set of all points on
a plane whose distance from two fixed points known as the foci remains
a constant.
● It consists of two axes: major and minor axes, where the major axis is
the longest diameter and minor axis is the shortest diameter.
● Unlike circle, the ellipse has four-way symmetry property which means
that only the quadrants are symmetric while the octants are not.
● Here, we will calculate the points for one quadrant while the points for
the remaining three can be calculated using the former points.
39

Mid-Point Ellipse Algorithm
● In computer graphics, the mid-point ellipse algorithm is an incremental
method of drawing an ellipse. It is very similar to the mid-point algorithm
used in the generation of a circle.
● The mid-point ellipse drawing algorithm is used to calculate all the
perimeter points of an ellipse.
● In this algorithm, the mid-point between the two pixels is calculated which
helps in calculating the decision parameter.
● The value of the decision parameter determines whether the mid-point lies
inside, outside, or on the ellipse boundary and the then position of the
mid-point helps in drawing the ellipse.
42

Working of the Mid-Point Ellipse Drawing Algorithm
Now, for understanding the proper working of the algorithm, let us
consider the elliptical curve in the ﬁrst quadrant.
Also, consider the equation of ellipse:
ry
2
x2
+ rx
2
y2
- rx
2
ry
2
= 0 ...(1)
where, ry
: semi-minor axis
rx
: semi-major axis
44

In the ellipse each quadrant is divided into two regions: R1 and R2
respectively.
We know that the slope of an ellipse is given by:
m = dx / dy = - (2 ry
2
x /2 rx
2
y ) = -1
The region R1 has the value of slope as m<-1 while R2 has the value of slope
as m > -1.
The starting point for R1 will be (0, ry
) and for R2, the initial points will
become the ending points of R1, where the slope becomes greater than -1.
That's why we need to keep in check the value of slope while plotting the
points for R1 to know whether we have reached R2 or not. 45

Mid-Point Ellipse Algorithm
Step 1: Start
Step 2: Declare rx
, ry
, x , y , m , dx , dy , P , P2.
Step 3: Initialize initial point of region 1 as
x=0 , y = ry
Step 4: Calculate P= ry
2
+ rx
2
/ 4 - ry
rx
2
dx = 2 ry
2
x
dy = 2 rx
2
y 46

Step 5: Update values of dx and dy after each iteration.
Step 6: Repeat steps while (dx < dy):
Plot (x,y)
if(P < 0)
Update x = x+1 ;
P += ry
2
[2x + 3 ]
else
Update x = x + 1
y= y - 1
Step 7: When dx ≥ dy, plot region 2: 47

48
Step 8: Calculate P2 = ry
2
( x+1 / 2)2
+ rx
2
(y -1)2
- rx
2
ry
2
Step 9: Repeat till (y > 0)
If (P2 > 0)
update y = y-1 (x will remain same)
P2 = P2 -2 y rx
2
+ rx
2
else
x = x+1
y = y-1
P2= P2+ 2 ry
2
[2x] -2 y rx
2
+ rx
2
Step 10: Deﬁne symmetry points for all 3 quadrants, trace the origin to actual center
points as needed and End

49
Advantages
● The mid-point ellipse algorithm has simple and easy
implementation as it only includes addition operations.
Disadvantages
● This algorithm is time consuming.

Polygons
● A polyline is a chain of connected line segments.
● It is specified by giving the vertices (nodes) P0
, P1
, P2
,... and so on.
● The first vertex is called the initial or starting point and the last vertex is called
the final or terminal point.
● When starting point and terminal point of any polygon is same, i.e, when polyline
is closed then it is called polygon.
50

Filled Area Primitives
● Filled Area primitives are used to filling solid colors to an area or
image or polygon.
● Filling the polygon means highlighting its pixel with different solid
colors.
● It provides us more realism on the object or interest.
● Region filling is the process of filling image or region. Filling can be of
boundary or interior region. Boundary Fill algorithms are used to fill
the boundary and flood-fill algorithm are used to fill the interior.
● There are three popular types of fill algorithms:
○ Scan Line polygon fill algorithms
○ Boundary fill algorithms
○ Flood fill algorithms 51

Scan Line Polygon Fill Algorithm
This algorithm works by intersecting scanline with polygon edges and ﬁlls
the polygon between pairs of intersections. The following steps depict how
this algorithm works.
● Step 1: Find out the Ymin and Ymax from the given polygon.
● Step 2: ScanLine intersects with each edge of the polygon from Ymin
to Ymax
. Name each intersection point of the polygon. As per the
ﬁgure shown above, they are named as p0, p1, p2, p3.
● Step 3: Sort the intersection point in the increasing order of X
coordinate i.e. (p0, p1), (p1, p2), and (p2, p3).
● Step 4: Fill all those pair of coordinates that are inside polygons and
ignore the alternate pairs.
52

Inside-outside Test
● This method is also known as counting number method.
● While ﬁlling an object, we often need to identify whether
particular point is inside the object or outside it.
● There are two methods by which we can identify whether
particular point is inside an object or outside:
○ Odd-Even Rule
○ Nonzero winding number rule
53

Odd-Even Rule
● In this technique, we will count the edge crossing along the line from any point (x,y) to inﬁnity. If the
number of interactions is odd, then the point (x,y) is an interior point; and if the number of
interactions is even, then the point (x,y) is an exterior point. The following example depicts this
concept.
● From the ﬁgure below, we can see that from the point (x,y), the number of interactions point on the
left side is 5 and on the right side is 3. From both ends, the number of interaction points is odd, so
the point is considered within the object.
54

Nonzero Winding Number Rule
This method is also used with the simple polygons to test the given point is interior or not. It can be simply
understood with the help of a pin and a rubber band. Fix up the pin on one of the edge of the polygon and
tie-up the rubber band in it and then stretch the rubber band along the edges of the polygon.
When all the edges of the polygon are covered by the rubber band, check out the pin which has been fixed
up at the point to be test. If we find at least one wind at the point consider it within the polygon, else we
can say that the point is not inside the polygon.
55
In the figure, the line segment crosses 4 edges having different
direction numbers : 1, -1, 1& -1 respectively, then :
Winding Number = 1 + (-1) + 1 + (-1) = 0
So the point P is outside the Polygon.

Scan Line Fill of Curved Boundary Area
● The Scan Line Fill Algorithm is primarily designed for polygons with
straight edges.
● However, it can be adapted to ﬁll areas with curved boundaries,
such as circles, ellipses, or other smooth shapes.
● The modiﬁcation involves determining the intersection points of the
scan line with the curved boundary, which requires mathematical
computations rather than simple linear interpolation.
56

● Define the Curve or Boundary: Represent the curve mathematically (e.g., a circle
𝑥2
+𝑦2
=𝑟2
or a parametric curve) and ensure the boundary is continuous and can be
expressed as a function or parametric equations.
● Identify the Bounding Box: Compute the minimum and maximum y-coordinates ( 𝑦min
and 𝑦max
) for the curve. This defines the range of scan lines to process.
● Process Each Scan Line: For each horizontal scan line 𝑦 = 𝑘 within the bounding box:
○ Find Intersection Points i.e, the x-coordinates where the scan line intersects the curve.
○ If multiple intersections exist, sort them by their x-coordinates
○ Treat consecutive intersection pairs as start and end points and fill pixels between these
pairs.
● Handle Edge Cases: For tangent scan lines (those touching the curve at a single
point), treat the single intersection point as two identical points.
● Repeat for All Scan Lines: Continue the process for each scan line within the
bounding box.
57

Boundary fill algorithms
● The boundary fill algorithm works as its name.
● This algorithm picks a point inside an object and starts to fill until it hits the boundary of the object.
● The color of the boundary and the color that we fill should be different for this algorithm to work.
● In this algorithm, we assume that color of the boundary is same for the entire object.
● The boundary fill algorithm can be implemented by 4-connected pixels or 8-connected pixels.
58

● 4-Connected Boundary Fill:
○ Considers the four directly adjacent pixels: top, bottom, left, and right.
○ The recursive function checks these four neighbors to determine whether
they need to be ﬁlled.
● 8-Connected Boundary Fill:
○ Considers eight adjacent pixels: four directly adjacent and four diagonally
adjacent.
○ Ensures that diagonal gaps in the boundary do not leave unﬁlled regions.
59

61
def boundary_fill(x, y, fill_color, boundary_color):
current_color = get_pixel_color(x, y)
if current_color != boundary_color and current_color != fill_color:
set_pixel_color(x, y, fill_color)
boundary_fill(x + 1, y, fill_color, boundary_color) # Right
boundary_fill(x - 1, y, fill_color, boundary_color) # Left
boundary_fill(x, y + 1, fill_color, boundary_color) # Down
boundary_fill(x, y - 1, fill_color, boundary_color) # Up

Flood Fill Algorithm
● Sometimes we want to fill in an area that is not defined within a single color boundary.
● We can paint such areas by replacing a specified interior color instead of searching for a boundary
color value.
● This approach is called a flood-fill algorithm.
● We start from a specified interior point (x, y) and reassign all pixel values that are currently set to a
given interior color with the desired fill color.
● If the area we want to paint has more than one interior color, we can first assign pixel values so that
all interior points have the same color.
● Using either a 4 connected or 8-connected approach, we then step through pixel positions until all
interior points have been repainted.
● The flood fill algorithm has many characters similar to boundary fill. But this method is more
suitable for filling multiple colors boundary.
● When boundary is of many colors and interior is to be filled with one color we use this algorithm.
62

Chapter 2 Computer graphics by Kushal Bhattarai

More Related Content

Similar to Chapter 2 Computer graphics by Kushal Bhattarai (20)

Recently uploaded (20)

Chapter 2 Computer graphics by Kushal Bhattarai