Year: 2022-2023

Spring Semester

Computer Graphics

Dr. Walaa Elhady

 Lecture (3)

Graphics Output Primitives (Part 1)

2
 Contents
• Output Primitives: Basics
• Line-Drawing Algorithms
• DDA Algorithm

3
 Output Primitives: Basics

4
 Output Primitives
• Output primitives describes the geometry of objects and typically
referred to as geometric primitives such as point, line, circle, Polygon
color areas, quadric surfaces, spline curves, etc.
• Output primitives are combined to form complex structures.
o Typically, graphics programming packages provide functions to describe a
scene in terms of these basic geometric structures, referred to as output
primitives, and to group sets of output primitives into more complex
structures.
• Each of the output primitives has its own set of attributes.
o Each output primitive is specified with input coordinate data and other
information about the way that object is to be displayed.

5
 Points and Lines
• Simplest primitives: Point (pixel) and Line
segment.
• To specify the geometry of a point, we
simply give a coordinate position in the
world reference frame. (x1, y1)

• Basic attributes for point : Size and color.

o The default size is the size of one screen
pixel.

• Graphics packages provide a function for

specifying straight line segments. (x2, y2)
• Basic attributes for line: Color, Width ( or
Thickness) and Style (or Type) (e.g. (x1, y1)
dashed, dotted, or solid).
6
 Polylines
• A polyline is a set of line segments joined end to end.
• A closed polyline is a polyline with the last point connected to the
first point.
o Note: A closed polyline cannot be filled.

• Basic attributes for polyline: Color, Thickness and Type.

7
 Polygons
• Polygon is a set of line segments joined end to end and it can be
filled.
• Basic attributes for polygon: Fill color, Thickness and Fill pattern.

Solid-fill Pattern-fill
8
 Quadric Surfaces

9
 Line-Drawing Algorithms

10
 Line Equations
y
• The Cartesian slope-intercept equation for a straight line is:

With m as the slope of the line and b as the y intercept. x

• Given that the two endpoints of a line segment are specified at positions
(x0, y0) and (xend, yend), as shown in figure, we can determine values for the
slope m and y intercept b with the following calculations:
y
(xend, yend)
∆y δy dy
m= = =
∆x δx dx

dx = xend – x0 (x0, y0)

dy = yend – y0
11
x
 Line Equations: Example (1)
• Find the equation of the
straight line passing through
the points: (−1,−5) and (5,4).

12
 Line Equations: Example (2)
• Find the equation of the
straight line passing through
the points: (−3,2) and (5,8).

Algorithms for displaying straight lines are

13 based on these equations.
 How Computer draw Line?
• Consider a straight line in 2D:
o Our program will represent it as two end points of a line segment
which is not compatible with what the display expects (i.e. the
display screen made of pixels).
o How does Computer draw line?
• High-level language specifies line.
• We need a way to perform the conversion.
– System must color pixels.
(X1, Y1)

(X1, Y1)

Program Space
Display Space (Xn, Yn)

14 (X0, Y0) (X0, Y0)

 The Graphics Pipeline - Rasterization
• In Rasterization (Also called “scan conversion”) stage, it converts
primitives into fragments. After this step, there are no longer any “polygons”.
• Rasterization (Scan Conversion):
o Determine which pixels that are inside primitive specified by a set of vertices.
o Produces a set of fragments.
o Fragments are “potential pixels” and have a location (pixel location in frame
buffer) and other attributes such Color, and depth attributes.
• Scan-conversion methods:
o Converts vector images (primitives such as lines, circles, etc.) into raster
images (integer pixel values).
o Geometric description  discrete pixel representation.

15
 How Computer draw Line? (Cont.)
(X1, Y1)

• A straight-line segment in a scene is defined by

the coordinate positions for the endpoints of the
segment. (X0, Y0)

• To display the line on a raster monitor, scan

conversion digitizes the line into a set of discrete
integer positions that only approximates the actual
line path.
o For example, a computed line position of (10.48,
20.51), is converted to pixel position (10, 21).
o This rounding of coordinate values to integers Lines drawn as pixels.
causes all lines (except horizontal and vertical lines)
to be displayed with a stair-step appearance
(known as “the jaggies”), as represented in figure.
Stair-step
16
effect (jaggies).
 How Computer draw Line? (cont.)
• The characteristic stair-step shape of raster lines is
particularly noticeable on systems with low resolution, and
we can improve their appearance somewhat by displaying
them on high-resolution systems.
• Improvement: using high resolution.

17
 Scan Conversion Algorithms
• Constraints:
o Straight lines should appear as a straight line.
o Primitives should start and end accurately.
o Primitives should have a consistent brightness along their
length.
o They should be drawn rapidly.
• E.g. Scan-Conversion:
Computing pixel coordinates for
ideal line on 2D raster grid.

• We determine pixel positions along a straight-line path from the

geometric properties of the line.
o Note that there isn’t only one “right” way to do this.
18
 DDA Algorithm

19
 DDA Algorithm m=
∆y δy dy
= =
∆x δx dx
y
• The digital differential analyzer (DDA) is a
scan-conversion line algorithm based on
calculating either δy or δx, using the
following equations:

or x

Straight-line segment
• A line is: with five sampling
positions along the x axis
o Sampled at unit intervals in one
between x0 and xend.
coordinate and
o The corresponding integer values nearest We “sample” a line at
the line path are determined for the discrete positions and
other coordinate. determine the nearest
pixel to the line at each
20
sampled position.
 DDA Algorithm (Cont.)
• If the slope <=1 (i.e. δy <= δx), we sample at unit x intervals
(δx = 1) and compute successive y values as:
y (X1, Y1)
Note:
m = δy /δx (X0, Y0)
δy = m * δx ∆y < ∆x
yk+1 – yk = m
yk+1 = yk + m x

o Subscript k takes integer values starting from 0, for the first point, and
increases by 1 until the final endpoint is reached.
o Because m can be any real number between 0.0 and 1.0, each
calculated y value must be rounded to the nearest integer
corresponding to a screen pixel position in the x column that we are
processing.
21
 DDA Algorithm (Cont.)
• For lines with a slope > 1.0 (i.e. δy > δx), we reverse the roles
of x and y.
• That is, we sample at unit y intervals (δy = 1) and calculate
consecutive x values as: y (X , Y )1 1
Note:
m = δy /δx
δx = δy / m ∆y > ∆x
xk+1 – xk = 1/m
xk+1 = xk + 1/m (X0, Y0)
x
• In this case, each computed x value is rounded to the nearest pixel
position along the current y scan line.
• Previous equations are based on the assumption that lines are to be
processed from the left endpoint to the right endpoint.
22
 DDA Algorithm: Summary

∆y < ∆x
∆y < ∆x

y1

∆y > ∆x y0
∆y > ∆x
x0 x1

23
 DDA Pseudo-code
// assume that slope is gentle • Start with starting and ending
DDA(float x0, float x1, float y0, float y1) { coordinates of the line: (x0, y0) and (x1,
float x, y; y1)
float xinc, yinc;
int numsteps; • Color first pixel (round to nearest
integer)
numsteps = Round(x1) – Round(x0); • Suppose x1-x0 > y1-y0 (gentle slope)
xinc = (x1 – x0) / numsteps;  slope < 1
yinc = (y1 – y0) / numsteps;
o There will be steps = x1-x0
x = x0;
y = y0; o (i.e. the number of pixels to be
ColorPixel(Round(x),Round(y)); colored).
• Set x=x0, y=y0
for (int i=0; i<numsteps; i++) {
• At each step,
x += xinc;
y += yinc; o increment x by (x1-x0)/numsteps,
ColorPixel(Round(x),Round(y)); and
} o increment y by (y1-y0)/numsteps
} • For each step, round off x and y to
24
nearest integer, and color pixel.
 DDA Example (1)
• Suppose we want to draw a line starting at pixel (2,3) and
ending at pixel (12,8).
• What are the values of the variables x and y at each time-
step?
• What are the pixels colored, according to the DDA algorithm?

25
 DDA Example (1): Solution
• We have two coordinates, Step x y R(y)
o Starting Point = (x0, y0) = (2,3)
o Ending Point = (xend, yend) = (12,8) 0 2 3 3
Step 1: First, we calculate δx, δy and m.
δx = xend – x0 = 12-2 = 10 1 3 3.5 4
δy = yend – y0 = 8-3 = 5 2 4 4 4
m = δy/δx = 5/10 = 0.5
Step 2: Now, we calculate the number of steps. 3 5 4.5 5
δx > δy 4 6 5 5
Then, the number of steps = δx = 10
Step 3: We get m = 0.5, m < 1 case is satisfied. 5 7 5.5 6
xincrement = 10/10 = 1.0 6 8 6 6
yincrement = 5/10 = 0.5
Step 4: 7 9 6.5 7
x = x + xincrement; 8 10 7 7
y = y + yincrement ;
Step 5: We will repeat step 4 until we 9 11 7.5 8
get the endpoints of the line. 10 12 8 8
Step 6: Stop
26 R(y)  Round(y)
 DDA Example (1): Solution

27
 DDA Example (1): Solution

28
 Advantages
• The DDA algorithm is a faster method for calculating pixel
positions than one that directly implements line equation.

yi = Round(mxi + b)
This is expensive and inefficient.

• It eliminates the multiplication in line equation by using

raster characteristics, so that appropriate increments are
applied in the x or y directions to step from one pixel position
to another along the line path.

29
 Disadvantages
• The accumulation of round-off error in successive additions
of the floating-point increment, however, can cause the
calculated pixel positions to drift away from the true line
path for long line segments.

• Furthermore, the rounding operations and floating-point

arithmetic in this procedure are still time-consuming.

• … but floating point

operations and rounding
operations are expensive.
• Issue: Would like to avoid
floating point operations. Y_inc
30
X_inc
 Exercises
• Find the points of a line where the first point ( 5 , 4 )
and the second point ( 8 , 6 ) by using DDA algorithm.
• By using the DDA algorithm, draw a line with the
following end points ( 1 , 1 ) and ( 5 , 3 ).

31