COMPUTER GRAPHICS PRIMITIVES AND SCAN CONVERSION ALGORITHMS

Department of Computer Engineering
COMPUTER GRAPHICS
UNIT 1
GRAPHICS PRIMITIVES AND SCAN CONVERSION
ALGORITHMS
Prepared by
Shweta Shah
PICT, Pune

Department of Computer Engineering
Vision
Achieve academic excellence through education in computing, to
create intellectual manpower to explore professional, higher
educational and social opportunities.
Mission
To impart learning by educating students with conceptual knowledge
and hands on practices using modern tools, FOSS technologies and
competency skills there by igniting the young minds for innovative
thinking, professional expertise and research.
Departmental Vision & Mission

210244: Computer Graphics Syllabus
Savitribai Phule Pune University
Second Year of Computer Engineering (2019 Course)
Teaching Scheme:
TH: 03 hrs/Week Credit 03 Examination Scheme:
Mid_Semester(TH): 30 Marks
End_Semester(TH): 70 Marks
Prerequisite:
• Basic Mathematics, Geometry, linear algebra, vectors and
matrices.

Course outcomes
On completion of the course, student will be able to
CO1:Define basic terminologies of Computer Graphics, interpret the mathematical
foundation of the concepts of computer graphics and apply mathematics to develop
Computer programs for elementary graphic operations.
CO2:Define the concept of windowing and clipping and apply various algorithms to
fill and clip polygons.
CO3:Explain the core concepts of computer graphics, including transformation in two
and three dimensions, viewing and projection.
CO4:Explain the concepts of color models, lighting, shading models and hidden
surface elimination.
CO5:Describe the fundamentals of curves, fractals, animation and gaming.

Basic Computer Graphics
What is computer graphics?
 The computer graphics is one of the most effective and commonly used way to
information in form of graphics object such as pictures, charts, graphs and diagram
instead of simple text.
 It is an information processing machine, a tool for storing, manipulating, and
correlating data.
 As volume of information increases, a problem arises.
 Efficient and effective communication between Human-machine.
 It allows communication through pictures, charts, and diagrams.
 Computer graphics is a process of generating, manipulating, storing and
displaying graphics object.
Ex: Such as pictures, charts, graphs, diagrams.

Representing pictures
 Many algorithms accept picture data as polygons or edges, each polygon or
edge can in turn be represented by points.
 Points, then, are the fundamental building blocks of picture representation.
 E.g.: unit square can be represented by its four corner points.
 Point can be represented as pair or triplets of number.
0,1 P4 P3 1,1
P2 1,0
0,0 P1
E1
E3
E4 E2

Cont’d
 Information is generally stored in a file before it is used to present the
picture; this file is called database.
 There are two ways to specify the position of a point:
 Absolute coordinates
 Relative(incremental) coordinates.

Absolute and Relative Coordinate Specifications
Absolute coordinates – location
specified as a relationship to the
origin
Relative coordinates – location
specified as a relationship to other
points
• Good for pen/plotters
• Publishing/layout
• Allows for a very object
oriented approach
For this class we will always use
absolute coordinates
+Y
(2,1)
(0,6)
(0,-6)
(7,0)

How the Interactive Graphics display works
The modern graphics display is extremely simple. It consists of
three components:
1. A digital memory, or frame buffer, in which the displayed
image is stored as a matrix of intensity values.
2. 2. A monitor.
3. 3. A display controller, which is a simple interface that passes
the contents of the frame buffer to the monitor.
4. Inside the frame buffer the image is stored as a pattern of
binary digital numbers, which represent a rectangular array of
picture elements, or pixel.

Pixel (Picture Element )
We can not represent an infinite number of points on a computer.
We must build our line from a finite number of points, each point must have
some size and so is not really a point at all.
A pixel (px) or pel or picture element is the smallest portion of an image
or display that a computer is capable of printing or displaying.
Each pixel is a sample of an original image.

 Refresh buffer : A refresh buffer is a buffer that is responsible for
refreshing or updating the contents of a contents pane or a window when an
automatic or a manual refresh is performed.
 Refresh rate is the number of times per second that the pixels recharged so
their glow remains bright.
•In dual-scan screens, the top and the bottoms of the screens are refreshed
independently at twice the rate of single scan screen, producing more clarity
and richer colors .
•In general , displays are refreshed 45 to 100 times per second.

 Frame Buffer : A framebuffer or frame buffer is a part of the RAM
of a system that is used to store a bitmap file that is responsible for
displaying a video. In other words, this is a memory buffer that
accommodates a full data framework.

Frame buffer
Frame buffer is a large, contiguous piece of computer memory.
At a minimum, there is one memory bit for each pixel in the raster; this
amount of memory is called a bit plane.
A 1024x1024 (220 bits ) element square raster requires bits in a single bit
plane.

Cont’d
Three primary color are combined at the CRT to yield eight colors, as
shown in look up table (ref: next slide).
A simple color raster frame buffer is shown below.

A 24-bit-plane color frame buffer
Additional bit planes can be used for each of the three colour guns. Multiple-bit plane
color buffer, with 8 bit planes per color, i.e. 24 bit plane frame buffer.
Each group of bit-plane drives an 8-bit DAC.
These are combined into 224 possible colors.
This is full color frame buffer.

Contin…
 Bitmap: A bitmap is a collection of pixels, also called a raster image. It is
generally used for photo-quality image processing. It is a graphic composed of
many pixels like small squares
 Pixmap: A pixmap is identified as a spatially mapped array of pixels. A pixmap is
also known as a bitmap, and the smallest unit of a bitmap is 1 pixel. A pixmap is a
creative picture drawn regularly and cleverly with a single-pixel (1pixel) as a unit
 1-bit-per-pixel values are 0 and 1
 4-bits-per-pixel values are 0 through 15
 24-bits-per-pixel (true color) values are not a single index into a colormap, but
