Academic Year : 2021 – 2022

Semester-I
Second Year of Computer Engineering
(2019 Course)
210244: Computer Graphics
Prof. Priti Vaidya (Div – B)
(Course Teacher)
Department of Computer Engineering, 1

K K W I E E R, Nashik
 Details of Course Delivery
• Course will be delivered online till the lock down period using Gotowebinar
• Students should preferably use laptop or desktop while attending the online
lectures
• Students will ensure that they have joined the Googlegroup as well as
WhatsApp group
The links for online lectures will be sent on this Google group use such links
to join the online class

2
 Course Delivery and Assessment
• Quizzes of MCQs will be conducted during lecture using Learnico.
• Attendance will be recorded. However, if you do not participate in
quizzes/activities, you will be marked as absent
• For each unit as per syllabus
• 1 pre assignment and 1 post assignment will be provided.
• Each assignment will have due date and students should submit the same in soft copy
form on or before due date

3
 Schemes & Schedule
• Teaching Scheme:
• 3 Hours/week
• Examination Scheme:
• Midsem Examination: 30 Marks
• End Semester Examination: 70 Marks
• Number of credits: 03
Day Time
• Lecture Schedule
Tuesday 11.30 AM to 12.30 PM
Wednesday 1.15 PM to 2.15 PM
Thursday 10.15 AM to 11.15 AM
4
 Syllabus
• Unit 1 - Graphics Primitives & Scan Conversion Algorithms
• Unit 2 – Polygon, Windowing and Clipping
• Unit 3 - 2D, 3D Transformations & Projections
• Unit 4 - Light, Color, Shading & Hidden Surfaces
• Unit 5 - Curves and Fractals
• Unit 6 - Animation and Gaming

5
 Books
• 1. S. Harrington, “Computer Graphics”, 2nd Edition, McGraw-Hill
Publications, 1987, ISBN 0 – 07 – 100472 – 6.

• 2. D. Rogers, “Procedural Elements for Computer Graphics”, 2nd

Edition, Tata McGraw-Hill Publication, 2001, ISBN 0 – 07 – 047371 –
4.

• 3. Donald D. Hearn, “Computer Graphics with Open GL”, 4th

Edition, ISBN-13: 9780136053583. 6
 Computer Graphics
UNIT – I
Graphics Primitives and
Scan Conversion
Algorithms
 Contents
• Graphics Primitives
• Applications of Computer Graphics
• Introduction to OpenGL
• Scan Conversion
• Line drawing algorithms
• Circle drawing algorithms

8
 Computer Graphics
• Computer graphics deals with generating images with the aid of computers.
• Computer graphics is a core technology in digital photography, film, video
games, cell phone and computer displays, and many specialized applications.
• Computer graphics development has had a significant impact on many types
of media and has revolutionized animation, movies, advertising, video games,
and graphic design in general.
• The term computer graphics has been used in a broader sense to describe
"almost everything on computers that is not text or sound“.
9
 Applications

Video games cartoon Mobile phones

10
 Applications

• Computational photography refers to digital image capture and processing

techniques that use digital computation instead of optical processes.
• Computer-aided design (CAD) is the use of computers to aid in the creation,
modification, analysis, or optimization of a design.
• Computer simulation is the process of mathematical modeling which is designed
to predict the behavior of or the outcome of a real-world or physical system.
• Virtual reality (VR) is a simulated experience that can be similar to or completely
different from the real world.
11
 Graphics Primitives
1. Pixel
2. Resolution
3. Aspect Ratio
4. Frame buffer
 How digital camera quality is measured?
• The amount of detail that the camera can capture is called the resolution, and it
is measured in pixels. The more pixels a camera has, the more detail it can capture
and the larger pictures can be without becoming blurry or "grainy”.
• 640x480 – This is the low end on most "real" cameras.
• Resolution. One of the main differences between the two is that 1080p cameras are
twice as accurate as the pixels you get at 720p. The 1080P has a resolution of 1920
of 1080 or 2.07 megapixels. On the other hand, the 720P camera has resolution
1280 or 720 or 1 megapixel.
13
 Graphics Primitives
Pixel
• A pixel is known as a picture element.
• The pixel is the basic unit of programmable color in a computer image.
 Resolution
• Resolution is number of pixels per unit length ( eg. Inch) in the horizontal
and vertical direction.

• Resolution is the number of pixels (individual points of color) contained on

a display monitor
 Resolution
Megapixel
• We can calculate mega pixels of a camera using pixel resolution.
• Column pixels (width ) X row pixels ( height ) / 1 Million.
• The size of an image can be defined by its pixel resolution.
• Size = pixel resolution X bpp ( bits per pixel )
 Resolution
Calculating the mega pixels of the camera

• Lets say we have an image of dimension: 2500 X 3192.

