Operation of video monitors based on Refresh CRT design with neat diagrams.

Figure 1: Basic Design of a magnetic-deflection CRT

● A beam of electrons (cathode rays), emitted by an electron gun, passes
through ​focusing and deflection systems that direct the beam toward
specified positions on the phosphor-coated screen.
● The phosphor then emits a small spot of light at each position contacted by
the electron beam.
● Because the light emitted by the phosphor fades very rapidly, some method is
needed for maintaining the screen picture.
● To keep the phosphor glowing, picture is redrawn repeatedly by quickly
directing the electron beam back over the same points. ​This type of display
is called a refresh CRT​.
● Beam passes between two pairs of metal plates, one vertical and other
horizontal. The electron beam while passing between each pair of plates, it is
bent towards the plate with the higher positive voltage. A voltage difference
is applied to each pair of plates in order to deflect the beam in a particular
direction.
● In Fig 3 the beam is first deflected towards one side of the screen. Then, as
the beam passes through the horizontal plates, it is deflected towards, the top
or bottom of the screen.
 Figure 2: Operation of an electron gun with an acceleration anode

● The primary components of an electron gun in a CRT are the heated metal cathode and a
control grid (Fig.2).
● A coil of wire called the filament is heated by current inside the cylindrical cathode
structure. This causes electrons to be "boiled off" the hot cathode surface.
● The free negatively charged electrons are then accelerated towards the phosphor coating
by a high positive voltage. The accelerating voltage can be generated with a positively
charged metal coating on the in- side of the CRT envelope near the phosphor screen, or an
accelerating anode can be used.
● As the electrons would repel each other, and the beam would spread out as it approaches
the screen, a focusing system in a CRT is needed to converge the electron beam into a
small spot as it strikes the phosphor. Focusing is accomplished with either electric or
magnetic fields.
● In electrostatic focusing system, the electron beam passes through a positively charged
metal cylinder that forms an electrostatic lens, as shown in Fig. 3. The action of the
electrostatic lens focuses the electron beam at the center of the screen, in exactly the same
way that an optical lens focuses a beam of light at a particular focal distance. Similar lens
focusing effects can be accomplished with a magnetic field set up by a coil mounted
around the outside of the CRT envelope.

Figure 3: Electrostatic deflection of the electron beam in a CRT

 ● Spots of light are produced on the screen by the transfer of the CRT beam energy to the
phosphor. When the electrons in the beam collide with the phosphor coating, they are
stopped and their kinetic energy is absorbed by the phosphor. Part of the beam energy is
converted by friction into heat energy, and the remainder causes electrons in the phosphor
atoms to move up to higher quanturn-energy levels. After a short time, the "excited"
phosphor electrons begin dropping back to their stable ground state, giving up their extra
energy as small quantums of light energy.
● What we see on the screen is the combined effect of all the electron light emissions: a
glowing spot that quickly fades after all the excited phosphor electrons have returned to
their ground energy level. The frequency (or color) of the light emitted by the phosphor is
proportional to the energy difference between the excited quantum state and the ground
state.

Raster Scan Display:

● The electron beam is swept across the screen one row at a time from top to bottom. Each
row is referred as a ​scanline​. As it moves across each row, the beam intensity is turned on
and off to create a pattern of illuminated spots.
● The refreshing rate, called the frame rate, is normally 60 to 80 frames per second, or
described as 60 Hz to 80 Hz.
● Picture definition is stored in a memory area called the refresh buffer or frame buffer.
Each complete scanning of a screen is normally called a frame. This memory area holds
the set of color values(intensity values) for the screen points. Each screen point is called a
pixel (picture element).
● These stored color values are then retrieved from the refresh buffer and used to control the
intensity of the electron beam as it moves from spot to spot across the screen. In this way,
 the picture is “painted” on the screen one scan line at a time, as demonstrated in Figure
above.
● 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, after refreshing
each scan line, is called the ​horizontal retrace​ of the electron beam.
● At the end of each frame(once per each refresh cycle), the electron beam returns to the
upper-left corner of the screen (called as ​vertical retrace​) to begin the next frame.
● On black and white systems, the frame buffer storing the values of the pixels is called a
bitmap. Each entry in the bitmap is a 1-bit data which determine the on (1) and off (0) of
the intensity of the pixel.
● On color systems, the frame buffer storing the values of the pixels is called a pixmap
(Though nowadays many graphics libraries name it as bitmap too). Each entry in the
pixmap occupies a number of bits to represent the color of the pixel.
● On some raster-scan systems, each frame is displayed in two passes using an ​interlaced
refresh procedure​. In the first pass, the beam sweeps across every other scan line from
top to bottom. After the vertical retrace, the beam then sweeps out the remaining scan
lines(as shown in below figure).

