Unit-1 basics of computer graphics

COMPUTER GRAPHICS
by
Amol S. Gaikwad
Lecturer
Government Polytechnic Gadchiroli

UNIT-1
BASICS OF COMPUTER
GRAPHICS

Welcome! Are you
excited for a fun
learning session?
Hi!

Unit Outcomes
Differentiate attributes of given mode
Compare features of given scan display
Write a program to draw given type of
primitives using "C"
Describe the application of given display
Describe the application of given display
Convert given 2D coordinates to physical coordinates

What is Computer Graphics ?
Computer Graphics is creating images, pictures, videos with the help of
computers
It is one of the branch of Computer Science
It involves creation, manupulations and computation of data.
Algorithms and other techniques/hardware are used to generate graphics
in computer.
Advanced computer technologies have created scope for various
appplications of Computer graphics.

What is image and Object ?
Image is graphical representation of real world object on computer.
Object is an item in graphic, represented using 2D and 3D coordinates
Real image of elephant

Pixel
Each screen point is called as pixel or pel (short form of picture element)
It is smallest addressable point on display device.
It is smallest controllable element on display device
We can change the intensity, color, of individual pixel

Resolution
The maximum number of points that can displayed on screen without
overlapping is called as resolution
It is total number of pixels in horizontal (M) and vertical (N) directions
Sharpness of image depends on resolution.
More the resolution higher the quality and sharpness of image
Resolution = M x N ex. 800x600, 640x480

ResolutionM
N
M = No. of pixels on horizontal axis
N= No. of pixels on vertical axis
Resolution = M x N

Display Modes
Text Mode
Screen is divided into rectangular
character cells
Also known as character mode or
alphanumeric mode
80 characters per row x 25
characters per column
Lines, characters etc are dawn
using pixels
Variety of shapes and colors can be
drawn
Graphics Mode
Content is displayed as characters Generates images using pixels
Each cell contains a character
Screen is divided into pixels

Text Mode Functions
Window( ) - creates window on screen
Syntax: window(top, left, right, bottom)
Ex: window(150,10,200,10)
gotoxy(x,y ) - positions cursor on x, y coordinates
Syntax: gotoxy(int x,int y)
Ex: gotoxy(42,80)
textcolor(x,y ) - Changes color of drawing text
Syntax: void textcolor(int color)
Ex: textcolor(BLUE) or textcolor(2)

Text Mode Functions
textbackground( ) - changes current background color of text
Syntax: void textbackground(int color)
Ex: textbackground(RED)
moveto(x,y ) - changes current position to x,y coordinate position
Syntax: void moveto(int x,int y)
Ex: moveto(10,20)
outtext(x,y,str) - displayes text or string at x, y position
Syntax: void outtextxy(int x,int y, char* str)
Ex: outtextxy(80,80,"welcome")

Text Mode Functions
dellline( ) - deletes cursor line and moves line up by one line
Syntax: void delline( )
Ex: delline()
Other simple functions:
putch(ch) - displays one character at a time
clrscr() - clears the consol escreen
puts(const char *s) - writes a string to standard output (stdout)

