1

COMPUTER GRAPHICS
AND VISUALIZATION
18CS62

Module - 1
Dr. V. N Manju, GCEM, Bangalore.
 2

Syllabus
• Overview: Computer Graphics and OpenGL: Computer
Graphics: Basics of computer graphics, Application of
Computer Graphics, Video Display Devices: Random
Scan and Raster Scan displays, graphics software.
• OpenGL: Introduction to OpenGL ,coordinate reference
frames, specifying two-dimensional world coordinate
reference frames in OpenGL, OpenGL point functions,
OpenGL line functions, point attributes, line attributes,
curve attributes, OpenGL point attribute functions,
OpenGL line attribute functions
• Line drawing algorithms(DDA, Bresenham’s), circle
generation algorithms (Bresenham’s).

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 3

Video display devices

 4

Refresh cathode ray tube (CRT)

Figure 2-1 Basic design of a magnetic-deflection CRT.

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 5

CRT: acceleration and deflection

Figure 2-2 Operation of an electron Figure 2-3 Electrostatic deflection of the electron
beam in a CRT.
gun with an accelerating anode.
 6

CRT principles
• Kinetic energy is absorbed by the phosphor
• Part of energy is converted into heat
• The remainder causes electrons in the phosphor atom to move up
to higher quantum energy levels
• After a short time, “excited” phosphor electrons begin
dropping back to their stable ground state
• Electrons give up their extra energy as small quanta of light
(photons)
• Frequency (or color) of light emitted is in proportion to the energy
difference between the excited quantum state and the ground state

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 7

Phosphor spots

Figure 2-4 Intensity distribution of an illuminated Figure 2-5 Two illuminated phosphor spots are
phosphor spot on a CRT screen. distinguishable when their separation is greater than the
diameter at which a spot intensity has fallen to 60
percent of maximum.
 8

Resolution and size

• Maximum number of points that can be displayed without
overlap on a CRT is referred to as the resolution
• Alternatively, resolution is the number of points per cm
that can be plotted horizontally and vertically
• Or, just simply, total number of points in each direction
• E.g. 1280 by 1024
• Physical size of a graphics monitor is given as the length
of the the screen diagonal
• E.g. 15 inches

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 9

Raster-scan display
• Electron beam is swept across the screen, one row at a
time, from top to bottom
• Each row is referred to as a scan line

Figure 2-6 A raster-scan

system displays an object as a
set of discrete points across
each scan line.

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 10

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 11

Random-Scan Displays

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 12

Raster Scan Vs Random Scan

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 13

S. Raster Scan System Random Scan System

No
1. In Raster scan system the In Random scan system draw a
electron beam swapped picture one line at a time for this
across a screen one row at a reason called as Vector display.
time from Top to Bottom .As Stroke writing or calligraphics
the electron beam moves displays.
across each row .The beam
intensity is turned ON or OFF
to create a pattern of
illuminated spot.
2. Picture definition is stored in Picture definition is now stored is a
a memory area called Frame set of line drawing command in an
buffer or Refresh buffer.This area of memory which is called
memory area holds the set of refresh displayed file.
intensity value for all the
screen points.
3. Home television sets & Dot A Pen plotter operate in similar way
matrix printers e.g of such & an e.g of Random scan system.
system using of Raster scan
system.
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 14

Raster scan system have lower Random scan system have higher
Resolution than Random scan Resolution than Raster scan system.
resolution system.
In Raster scan system produced Random scan produce smooth line
Zacked lines that are plot. drawing because the CRT directly
follows line path.
Raster scan system designed for Random scan system are designed for
to display Realistic shaded line drawing application & can’t display
screen. Realistic shaded screen.
It is less expensive than Raster It is costlier than Random Scan system.
Scan system.
It is used for photos.That is Why It is used for text ,logs,letterheads.
photoshop is Raster editing
program.
Raster Scan Mainly in photos Random Scan system High Quality
like JPG,PNG,GIF File Format Images In SVG,the Size is Rescaleable
like Logo in sites
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 15

Frame buffer, pixels, and bit planes

• Picture definition is stored in a memory area called the
refresh buffer or the frame buffer
• Each screen spot that can be illuminated by the electron
beam is referred to as a pixel or pel (picture element)
• CRT, home TV sets, and printers use raster scan methods
• The number of bits per pixel in a frame buffer is referred
to as the depth or number of bit planes
• A frame buffer with one bit/pixel is called a bitmap; a
frame buffer with multiple bits/pixel is called a pixmap

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 16