● Interlacing of the scan lines in this way allows us to see the entire screen displayed in half
the time that it would have taken to sweep across all the lines at once from top to bottom.
This technique is primarily used with slower refresh rates.

Random Scan Display:

● Random-scan monitors are also referred to as vector displays (or stroke-writing displays
or calligraphic displays).
● When operated as a random-scan display unit, a CRT has the electron beam directed only
to those parts of the screen where a picture is to be displayed.
● The image is constructed out of a sequence of straight line segments. Each line segment is
drawn on the screen by directing the beam to move from one point on screen to the next,
where each point is defined by its x and y coordinates.
● After drawing the picture, the system cycles back to the first line and design all the lines
of the picture 30 to 60 time per second by in any specified order as shown in the below
 figure. Refresh rate on a random-scan system depends on the number of lines to be
displayed on that system.

● Picture definition is now stored as a set of line-drawing commands in an area of memory

referred to as the display list, refresh display file, vector file, or display program.
● To display a specified picture, the system cycles through the set of commands in the
display file, drawing each component line in turn. After all line-drawing commands have
been processed, the system cycles back to the first line command in the list.
● Random-scan systems were designed for line-drawing applications, such as architectural
and engineering layouts, and they cannot display realistic shaded scenes.

Color CRT Monitors:

● To display colour pictures, combination of phosphorus is used that emits different
coloured light. There are two different techniques for producing colour displays with a
CRT.
1. Beam Penetration Method
2. Shadow Mask Method
Beam Penetration Method:
● The beam-penetration method for displaying color pictures has been used with
random-scan monitors.
● Two layers of phosphor, usually red and green, are coated onto the inside of the CRT
screen, and the displayed color depends on how far the electron beam penetrates into the
phosphor layers.
● 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, combinations of red and green light are emitted to show two
additional colors, orange and yellow.
● The speed of the electrons, and hence the screen color at any point, is controlled by the
beam-acceleration voltage.
 ● Beam penetration has been an inexpensive way to produce color in random-scan monitors,
but only four colors are possible, and the quality of pictures is not as good as with other
methods.
Shadow Mask Method:
● Shadow-mask methods are commonly used in raster-scan systems (including color TV)
because they produce a much wider range of colors than the beam-penetration method.
● A shadow-mask CRT has three phosphor color dots at each pixel position. One phosphor
dot emits a red light, another emits a green light, and the third emits a blue light.
● This type of CRT has three electron guns, one for each color dot, and a shadow-mask grid
just behind the phosphor-coated screen.
● Below Figure illustrates the shadow-mask method, commonly used in color CRT-
systems.

● The three electron beams are deflected and focused as a group onto the shadow mask,
which contains a series of holes aligned with the phosphor-dot patterns. When the three
beams pass through a hole 'in the shadow mask, they activate a dot triangle, which appears
as a small color spot on the screen.
● The phosphor dots in the triangles are arranged so that each electron beam can activate
only its corresponding color dot when it passes through the shadow mask.
● We obtain color variations in a shadow-mask CRT by varying the intensity levels of the
three electron beams. By turning off the red and green guns, we get only the color coming
from the blue phosphor.
● Other combinations of beam intensities produce a small light spot for each pixel position,
since our eyes tend to merge the three colors into one composite. The color we see
depends on the amount of excitation of the red, green, and blue phosphors.
● A white (or gray) area is the result of activating all three dots with equal intensity. Yellow
is produced with the green and red dots only, magenta is produced with the blue and red
dots, and cyan shows up when blue and green are activated equally.
Flat-Panel Displays:
● The term flat panel display refers to a class of video device that have reduced volume ,
weight and power requirement compared to a CRT. A significant feature of flat-panel
displays is that they are thinner than CRTs, and we can hang them on walls or wear them
on our wrists.
● Current uses for flat-panel displays include small TV monitors, calculators, pocket video
games, laptop computers, armrest viewing of movies on airlines, as advertisement boards
in elevators, and as graphics displays in applications requiring rugged, portable monitors.
● We can separate flat-panel displays into two categories:
1. Emissive displays
2. Non Emissive displays.
● The emissive displays (or emitters) are devices that convert electrical energy into light.
Plasma panels, thin-film electroluminescent displays, and light-emitting diodes are
examples of emissive displays.
● Nonemmissive displays (or nonemitters) use optical effects to convert sunlight or light
from some other source into graphics patterns. The most important example of a
nonemissive flat-panel display is a liquid-crystal device.
Plasma Panel display:
● Plasma panels, also called gas-discharge displays, are constructed by filling the region
between two glass plates with a mixture of gases that usually includes neon. A series of
vertical conducting ribbons is placed on one glass panel, and a set of horizontal
conducting ribbons is built into the other glass panel as in the below figure.