instead uses one byte for each of the red, green, and blue components of the color.

Contin…
 Horizontal retrace : On raster-scan display , at the end of each scan line, the electron
beam returns to the left side of the screen to begin displaying the next scan line. The return
to the left of the screen refreshing each scan line , is called the Horizontal retrace of
the electron beam.
 Vertical retrace : On raster-scan display, at the end of each frame (displayed in 1/80th to
1/60th of a second ), the electron beam returns to the top of the left corner of the screen to
begin the next frame. This is called Vertical retrace of the electron beam.

Application of CG
 Today, we find computer graphics used routinely in such diverse areas as
science, engineering, medicine, business, industry, government, art,
entertainment, advertising, education, and training.
 Figure summarizes the
many applications of
graphics in simulations,
education, and
graph presentations.

Applications of Computer Graphics
• Presentation Graphics
• Entertainment
• Graphics User Interface
• Auto CAD
• Computer Art
• Virtual Reality
• Telemedicine
• Image Processing
• Education

Presentation graphics
 Another major application area is presentation graphics, used to produce
illustrations for reports or to generate 35-mm slides or transparencies for
use with projectors.
 Two dimensional bar chart
and pie chart
70.33
10.67
6 2 10.33
EM
Dist
FC
94.72 96.61 98.52
93.13 97.24 99.1
97 98 100
0
20
40
60
80
100
120
S.E. T.E. B.E.
THEORY ALL CLEAR Average
(Last three
yrs)
Present
Target

Three dimensional bar chart and pie chart
0
20
40
60
80
100
120
S.E.
T.E.
B.E.
94.72 96.61
98.52
93.13 97.24
99.1
97
98
100
THEORY ALL CLEAR Average…
70.33
10.67
6
2
10.33
EM
Dist
FC
HSC
SC
Fail

3. Computer art
 Computer graphics methods are widely used in both fine art and
commercial art applications.
 Artists use a variety of computer methods, including special-purpose
hardware, artist's paintbrush program (such as Lumena), other paint
packages (such as Pixelpaint and Superpaint), specially developed
software, symbolic mathematics packages (such as Mathematica), CAD
packages, desktop publishing software, and animation packages that
provide facilities for designing object shapes and specifying object
motions.

e.g. : 3-d rendering Logo Design

Entertainment
 Computer graphics methods are now commonly used in making motion
pictures, music videos, and television shows. Sometimes the graphics
scenes are displayed by themselves, and sometimes graphics objects are
combined with the actors and live scenes.

 Major component of GUI interface is a window manager that allows a user to
display multimedia window areas.
 Interface generally comes with a menu and icons for fast selection of processing
options.
 Icon is a graphics symbol designed to look like a processing options.
Graphical User Interface

 Use of computer graphics is in design process of engineering and architecture
system.
 Auto cad applications are design to create building, automobiles, aircraft,
spacecraft, textiles and more models.
Auto CAD

Cont’d
 When object designs are complete, or nearly complete, realistic lighting
models and surface rendering are applied to produce displays that will
show the appearance of the final product.

Cont’d
 Architects use interactive graphics methods to lay out floor plans that
show the positioning of rooms, doors, windows, stairs, shelves, counters,
and other building features.

Cont’d
 Realistic displays of architectural designs, permit both architects and their
clients to study the appearance of a single building or a group of buildings,
such as a campus or industrial complex.
 With virtual-reality systems, designers can even go for a simulated "walk"
through the rooms or around the outsides of buildings to better appreciate
the overall effect of a particular design.

Computer Art
• Computer graphics widely used in
fine arts and commercial
applications.
• Artist use a variety of applications
like paint packages, mathematics
packages, desktop publishing
software and animation program.

Virtual Reality
• Virtual reality provides a very
realistic effect using sight and
sound, while allowing the user to
interact with the virtual world.

Telemedicine
• In this application physician can
consult with one another using video
conferencing capabilities, where all can
see the data and images, it brings
together experts from a number of
places in order to provide better care.
• Also used in bio-medical instrument
like cardiogram, CT-Scan reports, X-
ray.

Morphing
 Graphics objects can be combined with the live action, or graphics and
image processing techniques can be used to produce a transformation of
one person or object into another (morphing).
 E.g.: Terminator2: JUDGMENT DAY


Image Processing
• Image processing, converts an
existing image into digitized form
by converting the image file
format.
• Image processing technique is
mostly used in commercial
application that can
rearrange/modify image in
different format.

Education
• A wide range of individual education software with multimedia.
• It is also used in classroom to enhance the educational experience and simplify
teacher’s work.
• In distance learning, where all students may not be at same place during a class.

Overview of graphics system
 we explore the basic features of graphics hardware components and
graphics software packages.
 VIDEO DISPLAY DEVICES
 The primary output device in a graphics system is a video monitor.
 Refresh Cathode-Ray Tubes:

CRT
 A CRT is an evacuated glass tube.
 An electron gun at the rear of the tube produces a beam of electron which is directed
towards the front of the tube (screen) by a high voltage.
 The inner side of the screen is coated with phosphor substance which gives off light when
it is stroked by electron.
 The control grid voltage determines the velocity achieved by the electrons before they hit
the phosphor.
 The control grid voltage determines how many electrons are actually in the electron beam.
 Thus, control grid controls the intensity of spot where the electron beam is strike the
screen

 The focusing system concentrates the electron beam so that the beam converges
to a small point when it hits the phosphor coating.
 The deflection system of the CRT consists of two pairs of parallel plates, referred