Refresh rate
• As each screen refresh takes place, we tend to see each
frame as a smooth continuation of patterns in the previous
frame as long as the refresh rate is not too low (≥ 24
frames/sec)
• < 24 frames/sec causes flickering
• Early raster-scan systems had a refresh rate of 30
frames/sec
• Currently, refresh rates are 60, 80, 120 fps (or Hertz)

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 17

Color CRT (RGB) monitors

• Color monitors use a combination of phosphors that emit
different colored light
• Our eyes tend to merge the light emitted from three dots into one
composite color
• An RGB color system with 24 bits/pixel is referred to as a
full-color or a true-color system

Figure 2-9 Operation of a delta-

delta, shadow-mask CRT. Three
electron guns, aligned with the
triangular color-dot patterns on the
screen, are directed to each dot
triangle by a shadow mask.

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 18

Flat-panel plasma displays

Figure 2-10 Basic design of a plasma-panel display device.

Mixture of gases that

usually include neon gas
at the intersection of
conductors break down into
a glowing plasma of electrons
and ions
 19

Flat-panel TFEL displays

Figure 2-11 Basic design of a thin-film electroluminescent display device.

The region is filled with

phosphor doped with
manganese. Electrical
energy is absorbed by
manganese atoms which
then release energy as a
spot of light
 20

LED and LCD displays

• Light-emitting diode (LED) displays use a matrix of diodes
arranged to form pixel positions
• Liquid-crystal displays (LCD) are non-emissive. They
produce a picture by passing polarized light from the
surrounding or from an internal light source through a
liquid-crystal material that can be aligned to either block or
transmit light

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 21

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 22

Stereoscopic and virtual reality systems

Figure 2-15 Glasses for viewing a stereoscopic scene in 3D. (Courtesy of

XPAND, X6D USA Inc.)

3D effect is created by presenting a different view to each eye so that

scenes appear to have depth
 23

Stereoscopic effect on a raster system

• On a raster system, we can display each of the two views
on alternate refresh cycles
• The screen is viewed through glasses, with each lens
designed to act as a rapidly alternating shutter that is
synchronized to block out one of the views

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 24

Simple raster-graphics system

Figure 2-16 Architecture of a simple raster-graphics system.

 25

System with a frame buffer

Figure 2-17 Architecture of a raster system with a fixed portion of the system memory
reserved for the frame buffer.
 26

Operation of a video controller

Figure 2-19 Basic video-controller refresh operations.

X=0,Y=0
X++
X=0,Y++
X++
 27

System with a display processor

Figure 2-20 Architecture of a raster-graphics system with a display
processor.
 28

Coordinate Representation
1. First we define the shapes of individual objects, These reference frames
are called modeling coordinates or local coordinates or master
coordinates
2. Then we place the objects into appropriate locations within a scene
reference frame called world coordinates.
3. After all parts of a scene have been specified, it is processed through
various output-device reference frames for display. This process is called
the viewing pipeline.
4. Word coordinate is converted to viewing coordinate and the object
are transformed into 2D projection (what we want to see on the
output).
5. The scene is then stored in normalized coordinates. Which range
from −1 to 1 or from 0 to 1 Normalized coordinates are also referred to as
normalized device coordinates.
6. Picture is scan converted into the refresh buffer of the raster system for
display.
7. The coordinate systems for display devices are generally called device
coordinates, or screen coordinates.
29
 30

Transformation Sequence
 31

Graphics Functions
• It provides users with a variety of functions for creating and manipulating
pictures
•
• The basic building blocks for pictures are referred to as graphics output
primitives
•
• Attributes are properties of the output primitives
•
• We can change the size, position, or orientation of an object using
geometric transformations
•
• Modeling transformations, which are used to construct a scene.
•
• Viewing transformations are used to select a view of the scene, the type of
projection to be used and the location where the view is to be displayed.
•
• Input functions are used to control and process the data flow from these
interactive devices(mouse, tablet and joystick)
 32

Software Standards

✓ The primary goal of standardized graphics software is portability.

✓ In 1984, Graphical Kernel System (GKS) was adopted as the first graphics
software standard by the International Standards Organization (ISO)
✓ The second software standard to be developed and approved by the
standards organizations was Programmer’s Hierarchical Interactive
Graphics System (PHIGS).
✓ Extension of PHIGS, called PHIGS+, was developed to provide 3-D surface
rendering capabilities not available in PHIGS.
✓ The graphics workstations from Silicon Graphics, Inc. (SGI), came with a set
of routines called GL (Graphics Library)
 33

Other Graphics Packages

Many other computer-graphics programming libraries have been

developed for

1. general graphics routines

2. Some are aimed at specific applications (animation, virtual reality, etc.)