• Its pixel resolution = 2500 * 3192 = 7982350 bytes.
• Dividing it by 1 million = 7.9 = 8 mega pixel (approximately).
 Resolution
Common Widescreen resolutions
Monitor size Resolution
19-inch 1680 x 1050

21-inch 1920 x 1080

23-inch 1920 x 1080 to 2560 x 1440

27-inch 2560 x 1440 to 3840 x 2160

Common UltraWide resolutions

Monitor size Resolution

25-inch 2560 x 1080

29-inch 2560 x 1080
34-inch 2560 x 1080 to 3440 x 1440
 Aspect Ratio
• Aspect ratio is the ratio between width of an image and the height of an image.
• It is commonly explained as two numbers separated by a colon (8:9).
• This ratio differs in different images, and in different screens.
• For eg. 2x2 inch image and 512x512 image will have aspect ratio of 1.
Aspect Ratio
 Aspect Ratio
Frame aspect ratio (FAR) = horizontal/vertical size

TV 4:3
HDTV 16:9
Page 8.5:11 ~ 3/4

Pixel aspect ratio (PAR) = FAR vres/hres

 Frame Buffer
• The image being displayed is stored in a dedicated system memory area that is
often referred to as Frame Buffer or Refresh Buffer.

• The frequency at which content of frame buffer is sent to display monitor is called
Refreshing rate ( 60 Hz)
 Frame Buffer
• A frame buffer is characterized by size, x, y,
and pixel depth.
• The resolution of a frame buffer is the
number of pixels in the display. e.g.
1024x1024 pixels.
Bilevel or monochrome displays have
• Bit Planes or Bit Depth is the number of 1 bit/pixel

bits corresponding to each pixel. This 8bits/pixel -> 256 simultaneous colors
determines the color resolution of the
24bits/pixel -> 16 million
buffer. simultaneous colors
 Specifying Color
• Direct color : 8

• Each pixel directly specifies a color

value 8

• 24bit : 8bits(R) + 8bits(G) + 8 8 Red

bits(B)
Green
Blue

24 bits plane, 8 bits per color gun.

224 = 16,7,77,216
 Frame buffers
• 3 bits for each pixel with one bit for each primary color.
• A widely used standard is 24 bits or 3 bytes with one byte for each primary
color to have 256 different intensity levels corresponding to binary values
from 00000000 to 11111111
• Thus a pixel can take a color from 256x256x256 or 16.7 million possible
choices

28
 Display Devices
• The primary method of getting information out of a computer is to use a
computer video display unit (VDU)
• Display systems convert computer signals into text and pictures and display
them on a TV‐like screen.
• The purpose of display technology is to simplify information sharing.

29
 Display Devices
1. Cathode-Ray Tube(CRT)
2. Color CRT Monitor
3. Liquid crystal display(LCD)
4. Light Emitting Diode(LED)
5. Direct View Storage Tubes(DVST)
6. Plasma Displays

30
 1. Cathode-ray Tube (CRT)
• CRT stands for Cathode ray tube.
• It is a technology which is used in traditional computer monitor and
television.
• Cathode ray tube is a particular type of vacuum tube that displays images
when an electron beam collides on the radiant surface.

31
Components of CRT

32
 Representing an object on the screen
• Two ways to represent an object on the screen are-
1. Raster Scan Displays
2. Random Scan Displays

33
 Raster Scan Displays
• It is a scanning technique in which the electron beam moves along the
screen. It moves from top to bottom, covering one line at a time.

34
 Raster Scan Displays
• Advantages:
• Real image
• Many colors to be produced
• Dark scenes can be pictured
• Disadvantages:
• Less resolution
• Display picture line by line
• More costly
35
 Random Scan Displays
• It is also known as stroke-writing display or calligraphic display. In this, the
electron beam points only to the area in which the picture is to be drawn.

36
 Random Scan Displays
• Advantages:
• High Resolution
• Draw smooth lines
• Disadvantages:
• It does only the wireframe.
• It creates complex scenes due to flicker.

37
 2. Color CRT Monitor
• It is similar to a CRT monitor.
• The basic idea behind the color CRT monitor is to combine three basic
colors- Red, Green, and Blue. By using these three colors, we can produce
millions of different colors.
• The two basic color display producing techniques are:
• Beam–Penetration Method
• Shadow–Mask Method

38
Beam–Penetration Method

39
 Beam–Penetration Method
• Advantages:
• Better Resolution
• Half cost
• Inexpensive
• Disadvantages:
• Only four possible colors
• Time Consuming

40
Shadow–Mask Method

41
 Shadow–Mask Method
• Advantages:
• Display a wider range picture
• Display realistic images
• In-line arrangement of RGB color
• Disadvantages:
• Difficult to cover all three beams on the same hole
• Poor Resolution