to as the vertical and horizontal deflection plates.
 The voltage applied to vertical deflection of the electron beam and voltage
applied to the horizontal deflection plates controls the horizontal deflection of the
electron beam.
 There are two techniques used for producing images on the CRT screen :
Random Scan (Vector scan) and Raster Scan.
CRT

 Different kinds of phosphors are available for use in a CRT. Besides
colour, a major difference between phosphors is their persistence: how
long they continue to emit light (that is, have excited electrons returning to
the ground state) after the CRT beam is removed.
 The maximum number of points that can be displayed without overlap on
a CRT is referred to as the resolution.
 Aspect Ratio: This number gives the ratio of vertical points to horizontal
points necessary to produce equal-length lines in both directions on the
screen. An aspect ratio of 3/4 means that a vertical line plotted with three
points has the same length as a horizontal line plotted with four points.

Color CRT Monitor
A CRT monitor displays colour pictures by using a combination of
phosphors that emit different-coloured light.
By combining the emitted light from the different phosphors, a range of
colours can be generated.
The two basic techniques for producing colours displays with a CRT are:
1. Beam-penetration method : used in random scan monitor with two colour:
outer Red and inner Green. Low quality picture with only four colours.
2. Shadow-mask method : used in raster scan systems with three phosphor
colour dots at each pixel position.

Colour CRT
Beam-penetration technique:
 This technique is used with random-scan monitors.
 In this technique, the inside of CRT screen is coated with two layers of phosphor, usually
red and green.
 The displayed colour depends on how far the electron beam penetrates into the phosphor
layers.
 The outer layer is of red phosphor and inner layer is of green phosphor.
 A beam of slow electrons excites only the outer red layer.
 A beam of very fast electrons penetrates through the red layer and excites the inner green
layer.
 At intermediate beam speeds, combination of red and green light are emitted and two
additional colours, orange and yellow displayed.
 The beam acceleration voltage controls the speed of the electrons and hence the screen
colour at any point on the screen.

Colour CRT
Beam-penetration technique:
Merits:
 It is inexpensive technique to produce colour in random scan monitors.
Demerits:
 It can display only four colours
 The quality of picture produced by this technique is not good as compared to
other techniques.

Colour CRT
Shadow Mask Technique:
 The shadow mask technique produces a much wider range of colours then the beam
penetration technique.
 Hence this technique is commonly used in raster-scan displays including colour TV.
 In a shadow mask technique, CRT has three phosphor colour dots at each pixel
position.
 One phosphor dots emits a red light, another emits green light and third emits green
light.
 It has three electron guns, one for each colour dot, and a shadow mask grid just
behind the phosphor coated screen.
 The shadow mask grid consists of series of holes aligned with the phosphor dot
pattern.
 Three electron beams are deflected and focused as a group on to the shadow mask
and when they pass through a hole in the shadow mask, they excite a dot triangle.

Colour CRT
Shadow mask techniques

Colour CRT
Shadow Mask Technique:
 A dot triangle consists of three small phosphor dots of red, green and blue colour.
 A dot triangle when activated appears as a small dot on the screen which has colour of
combination of three dots in the dot triangle.
 By varying the intensity of the three electron beams we can obtain different colours in the
shadow mask CRT.

DVST:
 DVST stands for direct view storage tube.
 In raster scan display we do refreshing of the screen to maintain a screen image.
 The DVST give alternate method of maintaining the screen image.
 A DVST uses the storage grid which stores the picture information.
 DVST consists of two guns: Primary gun and Flood gun.
 A primary gun stores the picture pattern and the flood gun maintains the picture display.
 A primary gun produces high speed electrons which strike on the storage grid to draw the
picture pattern.
 Continuous low speed electrons from flood gun pass through the control grid and attracted to
the positive charged areas of the storage grid.
 The low speed electrons then penetrate the storage grid and strike the phosphor coating.
 During this process collector behind the storage grid smooth out the flows of flood electrons.

DVST
DVST:
Advantages :
Refreshing of CRT is not required.
Complex picture can be displayed on high resolution.
It has flat screen.
Disadvantages:
Erasing requires removal of charge on the storage grid.
Selective or part erasing of screen is not possible.
The performance of DSTV is poor in compare to CRT.
Erasing of screen produces flash over the entire screen.

Flat Panel Display
Flat Panel Display:
 The term flat panel display refers to a class of video devices that have reduced
volume, weight and power requirement in compared to a CRT.
 The important feature of FPD is that they are thinner than CRTs.
 There are two types of Flat panel display: Emissive display and Non-emissive
display.
Emissive Display:
 They convert electrical energy into light energy. Plasma panels, thin-film
displays, and light emitting diodes are example of emissive displays.
Non-emissive Display:
 They use optical effect to convert sunlight or light from some other source into
graphics patterns. Liquid crystal display is an example of non-emissive display.

Plasma Panel Display
Plasma Panel Display:
 Plasma panel display writes images on the display surface point by point, each
point remains bright.
 This makes the plasma panel functionally very similar to the DVST.
 It consist of two plates of glass with thin, closely spaced gold electrodes.
 The electrodes are attached to the inner faces and covered with a dielectric
material.

Advantages:
Refreshing is not required.
Produce very steady image.
Light weight than CRT
Allow selective writing and selective erasing.
Flat screen and is transparent.
Disadvantages:
Poor resolution.
Complex addressing and wiring
Costly than CRTs.

LCD
Liquid Crystal Display:
 The term liquid crystal refers to the fact that these compounds have a crystalline
arrangement of molecules, yet they flow like a liquid.
 Two glass plates, each containing a light polarizer at right angles to the other
plate sandwich the liquid-crystal material.
 Rows of horizontal transparent conductors are built into one glass plate, and