Example: Open Inventor Virtual-Reality Modeling Language (VRML).
 34

Introduction To OpenGL
✓ OpenGL basic(core) library :-A basic library of functions is provided in OpenGL
for specifying graphics primitives, attributes, geometric transformations,
viewing transformations, and many other operations.
 35

Basic OpenGL Syntax

➔ Function names in the OpenGL basic library (also called the OpenGL core library)
are prefixed with gl. The component word first letter is capitalized.
➔ For eg:- glBegin, glClear, glCopyPixels, glPolygonMode

➔ Symbolic constants - capital letters, preceded by “GL”, and component are

separated by underscore.
➔ For eg:- GL_2D, GL_RGB, GL_CCW, GL_POLYGON
➔ Data types. OpenGL uses special built-in, data-type names, such as GLbyte,
GLshort, GLint, GLfloat, GLdouble, Glboolean
 36

Graphics System
 The basic model of a graphics package is a
black box described by its input and
output.
 Input Interface
• Function Calls from User Program
• Measurements from Input Devices
 Output Interface
• Graphics to Output Device.
 37

API Categories

• Primitive Functions
• Attribute Functions
• Viewing Functions
• Transformation Functions
• Input Functions
• Control Functions
• Query Functions
 38

Library Organization
 OpenGL (GL)
• Core Library
• OpenGL on Windows.
 OpenGL Utility Library (GLU)
• It uses only GL functions to create common objects.
• It is available in all OpenGL implementations.
 OpenGL Utility Toolkit (GLUT)
• It provides the minimum functionalities expected for
interacting with modern windowing systems.
 39

Related Libraries

1) OpenGL Utility(GLU):- Prefixed with “glu”. It provides routines for setting up

viewing and projection matrices, describing complex objects with line and polygon
approximations, displaying quadrics and B-splines using linear approximations,
processing the surface-rendering operations, and other complex tasks.
-Every OpenGL implementation includes the GLU library

2) Open Inventor:- provides routines and predefined object shapes for interactive three-
dimensional applications which are written in C++.
 40

Cont…
3) Window-system libraries:- To create graphics we need display window. We cannot
create the display window directly with the basic OpenGL functions since it contains
only device-independent graphics functions, and window-management operations are
device-dependent. However, there are several window-system libraries that supports
OpenGL functions for a variety of machines.
Eg:- Apple GL(AGL), Windows-to-OpenGL(WGL), Presentation Manager to
OpenGL(PGL), GLX.
4) OpenGL Utility Toolkit(GLUT):- provides a library of functions which acts as

interface for interacting with any device specific screen-windowing system, thus
making our program device-independent. The GLUT library functions are
prefixed with “glut”.
 41

Header Files
In windows

#include<windows.h>

#include < GL/glut.h> //GL in windows

✓ In Apple OS X systems, the header file :

✓ #include <GLUT/glut.h>
 42

Library Organization
glu – viewing , projection, complex objects
glut – windowing function

# include<windows.h>
#include<GL/glut.h>
 43

 Program Structure
 Step 1: Initialize the interaction between windows
and OpenGL.
 Step 2: Specify the window properties and further
create window.
 Step 3: Set the callback functions
 Step 4: Initialize the program attributes
 Step 5: Start to run the program
 OpenGL API
 Program Framework
#include <GL/glut.h> includes gl.h

int main(int argc, char** argv)

{
interaction initialization
glutInit(&argc,argv);
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB);
glutInitWindowSize(500,500);
glutInitWindowPosition(0,0);
glutCreateWindow("simple"); define window properties

glutDisplayFunc(myDisplay);display callback loop

myInit(); // calledsetonly once

OpenGL state

glutMainLoop(); enter event loop

}
18CS62 Computer Graphics and Visualization 4 Dr. V N Manju, Dept. of CSE, GCEM,
 45

Red(R ) Green (G) B(Blue)

1 1 1 White

0 0 0 Black

1 0 0 Red

0 1 0 Green

0 0 1 Blue

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 46

Program Framework: Window Management

 glutInit():initializes GLUT and should be
called before any other GLUT routine.
 glutInitDisplayMode():specifies the
color model (RGB or color-index color model)
 glutInitWindowSize(): specifies the
size, in pixels, of your window.
 glutInitWindowPosition():specifies the
screen location for the upper-left corner
 glutCreateWindow():creates a window
with an OpenGL context.
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 OpenGL API
 Program Framework
void myInit(){
/* set colors */
glClearColor(1.0, 1.0, 1.0, 0.0);
}/* End of myInit */