42
 3.Liquid crystal display (LCD)
• Liquid crystals are basically liquid chemicals whose molecules can be aligned
precisely when an electrical current is introduced.

43
 Liquid Crystal Display (LCD)
• Advantages:
• Produce a bright image
• Energy efficient
• Completely flat screen
• Disadvantages:
• Fixed aspect ratio & Resolution
• Lower Contrast
• More Expensive
44
 4. Light Emitting Diode (LED)
• LED is a device which emits when current passes through it. It is a
semiconductor device.
• The size of the LED is small, so we can easily make any display unit by
arranging a large number of LEDs.
• LED consumes more power compared to LCD. LED is used on TV,
Smartphone's, motor vehicles, traffic light, etc.
• LEDs are powerful in structure, so they are capable of withstanding
mechanical pressure. LED also works at high temperatures.
45
 Light Emitting Diode (LED)
• Advantages:
• The Intensity of light can be controlled.
• Low operational Voltage.
• Capable of handling the high temperature.
• Disadvantages:
• More Power Consuming than LCD.

46
 5. Direct View Storage Tube (DVST)
• It is used to store the picture information as a charge distribution behind the
phosphor-coated screen.

47
 Direct View Storage Tube (DVST)
• Advantages:
• Less Time Consuming
• No Refreshing Required
• High-Resolution
• Less Cost
• Disadvantages:
• The specific part of the image cannot be erased.
• They do not display color.
48
 6. Plasma Displays
• It is a type of flat panel display which uses tiny plasma cells. It is also known
as the Gas-Discharge display.

49
 Plasma Displays
• Advantages:
• Wall Mounted
• Slim
• Wider angle
• Disadvantages:
• Phosphorus loses luminosity over time.
• It consumes more electricity than LCD.
• Large Size
50
 Adjusting Display Settings
• Refresh rate
• Frame rate
• Resolution
• Multiple Displays

51
 Refresh Rate
• How many times in one second the image on the screen can be completely
redrawn, if necessary.
• Measured in screen draws per second, or hertz (Hz),
• It indicates how much effort is being put into checking for updates to the
displayed image.
• Refresh rate is selected for the monitor but must be supported by the
graphics card

52
 Refresh rate continued
• LCD TVs have a fixed refresh rate
• PC monitor refresh rates are adjustable
• As you increase the resolution higher refresh rates become unavailable
• Therefore to get the highest refresh rate you may have to settle for lower
resolution

53
 Frame Rate
• Measure of how many unique screens of content were recorded per second.
• Video recordings can be done in different frames per second (fps)
• Most common – 30fps, 24fps
• Refresh rate chosen on playback device must be compatible with the
recorded video frame rate
• 30fps video plays well at 60Hz refresh rate but not 24fps

54
 Resolution
• How many software picture elements (pixels) are used to draw the screen.
• Higher resolutions means more information can be displayed in the same
screen area.
• Higher resolution also means smaller and harder to see images

55
 Resolution continued
• Resolution describes visible image’s dimensions, i.e how many rows and
columns of pixels are used to draw the screen.
• Resolution of 1024×768 means 1024 pixels across (columns) and 768 pixels
down (rows) were used to draw the pixel matrix.
• 1024 × 768 =786,432 pixels to draw the screen.

56
 Multiple Displays
• Simultaneous use of 2 or more monitors (external displays)
• Dual view – Extended desktop option or desktop cloning
• Windows Vista’s Windows Display Driver Model (WDDM) version 1
requires same driver to be used for all adapters in multiple monitor setup

57
Scan Conversion Algorithms
 Introduction
• Scan Conversion
The process in which the object is represented as
the collection of discrete pixels

• Pixel can be represented as P(x,y)

• Function: putpixel(int x, int y, Color)
• Example: putpixel(30,40,RED)

9/14/2021 Scan Conversion(Computer Graphics ) 2

 Line and Line Segment
• Two points will specify a line.
• A line is specified by equations such that if a point (x,y) satisfy the equation,
then the point is said to be lying on the line.
• Example: If two points are used to specify a line are (x1, y1) and (x2, y2),
then y  y1 y 2  y1

equation of the line is x  x1 x 2  x1
( y  y1)( x 2  x1)  ( y 2  y1)( x  x1)
( y 2  y1)( x  x1) P1(x1,y1)
( y  y1) 
( x 2  x1)
( y 2  y1)( x  x1)
y  y1 P(x,y)
( x 2  x1)
( y 2  y1)
y * ( x  x1)  y1
( x 2  x1) P2(x2,y2)
( y 2  y1) ( y 2  y1)
y x x1  y1
( x 2  x1) ( x 2  x1)
 y  m.x  b