columns of vertical conductors are put into the other plate.
 The intersection of two conductors defines a pixel position.
 In the ON state, polarized light passing through material is twisted so that it will
pass through the opposite polarizer.
 It is then reflected back to the viewer.
 To turn OFF the pixel, we apply a voltage to the two intersecting conductors to
align the molecules so that light is not twisted.

LCD
Advantages
Low cost
Low weight
Small size
Low power consumption

Raster Scan System
Raster Scan System
Hardware architecture of raster scan system is shown in figure.
In addition to the general purpose CPU, a special-purpose processor,
called the video controller or display controller, is used to control
the operation of display device.

Raster Scan System
Raster Scan System
In this architecture , frame buffer not allocated dedicated
memory, System memory and frame buffer share the
common memory area.
Frame buffer can be anywhere in the system memory.
Video controller reads the command from frame buffer and
draw pixel accordingly.

Raster Scan System
Video Controller:
Figure shows another variation of raster scan system. Dedicated memory area is
allocated to frame buffer.
Video controller is given direct access to frame buffer.

Raster Scan System
Video Controller:
This organization can render scene quickly because video controller
do not have to put request on system bus to read intensity value from
frame buffer.
In some system origin is set at bottom left location of screen. X
coordinate increases from left to right and Y coordinate increases
from bottom to top.
In some system, origin is set at top left corner, Y coordinate increases
on moving from top to bottom.

Raster Scan System
Video Controller:
Intensity value from frame buffer is retrieved from current (x, y)
location.
After painting each pixel, x register is incremented by 1 and process is
repeated until x value hit to x max.
After processing all pixel on current scan line, content of x register is
set to zero, and y is incremented by 1and video controller process the
scan line in same way.
Refresh rate is 60 frames/seconds.
Here in this discussion we assume that the origin is at top left of the
corner of the screen.

Raster Scan System
Video Controller:
In high quality system use two frame buffers, so that one buffer can be
used for refreshing while other is being filled.
Then both buffer switch the role.
This mechanism is useful in real time animation because it does not
waste time in reloading the buffer.

Random Scan System
Hardware architecture of random scan system is shown in figure.
Application program resides in system memory.

Random Scan System
Application program resides in system memory.
Graphics packages translates the graphics commands in the
application program into a display file.
Display file also stored in system memory.
Display processor accesses the content of display file and display on
monitor screen.
Display processor retrieves one by one command from display file
and draws it on screen.

Random Scan System
Display processor in a random scan system is also called graphics
controller.
In random scan devices renders the scene using short line.
Electron beam track the line position directly, rather than going
through each and every pixel on screen.
Entire scene is defined using segment of line in application program.

Random Scan System
Line segments are defined by pair of end points.
A scene is then drawn one line at a time by positioning the beam to
fill in the line between specified endpoints.

Differentiate Random Scan & Raster Scan System
No. Raster Scan System Random scan System
1
Electron beam scans entire
screen to draw a picture
Electron beam scans only the part of
screen where picture information is
present.
2 It has low resolution. It has high resolution in compare to
raster scan.
3
Picture definition is stored as
set of discrete intensity
values in frame buffer.
Picture definition is stored as line
drawing commands in display list.
4 Intensity value is sorted for
each pixel, it displayed
realistic scene.
System is designed to display lines, it
can’t displayed realistic scene.
5 Pixel location of screen is
used to draw an image.
Mathematical function are used to
draw an image.

Differentiate Random Scan & Raster Scan System
No. Raster Scan System Random scan System
6 Cheaper than random scan. More costly.
7 Scan conversion is required. Scan conversion is not required.
8 Video controller is required. Video controller is not required.
9 Used to display dynamic
scene.
Used to display static scene
10 Scan conversion hardware is
required.
Scan conversion hardware is not
required.
11
Refresh rate is independent
of number of objects in
scene.
When number of primitives are too
large, random scan device flickers.

Some more definitions:
Rasterization is the process of converting a vector image into a raster
image.
Rasterisation (or rasterization) is the task of taking an image
described in a vector graphics format (shapes) and converting it into a
raster image (a series of pixels, dots or lines, which, when displayed
together, create the image which was represented via shapes).

Cont’d
Scan Conversion: The process of representing continuous graphics
objects as a collection of discrete pixels is called scan conversion.
A VGA to TV scan converter
box like this turns enhanced
-definition or high-definition
signals into standard-definition
signals.

Vector & Character Generation
Stroke method
This method uses small line segments to generate a character.
The small series of line segments are drawn like a stroke of a pen to form a
character as shown in figure.
Bitmap Method
In this method characters are represented by an array of dots in the matrix
form.
Each dot in the matrix is a pixel.
The character is placed on the screen by copying pixel values from the
character array.

Introduction to OpenGL
 A basic library of functions is provided in OpenGL for specifying
 graphics primitives
 attributes,
 geometric transformations,
 viewing transformations, and
 Many other operations.

Cont’d
 OpenGL is designed to be hardware independent, so many operations, such
as input and output routines, are not included in the basic library.
 Basic OpenGL Syntax:
 Function names in the OpenGL basic library (also called the OpenGL core
library) are prefixed with gl, and each component word within a function
name has its first letter capitalized.
 For e.g. : glBegin, glClear, glCopyPixels, glPolygonMode.
 Constants begin with the uppercase letters GL.

Cont’d
 Component words within a constant name are written in capital
letters, and the underscore ( _ ) is used as a separator between all
component words in the name.
 E.g.: GL_2D, GL_RGB, GL_CCW, GL_POLYGON,
GL_AMBIENT_AND_DIFFUSE
 To indicate a specific data type, OpenGL uses special built-in, data-