● Firing voltages applied to an intersecting pair of horizontal and vertical conductors cause
the gas at the intersection of the two conductors to break down into a glowing plasma of
electrons and ions.
Thin-film electroluminescent display:
 ● Thin-film electroluminescent displays are similar in construction to plasma panels. The
difference is that the region between the glass plates is filled with a phosphor, such as zinc
sulfide doped with manganese, instead of a gas as shown in the below figure.
● When a sufficiently high voltage is applied to a pair of crossing electrodes, the phosphor
becomes a conductor in the area of the intersection of the two electrodes. Electrical energy
is absorbed by the manganese atoms, which then release the energy as a spot of light
similar to the glowing plasma effect in a plasma panel.

Light-emitting Diode (LED):

● In LED, a matrix of diodes is arranged to form the pixel positions in the display and
picture definition is stored in a refresh buffer. Information is read from the refresh buffer
and converted to voltage levels that are applied to the diodes to produce the light patterns
in the display.
Liquid-crystal displays (LCDs):
● These are non-emissive devices which produce a picture by passing polarized light from
the surroundings or from an internal light source through a liquid-crystal material that can
be aligned to either block or transmit the light.
● The term liquid crystal refers to the fact that these compounds have a crystalline
arrangement of molecules, yet they flow like a liquid.
● Flat-panel displays commonly use nematic (threadlike) liquid-crystal compounds that tend
to keep the long axes of the rod-shaped molecules aligned. A flat-panel display can then
be constructed with a nematic liquid crystal, as demonstrated in the below figure.
 ● Two glass plates, each containing a light polarizer that is aligned at a right angle 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. Normally, the molecules are
aligned as shown in the “on state” of above figure.
● Polarized light passing through the material is twisted so that it will pass through the
opposite polarizer. The light 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 the light is
not twisted.

Architecture of a simple and display processor raster graphics system:

Simple raster graphics system :

 Fig 1: Architecture of a simple raster-graphics system.

Fig 2: Architecture of a raster system with a fixed portion of the system memory reserved for
the frame buffer.

● Interactive raster-graphics systems typically employ several processing units. In addition to

the central processing unit (CPU), a special-purpose processor, called the ​video controller
or display controller​, is used to control the operation of the display device.
● Organization of a simple raster system is shown in Fig 1. Here, the frame buffer can be
anywhere in the system memory, and the video controller accesses the frame buffer to refresh
the screen.
● Fig 2 shows a commonly used organization for raster systems. A fixed area of the system
memory is reserved for the frame buffer, and the video controller is given direct access to the
frame-buffer memory. Frame-buffer locations, and the corresponding screen positions, are
referenced in Cartesian coordinates.
● In an application program, the commands of graphics software package is used to set
coordinate positions for displayed objects relative to the origin of the Cartesian reference
frame. Often, the lower-left corner of a screen display area is considered as the coordinate
origin by the software commands.
● The screen surface is then represented as the first quadrant of a two-dimensional system, with
positive x values increasing from left to right and positive y values increasing from the
 bottom of the screen to the top. Pixel positions are then assigned integer x values that range
from 0 to Xmax across the screen, left to right, and integer y values that vary from 0 to
Ymax, bottom to top.
● Fig 3 shows the basic refresh operations of the video controller. Two registers are used to
store the coordinate values for the screen pixels. Initially, the x register is set to 0 and the y
register is set to the value for the top scan line. The contents of the frame buffer at this pixel
position are then retrieved and used to set the intensity of the CRT beam. Then the x register
is incremented by 1, and the process is repeated for the next pixel on the top scan line. This
procedure continues for each pixel along the top scan line. After the last pixel on the top scan
line has been processed, the x register is reset to 0 and the y register is set to the value for the
next scan line down from the top of the screen. Pixels along this scan line are then processed
in turn, and the procedure is repeated for each successive scan line. After cycling through all
pixels along the bottom scan line, the video controller resets the registers to the first pixel
position on the top scan line and the refresh process starts over.