( y 2  y1)
where, m  , b  mx1
9/14/2021 ( x 2  x1)
Scan Conversion(Computer Graphics ) 3
 Line and Line Segment Continues
• y= mx+ b is slope intercept
form General Form
( y  y1)( x 2  x1)  ( y 2  y1)( x  x1)
• Slope m of line is change in ( y  y1) x  ( x 2  x1) y  x 2 y1  x1 y 2  0
height divided by change in rx  sy  t  0
width for any two points on
sy   rx  t
the line
r t
• Intercept b is height at which y  x
s s
the line crosses the y-axis. It is
y  mx  b
(0,b)
r t
m   & b  
s s

b
9/14/2021 Scan Conversion(Computer Graphics ) 4
 Line and Line Segment Continues
Line Segment
• Line can extend forever both forward and backward . Line segments are
generated by considering points on the line between two fixed points

P2
L
P1

• If P1(x1,y1) & P2(x2,y2) are two endpoint of line segment then, length of
line segment (L) can be calculated as
L  ( x 2  x1) 2  ( y 2  y1) 2

• Midpoint of line segment will be,

 x1  x 2 y1  y 2 
( x m , ym )   , 
9/14/2021  2
Scan Conversion(Computer Graphics ) 2 5
 Line and Line Segment Continues
Line Segment
• Intersection of two line segments
Line 1

Pi(Xi, yi)
Line 2

If equation of line 1 is y=m1x+b1 and of line 2 is y=m2x+b2

If point (xi,yi) is intersection of two lines, it satisfies both the line equations.
FIND coordinates of (xi,yi)

9/14/2021 Scan Conversion(Computer Graphics ) 6

 Vectors
• Vectors has single direction and length
• It is denoted by[Dx,Dy], where Dx how far to
move in x direction and Dy how far to move in y
direction
• Don’t tell us from where to start
• Process of turning ON the pixels for a vector is
called vector generation V
Dy

Dx
9/14/2021 Scan Conversion(Computer Graphics ) 7
 Line drawing algorithm

 To draw a line, Programmer specifies (x,y) values of

two end pixels
 Need algorithm to figure out which intermediate pixels
are on line path
 Pixel (x,y) values constrained to integer values
 Actual computed intermediate line values may be floats
 Rounding may be required. E.g. computed point
(10.48, 20.51) rounded to (10, 21)
 ceil and floor functions

9/14/2021 Scan Conversion(Computer Graphics ) 8

 Line Drawing
Algorithm
8
7 Line: (3,2) -> (9,6)
6
5
4
? Which intermediate
3 pixels to turn on?
2
1

0 1 2 3 4 5 6 7 8 9 10 11 12
9/14/2021 Scan Conversion(Computer Graphics ) 9
 Increment Method
• Gentle slope lines in which there are more
columns than rows.
• These lines are closer to horizontal lines

45o

m=0 Graphics ) m=- 1

9/14/2021 m=1 Scan Conversion(Computer 10
 Increment Method
Steep/sharp slope lines in which there are
more rows than columns. Here length of y
component i.e. Dy(Y2-Y1) is longer than x
component Dx(X2-X1).These lines are closer
to vertical lines

9/14/2021 Scan Conversion(Computer Graphics ) 11

 Increment Method
• For gentle slope, Step along column and finalize
which row is closest to the line and turn ON the
pixel in that row and column
• Use line equation and place x-value
corresponding to the column and find out the
row i.e. y value
• For steep slope, step along rows(y-value) and
find value of columns(x-value)

9/14/2021 Scan Conversion(Computer Graphics ) 12

 Line Drawing Algorithm
• Digital Differential Analyzer (DDA) Algorithm

• Bresenham’s Algorithm

9/14/2021 Scan Conversion(Computer Graphics ) 13

 Digital Differential Analyzer (DDA)
Algorithm

 Slope-intercept line equation

 y = mx + b
 Given two end points (x1, y1) and (x2,y2), slope m is given by,

dy y2  y1
m 
dx x2  x1

(x2,y2)
dy

(x1,y1)
dx

9/14/2021 Scan Conversion(Computer Graphics ) 14

• Based on slope of the line (m), there are two
cases in DDA algorithm
1. Case 1: -1<m < 1
Gentle slope lines in which there are more columns
than rows. Here length of x component
ie Dx(X1-X1) is longer than y component Dy(Y2-Y1)
|Dx|>|Dy|

2. Case 2: m> 1
Steep/sharp slope lines in which there are more
rows than columns. Here length of y component
ie Dy(Y2-Y1) is longer than x component Dx(X1-X1))
|Dx|<|Dy|
9/14/2021 Scan Conversion(Computer Graphics ) 15
 Case 1: -1 m < 1
