CSE202

Computer Graphics Using

OpenGL
Unit I
Graphics Output Primitives & Attributes

22/11/2022
 Graphics Output Primitives
• Coordinate Reference Frames
• Specifying A 2D World-Coordinate Reference Frame
• OpenGL Point Functions
• OpenGL Line Functions
• OpenGL Curve Functions
• Line Drawing Algorithms

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 2

 Coordinate Reference Frames
• Screen Coordinates – pixel coordinate values
• Top-left as reference
• Bottom-left as reference
•

• Absolute and Relative Coordinate Specifications

• Last position (3,8); next position is (5,7); relative position is (2,-1)
• Producing drawings with pen plotters, artist’s drawing and painting systems,
and graphics packages
22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 3
Specifying A 2D World-Coordinate Reference
Frame
• Screen Coordinates – pixel coordinate values

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 4

 OpenGL Point Functions
• To state the coordinate values for a single position:

• where the asterisk (*) indicates that suffix codes, the numerical data
type to be used

• 2d – double ,2f – float,2i – integer,2s – Short, 2xv – vector i.e specifies

a pointer to an array of two, three, or four elements

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 5

 OpenGL Point Functions

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 6

 OpenGL Line Functions
• A set of straight-line segments between each successive pair of
endpoints in a list

• the number of specified endpoints is odd, so the last coordinate

position is ignored.

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 7

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 8
 OpenGL Line Functions (Contd.)
• Polyline

• The display is a sequence of connected line segments between the

first endpoint in the list and the last endpoint.

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 9

 OpenGL Line Functions (Contd.)
• Closed Polyline

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 10

 OpenGL Curve Functions
• Routines for generating basic curves, such as circles and ellipses, are
not included as primitive functions in the OpenGL core library
• OpenGL Utility (GLU) library

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 11

 Fill-Area Primitives
• Describing components of a picture
• An area that is filled with some solid color or pattern.

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 12

 OpenGL Polygon Fill-Area Functions
• Rectangle

• Vector

• There are six different symbolic constants that we can use as the
argument in the glBegin function to describe polygon fill areas
22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 13
 Polygon Functions(Contd.)
• A polygon vertex list must contain at least three vertices. Otherwise,
nothing is displayed.

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 14

 Polygon Functions(Contd.)

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 15

 Polygon Functions(Contd.)

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 16

 Polygon Functions(Contd.)

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 17

 Line Drawing Algorithms
• A straight-line segment in a scene is defined by the coordinate
positions for the endpoints of the segment
• First project the endpoints to integer screen coordinates
• Determine the nearest pixel positions along the line path between the
two endpoints
• Line color is loaded into the frame buffer
• Computed line position of (10.48, 20.51) is converted to pixel position
(10, 21)
• Stair-step appearance or jaggies

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 18

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

• We can determine values for the slope “m” and “y” intercept “b” with
the following calculations:

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 19

 Line Equations (Contd.)

• Case 1:

• Case 2:

• Case 3:

22/11/2022 20
 DDA Line Drawing Algorithm
• Digital Differential Analyzer (DDA)
• Lines are to be processed from the left end point to the right end
point
• Case 1: If the slope is less than or equal to 1
• δx=1 and compute successive y values

• Case 2: slope greater than 1.0

• δy=1 and compute successive x values

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 21

 DDA (Contd.)
• Lines are to be processed from the right end point to the left end
point
• Then either we have δx=−1 and

• or (when the slope is greater than 1) we have δy=−1 with

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 22

 DDA Procedure

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 23

 DDA (Contd.)
• Faster method for calculating pixel positions
• Floating-point increment
• Rounding operations and floating-point arithmetic are still time-
consuming

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 24

 DDA - Problem
• Plot a line of (0, 0) to (4, 6) by using DDA line drawing algorithm.

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 25

 Bresenham’s Line Algorithm
• Uses only incremental integer calculations
• Bresenham’s line algorithm can be adapted to display circles and other
curves
• Sampling at unit “x” intervals, we need to decide which of two
possible pixel positions is closer to the line path

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 26

 Bresenham’s Line Algorithm (Contd.)

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 27

 Bresenham’s Line-Drawing for |m|<1.0
• Pixel positions are determined by sampling at unit “x” intervals
• Step to each successive column (x position) and
plot the pixel whose scan-line “y” value is
closest to the line path

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 28

 BLA |m|<1.0(Contd.)