Graphics Mode Functions
initgraph( ) - initializes the graphics system by loading graphics driver
from disk and putting the system in graphics mode
Syntax: void initgraph(int *graphdriver, int * graphmode, char* pathtodriver
Ex: initgraph(&gd, &gm, "C:TURBOCBGI")
graphdriver - specifies driver to be used
graphmode - specifies initial graphics mode
pathtodriver- specifies path or location to graphics driver

closegraph( ) - deallocates all memory and restores screen to previous
mode
Syntax: void closegraph( )
Ex: closegraph( )
line( ) - draws a line on screen
Syntax: void line(int x1, int y1, int x2, int y2 )
Ex: line( 30,100,70,80)
x1,y1 = 30,100
x2,y2 = 70,80

lineto( ) - draws line from current position to x,y position
Syntax: void lineto(int x, int y )
Ex: lineto(120,120)
Syntax: void circle(x, y, radius )
Ex: circle(50,60,30)
circle( ) - draws a circle on screen
current position
x,y
radius
x,y

Syntax: void ellipse(int x,int y,int
start_angle,int end_angle,in xradius,int
yradius )
rectangle( ) - draws a rectangle from top left to right bottom
Syntax: void rectangle(int left, int top, int right, int bottom )
Ex: rectangle(20,20,60,60)
Ex: circle(50,60,30)
ellipse( ) - draws ellipse
right,bottom=60,60
left,top = 20.20
xradius
yradius
angle

drawpoly( ) - drawpoly function is used to draw polygons like
traingle,rectangle,pentagon,hexagon etc.
Syntax: void drawpoly(int num,int polypoints[ ] )
num = no. of vertices + 1
120,120
60,60
polypoints[ ] = array or collection of polygon points
Ex: int polypoints = {60,60,160,160,120,120,60,60}
drawpoly (4,polypoints)
160,160

setcolor( ) - changes current drawing color
Syntax: void setcolor(int color)
Ex: setcolor (RED)
setfillstyle( ) - sets current color and fill pattern
Syntax: void setfillstyle(int pattern, int color)
Ex: setfillstyle(SOLID_FILL,BLUE)

setlinestyle( ) - sets the style for drawing lines
Syntax: void setlinestyle(int linestyle,unsigned pattern,int thickness )
Ex: setlinestyle(2,0,0)
fillpoly( ) - draws polygon and also fill color in polygon
Syntax: void fillpoly(int num, int polypoints[ ])
num = no. of vertices + 1
dotted line
polypoints[ ] = array of polygon points
Ex: fillpoly(4,polypoints)

It describes steps in a graphics system to convert 3D scene to a 2D screen
It is the process of turning 3D model into what computer displays
Basic Graphics Pipeline
Application Geometry Rasterization Screen
Fig: Basic Graphics Pipeline

Classification of Computer Graphics
Bitmap Graphics
Vector based
Graphics

Bitmap Graphics
Images are stored and
drawn as series of
pixels
Also called as raster
graphics
Images depends on
resolution
bitmap formats : gif,
jpeg,png,tiff,xmb,bmp,
Suitable for complex
images
Can't scale easily
High processing speed Large file size
Image editors: Painshop Pro, photoshop, MS paint, Paint.NET
Pixel

Vector Graphics
Constructed using
mathematical formulas
Mathematical formulas describes
shapes,color and placement
Images don't depend
on resolution
vector file formats :
svg ,eps,pdf, ai
Suitable for images with
solid color areas like
logos
Can be scaled easily
images have smooth edges Small file size
Image editors: Adobe freehand, Affinity designer, coralDRAW etc.

Applications of Computer Graphics
Advanced computer technology have made various applications of computer
graphics possible like
Computer -Aided Design (CAD)
Presentation Graphics
Computer Art
Entertainment
Education and Training
Visualization
Image Processing
Medicine

Computer Aided Design (CAD)
CAD design of Spaceship CAD design of machine

Presentation Graphics
3D surface chart 3D bar chart

Computer Art
Computer Painting
Digital Art

Entertainment
Toy Story Movie Good Dinosaur Movie

Education Training
Pilot Training Tractor Simulation

Visualization
Time series data Bacteria Protein Structure

Image Processing
Image processing of brain MRI scan machine

Video Display Devices - Cathod Ray Tube
Ref: www.tutorialspointcomputer_graphics/computer_graphics_basics.htm

Aspect Ratio
Aspect Ratio =
3
It is property of video monitors
Aspect Ratio = No. of vertical points to draw same length line
No. of horizontal points to draw same length line
5
3 vertical dots for
same length line
5 horizontal dots
for same length
line

Cathod Ray Tube ( CRT ) - Raster Scan Displays
Electron beam is moved
top to bottom, one row at
time.
Electron beam is turned
on/off to create pattern
of spots
Picture defination is stored in
memory area called refresh
buffer/frame buffer
Suitable for real scenes
Refreshing rate is 60 to 80
frames per second or hertz
interlaced refresh - scans one
line and leave other line

Cathod Ray Tube ( CRT ) - Random Scan Display
Electron beam is directed
to only that part of
screen where picture is
drawn.
Also called as vector displays / stroke
writing / calliagraphic displays
Picture display is stored
as set of line drawing
commands called as
refresh display file
All lines of picture drawn
30 to 60 times per second
Suitable for line
drawing
Higher resolution than
raster scan
Draws smooth line

Thinner, less volume, weight and volume
Flat Panel Displays
Non-Emissive display : convert sunlight
or other light to display
Emissive display : convert
electrical energy to light
Plasma panel display
LED display
Liquid Crystal display (LCD)

Plasma Panel Displays
Flat Panel Displays
Basic design of plasma panel device
Ref: Computer Graphics - Donald Hearn, Baker M. Pauline

Plasma Panel Displays
Flat Panel Displays
Basic design of electroluminscent device
Ref: Computer Graphics - Donald Hearn, Baker M. Pauline

Liquid Crystal Displays (LCD)
Flat Panel Displays
Source: Javapoint

Flat Panel Displays
Has line of infrared LEDs along one
horizontal and one vertical edge.
When crossing beams are interrupted, ,
position on screen is identifiec by detectors
Touch Panels
Screen selected using touch of finger. Three types of touch panels
1. Optical Touch Panel
Opposite end contains light detectors
Infrared light not visible to eyes
detectors
detectors
LEDs
LEDs

Flat Panel Displays
Other plate coated with resistive/oppose
material.
Outer plate touches inner plate and voltage
drops accross resistive plate and we get
selelcted screen position
Touch Panels
2. Electrical Touch Panel
Contains two transparent plates
separated by small distance
One plate coated with conductive material
conductive material plate
resistive material plate

Flat Panel Displays
Sound waves are generated in
horizontal and vertical directions in
glass plate
When screen is touched, waves get reflected
from fingers to emitters
Screen position is caculated from time between
transmission and reflection to emitter
Touch Panels
3. Acoustical (Sound) Touch Panel
High frequency sound is used
emitters
emitters
sound waves

What is ouput primitives ?
Ouput Primitives
They are basic geometric diagrams used to draw a scene
Basic geometric diagrams are grouped to draw complex scene
Examples of basic output primitives
Points
Straight lines
Circles
Conic section and surfaces
Quadric surfaces
Spline curves and surfaces
Polygon color areas
Character strings

Ouput Primitives
Point
Syntax : setPixel(int x,int y,int color), putpixel(int x,int y,int color)
setPixel(x,y) and putpixel() functions set color of pixel at x, yosition.
Ex: setPixel(30,60,BLUE), putpixel(60,40,RED)
getpixe() function returns color of pixel at x, y position
Syntax : int getpixel(int x, int y)
Ex: int color = getpixel(70,80)

Ouput Primitives
Text
Syntax : setTextColor(hdc,RGB_value)
setTextColor() function is changes color of text.
Ex: setTextColor(hDC,RGB(255,0,0))
setTextAlign() is used to align the text.
Syntax : setTextAign(int align)
Ex. setTextAlign(2) // aligns text at center

Ouput Primitives
Marker
setMarkerType(mt) - set marker symbol
Marker symbol is single character displayed in different color and size
wcPoints = array of coordinate position.
polymaker() - draws figure with marker symbol already set
Syntax : polymarker(n, wcPoints)
n = no. of points

Attributed of Ouput Primitives
Text - font or typeface, color, alignment, space, height etc.
Marker- size,color,type
Line - type, width, color
Curve - type, width, color
Various functions are available to change these attributes

Graphics Standards
Standards are required so that software moves easily from one hardware
system to another (portability)
Graphical Kernel System (GKS) - two dimensional and three dimensional
graphics package
Programmer's Hierarchical Interactive Graphics Standard (PHIGS) - increasd
capability for object modelling, color, picture, surface manipulation
Computer Graphics Interface (CGI) - standards for device interface.
Computer Graphics Metafile (MGM) - standards for storing and transporting
pictures

Recent Trends in Computer Graphics
Virtual Reality ( VR)
Uses computer technology to create simulated / real like environment
Immersive VR - As if physicall present in non-physical world, simulates as
many senses as possible
Non - immersive : Computer generated environment without feeling of
present in virtual world
Semi - immersive VR : Virtual three dimesional environment while remain
connected to real world surroundings through senses.

Devices used in VR - Joysticks, force Balls/Tracking balls, controller wands, data
gloves, trackpads, On-device control, buttons, motion trackers, bodysuits,
treadmills and motion platforms,VR headsets, head mounted display
Applications of Virtual Reality
Sport
Mental health
Medical training
Education
Entertainment
Scientific Visualization
Construction
Military etc.

Examples of Virtual Reality

Augmented Reality ( VR)
It is interactive environment where real world objects are improved by
computer generated information
Combination of real and virtual world, real time interaction , 3D real and
virtual objects
VR is completely based on virtual information and AR is provided with
additional computer generated information that improves reality

Augmented Reality ( AR)
Examples of Augmented Reality

Computer Graphics Progam in C
Functions and files required for writing basic c program
void initgraph( ) - This function is compulsory. It is written at beginning of
program, we enter into graphics mode by this function.
Ex: initgraph(&gd, &gm, "C:TURBOC3BGI");
closegraph() - This function is compulsory and written at end of program.It
closes the graphics mode bring back to previous mode.
Ex: closegraph();
graphics.h - this is header file and compulsory required in program. It contains
simple graphic functions
Ex: #include<graphics.h>

How To Write Graphics Progam in C ?
Open TURBOC software
Open a new file in TURBOC
Write edit c program.
Save the program file with .c extension in TURBOC like filename.c
Compile (check errors ) the program, click on compile button in TURBOC
If no errors click run the program , click on run button in TURBOC
You will get the graphics ouput on screen

Simple Graphics Progam in C
#include <graphics.h>
#include<conio.h>
#include<stdio.h>
void main()
{
int gd = DETECT, gm;
int x =100, y= 150;
int radius = 90;
initgraph(&gd, &gm, "C:TURBOC3BGI");
setcolor(YELLOW);
circle(x,y,radius);
rectangle(150,150,,300,300);
line(50,50,200,200);
getch();
closegraph();
}

Activity Time
Programming Assignment
Survey
Peer to Peer teaching

Supplemental Video
https://nptel.ac.in/courses/1
06/102/106102065/

Additional Resources
https://www.tutorialspoint.com/computer_graphics
https://nptel.ac.in/courses/106/102/106102065
Computer Graphics - Donald Hearn, Baker M Pauline, Pearson Education

Summary of Class
Different Graphics
mode
Lesson Recap 1
Scan Display
Lesson Recap 2
Computer Graphics
programming in c
Lesson Recap 3
Applications of display
devices
Lesson Recap 4
Virtual Reality and
Augmented Reality
Lesson Recap 5

Unit-1 basics of computer graphics

More Related Content

What's hot

Similar to Unit-1 basics of computer graphics

More from Amol Gaikwad

Recently uploaded

In this document

Unit-1 basics of computer graphics