m= Dy/Dx
ie Dy= m. Dx
(y1+ 1) – (y1) = m. [(x1+1)-(x1)]

As m<1, increment x by 1 unit ie distance between 2 columns.

Therefore, [(x1+1)-(x1)] = 1
(y1+ 1) – (y1) = m. (1)
(y1+ 1) = m +(y1)
ynew=m + yold

9/14/2021 Scan Conversion(Computer Graphics ) 16

 Case 2: m > 1
m= Dy/Dx
ie Dx= Dy/m
(x1+ 1) – (x1) = [(y1+1)-(y1)] / m
As m>1, increment y by 1 unit ie distance between 2 rows.
Therefore, [(y1+1)-(y1)] = 1
(x1+ 1) – (x1) = 1 / m
(x1+ 1) = (x1) + (1/m)
xnew= xold + 1/m

If m=1, increment x and y by 1 unit

i.e. xnew= xold + 1 and ynew= yold + 1

9/14/2021 Scan Conversion(Computer Graphics ) 17

 Algorithm
1. Accept Input as two endpoint pixel positions
2. Find out horizontal and vertical differences between the endpoint
positions are assigned to parameters dx and dy (Calculate dx=xb-xa and
dy=yb-ya).
3. The difference with the greater magnitude determines the value of
parameter steps.
4. Starting with pixel position (xa, ya), determine the offset needed at
each step to generate the next pixel position along the line path.
5. loop the following process for steps number of times
a. Use a unit of increment or decrement in the x and y direction
b. if xa is less than xb the values of increment in the x and y
directions are 1 and m , respectively.
c.If xa is greater than xb then the decrements -1 and – m are used.
9/14/2021 Scan Conversion(Computer Graphics ) 18
 DDA Line drawing algorithm
• Step 1 − Get the input of two end points P1 (x1,y1) and P2 (x2,y2)
• Step 2 − Calculate the difference between two end points.
Dx = (x2-x1)
Dy = (y2-y1)
• Step 3 − Based on the calculated difference in step-2, you need to identify the number of steps
to put pixel. If dx > dy, then you need more steps in x coordinate; otherwise in y coordinate.
if(absolute(dx)>absolute(dy))
Steps=absolute(dx);
else
Steps = absolute(dy);
• Step 4 − Calculate the increment in x coordinate and y coordinate.
Xincrement = dx / (float) steps;
Yincrement = dy / (float) steps;
• Step 5 − Put the pixel by successfully incrementing x and y coordinates accordingly and
complete the drawing of the line.
for(int v=0; v < Steps; v++)
{
x = x + Xincrement;
y = y + Yincrement;
putpixel(Round(x), Round(y));
}
9/14/2021 Scan Conversion(Computer Graphics ) 19
 DDA: Example
Q. Draw a line from P1(1,1) to P2(5,9) using DDA algo
Ans: Given - x1 = 1, y1= 1
x2 = 5, y2 = 9
1. Now lets calculate the difference:
dx = x2 — x1 = 5 - 1 = 4
dy = y2 — y1 = 9 - 1 = 8
2. Now lets calculate total number of points to plot:
if(absolute(dx)>absolute(dy))
Steps=absolute(dx);
else
Steps = absolute(dy);
Steps = dy = 8
3. Now lets calculate increment for both the coordinates.
Xincrement = dx / (float) steps = 4/8 = 0.5
Yincrement = dy / (float) steps = 8/8 = 1
4. Now, list all the points to be plotted:
9/14/2021 Scan Conversion(Computer Graphics ) 20
 Points to plot
Plot( Floor(X),
Steps X Y X = X+ xInc Y = Y + yInc
Floor(Y))
Initial X = x1 =1 Y = y1 =1 Plot(1,1)
1 1 1 1 + 0.5 = 1.5 1+1=2 Plot(1,2)
2 1.5 2 1.5 + 0.5 = 2 2+1=3 Plot(2,3)
3 2 3 2 + 0.5 = 2.5 3+1=4 Plot(2,4)
4 2.5 4 2.5 + 0.5 = 3 4+1=5 Plot(3,5)
5 3 5 3 + 0.5 = 3.5 5+1=6 Plot(3,6)
6 3.5 6 3.5 + 0.5 = 4 6+1=7 Plot(4,7)
7 4 7 4 + 0.5 = 4.5 7+1=8 Plot(4,8)
8 4.5 8 4.5 + 0.5 = 5 8+1=9 Plot(5,9)

9/14/2021 Scan Conversion(Computer Graphics ) 21

 Actual Line

9/14/2021 Scan Conversion(Computer Graphics ) 22

 More Examples