void myDisplay()
{
/* clear the display */
glClear(GL_COLOR_BUFFER_BIT);
// code for objects
glFlush();
}
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
4
 OpenGL API
 Program Framework: Color Manipulation
 glClearColor():establishes what color the
window will be cleared to.
 glClear():actually clears the window.
 glColor3f():establishes what color to use
for drawing objects.
 glFlush():ensures that the drawing
command are actually executed.
Remark: OpenGL is a state machine. You put it into various
states or modes that remain in effect until you change
them
18CS62 Computer Graphics and Visualization 4 Dr. V N Manju, Dept. of CSE, GCEM,
 Primitives and Attributes
 Program Form of Primitives
glBegin(type);
glVertex*(…);

glVertex*(…);
.
.
glVertex*(…);
glEnd();
 The basic ones are specified by a set of vertices.
 The type specifies how OpenGL assembles the
vertices.

18CS62 Computer Graphics and Visualization 4 Dr. V N Manju, Dept. of CSE, GCEM,
 Primitives and Attributes
 Program Form of Primitives
 Vertex Function: glVertex*()
•* : can be as the form [nt | ntv]
• n : the number of dimensions (2, 3, 4)
•t : data type (i: integer, f: float, and d:
double)
• v : the variables is a pointer.
glVertex2i (GLint x, GLint y);
glVertex3f(GLfloat x, GLfloat y, GLfloat
z); glVertex2fv(p); // int p[8] = {1.0,
1.0}
18CS62 Computer Graphics and Visualization 5 Dr. V N Manju, Dept. of CSE, GCEM,
 Primitives and Attributes
 Points and Line Segment
 Point: GL_POINTS
 Line Segments: GL_LINES
 Polygons:
 GL_POLYGON
 GL_QUADS
 GL_TRIANGLES
• GL_LINE_STRI GLP

• GL_LINE_LOOP

18CS62 Computer Graphics and Visualization 5 Dr. V N Manju, Dept. of CSE, GCEM,
 52

1
X Y
0.2 0.2
0.6 0.2

.1 .2 .3 .4 .5 .6 .7 .8 .91
0.6 0.6
0.2 0.6

.1 .2 .3 .4 .5 .6 .7 .8 .91 1
-1

-1

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 53

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 54

X Y
4 3
7 3
7 6
4 6
(4,6) (7,6)
Triangle (L,T) (R,T)
1 8
3 8
2 10
(4,3) (7,3)
(L,B) (R,B)

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 55

X Y
10 20 30 40 50 60 70 80 90 100

30 30
60 30
60 60
30 60
Triangle
1 8
(100 X 100) 3 8
2 10
0

0 10 20 30 40 50 60 70 80 90 100
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 56

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 57

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 Primitives and Attributes
 Polygon Primitives
 Polygons: GL_POLYGON
 Triangles: GL_TRIANGLES
 Quadrilaterals: GL_QUADS
 Stripes: GL_TRIANGLE_STRIP
 Fans: GL_TRIANGLE_FAN

18CS62 Computer Graphics and Visualization 5 Dr. V N Manju, Dept. of CSE, GCEM,
 Primitives and Attributes
 Polygon Primitives
 Polygons: GL_POLYGON
 Triangles: GL_TRIANGLES
 Quadrilaterals: GL_QUADS
 Stripes: GL_TRIANGLE_STRIP
 Fans: GL_TRIANGLE_FAN

18CS62 Computer Graphics and Visualization 5 Dr. V N Manju, Dept. of CSE, GCEM,
 OpenGL
Viewing
 Description
 The viewing is to describe how we would like
these objects to appear.
 The concept is just as what we record in a
photograph
• Camera Position
• Focal Lens

 View Models
• Orthographic Viewing
• Two-Dimensional Viewing

18CS62 Computer Graphics and Visualization 6 Dr. V N Manju, Dept. of CSE, GCEM,
 OpenGL
Viewing
 Orthographic View
 It is the simple and OpenGL’s default view
 It is what we would get if the camera has an
infinitely long lens.
 All projections become parallel

18CS62 Computer Graphics and Visualization 6 Dr. V N Manju, Dept. of CSE, GCEM,
 OpenGL
Top Viewing
 Two-Dimensional Viewing
 It is a special case of three-dimensional graphics
 Viewing rectangle is in the plane z=0.
void gluOrtho2D(GLdouble left, GLdouble right,
GLdouble bottom, GLdouble top);

LEFT –xmin,
Right – Xmax

Bottom – ymin
Top – ymax

18CS62 Computer Graphics and Visualization 6 Dr. V N Manju, Dept. of CSE, GCEM,
 OpenGL
