Introduction to Computer Graphics Basics
Introduction to Computer Graphics Basics
Introduction
Computer is information processing machine. User needs to communicate with computer .it displays the
information in the form of graphical objects such as pictures, charts, diagram and graphs.
Graphical objects convey more information in less time and easily understandable formats for example
statically graph shown in stock exchange.
In computer graphics picture or graphics objects are presented as a collection of discrete pixels.
We can control intensity and color of pixel which decide how picture look like.
Rasterization: The special procedure determines which pixel will provide the best approximation to the
desired pictureor graphics object this process is known as Rasterization.
Scan Conversion: The process of representing continuous picture or graphics object as a collection of
discrete pixels iscalled Scan Conversion.
Simulation: - Use of graphics in simulation makes mathematic models and mechanical machine
systems more realistic and easier to study.
Animation the interactive graphics supported by animation software proved their use in production of
animated movies and cartoons films.
Art and commerce: - There are many tools provided by graphics which allows used to make their picture
animated and attracted which are used in advertising.
Process control: - Now a day’s automation is used which is graphically displayed on the screen.
it is possible to control various processes in the industry from a remote-control room.
Cartography: - Computer graphics is also used to represent geographic maps, weather maps,
oceanographic charts etc.
Education and training: - Computer graphics can be used to generate models of physical, financial
andeconomic systems. These models can be used as educational aids.
Mr. Zakir Hussain, CE Department [Link]. V Sem. - Computer Graphics & Multimedia 1
Unit-1 – Basics of Computer Graphics
Image processing: - It is used to process image by changing property of the image.
Display devices
Display devices are also known as output devices.
Most commonly used output device in a graphics system is a video monitor.
Cathode-ray-tubes
Mr. Zakir Hussain, CE Department [Link]. V Sem. - Computer Graphics & Multimedia 2
Unit-1 – Basics of Computer Graphics
Vector scan/Random scan display
CPU
I/O Port
Display
buffer (Interaction (Display
memory data) command)
Line
(100
,200, Display controller CRT
300 ,
400
) Keyboard Mouse
Vector scan display directly traces out only the desired lines on CRT.
If we want line between point p1 & p2 then we directly drive the beam deflection circuitry which focus
beam directly from point p1 to p2.
If we do not want to display line from p1 to p2 and just move then we can blank the beam as we move it.
To move the beam across the CRT, the information about both magnitude and direction is required. This
information is generated with the help of vector graphics generator.
Fig. 1.2 shows architecture of vector display. It consists of display controller, CPU, display buffer memory
and CRT.
Display controller is connected as an I/O peripheral to the CPU.
Display buffer stores computer produced display list or display program.
The Program contains point & line plotting commands with end point co-ordinates as well as character
plotting commands.
Display controller interprets command and sends digital and point co-ordinates to a vector generator.
Vector generator then converts the digital co-ordinate value to analog voltages for beam deflection
circuits that displace an electron beam which points on the CRT’s screen.
In this technique beam is deflected from end point to end point hence this technique is also called
random scan.
We know as beam strikes phosphors coated screen it emits light but that light decays after few
milliseconds and therefore it is necessary to repeat through the display list to refresh the screen at least
30 times per second to avoid flicker.
As display buffer is used to store display list and used to refreshing, it is also called refresh buffer.
Mr. Zakir Hussain, CE Department [Link]. V Sem. - Computer Graphics & Multimedia 3
Unit-1 – Basics of Computer Graphics
Raster scan display
CPU
I/O Port
(Interaction (Display
data) command
Keyboard
Display controller
Mouse
00000000000000000
00000111111100000 CRT
00000000100000000 Video controller
T
00000000100000000
00000000100000000
Refresh buffer
Fig. 1.3 shows the architecture of Raster display. It consists of display controller, CPU, video controller,
refresh buffer, keyboard, mouse and CRT.
The display image is stored in the form of 1’s and 0’s in the refresh buffer.
The video controller reads this refresh buffer and produces the actual image on screen.
It will scan one line at a time from top to bottom & then back to the top.
Horizontal
Vertical OFF ON Retrace
Retrace
In this method the horizontal and vertical deflection signals are generated to move the beam all over the
screen in a pattern shown in fig. 1.4.
Here beam is swept back & forth from left to the right.
When beam is moved from left to right it is ON.
Mr. Zakir Hussain, CE Department [Link]. V Sem. - Computer Graphics & Multimedia 4
Unit-1 – Basics of Computer Graphics
When beam is moved from right to left it is OFF and process of moving beam from right to left after
completion of row is known as Horizontal Retrace.
When beam is reach at the bottom of the screen. It is made OFF and rapidly retraced back to the top left
to start again and process of moving back to top is known as Vertical Retrace.
The screen image is maintained by repeatedly scanning the same image. This process is known as
Refreshing of Screen.
In raster scan displays a special area of memory is dedicated to graphics only. This memory is called
Frame Buffer.
Frame buffer holds set of intensity values for all the screen points.
That intensity is retrieved from frame buffer and display on screen one row at a time.
Each screen point referred as pixel or Pel (Picture Element).
Each pixel can be specified by its row and column numbers.
It can be simply black and white system or color system.
In simple black and white system each pixel is either ON or OFF, so only one bit per pixel is needed.
Additional bits are required when color and intensity variations can be displayed up to 24-bits per pixel
are included in high quality display systems.
On a black and white system with one bit per pixel the frame buffer is commonly called a Bitmap. And
for systems with multiple bits per pixel, the frame buffer is often referred as a Pixmap.
Electron Beam The electron beam is swept across the The electron beam is directed only to the
screen, one row at a time, from top to parts of screen where a picture is to be
bottom. drawn.
Resolution Its resolution is poor because raster Its resolution is good because this system
system in contrast produces zigzag produces smooth lines drawings because
lines that are plotted as discrete point CRT beam directly follows the line path.
sets.
Picture Definition Picture definition is stored as a set of Picture definition is stored as a set of line
intensity values for all screen points, drawing instructions in a display file.
called pixels in a refresh buffer area.
Realistic Display The capability of this system to store These systems are designed for line-
intensity values for pixel makes it well drawing and can’t display realistic shaded
suited for the realistic display of scenes scenes.
contain shadow and color pattern.
Draw an Image Screen points/pixels are used to draw Mathematical functions are used to draw
an image. an image.
Mr. Zakir Hussain, CE Department [Link]. V Sem. - Computer Graphics & Multimedia 5
Unit-1 – Basics of Computer Graphics
Beam-penetration technique
Shadow-mask technique
Mr. Zakir Hussain, CE Department [Link]. V Sem. - Computer Graphics & Multimedia 6
Unit-1 – Basics of Computer Graphics
It produces wide range of colors as compared to beam-penetration technique.
This technique is generally used in raster scan displays. Including color TV.
In this technique CRT has three phosphor color dots at each pixel position. One dot for red, one for
green and one for blue light. This is commonly known as Dot Triangle.
Here in CRT there are three electron guns present, one for each color 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 onto the shadow mask and when they pass
through a hole they excite a dot triangle.
In dot triangle three phosphor dots are arranged so that each electron beam can activate only its
corresponding color dot when it passes through the shadow mask.
A dot triangle when activated appears as a small dot on the screen which has color of combination of
three small dots in the dot triangle.
By changing the intensity of the three electron beams we can obtain different colors in the shadow mask
CRT.
Mr. Zakir Hussain, CE Department [Link]. V Sem. - Computer Graphics & Multimedia 7
Unit-1 – Basics of Computer Graphics
The low speed electrons then penetrate the storage grid and strike the phosphor coating without
affecting the positive charge pattern on the storage grid.
During this process the collector just behind the storage grid smooth out the flow of flood electrons.
Advantage of DVST
Refreshing of CRT is not required.
Very complex pictures can be displayed at very high resolution without flicker.
Flat screen.
Disadvantage of DVST
They do not display color and are available with single level of line intensity.
For erasing it is necessary to removal of charge on the storage grid so erasing and redrawing process
take several second.
Erasing selective part of the screen cannot be possible.
Cannot used for dynamic graphics application as on erasing it produce unpleasant flash over entire
screen.
It has poor contrast as a result of the comparatively low accelerating potential applied to the flood
electrons.
The performance of DVST is somewhat inferior to the refresh CRT.
Mr. Zakir Hussain, CE Department [Link]. V Sem. - Computer Graphics & Multimedia 8
Unit-1 – Basics of Computer Graphics
This is also called gas discharge displays.
It is 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 ribbon is built
into the other glass panel.
Firing voltage is applied to a pair of horizontal and vertical conductors cause the gas at the intersection
of the two conductors to break down into glowing plasma of electrons and ions.
Picture definition is stored in a refresh buffer and the firing voltages are applied to refresh the pixel
positions, 60 times per second.
Alternating current methods are used to provide faster application of firing voltages and thus brighter
displays.
Separation between pixels is provided by the electric field of conductor.
One disadvantage of plasma panels is they were strictly monochromatic device that means shows only
one color other than black like black and white.
It is similar to plasma panel display but region between the glass plates is filled with phosphors such as
zinksulphide doped with magnesium instead of gas.
When sufficient voltage is applied the phosphors becomes a conductor in area of intersection of the two
electrodes.
Electrical energy is then absorbed by the manganese atoms which then release the energy as a spot of
light similar to the glowing plasma effect in plasma panel.
It requires more power than plasma panel.
In this good color and gray scale difficult to achieve.
Mr. Zakir Hussain, CE Department [Link]. V Sem. - Computer Graphics & Multimedia 9
Unit-1 – Basics of Computer Graphics
Liquid Crystal Display (LCD)
Fig. 1.10: - Light twisting shutter effect used in design of most LCD.
It is generally used in small system such as calculator and portable laptop.
This non emissive device produce picture by passing polarized light from the surrounding or from an
internal light source through liquid crystal material that can be aligned to either block or transmit the
light.
The liquid crystal refreshes to fact that these compounds have crystalline arrangement of molecules
then also flows like liquid.
It consists of two glass plates each with light polarizer at right angles to each other sandwich the liquid
crystal material between the plates.
Rows of horizontal transparent conductors are built into one glass plate, and column of vertical
conductors are put into the other plates.
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.
In the OFF state it will reflect back towards source.
We applied a voltage to the two intersecting conductor to align the molecules so that the light is not
twisted.
This type of flat panel device is referred to as a passive matrix LCD.
In active matrix LCD transistors are used at each (x, y) grid point.
Mr. Zakir Hussain, CE Department [Link]. V Sem. - Computer Graphics & Multimedia 10
Unit-1 – Basics of Computer Graphics
Transistor cause crystal to change their state quickly and also to control degree to which the state has
been changed.
Transistor can also serve as a memory for the state until it is changed.
So transistor make cell ON for all time giving brighter display then it would be if it had to be refresh
periodically
System Bus
I/O Devices
Raster graphics systems having additional processing unit like video controller or display controller.
Here frame buffer can be anywhere in the system memory and video controller access this for refresh
the screen.
In addition to video controller more processors are used as co-processors to accelerate the system in
sophisticated raster system.
Raster graphics system with a fixed portion of the system memory reserved for
the frame buffer
System bus
I/O Devices
Mr. Zakir Hussain, CE Department [Link]. V Sem. - Computer Graphics & Multimedia 11
Unit-1 – Basics of Computer Graphics
Fig. 1.15: - Architecture of a raster graphics system with a fixed portion of the system memory reserved for
the frame buffer.
A fixed area of the system memory is reserved for the frame buffer and the video controller can directly
access that frame buffer memory.
Frame buffer location and the screen position are referred in Cartesian coordinates.
For many graphics monitors the coordinate origin is defined at the lower left screen corner.
Screen surface is then represented as the first quadrant of the two dimensional systems with positive X-
value increases as left to right and positive Y-value increases bottom to top.
X Y
register register
Frame Buffer
Two registers are used to store the coordinates of the screen pixels which are X and Y
Initially the X is set to 0 and Y is set to Ymax.
The value stored in frame buffer for this pixel is retrieved and used to set the intensity of the CRT beam.
After this X register is incremented by one.
This procedure is repeated till X becomes equals to Xmax.
Then X is set to 0 and Y is decremented by one pixel and repeat above procedure.
This whole procedure is repeated till Y is become equals to 0 and complete the one refresh cycle. Then
controller reset the register as top –left corner i.e. X=0 and Y=Ymax and refresh process start for next
refresh cycle.
Since screen must be refreshed at the rate of 60 frames per second the simple procedure illustrated in
figure cannot be accommodated by typical RAM chips.
To speed up pixel processing video controller retrieves multiple values at a time using more numbers of
registers and simultaneously refresh block of pixel.
Such a way it can speed up and accommodate refresh rate more than 60 frames per [Link]-graphics
system with a display processor
Mr. Zakir Hussain, CE Department [Link]. V Sem. - Computer Graphics & Multimedia 12
Unit-1 – Basics of Computer Graphics
System Bus
I/O Devices
Mr. Zakir Hussain, CE Department [Link]. V Sem. - Computer Graphics & Multimedia 13
Unit-1 – Basics of Computer Graphics
System Bus
I/O Devices
An application program is input & stored in the system memory along with a graphics package.
Graphics commands in the application program are translated by the graphics package into a display file
stored in the system memory.
This display file is used by display processor to refresh the screen.
Display process goes through each command in display file. Once during every refresh cycle.
Sometimes the display processor in random scan system is also known as display processing unit or a
graphics controller.
In this system graphics platform are drawn on random scan system by directing the electron beam along
the component times of the picture.
Lines are defined by coordinate end points.
This input coordinate values are converts to X and Y deflection voltages.
A scene is then drawn one line at a time.
Keyboards
Keyboards are used as entering text strings. It is efficient devices for inputting such a non-graphics data
as picture label.
Cursor control key’s & function keys are common features on general purpose keyboards.
Many other applications of key board which we are using daily used of computer graphics are
commanding & controlling through keyboard etc.
Mouse
Mouse is small size hand-held box used to position screen cursor.
Wheel or roller or optical sensor is directing pointer on the according to movement of mouse.
Three buttons are placed on the top of the mouse for signaling the execution of some operation.
Now a day’s more advance mouse is available which are very useful in graphics application for example Z
mouse.
Trackball is ball that can be rotated with the finger or palm of the hand to produce cursor movement.
Potentiometer attached to the ball, measure the amount and direction of rotation.
They are often mounted on keyboard or Z mouse.
Space ball provide six-degree of freedom i.e. three dimensional.
In space ball strain gauges measure the amount of pressure applied to the space ball to provide input for
spatial positioning and orientation as the ball is pushed or pulled in various directions.
Space balls are used in 3D positioning and selection operations in virtual reality system, modeling,
animation, CAD and other application.
Joysticks
A joy stick consists of small vertical lever mounted on a base that is used to steer the screen
cursoraround.
Most joy sticks selects screen positioning according to actual movement of stick (lever).
Some joy sticks are works on pressure applied on sticks.
Sometimes joy stick mounted on keyboard or sometimes used alone.
Movement of the stick defines the movement of the cursor.
In pressure sensitive stick pressure applied on stick decides movement of the cursor. This pressure is
measured using strain gauge.
This pressure sensitive joy sticks also called as isometric joy sticks and they are non movable sticks.
Data glove
Transmitter & receiver Antenna can be structured as a set of three mutually perpendicular coils forming
3D Cartesian coordinates system.
Input from the glove can be used to position or manipulate object in a virtual scene.
Digitizer
Digitizer is common device for drawing painting or interactively selecting coordinates position on an
object.
One type of digitizers is graphics tablet which input two dimensional coordinates by activating hand
cursor or stylus at selected position on a flat surface.
Stylus is flat pencil shaped device that is pointed at the position on the tablet.
Image Scanner
Image Scanner scan drawing, graph, color, & black and white photos or text and can stored for computer
processing by passing an optical scanning mechanism over the information to be stored.
Once we have internal representation of a picture we can apply transformation.
We can also apply various image processing methods to modify the picture.
For scanned text we can apply modification operation.
Touch Panels
As name suggest Touch Panels allow displaying objects or screen-position to be selected with the touch
or finger.
screen.
Touch input can be recorded with following methods.
1. Optical methods
2. Electrical methods
3. Acoustical methods
Optical method
Optical touch panel employ a line of infrared LEDs along one vertical and one horizontal edge.
The opposite edges of the edges containing LEDs are contain light detectors.
When we touch at a particular position the line of light path breaks and according to that breaking line
coordinate values are measured.
In case two line cuts it will take average of both pixel positions.
LEDs operate at infrared frequency so it cannot be visible to user.
Electrical method
An electrical touch panel is constructed with two transparent plates separated by small distance.
One is coated with conducting material and other is coated with resistive material.
When outer plate is touch it will come into contact with internal plate.
When both plates touch it creates voltage drop across the resistive plate that is converted into
coordinate values of the selected position.
Acoustical method
In acoustical touch panel high frequency sound waves are generated in horizontal and vertical direction
across a glass plates.
When we touch the screen the waves from that line are reflected from finger.
These reflected waves reach again at transmitter position and time difference between sending and
receiving is measure and converted into coordinate values.
Light pens
Light pens are pencil-shaped device used to select positions by detecting light coming from points on the
CRT screen.
Activated light pens pointed at a spot on the screen as the electron beam lights up that spot and
generate electronic pulse that causes the coordinate position of the electron beam to be recorded.
Voice systems
It is used to accept voice command in some graphics workstations.
It is used to initiate graphics operations.
It will match input against predefined directory of words and phrases.
Dictionary is setup for a particular operator by recording his voice.
Each word is speak several times and then analyze the word and establishes a frequency pattern for that
word along with corresponding function need to be performed.
When operator speaks command it will match with predefine dictionary and perform desired action.
A general programming package provides an extensive set of graphics function that can be
used in high level programming language such as C or FORTRAN.
It includes basic drawing element shape like line, curves, polygon, color of element transformation etc.
Example: - GL (Graphics Library).
Special-purpose application package are customize for particular application which implement
required facility and provides interface so that user need not to vory about how it will work
(programming). User can simply use it by interfacing with application.
Example: - CAD, medical and business systems.
Some other Graphics Software
1. Adobe Photoshop:
o Purpose: Raster image editing, photo retouching, digital painting.
o Key Features: Layer-based editing, advanced color correction, extensive filter and effect
options.
2. Adobe Illustrator:
o Purpose: Vector graphics creation, logo design, illustration.
o Key Features: Scalable vector graphics, precise drawing tools, typography tools.
3. CorelDRAW:
o Purpose: Vector graphic design, page layout.
o Key Features: User-friendly interface, extensive vector editing tools, page layout features.
4. Blender:
o Purpose: 3D modeling, animation, rendering.
o Key Features: Comprehensive 3D tools, animation capabilities, built-in rendering engine.
5. Affinity Designer:
o Purpose: Vector and raster graphic design.
o Key Features: Dual-functionality for vector and raster work, competitive pricing.
6. Sketch:
o Purpose: UI/UX design.
o Key Features: Vector-based design tools, symbols, and artboards for responsive design.
7. Figma:
o Purpose: Collaborative UI/UX design.
o Key Features: Real-time collaboration, web-based, component-based design.
Software Standard
Primary goal of standardize graphics software is portability so that it can be used in any hardware
systems & avoid rewriting of software program for different system
Some of these standards are discuss below
This system was adopted as a first graphics software standard by the international standard organization
(ISO) and various national standard organizations including ANSI.
GKS was originally designed as the two- d i m e n s i o n a l graphics package and then later extension
wasdeveloped for three dimensions.
Here are some key components and concepts related to graphics kernel software:
Graphics Drivers: These are specialized software components that communicate directly with the
graphics hardware. They handle tasks like rendering images, managing video memory, and performing
calculations related to graphics processing. Graphics drivers are essential for ensuring that applications
and the operating system can properly utilize the graphics hardware.
Graphics APIs (Application Programming Interfaces): APIs like DirectX, OpenGL, and Vulkan provide a
set of functions that developers use to interact with the graphics hardware. They enable the creation
and management of graphical content, including 3D models, textures, and shaders.
Kernel Mode vs. User Mode: Graphics kernel software typically operates in kernel mode, which has
higher privileges and direct access to hardware resources. This is in contrast to user mode, where
applications run with more restricted access to system resources. The graphics driver needs to operate in
kernel mode to perform tasks like memory management and hardware control efficiently.
Graphics Processing Unit (GPU): The GPU is the hardware component responsible for rendering images
and video. The graphics kernel software coordinates with the GPU to ensure that graphical tasks are
performed effectively. This includes managing the GPU’s workload and optimizing performance.
Rendering Pipeline: This is the process by which graphics data is processed to produce visual output. The
graphics kernel software manages various stages of the rendering pipeline, including vertex processing,
shading, texturing, and fragment processing.
Synchronization and Optimization: The graphics kernel software also handles synchronization between
the CPU and GPU to ensure that they work together efficiently. It may implement various optimization
techniques to improve rendering performance and reduce latency.
PHIGS is extension of GKS. Increased capability for object modeling, color specifications, surface rendering,
and picture manipulation are provided in PHIGS.
Extension of PHIGS called “PHIGS+” was developed to provide three dimensional surface shading
capabilities not available in PHIGS.
Key Features of PHIGS
Structures: PHIGS uses hierarchical structures to organize and manage graphical objects. These
structures can be nested, allowing for complex scene compositions where objects can be
grouped and manipulated together.
Inheritance: Hierarchical structures enable inheritance of attributes and transformations,
making it easier to manage and apply changes across multiple objects.
Zakir Hussain, CE Department [Link]. V Sem. - Computer Graphics & Multimedia 19
Unit-1 – Basics of Computer Graphics
2. Interactive Graphics
o User Interaction: PHIGS supports interactive graphics, allowing users to interact with and
manipulate graphical objects in real-time. This is essential for applications like CAD
(Computer-Aided Design) where users need to modify objects and see immediate results.
o Event Handling: The standard provides mechanisms for handling user input and interaction,
such as mouse and keyboard events.
3. Object-Oriented Approach
o Graphical Objects: In PHIGS, graphical elements are treated as objects with specific attributes
(such as color, texture, and material properties) and methods (such as transformation
operations).
o Attributes: Objects can have attributes that define their appearance and behavior. Attributes
can be applied at different levels in the hierarchy, affecting all descendant objects.
4. Transformation and Viewing
o Transformations: PHIGS supports various transformations, including translation, rotation,
and scaling. These transformations can be applied to individual objects or to entire structures.
o Viewing: The standard provides facilities for setting up different viewports, projections, and
viewing parameters, allowing for various perspectives and display configurations.
5. Graphics Data Structures
o Structure Definition: A key data structure in PHIGS is the “structure,” which contains a
set of graphical commands and objects. Structures can be nested and referenced, allowing
for reusable and modular designs.
o Storage and Retrieval: Structures can be stored and retrieved, facilitating the reuse of
graphical content and efficient management of complex scenes.
6. Standardization and Extensions
o PHIGS+: An extension of PHIGS, known as PHIGS+, introduced additional features and
capabilities, such as enhanced support for high-level interactions and more advanced
graphical operations.
o PHIGS/UNIX: This variant was tailored for UNIX systems, providing support for the UNIX
operating environment and integrating with UNIX-based graphical applications.
7. Supersession
o Modern Standards: While PHIGS was influential, it has been largely superseded by more
modern graphics standards such as OpenGL and Direct3D. These newer standards more
advanced features, better performance, and broader industry support.
Use Cases
CAD Systems: PHIGS was commonly used in CAD systems for engineering and design applications
due to its support for hierarchical modeling and interactive manipulation.
Scientific Visualization: It was also used in scientific visualization applications where complex 3D
models and real-time interaction were required.