1. Consider line from P1(5,8) to P2(9,5). Use
DDA line drawing algorithm to rasterize the
line.
2. Consider line from P1(0,0) to P2(-6,-6). Use
DDA line drawing algorithm to rasterize the
line.
3. Consider line from P1(1,7) to P2(11,17). Use
DDA line drawing algorithm to rasterizing the
line.
9/14/2021 Scan Conversion(Computer Graphics ) 23
 Example 1
• Consider line from P1(5,8) to P2(9,5). Use DDA line drawing
algorithm to rasterizing the line.
Solution:
Here, x1=5, x2=9, y1=8,y2=5
Dx = (x2-x1) = (9-5) =4
Dy = (y2-y1) = (5-8) =-3
As |Dx| > |Dy|, line is with gentle slope
Therefore, Steps=abs(Dx)=4
xincrement= Dx/Steps = 4/4 = 1; yincrement= Dy/Steps = -3/4 = - 0.75
First point is x1,y1 , plot it.
Next point will be, xnew= xold+ xincrement 5+1=6
ynew= yold+ yincrement 8+(-0.75)= 7.25 round to 7
9/14/2021 Scan Conversion(Computer Graphics ) 24
 Example 1 Continues

I X Y Plot
1 5 8 5,8
2 6 7.25=7 6,7
3 7 6.50=7 7,7
4 8 5.75=6 8,6
5 9 5 9,5

• Consider line from P1(1,1) to P2(5,6). Use DDA line drawing

algorithm to rasterizing the line.

9/14/2021 Scan Conversion(Computer Graphics ) 25

 Example 2
Consider line from P1(0,0) to P2(-6,-6). Use DDA line drawing algorithm
to rasterizing the line
Solution:
Here, x1=0, x2=-6, y1=0,y2=-6
Dx = (x2-x1) = (-6-0) =-6
Dy = (y2-y1) = (-6-0) =-6
As |Dx| =|Dy|, line is with gentle slope
Therefore, Steps=abs(Dx)= abs(Dy)=6
xincrement= Dx/Steps =-6/6 = -1; yincrement= Dy/Steps = -6/6 = -1
First point is x1,y1 , plot it ie (0,0).
Next point will be, xnew= xold+ xincrement 0+(-1)=-1
ynew= yold+ yincrement 0+(-1)= -1

9/14/2021 Scan Conversion(Computer Graphics ) 26

 Example 2 Continues

I X Y Plot
1 0 0 0,0
2 -1 -1 -1,-1
3 -2 -2 -2,-2
4 -3 -3 -3,-3
5 -4 -4 -4,-4
6 -5 -5 -5,-5
7 -6 -6 -6,-6

• Consider line from P1(1,1) to P2(5,6). Use DDA line drawing

algorithm to rasterizing the line.

9/14/2021 Scan Conversion(Computer Graphics ) 27

 Example 3
Consider line from P1(1,1) to P2(5,6). Use DDA line drawing
algorithm to rasterizing the line.
Solution:
Here, x1=1, x2=5, y1=1,y2=6
Dx = (x2-x1) = (5-1) =4
Dy = (y2-y1) = (6-1) =5
As |Dy| >|Dx|, line is with steep slope
Therefore, Steps=abs(Dy)=5
xincrement= Dx/Steps =4/5 = 0.8; yincrement= Dy/Steps = 5/5= 1
First point is x1,y1 , plot it ie (1,1).
Next point will be, xnew= xold+ xincrement 1+0.8=1.8
ynew= yold+ yincrement 1+1=2
9/14/2021 Scan Conversion(Computer Graphics ) 28
 Example 3 Continues

I X Y Plot
1 1 1 1,1
2 1.8 2 2,2
3 2.6 3 3,3
4 3.4 4 3,4
5 4.2 5 4,5
6 5 6 5,6

9/14/2021 Scan Conversion(Computer Graphics ) 29

 DDA Algorithm
Advantages:-
1. It is a simple algorithm.
2. It is easy to implement.
3. It avoids using the multiplication operation which is costly
in terms of time complexity.
Disadvantages:-
1. There is an extra overhead of using round off( ) function.
2. Using round off( ) function increases time complexity of the
algorithm.
3. Resulted lines are not smooth because of round off( )
function.
4. The points generated by this algorithm are not accurate.

9/14/2021 Scan Conversion(Computer Graphics ) 30

 Bresenham’s Line Drawing Algorithm
• This algorithm is used for scan converting a line.
• The algorithms selects the optimum raster locations that
represent a straight line.
• The algorithm always increments by one unit in either x or y
depending on the slope of the line.
• The increment in the other variable is determined by examining
the distance between the actual line and the nearest grid
locations.
• This distance is called the error.
• The algorithm examines only sign of the error term.

9/14/2021 Scan Conversion(Computer Graphics ) 31

 Bresenham’s Line Drawing Algorithm

9/14/2021 Scan Conversion(Computer Graphics ) 32