Viewing
 Orthographic View
 The parameters are distances measured from
the camera
 It sees only the objects in the viewing volume.
 OpenGL Default
• Cube Volume: 2x2x2

void glOrtho(GLdouble left, GLdouble right, GLdouble bottom,

GLdouble top, GLdouble near, GLdouble far)

18CS62 Computer Graphics and Visualization 6 Dr. V N Manju, Dept. of CSE, GCEM,
 OpenGL
Viewing
 Two-Dimensional Viewing
 It directly takes a viewing rectangle (clipping
rectangle) of our 2D world.
 The contents of viewing rectangle is
transferred to the display.

18CS62 Computer Graphics and Visualization 6 Dr. V N Manju, Dept. of CSE, GCEM,
 65

OpenGL Point Functions

• GL_POINTS

glBegin (GL_POINTS);

glVertex2i (50, 100);

glVertex2i (75, 150);

glVertex2i (100, 200);

glEnd ( );

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 66

➢ we could specify the coordinate values for the preceding points in arrays
such as int point1 [ ] = {50, 100};
int point2 [ ] = {75, 150};
int point3 [ ] = {100, 200};
and call the OpenGL functions for plotting the three points as
glBegin (GL_POINTS);
glVertex2iv (point1);
glVertex2iv (point2);
glVertex2iv (point3);
glEnd ( );

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 67

Point Attributes
• we can set two attributes for points: color and size.
• We set the size for an OpenGL point with glPointSize
(size);
• The default value for point size is 1.0.
glColor3f (1.0, 0.0, 0.0);
glBegin (GL_POINTS);
glVertex2i (50, 100);
glPointSize (2.0);
glColor3f (0.0, 1.0, 0.0);
glVertex2i (75, 150);
glPointSize (3.0);
glColor3f (0.0, 0.0, 1.0);
glVertex2i (100, 200);
glEnd
18CS62 Computer Graphics and(Visualization
); Dr. V N Manju, Dept. of CSE, GCEM,
 68

OpenGL LINE FUNCTIONS

glBegin (GL_LINES);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p3);
glVertex2iv (p4);
glVertex2iv (p5);
glEnd ( );

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 69

OpenGL LINE FUNCTIONS

• GL_LINES

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 70

glBegin (GL_LINES_LOOP);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p3);
glVertex2iv (p4);
glVertex2iv (p5);
glEnd ( );

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 71

glBegin (GL_LINES_STRIP);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p3);
glVertex2iv (p4);
glVertex2iv (p5);
glEnd ( );

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 72

Line-Attribute Functions OpenGL

• three attribute settings: line color, line-width, and line
style.
• Line width is set in OpenGL with the function
• Syntax: glLineWidth (width);
•

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 73

OpenGL Line-Style Function

• Syntax: glLineStipple (repeatFactor, pattern);
• Pattern:
• Parameter pattern is used to reference a 16-bit integer that
describes how the line should be displayed.
• 1 bit in the pattern denotes an “on” pixel position, and a 0 bit
indicates an “off” pixel position.
• The pattern is applied to the pixels along the line path starting with
the low-order bits in the pattern.
• The default pattern is 0xFFFF (each bit position has a value of
1),which produces a solid line.

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 74

• repeatFactor
• Integer parameter repeatFactor specifies how many times
each bit in the pattern is to be repeated before the next bit
in the pattern is applied.
• The default repeat value is 1.

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 75

Activating line style:

• Before a line can be displayed in the current line-style
pattern, we must activate the line-style feature of
OpenGL.
• glEnable (GL_LINE_STIPPLE);

• At any time, we can turn off the line-pattern feature with

• glDisable (GL_LINE_STIPPLE);

• This replaces the current line-style pattern with the default

pattern (solid lines).

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 76

glEnable (GL_LINE_STIPPLE); /* Input first set of (x, y) data values.

*/ glLineStipple (1, 0x1C47); // Plot a dash-dot, standard-width polyline.
linePlot (dataPts);
/* Input second set of (x, y) data values. */
glLineStipple (1, 0x00FF); / / Plot a dashed, double-width polyline.
glLineWidth (2.0);
linePlot (dataPts);
/* Input third set of (x, y) data values. */
glLineStipple (1, 0x0101); // Plot a dotted, triple-width polyline.
glLineWidth (3.0);
linePlot (dataPts);
glDisable (GL_LINE_STIPPLE);

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 77

Assignment

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 78

X Y
10 20 30 40 50 60 70 80 90 100
0

0 10 20 30 40 50 60 70 80 90 100
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 3.1 COORDINATE REFERENCE FRAMES
To describe a picture, we first decide upon