Fig 3: Basic video-controller refresh operations.

● Since the screen must be refreshed at a rate of at least 60 frames per second, the simple
procedure illustrated in Figure 3 may not be accommodated by typical RAM chips if the
cycle time is too slow. To speed up pixel processing, video controllers can retrieve multiple
pixel values from the refresh buffer on each pass. The multiple pixel intensities are then
stored in a separate register and used to control the CRT beam intensity for a group of
adjacent pixels. When that group of pixels has been processed, the next block of pixel values
is retrieved from the frame buffer.
Raster Scan Display Processor:

Fig 4: Architecture of a raster-graphics system with a display processor

● Fig 4 shows the components of a raster system that contains a separate display processor,
sometimes referred to as a graphics controller or a display coprocessor. The purpose of the
display processor is to free the CPU from the graphics chores. In addition to the system
memory, a separate display-processor memory area can be provided.
● A major task of the display processor is digitizing a picture definition given in an
application program into a set of pixel values for storage in the frame buffer. This
digitization process is called scan conversion. Graphics commands specifying straight
lines and other geometric objects are scan converted into a set of discrete points,
corresponding to screen pixel positions.
● Scan converting a straight-line segment, for example, means that we have to locate the
pixel positions closest to the line path and store the color for each position in the frame
buffer. Similar methods are used for scan converting other objects in a picture definition.
Characters can be defined with rectangular pixel grids, as in below Fig 5. or they can be
defined with outline shapes, as in Fig 6.

Fig 5: A character defined as a Fig 6: A character defined as an

rectangular grid of pixel positions. outline shape.
● Display processors are also designed to perform a number of additional operations. These
functions include generating various line styles (dashed, dotted, or solid), displaying color
 areas, and applying transformations to the objects in a scene. Also, display processors are
typically designed to interface with interactive input devices, such as a mouse.

----------o---------------o---------------o---------------o---------------o---------------o---------------o----------
 Introduction to OpenGL

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. Example: glBegin( ), glClear( )
● Certain functions require that one (or more) of their arguments be assigned a symbolic
constant specifying, for instance, a parameter name, a value for a parameter, or a particular
mode. All such constants begin with the uppercase letters GL. In addition, 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.
Example: GL_RGB, GL_POLYGON
● The OpenGL functions also expect specific data types. For example, an OpenGL function
parameter might expect a value that is specified as a 32-bit integer. But the size of an integer
specification can be different on different machines. To indicate a specific data type,
OpenGL uses special built-in, data-type names, such as GLint, GLfloat, GLdouble.

Simple OpenGL Program to draw a line segment:

#include <GL/glut.h> // (or others, depending on the system in use)
void init(void)
{
glClearColor(1.0,1.0,1.0,0.0); //Set display-window color to white.
glMatrixMode(GL_PROJECTION); // Set projection parameters.
gluOrtho2D(0.0, 200.0, 0.0, 150.0);
}
void lineSegment(void)
{
glClear(GL_COLOR_BUFFER_BIT); // Clear display window.
glColor3f(0.0, 0.4, 0.2); // Set line segment color to green.
glBegin(GL_LINES);
glVertex2i(180, 15); // Specify line-segment geometry.
glVertex2i(10, 145);
glEnd( );
glFlush( ); // Process all OpenGL routines as quickly as possible.
}
void main(int argc, char** argv)
{
glutInit(&argc, argv); // Initialize GLUT.
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); // Set display mode.
glutInitWindowPosition(50,100); //Set top-left display-window position.
glutInitWindowSize(400, 300); // Set display-window width and height.
glutCreateWindow("An Example OpenGL Program"); //Create display window.
init( ); // Execute initialization procedure.
glutDisplayFunc(lineSegment); // Send graphics to display window.
 glutMainLoop( ); // Display everything and wait.
}
Main Function:
● In OpenGL Graphics programs, we will need to include the header file for the OpenGL core
library. We use GLUT library to handle the window-managing operations. The OpenGL
Utility Toolkit (GLUT) provides a library of functions for interacting with any
screen-windowing system. The GLUT library functions are prefixed with glut. GLUT is an
interface to other device-specific window systems, we can use it so that our programs will be
device-independent.
#include <GL/glut.h>
● To get started, first step is to initialize GLUT. This initialization function could also process
any command line arguments as well. We perform the GLUT initialization with the statement
glutInit (&argc, argv);
● We can state that a display window is to be created on the screen with a given caption for the
title bar. This is accomplished with the below function. The single argument for this function
can be any character string that we want to use for the display-window title.
glutCreateWindow ("An Example OpenGL Program");
● We should specify what the display window should show. For this, we create a picture using
OpenGL functions and pass the picture definition to the GLUT routine glutDisplayFunc,
which assigns our picture to the display window. In the above example, we have the
OpenGL code for describing a line segment in a procedure called lineSegment. Then the
following function call passes the line-segment description on to the display window:
glutDisplayFunc (lineSegment);
● But the display window is not yet on the screen as we need one more GLUT function to
complete the window-processing operations. After execution of the following functiona call,
all display windows that we have created, including their graphic content, are now activated:
glutMainLoop( )​;
● glutMainLoop) function must be the last statement in our program. It displays the initial
graphics and puts the program into an infinite loop that checks for input from devices such as
a mouse or keyboard. Our first example will not be interactive, so the program will just
continue to display our picture until we close the display window.
● We can set some location and size of the display window using below functions.
glutInitWindowPosition(50,100) and glutInitWindowSize(400, 300)
● glutInitWindowPosition() function to give an initial location for the upper left corner of
the display window. This position is specified in integer screen coordinates, whose origin is
at the upper-left corner of the screen. For example, the above statement specifies that 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.
● Similarly, the glutInitWindowSize() ​function is used to set the initial pixel width and
height of the display window. Thus, in the above statement we specify a display window
with an initial width of 400 pixels and a height of 300 pixels.
 ● We can also set a number of other options for the display window, such as buffering and a
choice of color modes, with the glutInitDisplayMode() ​function. Arguments for this
routine are assigned symbolic GLUT constants. For example, the following command
specifies that a single refresh buffer is to be used for the display window and that we want to
use the color mode which uses red, green, and blue (RGB) components to select color values:
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);

Init() Function:
● Using RGB color values, we set the background color for the display window to be white,
with the OpenGL function:
glClearColor (1.0, 1.0, 1.0, 0.0);
● The first three arguments in this function set the red, green, and blue component colors to the
value 1.0, giving us a white background color for the display window. If, instead of 1.0, we
set each of the component colors to 0.0, we would get a black background. And if all three of
these components were set to the same intermediate value between 0.0 and 1.0, we would get
some shade of gray. The fourth parameter in the glClearColor function is called the alpha
value for the specified color. glClearColor command assigns a color to the display window, it
does not put the display window on the screen.
● Also in the program we need to tell OpenGL how we want to “project” our picture onto the
display window. 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);
● The above statements specify that an orthogonal projection is to be used to map the contents
of a 2D rectangular area of world coordinates to the screen, and that the x-coordinate values
within this rectangle range from 0.0 to 200.0 with y-coordinate values ranging from 0.0 to
150.0. Whatever objects we define within this world-coordinate rectangle will be shown
within the display window. Anything outside this coordinate range will not be displayed.

Display Function - lineSegment()

 ● To get the assigned window color displayed, we need to invoke the following OpenGL
function:
glClear (GL_COLOR_BUFFER_BIT);
● The argument GL COLOR BUFFER BIT is an OpenGL symbolic constant specifying that it
is the bit values in the color buffer (refresh buffer) that are to be set to the values indicated in
the glClearColor function.
● We can choose a variety of color schemes for the objects we want to display in a scene. In
the above programming example, the object color is set to be a dark green using,
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. This function requires that the values be in the
range from 0.0 to 1.0, and we have set red = 0.0, green = 0.4, and blue = 0.2.
● Finally, we need to call the appropriate OpenGL routines to create our line segment. The
following code defines a two-dimensional, straight-line segment with integer, Cartesian
endpoint coordinates (180, 15) and (10, 145).
glBegin (GL_LINES);
glVertex2i (180, 15);
glVertex2i (10, 145);
glEnd ( );
● glFlush()​, a routine to force execution of our OpenGL functions, which are stored by
computer systems in buffers in different locations, depending on how OpenGL is
implemented.
● The full OpenGL program given above is organized into three functions. We have placed all
initializations and related one-time parameter settings in function ​init()​. Our geometric
description of the “picture” that we want to display is in function lineSegment()​, which is
the function that will be referenced by the GLUT function glutDisplayFunc​. And the
main() function contains the GLUT functions for setting up the display window and getting
our line segment onto the screen.
Below Figure shows the display window and line segment generated by the above program.
OpenGL Primitives:
To specify a coordinate values for a single position we use the following OpenGL function,
glVertex* ( );
where the asterisk (*) is replaced with the spatial dimension (2D or 3D), the numerical data type to
be used for the coordinate values (int, float or double), and optionally a possible vector form for the
coordinate specification. For example replacing (*) with 2f, OpenGL takes it as 2 dimensional space
and floating point values to specify coordinates, similarly 3i means 3D and integer.
Calls to g ​ lVertex functions must be placed between a g ​ lBegin() ​function and a glEnd()
function. The argument of the glBegin() function is used to identify the kind of output primitive
that is to be displayed, and glEnd takes no arguments.