type names, such as:
 GLbyte, GLshort, GLint, GLfloat, GLdouble, GLboolean

Related Libraries
 In addition to the OpenGL basic (core) library, there are a number of
associated libraries for handling special operations.
 The OpenGL Utility (GLU) provides routines for setting up viewing and
projection matrices, describing complex objects with line and polygon
approximations, displaying quadrics and B-spline using linear
approximations, processing the surface-rendering operations, and other
complex tasks.
 Every OpenGL implementation includes the GLU library, and all GLU
function names start with the prefix glu.

Header Files
 #include <windows.h>
 #include <GL/gl.h>
 #include <GL/glu.h>
 Microsoft Windows, the header file that accesses the WGL routines is
windows.h.
 This header file must be listed before the OpenGL and GLU header files
because it contains macros needed by the Microsoft Windows version of
the OpenGL libraries.

Cont’d
 However, if we use GLUT to handle the window-managing operations, we
do not need to include gl.h and glu.h because GLUT ensures that these will
be included correctly. Thus, we can replace the header files for OpenGL
and GLU with
 #include <GL/glut.h>

Display-Window Management Using GLUT
 The GLUT initialization with the statement:
 glutInit (&argc, argv);
 Next, we can state that a display window is to be created on the screen with
a given caption for the title bar.
 glutCreateWindow ("An Example OpenGL Program");
 Then we need to specify what the display window is to contain.
 glutDisplayFunc (lineSegment);
 But the display window is not yet on the screen. We need one more GLUT
function to complete the window-processing operations.

Cont’d
 glutMainLoop ( );
 This function must be the last one in our program.
 We use the glutInitWindowPosition function to give an initial location for
the upper left corner of the display window.
 glutInitWindowPosition (50, 100);
 the upper-left corner of the display window should be placed 50 pixels to
the right of the left edge of the screen and 100 pixels down from the top
edge of the screen:
 glutInitWindowSize (400, 300);
 Figure on next page…

Cont’d
 A 400 by 300 display window at position
(50,100) relative to the top-left
corner of the video display.

Cont’d
 glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);
 A Complete OpenGL Program
 Using RGB colour values (first three), we set the background color for the
display window to be white.
 glClearColor (1.0, 1.0, 1.0, 0.0);
 The fourth parameter An alpha value of 0.0 indicates a totally transparent
object, and an alpha value of 1.0 indicates an opaque object.

Cont’d
 Although the glClearColor command assigns a color to the display window,
it does not put the display window on the screen. To get the assigned
window color displayed, we need to invoke the following OpenGL function:
 glClear (GL_COLOR_BUFFER_BIT);
 we can choose a variety of color schemes for the objects we want to display
in a scene.
 glColor3f (0.0, 0.4, 0.2);
 The suffix 3f on the glColor function indicates that we are specifying the
three RGB color components using floating-point (f) values.

Cont’d
 For our first program, we simply display a two-dimensional line
segment.
 Although we only want to produce a very simple two-dimensional
line, OpenGL processes our picture through the full three-dimensional
viewing operations.
 We can set the projection type (mode) and other viewing parameters
that we need with the following two functions:
glMatrixMode (GL_PROJECTION);
gluOrtho2D (0.0, 200.0, 0.0, 150.0);

Cont’d
 Finally, we need to call the appropriate OpenGL routines to create our
line segment.
glBegin (GL_LINES);
glVertex2i (180, 15);
glVertex2i (10, 145);
glEnd ( );
 Now we are ready to put all the pieces together.

OpenGL Interactive Input-Device Functions
 Interactive device input in an OpenGL program is handled with routines in
the OpenGL Utility Toolkit (GLUT), because these routines need to
interface with a window system.
 In GLUT, we have functions to accept input from standard devices, such as a
mouse or a keyboard, as well as from tablets, space balls, button boxes, and
dials.
 For each device, we specify a procedure (the call back function) that is to be
invoked when an input event from that device occurs.

GLUT Mouse Functions
 We use the following function to specify (“register”) a procedure that is to
be called when the mouse pointer is in a display window and a mouse button
is pressed or released:
 glutMouseFunc (mouseFcn);
 This mouse call back procedure, which we named mouseFcn, has four
arguments:
 void mouseFcn (GLint button, GLint action, GLint xMouse, GLint yMouse)

Cont’d
 Parameter button is assigned a GLUT symbolic constant that denotes one of
the three mouse buttons
 Allowable values for button are GLUT_LEFT_BUTTON,
GLUT_MIDDLE_BUTTON, and GLUT_RIGHT_BUTTON.
 Parameter action can be assigned either GLUT_DOWN or GLUT_UP,
depending on whether we want to initiate an action when we press a mouse
button or when we release it.
 Draw pixel using mouse interfacing.
 Draw Line using mouse interfacing.

GLUT Keyboard Functions
 With keyboard input, we use the following function to specify a procedure
that is to be invoked when a key is pressed:
 glutKeyboardFunc (keyFcn);
 The specified procedure has three arguments:
 void keyFcn (GLubyte key, GLint xMouse, GLint yMouse)
 Parameter key is assigned a character value or the corresponding ASCII
code.
 The display-window mouse location is returned as position (xMouse,
yMouse) relative to the top-left corner of the display window.

GLUT Keyboard Functions
 In the following code, we present a simple curve-drawing procedure using
keyboard input. A freehand curve is generated by moving the mouse within
the display window while holding down the “c” key.
 Example

Primitives and Attributes
2D Output Primitives and Attributes
PRIMITIVES
Points
Lines
Circles
Ellipses
Curves
Filled Area
Text
• ATTRIBUTES
 Line Type, Width and Colour
 Fill Styles: Hollow, Solid and
Patterned
 Text Font, Colour, Size and Style