• A convenient Cartesian coordinate system, called the world-coordinate

reference frame, which could be either 2D or 3D.

• We then describe the objects in our picture by giving their geometric

specifications in terms of positions in world coordinates.
• e.g., we define a straight-line segment with two endpoint positions, and
a polygon is specified with a set of positions for its vertices.
• These coordinate positions are stored in the scene description along
with other info about the objects, such as their color and their
coordinate extents
• coordinate extents are the minimum and maximum x, y, and z values for each
object.
• A set of coordinate extents is also described as a bounding box for an
object.
• For a 2D figure, the co­ordinate extents are sometimes called its bounding
rectangle.

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 3.1 COORDINATE REFERENCE FRAMES

• Objects are then displayed by passing the scene

description to the viewing routines
• which identify visible surfaces and map the objects to the frame buffer
positions and then on the video monitor.
• The scan-conversion algorithm stores info about the scene, such as
color values, at the appropriate locations in the frame buffer, and then
the scene is displayed on the output device.
• locations on a video monitor
• are referenced in integer screen coordinates, which correspond to the
integer pixel positions in the frame buffer.

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 3.1 COORDINATE REFERENCE FRAMES

• Scan-line algorithms for the graphics primitives use the coordinate

descriptions to determine the locations of pixels
• E.g., given the endpoint coordinates for a line segment, a display
algorithm must calculate the positions for those pixels that lie along
the line path between the endpoints.
• Since a pixel position occupies a finite area of the screen
• the finite size of a pixel must be taken into account by the
implementation algorithms.
• for the present, we assume that each integer screen position
references the centre of a pixel area.

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 3.1 COORDINATE REFERENCE FRAMES

• Once pixel positions have been identified the color values must be
stored in the frame buffer
• Assume we have available a low-level procedure of the form

setPixel (x, y);

stores the current color setting into the frame buffer at integer position
(x, y), relative to the position of the screen-coordinate origin

getPixel (x, y, color);

retrieves the current frame-buffer setting for a pixel location;
• parameter color receives an integer value corresponding to the combined
RGB bit codes stored for the specified pixel at position (x,y).
• additional screen-coordinate information is needed for 3D scenes. For a
two-dimensional scene, all depth values are 0.

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 3.1 Absolute and Relative Coordinate Specifications

• So far, the coordinate references discussed are given as

absolute coordinate values
• values are actual positions wrt origin of current coordinate system
• some graphics packages also allow positions to be
specified using relative coordinates
• as an offset from the last position that was referenced (called the
current position)

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 84

Syllabus
• Overview: Computer Graphics and OpenGL: Computer
Graphics: Basics of computer graphics, Application of
Computer Graphics, Video Display Devices: Random
Scan and Raster Scan displays, graphics software.
• OpenGL: Introduction to OpenGL ,coordinate reference
frames, specifying two-dimensional world coordinate
reference frames in OpenGL, OpenGL point functions,
OpenGL line functions, point attributes, line attributes,
curve attributes, OpenGL point attribute functions,
OpenGL line attribute functions
• Line drawing algorithms(DDA, Bresenham’s),
circle generation algorithms (Bresenham’s).
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 Line Drawing Algorithms
 Lines drawn as pixels
 Graphics system
1. Projects the endpoints to their pixel locations in
the frame buffer (screen coordinates as integers)
2. Finds a path of pixels between the two
3. Loads the color
4. Plots the line on the monitor from frame buffer
(video controller)
 Rounding causes all lines except horizontal or
vertical to be displayed as jigsaw appearance (low
resolution)
 Improvement: high resolution, or adjust pixel
intensities on the line path.
85
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 8 9 10 11 12 13 14 15 16 17 18 19 20

(13,13)
5 6 7
2 3 4

(3,3)
1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 8 9 10 11 12 13 14 15 16 17 18 19 20

14,7
5 6 7
2 3 4
1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 8 9 10 11 12 13 14 15 16 17 18 19 20
5 6 7
2 3 4
1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 Line Drawing Algorithms (cont.)

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 Line Drawing Algorithms (cont.)

 Line equation
 Slope-intercept form
y=mx+b
slope m
y-intercept b
𝑦 𝑒𝑛𝑑 − 𝑦 0 𝛿 𝑦
 Slope 𝑚= =
𝑥 𝑒𝑛𝑑 − 𝑥 0 𝛿 𝑥
y-intercept
𝑏= 𝑦 0 − 𝑚 𝑥 0


18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 Calculating the values


18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 Setting Deflection Values


18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 Line Sampling

Straight-line segment with five sampling positions along the x axis