OpenGL Point Functions: ​To specify the geometry of a point, we simply give a coordinate position
in the world reference frame.
For point plotting, the argument of the glBegin function is the symbolic constant GL POINTS. Thus,
the form for an OpenGL specification of a point position is
glBegin (GL_POINTS);
glVertex* ( );
glEnd ( );
In the below example, three equally spaced points are plotted along a
two dimensional, straight-line path as shown in the figure.
Coordinates are given as integer pairs:
glBegin (GL_POINTS) //Primitive to draw is a point
glVertex2i (50, 100); //position of the point
 glVertex2i (75, 150); //position of the point
glVertex2i (100, 200); //position of the point
glEnd ( );
The above code would puts three points on screen at world coordinates (50,100) (75,150) and
(100,200).
OpenGL Line Functions:
1) GL_LINES: A set of ​straight-line segments between each successive pair of endpoints in a
list is generated using the primitive line constant GL_LINES.
For example, if we have five 2D coordinate positions, then
the following code could generate the display shown below:
glBegin (GL_LINES);
glVertex2iv (10,10);
glVertex2iv (20,10);
glVertex2iv (20,20);
glVertex2iv (10,20);
glEnd ( );
Here we obtain one line segment between the first and
second coordinate positions and another line segment
between the third and fourth positions. In case, the number of specified endpoints is odd, the
last coordinate position is ignored.

2) GL_LINE_STRIP: OpenGL primitive constant

GL_LINE_STRIP is used to obtain a ​polyline​. The display
will be a sequence of connected line segments between the
first endpoint in the list and the last endpoint. The first line
segment in the polyline is displayed between the first
endpoint and the second endpoint; the second line segment
is between the second and third endpoints; and so forth, up
to the last line endpoint.
glBegin (GL_LINE_STRIP);
glVertex2iv (10,10);
glVertex2iv (20,10);
glVertex2iv (20,20);
glVertex2iv (10,20);
glEnd ( );

3) GL_LINE_LOOP: OpenGL primitive constant

GL_LINE_LOOP used to obtain a ​closed polyline​. The
output after using GL_LINE_LOOP is similar to that of
using GL_LINE_STRIP, but with an additional line that
connect the last coordinate position and the first
coordinate position.
glBegin (GL_LINE_LOOP);
 glVertex2i(10,10);
glVertex2i(20,10);
glVertex2i(20,20);
glVertex2i(10,20);
glEnd();
OpenGL Polygon Fill-Area Functions:
glRect*(): OpenGL provides glReft*() function that directly
accepts vertex specifications in the
xy plane and draws a rectangle(quadrilateral).
glRecti(10, 10, 40, 40);
Asterisk (*) represents the data type of the coordinate values
passed. The rectangle is displayed with edges parallel to the
xy coordinate axes as shown in the diagram.

GL_TRIANGLES: ​OpenGL primitive constant

GL_TRIANGLES is used to obtain triangles. Every set of three
successive points are considered for one triangle.
glBegin(GL_TRIANGLES);
glVertex2i(30,10);
glVertex2i(40,20);
glVertex2i(30,30);
glVertex2i(20,30);
glVertex2i(10,20);
glVertex2i(20,10);
glEnd();
In this example, the first three coordinate points define the vertices for one triangle, the next three
points define the next triangle, and so forth. For each triangle fill area, we specify the vertex
positions in a counterclockwise order.