Bresenham’s Line Drawing Algorithm
for the first octant

9/14/2021 Scan Conversion(Computer Graphics ) 33

 Example
• Consider the line from (0,0) to (5,5). Rasterizing
the line using Bresenham’s line drawing
algorithm

9/14/2021 Scan Conversion(Computer Graphics ) 34

 Example Contd.

9/14/2021 Scan Conversion(Computer Graphics ) 35

 Bresenham’s Line Drawing Algorithm
• This algorithm requires the use of floating point
arithmetic to calculate the slope of the line and to
evaluate the error term.
• A full implementation of Bresenham’s algorithm
requires modification for lines lying in the other
octants.
• This can be easily developed by considering the
quadrant in which the line lies and it’s slope.
• As only sign of the error term is important he
transformation of error term in the previous
algorithm yields an integer algorithm
9/14/2021 Scan Conversion(Computer Graphics ) 36
9/14/2021 Scan Conversion(Computer Graphics ) 37
9/14/2021 Scan Conversion(Computer Graphics ) 38
9/14/2021 Scan Conversion(Computer Graphics ) 39
 Example
• Consider the line from (0,0) to (-8,-4).

9/14/2021 Scan Conversion(Computer Graphics ) 40

9/14/2021 Scan Conversion(Computer Graphics ) 41
 Bresenham’s Line Drawing Algorithm
Advantages of Bresenham’s Line Drawing Algorithm
• It is simple to implement because it only contains integers.
• It is quick and incremental
• It is fast to apply but not faster than the Digital Differential
Analyzer (DDA) algorithm.
• The pointing accuracy is higher than the DDA algorithm.

Disadvantages of Bresenham’s Line Drawing Algorithm

• The Bresenham’s Line drawing algorithm only helps to draw
the basic line.
• Though it improves the accuracy of generated points but still
the resulted line is not smooth.

9/14/2021 Scan Conversion(Computer Graphics ) 42

 Prof. Priti Vaidya
Department of Computer Engineering
K. K. Wagh Institute of Engineering Education
& Research, Nashik
Sr. DDA Line Algorithm Bresenham’s Line Algorithm
No.
1 DDA Algorithm uses floating point, Bresenham's Algorithm uses fixed
real arithmetic. points, integer arithmetic.
2 DDA algorithm uses multiplication Bresenham's Algorithm uses
and division operations. addition and subtraction
operations.
3 DDA algorithm is slower than Bresenham's Algorithm is faster
Bresenham's Algorithm because it than DDA algorithm because it uses
uses real arithmetic floating point integer arithmetic.
operations.
4 DDA algorithm can draw circles Bresenham's Algorithm can draw
and curves with less accuracy. circles and curves with much more
accuracy.
5 DDA algorithm is less efficient Bresenham's Algorithm is more
than Bresenham's Algorithm. efficient than DDA Algorithm.
6 DDA algorithm round-off the co- Bresenham's Algorithm doesn't
ordinates to integer that is round-off the co-ordinates.
nearest to the line.
 Most efficient and easiest method
 Onlyone octant of the circle need to be
generated
 Other parts of the circle are obtained by
successive reflections
 Selects the nearest pixel position to complete
the arc
 Uses only integer arithmetic which makes it,
significantly, faster than other algorithms.
 Consider the first quadrant of
an origin centered circle
 If the algorithm begins at x=0
and y=R, then it’s a clockwise
generation
 If the algorithm begins at y=0
and x=R, then it’s a
counterclockwise generation
 The center of the circle and
the starting point are both
assumed located precisely at
pixel elements
 Clockwise generation

 Start from x=0 and y=R

 Forany given point on the circle there are only

three possible selections of the next pixel-
I. Horizontally to the right (mH)
II. Diagonally downward to the right (mD)
III. Vertically downward (mV)
 We know that the general equation for
a circle is (x-h)^2 + (y-k)^2 = r^2, where (h, k)
is the center and r is the radius
 The algorithm chooses the pixel which
minimizes the square of the distance between
one of these pixels and the true circle i.e. the
minimum of -
 The difference between the square of the distance
from the center of the circle to the diagonal pixel
is –

 If the value of the pixel at mH or mD must be

chosen
 To decide which, examine the difference between
squares of the distance from actual circle to the
pixel at mH and mD-

 The value decides which pixel to select

 The 𝛿 can be evaluated as –

 Completing the square for the (yi)2 term by

adding and subtracting (-2yi+1) gives-
 The difference between the square of the distance
from the center of the circle to the diagonal pixel
is –

 If the value of the pixel at mD or mV must be

chosen
 To decide which, examine the difference between
squares of the distance from actual circle to the
pixel at mD and mV-

 The value decides which pixel to select

 The 𝛿’ can be evaluated as –

 Completing the square for the (xi)2 term by