between x0 and xend.
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 Line Drawing Algorithms (cont.)
 DDA (Digital Differential Analyzer)
 Scan conversion line algorithm based on calculating
either δx or δy
 Line sampled at regular intervals of x, then
corresponding y is calculated and rounded
 From left to right
if m  1.0, y k +1 = y k + m ( δ x = 1)
1
if m > 1.0, x k +1 = x k + ( δ y = 1)
m

if m  1.0, y k +1 = y k - m ( δ x = -1)
1
if m > 1.0, x k +1 = x k - ( δ y = -1)
m
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 8 9 10 11 12 13 14 15 16 17 18 19 20

(13,13)
5 6 7

(xk+1,yk+1) = xk+1,yk+1
2 3 4

(xk,yk)
(X0,y0)(15,3)
1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 8 9 10 11 12 13 14 15 16 17 18 19 20

14,7
5 6 7
2 3 4

(xk+1,yk+1) = xk+1,yk
(xk,yk)
1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 DDA Algorithm
void lineDDA (int x0, int y0, int xEnd, int yEnd)
{
int dx = xEnd - x0, dy = yEnd - y0, steps, k;
float xIncrement, yIncrement, x = x0, y = y0;
if (fabs (dx) > fabs (dy))
steps = fabs (dx);
else
steps = fabs (dy);
xIncrement = float (dx) / float (steps);
yIncrement = float (dy) / float (steps);
setPixel (round (x), round (y));
for (k = 0; k < steps; k++) {
x += xIncrement;
y += yIncrement;
setPixel (round (x), round (y));
}
}

97
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 DDA Algorithm (cont.)
 Advantage
 Does not calculate coordinates based on the
complete equation (uses offset method)
 Disadvantage
 Round-off errors are accumulated, thus line
diverges more and more from straight line
 Round-off operations take time
 Perform integer arithmetic by storing float as integers
in numerator and denominator and performing
integer arithmetic.

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 Line Drawing Algorithms (cont.)

A section of a display screen where a straight-line segment is to be plotted, starting

from
18CS62 the pixel
Computer at column
Graphics 10 on scan line 11.
and Visualization 99
Dr. V N Manju, Dept. of CSE, GCEM,
 Line Drawing Algorithms (cont.)

A section of a display screen where a negative slope line segment is to be plotted,

starting
18CS62 from
Computer the pixel
Graphics at column 50 on scan line 50. Dr. V N Manju, Dept. of CSE, GCEM,
and Visualization
 Line Drawing Algorithms (cont.)

A section of the screen showing a pixel in column xk on scan line yk that is to be

plotted
18CS62 along
Computer the and
Graphics path of a line segment with slope 0Dr.
Visualization <V mN<Manju,
1. Dept. of CSE, GCEM,
 Line Drawing Algorithms (cont.)
 Considering all examples in previous
slides:
 Which pixel should be choosen to be
displayed?
 Answer: The closest one
 Which one is closer?
 Answer: Calculate the distance to the line and
perform an efficiency test
 Fine, but how?
 Answer: Given by Jack Bresenham 1962
(programmer at IBM at that time)

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 Vertical Distances

Vertical distances between pixel positions and the line y

coordinate
18CS62 Computer at Visualization
Graphics and sampling position xk + 1. Dr. V N Manju, Dept. of CSE, GCEM,
 Bresenham’s Line Drawing
Algorithm
 Bresenham’s line drawing algorithm
(positive slope less than 1)
y = m (xk + 1)+b
dlower = y – yk = m (xk + 1)+b – yk
dupper = (yk + 1) – y = yk + 1 - m (xk + 1)-b
dlower – dupper = 2m(xk+1) – 2yk + 2b –1

decision parameter:
pk= Δx (dlower – dupper )
pk = 2Δy xk- 2Δx yk + c
sign of pk is the same as sign of dlower – dupper
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 Bresenham’s Line Drawing
Algorithm (cont.)
1. Input the two line endpoints and store the left
endpoint in (x0, y0).
2. Set the color for the frame-buffer position (x0, y0)
– i.e. plot the first point.
3. Calculate the constant 2Δy –Δx, and set the
starting value for the decision parameter as p0 =
2Δy –Δx.
4. At each xk along the line, from k=0, perform the
following test:
if pk<0, next point to plot is (xk + 1, yk) and pk+1 = pk + 2Δy
otherwise, next point to plot is (xk + 1, yk + 1 )
and pk+1 = pk + 2Δy- 2Δx
5. Repeat step 4 Δx - 1 times.

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 Algorithm |M|<1.0

 Starting Point (x0, y0)

 P0=2Δy –Δx
 IF Pk<0
 (xk + 1, yk)
 pk+1 = pk + 2Δy
 ELSE
 (xk + 1, yk + 1 )
 pk+1 = pk + 2Δy- 2Δx
 REPEAT Δx - 1

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 Example: Bresenham Line
Drawing