GL_TRIANGLE_STRIP: In the triangle strip, after the first triangle, each additional vertex is
combined with the previous two vertices to define a new
triangle.
glBegin(GL_TRIANGLES);
glVertex2i(10,10);
glVertex2i(10,20);
glVertex2i(20,10);
glVertex2i(20,20);
glVertex2i(30,10);
glVertex2i(30,20);
glVertex2i(40,10);
glVertex2i(40,20);
glEnd();
GL_TRIANGLE_FAN: A triangle fan is based on one fixed point. The next two points determine
the first triangle, and subsequent triangles are formed from one new point, the previous point, and the
first (fixed) point.

DDA Line Drawing Algorithm:

The digital differential analyzer (DDA) is a scan-conversion line
algorithm based on calculating either δy or δx using line equations:
● δy = m * δx or
● δx = δy/m
A line is sampled at unit intervals in one coordinate and the
corresponding integer values nearest the line path are determined for
the other coordinate.
Consider a line with positive slope, as shown in the figure.
● If the slope m <= 1, we sample at unit x intervals (δx = 1)
and compute successive y values as
y k+1 = y k + m
○ Subscript k takes integer values starting from 0, for the first point x0, and increases
by 1 until the final endpoint x1 is reached. Because m can be any real number
between 0.0 and 1.0, each calculated y value must be rounded to the nearest integer
corresponding to a screen pixel position in the x column that we are processing.
● For lines with a positive slope, m > 1.0, we reverse the roles of x and y. That is,we sample at
unit y intervals (δy = 1) and calculate consecutive x values using below equation. Each
computed x value is rounded to the nearest pixel position along the current y scan line.

1
xk+1 = xk + m
● The DDA algorithm is a faster method for calculating pixel positions. However, The
accumulation of round-off error in successive additions of the floating-point increment can
cause the calculated pixel positions to drift away from the true line path for long line
segments.
● The rounding operations and floating-point arithmetic in this procedure are still
time-consuming. This disadvantage can be overcome by reducing the calculations to only
integer values.

NOTE: Refer to the problems solved in class on DDA algorithm.

Code Snippet:

Bresenham’s Line Drawing Algorithm:

● Consider the scan-conversion process for lines with positive
slope less than 1.0 as shown in the figure.
● Pixel positions along a line path are then determined by
sampling at unit x intervals. Starting from the left endpoint
(x0, y0) of a given line, we step to each successive column
(x position) and plot the pixel whose scan-line y value is
closest to the line path.
● The given figure depicts the k th step in the algorithm.
Assuming that we have determined (xk , y k ) is part of the
line the that pixel is plotted.
● We need to decide which pixel to plot in column xk+1 = (xk + 1) among the two pixels
(xk + 1 , y k ) or (xk + 1 , y k + 1)
● At sampling position xk + 1 , we calculate the actual value
of y coordinate that we obtain from the below equation and
then label vertical pixel separations from the obtained y
value as dlower and dupper as show in the image.
y = m(xk + 1) + b
● dlower can be represented as,
dlower = y − y k
dlower = m(xk + 1) + b − y k
● dupper can be represented as,
dupper = (y k + 1) − y
dupper = y k + 1 − m(xk + 1) − b
● To determine which of the two pixels is closest to the line path, we take the
difference between the two pixel separations as below:

The above equation can result in a real number as the m = △y/△x can lead
to a floating point number.
We can obtain a decision parameter pk with integer calculations by
multiplying △x in the above equation.

● The sign of pk is the same as the sign of (dlower − dupper ) hence, If the pixel
at y k is closer to to the line path than the pixel at y k+1 (that is dlower < dupper )
then decision parameter pk is negative. In this case we plot the lower pixel;
otherwise, we plot the upper pixel.
● Coordinate changes along the line occur in unit steps in either the x or y
direction. Therefore, we can obtain the values of successive decision
parameters using incremental integer calculations.
● Hence at step k + 1 he decision parameter can be calculated as,

● Subtracting the equations of pk+1 and pk we get,

 ● In the above equation y k+1 − y k value will be either 0 or 1 depending on the
value of pk
● The first value of pk , that is p0 is evaluated using equation of pk at the
starting pixel position (x0, y0) and with m = △y/△x as below,
p0 = 2△y − △x

Bresenham’s Line-Drawing Algorithm for |m| < 1.0:

1. Input the two line endpoints and store the left endpoint in (x0, y0).
2. Set the color for frame-buffer position (x0, y0); i.e., plot the first point.
3. Calculate the constants x, y, 2△y , and 2△y − 2△x , and obtain the starting
value for the decision parameter as
p0 = 2△y − △x
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, y k ) and
pk+1 = pk + 2y
Otherwise, the next point to plot is (xk + 1, y k + 1) and
pk+1 = pk + 2y − 2x
5. Repeat step 4, (△x − 1) more times

NOTE: Refer to the problems solved in class on Bresenham’s line

drawing algorithm.
Mid point circle drawing algorithm:
Consider the equation of the circle at some arbitrary point (x, y). The spatial relationship between an
arbitrary (x, y) and a circle of radius r centered at the origin can be given as:

The above tests are performed for the mid positions between pixels near the circle path at each
sampling step.
Consider the below figure which shows the midpoint between the two candidate pixels at sampling
position x​k​ + 1.

● Assume that we have just plotted the pixel at​ as shown in the above picture. Next we

have to decide if the pixel at position or the one at position is

closer to the circle.

● To decide on this we make use of the mid-point between these pixels, which is
and apply the circle function on the midpoint.

● If , this midpoint is inside the circle and hence the pixel at ​ ​is closer to
the circle boundary and we select it as next pixel to draw.
● Otherwise, the mid-point position is outside or on the circle boundary, and we select the pixel

​as this pixel is closer to the circle boundary.

 ● Instead of calculating next mid-point and then calculating its mid-point, we calculate the
successive decision parameters using incremental calculations.
● We obtain a recursive expression for the next decision parameter by evaluating the circle

function at sampling position

● Subtracting we get,

● The initial decision parameter is obtained by evaluating the circle function at the start

position

NOTE: Refer to the problems solved in class on mid point circle

drawing algorithm.
---------------------------------------------------------------------------------------------------------
 2D Geometric Transformations:
● Translation​:
● A translation on a single coordinate point can be performed by adding offsets to its
coordinates so as to generate a new coordinate position. This relocates the point to a new
special position along a straight line.
● Similarly, a translation is applied to an object that is defined with multiple coordinate
positions, such as a quadrilateral, by relocating all the coordinate positions by the same
displacement along parallel paths. Then the complete object is displayed at the new
location.

● To translate a two-dimensional position, we add translation distances tx and ty to the

original coordinates (x, y) to obtain the new coordinate position (x1, y1) as shown in the
below figure.
● The translation distance pair (tx,ty) is called a translation vector or shift vector.
● We can express the above equations as a single matrix equation by using the following
column vectors:

● Using the above matrices, the 2D translation equation in the matrix form can be given as,

Rotation​:
● A rotation transformation of an object can be obtained by specifying a rotation axis and a
rotation angle. All points of the object are then transformed to new positions by rotating
the points through the specified angle about the rotation axis.
● A two-dimensional rotation of an object is obtained by repositioning the object along a
circular path in the xy plane. In this case, we are rotating the object about a rotation axis
that is perpendicular to the xy plane (parallel to the coordinate z axis).

● Consider a point position P in the co-ordinate system where P=(x,y) as shown in the below
figure.
● In this figure, r is the constant distance of the point from the origin; angle ϕ is the original
angular position of the point from the horizontal (x-axis). The (x, y) coordinates can be
represented as,

● If we want to rotate the point P by rotation angle θ, Using standard trigonometric

identities, we can express the transformed coordinates in terms of angles θ and ϕ as,

Substituting Eq1 in the above equations we get,

● We can express the above equations as a single matrix equation by using the following
column vectors:

● Using the above matrices, the 2D translation equation in the matrix form can be given as,

Scaling​:
● Scaling is applied on an object to alter its size. A simple two dimensional scaling
operation is performed by multiplying object positions (x, y) by scaling factors and to
produce the transformed coordinates (x1, y1):
● Scaling factor Sx scales an object in the x direction, while Sy
scales in the y direction.

Where ‘S’ is the scaling matrix in 2D.

● Any positive values can be assigned to the scaling factors and . Values less than 1 reduce
the size of objects; values greater than 1 produce enlargements. Specifying a value of 1 for
both and leaves the size of objects unchanged.
● Objects transformed using the above equations are both scaled and repositioned. Scaling
factors with absolute values less than 1 move objects closer to the coordinate origin, while
absolute values greater than 1 move coordinate positions farther from the origin, as shown
in the below figure where both the line length and the distance from the origin are reduced
by a factor of 0.5.