• Assuming that we have determined that the pixel at (xk, yk) is to be
displayed
• we next need to decide which pixel to plot in column xk+1 = xk + 1.
• Choices are the pixels at positions (xk+1,yk) or (xk+1,yk+1)
• The “y” coordinate on the mathematical line at pixel column position
xk +1 is calculated as

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 29

 BLA |m|< 1.0(Contd.)

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 30

 BLA |m|< 1.0(Contd.)

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 31

 BLA |m|< 1.0(Contd.)

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 32

 BLA |m|< 1.0(Contd.)

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 33

 BLA |m|< 1.0(Contd.)

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 34

 BLA |m|<1.0(Contd.)

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 35

 BLA Example

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 36

 Example (Contd.)

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 37

 Circle-Generating Algorithms
• Properties of Circles
• A circle is defined as the set of points that are all at a given distance 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

• calculate the position of points on a circle circumference

by stepping along the x axis in unit steps

• Considerable computation; plotted pixel positions is not uniform

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 38
 Properties of Circles (Contd.)
• Eliminate the unequal spacing is to calculate points along the circular
boundary using polar coordinates “r” and “θ”
• Expressing the circle equation in parametric polar form yields the pair
of equations

• Using a fixed angular step size, a circle is plotted with equally spaced
points along the circumference
• The trigonometric calculations are still time-consuming

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 39

 Properties of Circles (Contd.)
• For any of the previous circle-generating methods, we can reduce
computations by considering the symmetry of circles
• Calculating only the points within the sector
from x=0 to x=y
• The slope of the curve in this octant has a
magnitude less than or equal to 1.0
• Still requires a good deal of computation
• Cartesian - multiplications and square-root
• Polar equations contain multiplications and trigonometric

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 40

 Properties of Circles (Contd.)
• Bresenham’s circle algorithm avoids these square-root calculations by
comparing the squares of the pixel separation distances
• Test the halfway position between two pixels to determine if this
midpoint is inside or outside the circle boundary
• This method is applied more easily to other conics; and for an integer
circle radius

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 41

 Midpoint Circle Algorithm
• Sample at unit intervals and determine the closest pixel position to
the specified circle path at each step
• circle section from x=0 to x=y in the first quadrant, the slope of the
curve varies from 0 to −1.0
• Therefore, we can take unit steps in the positive “x” direction
• Use a decision parameter to determine which of the two possible
pixel positions is closer to the circle path
• Positions in the other seven octants are then obtained by symmetry

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 42

 Midpoint Circle Algorithm (Contd.)
• To apply the midpoint method, we define a circle function as

• Any point (x, y) on the boundary of the circle with radius “r” satisfies
the equation fcirc(x, y) =0.

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 43

 Midpoint Circle Algorithm (Contd.)
• Current pixel is (xk,yk) then next pixel position is
either (xk+1,yk) or (xk+1,yk-1); i,.e whichever is
closer to the circle
• Decision parameter is the circle function
evaluated at the midpoint between these two
pixels:

• If pk< 0 then yk ; otherwise yk-1 will be selected

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 44

 Midpoint Circle Algorithm (Contd.)
• Successive decision parameters are obtained using incremental
calculations

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 45

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 46
22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 47
 Midpoint Circle Algorithm (Contd.)

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 48

 Midpoint Circle Algorithm (Contd.)

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 49

 Example

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 50

 Example

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 51

 Ellipse-Generating Algorithms
• Properties of Ellipses
• the distances from any point on the ellipse
to two fixed positions called foci

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 52

 Ellipse Algorithms (Contd.)
• Ellipse equations for the major and minor axes are oriented to align
with the coordinate axes

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 53

 Ellipse Algorithms (Contd.)
• Cartesian form

• Polar form

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 54

 Midpoint Ellipse Algorithm – Region 1
• Starting pixel is (xk,yk) then possible pixels are (xk+1,yk) or (xk+1,yk-1)

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 55

 Midpoint Ellipse Algorithm
• The midpoint ellipse method is applied throughout the first quadrant
in two parts.

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 56

 Region1 (Contd.)

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 57

 Region1 (Contd.)

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 58

 Midpoint Ellipse Algorithm – R1

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 59

 Midpoint Ellipse Algorithm – R1

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 60

 Midpoint Ellipse Algorithm – R1

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 61

 Region1 (Contd.)

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 62

 Midpoint Ellipse Algorithm – Region 2
• Starting pixel is (xk,yk) then possible pixels are (xk, yk-1) or (xk+1,yk-1)

• Similarly P2k+1,P20

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 63

 Midpoint Ellipse Algorithm

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 64

 Midpoint Ellipse Algorithm

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 65

 Example

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 66

 Example (Contd.)

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 67

 Example (Contd.)

22/11/2022 Ref: Computer Graphics with OpenGL by Donald D. Hearn et al., 68

 References
• Donald D. Hearn, M. Pauline Baker and Warren Carithers, “Computer
Graphics with OpenGL”, Pearson Education, Fourth Edition, 2011.

22/11/2022 69