Example 6-1 Bresenham Line

Drawing

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 Example: Bresenham Line
Drawing (cont.)

 |M|<1.0
 Starting Point (x0, y0)
 P0=2Δy –Δx (decision parameter)
 IF P0<0
 (xk + 1, yk)
 pk+1 = pk + 2Δy
 ELSE
 (xk + 1, yk + 1 )
 pk+1 = pk + 2Δy- 2Δx
 REPEAT Δx - 1

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 Example: Bresenham’s Line
Drawing (cont.)

1112 13 14

23 24
Pixel positions along the line path between endpoints (20, 10) and (30, 18), plotted
with Bresenham’s line algorithm.
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 Different m (slope)

 X1, y1 = (10,10)
 X2, y2 = (20,380)
 M=dy/dx = 370/10 > 1

 X1,y1 = (10,20)
 X2,y2= (360,370) = 1

 X1,y1 = (10,30)
 X2,y2 = (360,370)

M <Graphics
Computer
18CS62
1 and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 dx = x2-x1;
dy = y2-y1;  |M|<1.0
 Starting Point (x0, y0)
if (dx < 0) dx = -dx;  P0=2Δy –Δx (decision parameter)
if (dy < 0) dy = -dy;  IF P0<0
incx = 1;
if (x2 < x1) incx = -1;
 (xk + 1, yk)
incy = 1;  pk+1 = pk + 2Δy
if (y2 < y1) incy = -1;  ELSE
x = x1; y = y1;  (xk + 1, yk + 1 )
if (dx > dy) //m<1.0
{  pk+1 = pk + 2Δy- 2Δx
draw_pixel(x, y); // user-defined function  REPEAT Δx - 1
pk = 2 * dy-dx; //decision parameter
inc1 = 2*(dy-dx);
inc2 = 2*dy;
for (i=0; i<dx; i++)
{
if (pk >= 0) {
y += incy;
pk=pk + inc1;
}
else
pk=pk + inc2;
x += incx;
draw_pixel(x, y);
}

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 else {  |M|>1.0
 Starting Point (x0, y0)
draw_pixel(x, y);  P0=2Δx –Δy (decision parameter)
e = 2*dx-dy;  IF P0<0
inc1 = 2*(dx-dy);  (xk , yk+1)
inc2 = 2*dx;  pk+1 = pk + 2Δx
for (i=0; i<dy; i++) {  ELSE
if (e >= 0) {  (xk + 1, yk + 1 )
pk+1 = pk + 2Δx- 2Δy
x += 

 REPEAT Δy - 1
incx;
e +=
inc1;
}
else
e +=
inc2;
y += incy;
draw_pixel(x,
y);
}
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
}
 Midpoint Circle Algorithm
•Midpoint circle algorithm generates all points on a circle centered at the origin by incrementing all
the way around circle.
•The strategy is to select which of 2 pixels is closer to the circle by evaluating a function at the
midpoint between the 2 pixels
•To apply the midpoint method, we define a circle function as
•To summarize, the relative position of any point (x, y) can be determined by checking the sign of
the circle function as follows:

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 (Y)

(-X)
(Cx,cy) (radius) (X)

(-y)

(ry)

(Cx,cy) (rX)

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
 Midpoint Circle Algorithm

1. Input radius r and circle center (xc , yc ), then set the coordinates for the first point on the circumference of
a circle centered on the origin as
(x0, y0) = (0, r )

2. Calculate the initial value of the decision parameter as p0 = 1-r

3. At each xk position, starting at k = 0, perform the following test:

If pk <0, the next point along the circle centered on (0, 0) is (xk+1, yk ) and pk+1 = pk +
2xk+1 + 1
Otherwise, the next point along the circle is (xk + 1, yk − 1) and
pk+1 = pk + 2xk+1 + 1 – 2yk+1
where 2xk+1 = 2xk + 2 and 2yk+1= 2yk − 2.

4. Determine symmetry points in the other seven octants.

5. Move each calculated pixel position (x, y) onto the circular path centered at (xc , yc ) and plot the
coordinate values as follows:
x = x + xc , y = y + yc
6. Repeat steps 3 through 5 until x ≥ y.

18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,
18CS62 Computer Graphics and Visualization Dr. V N Manju, Dept. of CSE, GCEM,