Text
Text
Text
Text

Scan Conversion
The process of determining which pixel provide the best
approximation to the desired primitive is known as
Rasterization.
When combined with the process of generating the picture in
scan line order it is known as Scan Conversion.
Figuring out what pixels have to be colored in order to draw a
geometric primitive on the screen.

Scan Converting a Point
A mathematical point (x,y) where x and y are the real numbers within
an image area, needs to be scan converted to a pixel at location (x',y')

Scan Converting a Line
Characteristics of a line.
Lines are used a lot - want to get them right.
Lines should appear straight, not jagged.
Lines should terminate accurately.
Lines should have constant density.
Line density should be independent of line length or angle.
Lines should be drawn rapidly.

To draw a line, we need two points between which we can
draw a line.
Mathematical Representation of a line.
A line segment is defined by its two endpoints and the line equation Y
= mx + b, where m is the slope and b is the intercept.
y
y0
yend
0
0
x
x
y
y
m
end
end



0
0 x
m
y
b 



DDA Algorithm
The digital differential analyzer (DDA) algorithm takes an
incremental approach in order to speed up scan conversion.
Faster than the direct use of the line equation.
However, a floating point operation is still required.
The line drifts away from the original line when the line is
relatively long.

DDA Algorithm
Step 1: Compute
dx = x2-x1 & dy = y2-y1
Step 2: If abs(dx) > abs(dy) then length = abs(dx)
Else length = abs(dy)
Plot a point at (x, y)
Step 3: xinc = dx / length;
yinc = dy/length;
Step 4: x = x1 and y = y1
k=1
while(k<=length)
x = x +xinc
y = y + yinc
k = k+1
6 7 8 9 10 11 12 13
9
10
11
12
13

The Problem (cont…)
What happens when we try to draw this on a pixel based display?
How do we choose which pixels to turn on?

In Bresenham’s line drawing algorithm the incremental integer
calculations are used to scan convert the lines, so that, the circles
and the other curves can be displayed.
?
? ?
?

.The next sample positions can be plotted either at (3,2) or (3,3) ?
?
? ?
?
(2,2) (3,2)
(3,3)

Bresenham’s Line Algorithm
 It uses only integer calculations.
 Highly efficient incremental method.
 Produces mathematically correct results using simple calculations.
 It has been proven that the algorithm gives an optimal fit for lines.
 Accurate.
 Efficient.

Bresenham’s Line Algorithm for slope m < 1:
Step 1: Input the two end-points of line, storing the left end-
point in (x0, y0).
Step 2: Plot the point (x0, y0).
Step 3: Calculate the constants dx, dy, 2dy, and (2dy – 2dx)
and get the first value for the decision parameter as:
𝑝0 = 2𝑑𝑦 − 𝑑𝑥
Step 4: At each xk along the line, starting at k = 0, perform the
following test:
If pk < 0, the next point to plot is (xk+1, yk) and
𝑝𝑘+1 = 𝑝𝑘 + 2𝑑𝑦
Otherwise, the next point to plot is (xk+1,yk+1)
𝑝𝑘+1 = 𝑝𝑘 + 2𝑑𝑦 − 2𝑑𝑥
Step 5: Repeat step 4 dx times.

Bresenham’s algorithm
Step 1: Enter the 2 end points for a line and store the left
end point in (X0,Y0).
Step 2: Plot the first point be loading (X0,Y0) in the frame buffer.
Setp 3: determine the initial value of the decision parameter by
calculating the constants dx, dy, 2dy and 2dy-2dx as
P0 = 2dy –dx
Step 4: for each Xk, conduct the following test, starting from k= 0
If Pk <0, then the next point to be plotted is at (Xk+1, Yk) and
Pk+1 = Pk + 2dy
Else, the next point is (Xk+1, Yk+1) and
Pk+1 = Pk + 2dy –2dx (step 3)
Step 5: iterate through step (4) dx times.

Example
Let the given end points for the line be (30,20) and (40, 28)
M = dy = y2 – y1 = 28 – 20 = 8
dx x2 – x1 40 – 30 = 10
m = 0.8
dy = 8 and dx = 10
The initial decision parameter P0 is
P0 = 2dy – dx = 2(8) – 10 = 16 – 10 = 6
P0 = 6
The constants 2dy and 2dy-2dx are
2dy = 2(8) = 16 2dy-2dx = 2(8)- 2(10) =16 – = 20
2dy = 16 2dy – 2dx = - 4