adding and subtracting (2xi+1) gives-
 Summarizing these results yields
 An incremental implementation of the algorithm is
easily developed to find out next pixel location.
 Consider this next pixel location as (i+1)
 The coordinates of the new pixel and the value of
∆i are then calculated
 Consider the horizontal movement mH to the pixel
at (xi+1, yi)
 Consider the diagonal movement mD to the
pixel at (xi+1, yi-1)

 Consider the vertical movement mV to the

pixel at (xi, yi-1)
 Bresenham’s incremental circle algorithm for
the first quadrant, all variables are assumed
integer
 Generateonly first quadrant of a circle using
Bresenham’s algorithm. Consider the origin-
centered circle of radius 8.
 The mid-point circle drawing algorithm
determines the points needed for rasterizing a
circle.

 Calculate all the perimeter points of the circle

in the first octant and then print them along
with their mirror points in the other octants.

 Thiswill work because a circle is symmetric

about it’s centre.
 Only one octant of the
circle need to be
generated, other parts of
the circle are obtained by
successive reflections.
 Here, find points for the
first octant, when x≥y,
then it indicates end of
first octant.
 The first coordinate point
is (0,R) to draw the circle.
 The x increasing as unit interval, the y
decreasing along the values of x.
 Now the starting point is (0, r), so xk=0 and
yk=r, for the initial decision parameter P0
The x and y values are swapped from bottom to
top with the upper half (shaded area)
Display Files & Segments
Introduction
Introduction
Display File

Bird

Sun

Hills

Tree
 Display file
• A display file is a series of graphics commands
that define an output image.
• The image is created by executing the
commands to combine various primitives.
 Segments
• The image information is stored in a display file
• The current display file structure does not satisfy
the requirement to view an image
• To achieve this, display file is divided into
segments
• Each segment corresponds to a component and is
associated with a set of attributes and image
transformation parameters like scaling, rotation
 Segments Advantages
• Presence of Segment allows :

– Subdivision of picture
– Visualization of particular part of picture
– Scaling, rotation and translation of picture
Functions for Segmenting the display
• Segment Operations
– Segment Creation
– Closing a Segment
– Deleting a Segment
– Renaming a Segment
 Segment Creation
• Segment must be created or opened
• Two segments can’t be opened at the same
time
• The segment created must be given a name
• Initialize items in segment table and attributes
of segments are initialized to default.
 Algorithm
1. If any segment is open, give error message : “Segment is still
open” and go to step 8.
2. Read the name of the new segment.
3. If the segment name is not valid, give error message : “Segment
name not a valid name” and go to step 8.
4. If given segment name already exists, give error message
: “Segment name already exists in name list” and go to step 8.
5. Make next free storage area in display file as start of new
segment.
6. Initialize size of new segment to 0 and all its attributes to their
default values.
7. Inform that the new segment is now open.
8. Stop.
 Closing a Segment
• After completing entry of all display file
instructions, the segment needs to be closed
 Algorithm
1. If any segment is not open, give error message : “No
segment is open now” and go to step 6.
2. Change the name of currently opened segment to any
unnamed segment, lets say 0.
3. Delete any other unnamed segment instruction which
may have been saved and initialize above unnamed
segment with no instructions.
4. Make the next free storage area available in display
file as start of the unnamed segment.
5. Initialize size of unnamed segment to 0.
6. Stop.
 Deleting a Segment
To delete a particular segment from display
file, we must just delete that one segment
 Algorithm
1. Read the name of the segment to be deleted.
2. If segment name is not valid, give error message : “Segment name
is not a valid name” and go to step 8.
3. If the segment is open, give error message : “Can’t delete an open
segment” and go to step 8.
4. If size of segment is less than 0, no processing is required and go
to step 8.
5. The segments which follow the deleted segment are shifted by its
size.
6. Recover deleted space by resetting index of next free instruction.
7. The starting position of shifted segments is adjusted by
subtracting the size of deleted segment from it.
8. Stop.
 Renaming a Segment
• This is done to achieve Double Buffering i.e.
the idea of storing two images, one to show
and other to create, alter and for animation.
 Algorithm
1. If both old and new segment names are not valid, give
error message : “Segment names are not valid
names” and go to step 6.
2. If any of two segments is open, give error message
: “Segments are still open” and go to step 6.
3. If new segment name given already exists in the
display list, give error message : “Segment name
already exists” and go to step 6.
4. The old segment table entry are copied into new
position.
5. Delete the old segment.
6. Stop.
 Advantages of using segmented
display
• Segmentation allows to organize display files
in sub-picture structure.
• It allows to apply different set of attributes to
different portions of image.
• It makes it easier to the picture by
changing/replacing segments.
• It allows application of transformation on
selective portions of image.