The starting point (x0, y0)=(30,20) and the successive
pixel positions are given in the following table
K Pk (Xk+1, Yk+1)
0 6 (31,21)
1 2 (32,22
2 -2 33,22
3 14 34,23
4 10 35,24
5 6 36,25
6 2 37,26
7 -2 38,26
8 14 39,27
9 10 40,28

End points (30,20) (40,28)
dx=x2-x1=40-30=10 dy= y2-y1=28-20=8
P0=2dy-dx=2X8-10 = 6 >0 pt(31,21)
Pk+1= pk+2dy-2dx= 6+16-20 =2 >0 (32,22)
Pk+1=2+16-20 =-2 <0 (33,22)
Pk+1= pk+2dy =-2+16 = 14 >0 (34,23)
Pk+1= pk+2dy-2dx=14+16-20=10>0 (35,24)
Pk+1=10+16-20=6 >0 (36,25)
Pk+1= 6+16-20=2>0 (37,26)
Pk+1=2+16-20=-2 <0 (38,26)
Pk+1= pk+2dy=-2+16=14>0 (39,27)
Pk+1=pk+2dy-2dx= 14+16-20=10>0 (40,28)

Software standards
 The primary goal of standardized graphics software is portability.
 When packages are designed with standard graphics functions,
software can be moved easily from one hardware system to another
and used in different implementations and applications.
 International and national standards-planning organizations in many
countries have cooperated in an effort to develop a generally
accepted standard for computer graphics. After considerable effort,
this work on standards led to the development of the Graphical
Kernel System (GKS)

Cont’d
 GKS was originally designed as a two-dimensional graphics package.
 The second software standard to be developed and approved by the
standards organizations was Programmer’s Hierarchical Interactive
Graphics System (PHIGS), which is an extension of GKS.
 As the GKS and PHIGS packages were being developed, the graphics
workstations from Silicon Graphics, Inc. (SGI), became increasingly
popular.

Cont’d
 These workstations came with a set of routines called GL (Graphics
Library), which became a widely used package in the graphics
community.
 The GL routines were designed for fast, real-time rendering.
 As a result, OpenGL was developed as a hardware independent
version of GL in the early 1990s.
 This graphics package is now maintained and updated by the
OpenGL Architecture Review Board

Cont’d
 The OpenGL library is specifically designed for efficient processing
of three-dimensional applications, but it can also handle two-
dimensional scene descriptions as a special case of three dimensions
where all the z coordinate values are 0.
 The OpenGL bindings for the C and C++ languages are the same.
Other OpenGL bindings are also available, such as those for Java
and Python.

The set of points that are all at a given distance ‘r’ from a center
position (Xc,Yc).
Bresenham’s Circle algo

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:
2
2
2
r
y
x 

2
2
x
r
y 



A Simple Circle Drawing Algorithm (cont…)
20
0
20 2
2
0 


y
20
1
20 2
2
1 


y
20
2
20 2
2
2 


y
6
19
20 2
2
19 


y
0
20
20 2
2
20 


y

A Simple Circle Drawing Algorithm
(cont…)
However, unsurprisingly this is not a brilliant solution!
Firstly, the resulting circle has large gaps where the slope
approaches the vertical
Secondly, 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

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

Given the centre point coordinates (0, 0) and radius as 8, generate
all the points to form a circle.
Solution-
Given-
Centre Coordinates of Circle (X0, Y0) = (0, 0)
Radius of Circle = 8
Step-01:
Assign the starting point coordinates (X0, Y0) as-
X0 = 0
Y0 = R = 8
Step-02:
Calculate the value of initial decision parameter P0 as-
P0 = 3 – 2 x R
P0 = 3 – 2 x 8
P0 = -13

Step-03:
As Pinitial < 0, so case-01 is satisfied.
Thus,
Xk+1 = Xk + 1 = 0 + 1 = 1
Yk+1 = Yk = 8
Pk+1 = Pk + 4 x Xk+1 + 6 = -13 + (4 x 1) + 6 = -3
Step-04:
This step is not applicable here as the given centre point
coordinates is (0, 0).

Step-05:
Step-03 is executed similarly until Xk+1 >= Yk+1 as follows-
Pk Pk+1 (Xk+1, Yk+1)
(0, 8)
-13 -3 (1, 8)
-3 11 (2, 8)
11 5 (3, 7)
5 7 (4, 6)
7 (5, 5

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

Advantages of Bresenham Circle Drawing Algorithm-
•The entire algorithm is based on the simple equation of circle X2 + Y2 = R2.
•It is easy to implement.
Disadvantages of Bresenham Circle Drawing Algorithm-
Like Mid Point Algorithm, accuracy of the generating points is an issue in this
algorithm.
•This algorithm suffers when used to generate complex and high graphical images.
•There is no significant enhancement with respect to performance.

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 The mid-point circle
a l g o r i t h m w a s
developed by Jack
Bresenham, who we
heard about earlier.

Mid-Point Circle Algorithm (cont…)
(xk+1, yk)
(xk+1, yk-1)
(xk, yk)
Assume that we have
just plotted point (xk, yk)
The next point is a
choice between (xk+1, yk)
and (xk+1, yk-1)
We would like to choose
the point that is nearest to
the actual circle
So how do we make this choice?

Let’s re-jig the equation of the circle slightly to give us:
…(1)
The equation evaluates as follows:
By evaluating this function at the midpoint between the
candidate pixels we can make our decision
2
2
2
)
,
( r
y
x
y
x
fcirc 










,
0
,
0
,
0
)
,
( y
x
fcirc
boundary
circle
the
inside
is
)
,
(
if y
x
boundary
circle
on the
is
)
,
(
if y
x
boundary
circle
the
outside
is
)
,
(
if y
x

Assuming we have just plotted the pixel at (xk,yk) so we
need to choose between (xk+1,yk) and (xk+1,yk-1)
Our decision variable can be defined as:mid point b/w 2
points (xk+1,Yk) and (Xk+1, Yk-1) is [xk+1, yk-1/2]
...2
If pk < 0 the midpoint is inside the circle and the pixel at yk
is closer to the circle
Otherwise the midpoint is outside and yk-1 is closer
2
2
2
)
2
1
(
)
1
(
)
2
1
,
1
(
r
y
x
y
x
f
p
k
k
k
k
circ
k









To ensure things are as efficient as possible we can do all of our
calculations incrementally
First consider: ( since Xk+1 = Xk+1)
or:
where yk+1 is either yk or yk-1 depending on the sign of pk
 
  2
2
1
2
1
1
1
2
1
]
1
)
1
[(
2
1
,
1
r
y
x
y
x
f
p
k
k
k
k
circ
k













1
)
(
)
(
)
1
(
2 1
2
2
1
1 






 

 k
k
k
k
k
k
k y
y
y
y
x
p
p

the initial value of Pk is given by the circle function at the position
(0,r) as,
Substituting k=0,Xk=0,Yk=r in the above function results in,
2
2
2
)
2
1
(
)
1
(
)
2
1
,
1
(
r
y
x
y
x
f
p
k
k
k
k
circ
k









The first decision variable is given as:
if r is an integer, then Po can be rounded to P0= 1 – r.
Then if pk < 0 then the next decision variable is given as:
If pk > 0 then the decision variable is:
r
r
r
r
f
p circ








4
5
)
2
1
(
1
)
2
1
,
1
(
2
2
0
1
2 1
1 

 
 k
k
k x
p
p
1
2
1
2 1
1 



 
 k
k
k
k y
x
p
p

The Mid-Point Circle Algorithm
MID-POINT CIRCLE ALGORITHM
• Input radius r and circle centre (xc, yc), then set the
coordinates for the first point on the circumference of a circle
centred on the origin as:
• Calculate the initial value of the decision parameter as:
• Perform the test, Starting with k = 0 at each position xk,
perform the following test.
(i) If pk < 0, the next point along the circle centred on (0, 0) is
(xk+1, yk) and:
)
,
0
(
)
,
( 0
0 r
y
x 
r
p 

4
5
0
1
2 1
1 

 
 k
k
k x
p
p

The Mid-Point Circle Algorithm (cont…)
(ii) If Pk >0 then the next point along the circle is (xk+1, yk-
1) and:
where = 2Xk+2 and = 2Yk – 2
• Identify the symmetry points in the other seven octants
• Move (x, y) according to:
• Repeat steps 3 to 5 until x >= y
1
2 
k
y
1
1
1 2
1
2 

 


 k
k
k
k y
x
p
p
c
x
x
x 
 c
y
y
y 

1
2 
k
x

Mid-Point Circle Algorithm Example
To see the mid-point circle algorithm in action lets use it
to draw a circle centred at (0,0) with radius 10
Determine the positions along the circle octant in the first
quadrant from x=0 to x=y.
The intial value of the decision parameter is
P0 = 1-r = 1-10 = -9
For circle centred on the coordinate origin, the initial
point is (X0,Y0)=(0,10) and initial increment terms for
calculating the decision parameters are
2X0 =0 and 2Y0 = 20

K=0 and P0 = -9 (1,10)
(pk<0)
K=1, P1=P0+2Xk+1 => -9+2(1)+1 =-9+3=-6 (2,10)
K=2, P2= P1 +2(2)+1 = -6+4+1 = -1 (3,10)
K=3 P3=P2+2(3)+1 = -1+7= 6
(4,9)
K=4 (Pk>0)
P4= P3+2(4)+1-2(9) => 6+8+1-18 = -3 (5,9)
K=5 p5= p4+2(5)+1 => -3+10+1 = 8 (6,8)
K=6 p6=8+2(6)+1-2(8) => 8+12+1-16 = 5 (7,7)
K=7 p7= 6 (8,6)
K=8 p8=11 (9,5)
K=9 p9 =20 (10,4)
1
1
1 2
1
2 

 


 k
k
k
k y
x
p
p
1
2 1
1 

 
 k
k
k x
p
p

Mid-Point Circle Algorithm Example (cont…)
9
7
6
5
4
3
2
1
0
8
9
7
6
5
4
3
2
1
0 8 10
10 k pk (xk+1,yk+1) 2xk+1 2yk+1
0
1
2
3
4
5
6
-9
-6
-1
6
-3
8
5
(1,10)
(2,10)
(3,10)
(4,9)
(5,9)
(6,8)
(7,7)
2
4
6
8
10
12
14
20
20
20
18
18
16
14

Mid-Point Circle Algorithm Exercise
Use the mid-point circle algorithm to
draw the circle centred at (0,0) with
radius 15

Mid-Point Circle Algorithm Example
(cont…) k pk (xk+1,yk+1) 2xk+1 2yk+1
0
1
2
3
4
5
6
7
8
9
10
11
12
9
7
6
5
4
3
2
1
0
8
9
7
6
5
4
3
2
1
0 810
10
13
12
1114
15
13
12
14
11
16
15
16

Mid-Point Circle Algorithm Summary
The key insights in the mid-point circle algorithm are:
Eight-way symmetry can hugly reduce the work in drawing a circle
Moving in unit steps along the x axis at each point along the circle’s edge we need
to choose between two possible y coordinates

Mid-Point Circle
Algorithm
(cont…)
M
6
2 3 4
1
5
4
3

Practice Question
Given the centre point coordinates (0, 0) and radius as 10, generate all the points to form a
circle.
Solution-
Given-
Centre Coordinates of Circle (X0, Y0) = (0, 0)
Radius of Circle = 10
Step-01:
Assign the starting point coordinates (X0, Y0) as-
X0 = 0
Y0 = R = 10
Step-02:
Calculate the value of initial decision parameter P0 as-

P0 = 1 – R
P0 = 1 – 10
P0 = -9
Step-03:
As Pinitial < 0, so case-01 is satisfied.
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
Step-04:
This step is not applicable here as the given centre point coordinates is (0, 0).

Step-05:
Step-03 is executed similarly until Xk+1 >= Yk+1 as follows-

COMPUTER GRAPHICS PRIMITIVES AND SCAN CONVERSION ALGORITHMS

Recommended

Recommended

More Related Content

Similar to COMPUTER GRAPHICS PRIMITIVES AND SCAN CONVERSION ALGORITHMS

Similar to COMPUTER GRAPHICS PRIMITIVES AND SCAN CONVERSION ALGORITHMS (20)

More from Shweta Shah

More from Shweta Shah (6)

Recently uploaded

Recently uploaded (20)

COMPUTER GRAPHICS PRIMITIVES AND SCAN CONVERSION ALGORITHMS