CG_ch1.pptx

Computer Graphics &
Animation
BCA III/I

Computer Graphics
 Computer graphics refers to the field of study and practice that
involves creating, manipulating, and displaying visual images
and animations with the aid of computers.
 Types:
1. Interactive Computer Graphics
2. Non-Interactive Computer Graphics

Advantages of Computer Graphics
 High quality graphics provide best way to communicate with
computer
 It is possible to produce animation
 Can be used to control animation such as speed, total scene in view
etc.
 Provides facility of update dynamic which can be used to change
shape, color and other properties of object in view.
 Used to present data or information in the form of bar diagram,pie
chart etc, which makes visualization better.

Applications of Computer Graphics
 Graphical user interface (GUI)
- Eg: Word processing, Spreadsheet and desktop-publishing programs
 Plotting
- 2D/3D graphs, histograms, bar charts, pie charts
 Office Automation and Electronic Publishing
- Print meaningful materials Pictures, Drawings
- Enhance communication, productivity, and data management within a
modern office environment by using data visualization, visually rich
email, presentation tools, etc

 Simulation and Modeling
- Astronauts can exercise feeling of weightlessness in a simulator
- pilot training in flight simulator
 Entertainment
- pictures, music videos, cartoon, video games
 Computer Aided Drafting and Design
- design buildings, automobile bodies, airplanes, IC, computer networks,
etc

 Medicine and Virtual Surgery
- cross sectional views of physiological systems in X-ray’s photography
- make mode and design of artificial limbs and practice surgery
 History and Cultural Heritage
- interactive computer techniques for education of art history
- computer simulations of different classes of artistic media
 Art and Commerce
- produce pictures that express a message and attract attention

 Cartography
- making of maps and charts
- Eg: geographic maps, weather maps

Computer Graphics Vs Image Processing

Hardware & Software For CG
Input Devices
 Keyboard – Creates a code such as ASCII uniquely corresponding to a pressed key
 Mouse – Position cursor on the screen
 Joy Stick - input device used for controlling the movement of a cursor or object in digital applications, typically in gaming or
aviation
 Light Pen – Move pointer & select objects on the screen by directly pointing objects with pen
 Scanner - device that converts physical documents or images into digital format for storage or manipulation on computer
 Magnetic Ink Card Reader - Technology used in banking to encode and read information from the magnetic ink on checks,
enabling automated processing
 Optical Character Reader - Technology that converts printed or handwritten text and characters into machine-readable text
 Bar Code Reader – hand-held or stationary input device used to capture and read information contained in bar code

Cathode Ray Tube (CRT)
 A CRT is an evacuated glass tube, with a heating element on one end
and phosphor-coated screen on the other end.
 When current flows through heating filament, the electrons are piled
upon the filament. These electrons are attracted by accelerating systems
on the phosphor coated screen.
 When electron strikes on the screen, the phosphor emits a small spot of
light at each position contacted by the electron beam.
 The glowing positions are used to represent the picture in the screen.

Properties of CRT
 Pixel or Picture Element (PEL)
It is smallest addressable screen element. In 8 bit color mode, monitor uses
8 bit for each pixel making it possible to display 2^8 (256) shades of gray.
 Frame Buffer
It is large contiguous piece of memory into which intensity values for all
pixels are placed. It contains internal representation of the image.
Memory MB =
(x-resolution x y-resolution x Bit per pixel) / (8 x 1024 x 1024)

Properties of CRT
 Fluorescence / Phosphorescence
When the beam of electron emitted by electron gun strikes phosphor
coated screen on the CRT, the phosphor emits a small spot of light
at each position contacted by the electron beam, such phenomenon
is known as fluorescence / phosphorescence. It last just a fraction of
millisecond.
 Pixel density
Number of pixels per unit area. Determines quality, clarity and
readability of image displayed. Measured in unit called pixels per
inch (ppi).

Properties of CRT
 Persistence
How long a phosphor continues to emit light after the electron beam is
removed?
Persistence of phosphor is defined as time it takes for emitted light to decay to
1/10 (10%) of its original intensity.
The phosphor used for graphics display device usually have persistence of 10 to
60 microsecond.
 Resolution
Resolution is defined as the maximum number of points that can be displayed
horizontally and vertically without overlap on display device.

Properties of CRT
 Horizontal scan rate
The horizontal scan rate is the number of scan lines per second. The
rate is approximately the product of the refresh rate and the number of
scan lines.
 Aspect Ratio
It gives the ratio of vertical point to horizontal point necessary to produce
equal length lines in both directions on the screen.
An aspect ratio of ¾ means that a vertical line plotted with 3 points has
the same length as a horizontal line plotted with 4 points.

Properties of CRT
 Refresh Rate
Light emitted by phosphor fades very rapidly, so to keep the drawn picture glowing constantly; it is
required to redraw the picture repeatedly and quickly directing the electron beam back over the some
point. The no of times/sec the image is redrawn to give a feeling of non-flickering pictures is called
refresh-rate.
If Refresh rate decreases, flicker develops.
Refresh rate above which flickering stops and steady it may be called as critical fusion frequency (CFF).
 Aspect Ratio
It gives the ratio of vertical point to horizontal point necessary to produce equal length lines in both
directions on the screen.
An aspect ratio of ¾ means that a vertical line plotted with 3 points has the same length as a horizontal
line plotted with 4 points.

Graphics Software
 General Programming Packages
It contains graphics functions that can be used with high level
programming languages such as C, JAVA, etc. Eg: OpenGL
(Graphics Library).
 Special-purpose application packages
It is specifically designed for particular applications. Maya, CINEMA
4D are some examples.

Raster and Vector Graphics
 A raster image is made up of pixels, each a different color,
arranged to display an image where as a vector image is made
up of paths, each with a mathematical formula (vector), that
tells the path how it is shaped and what color it is bordered with
or filled by.
 Raster image pixels do not keep on their appearance as size
increases whereas Vector images keep on appearance
regardless of size

Raster Scan display
 In raster scan system, the electron beam is swept across the screen, one row at a
time from top to bottom. As electron beam moves across each row, the beam
intensity is turned on and off to create a pattern of illuminated spots.
 Picture definition is stored in memory called frame buffer or refresh buffer. This
memory holds the set of intensity values for all the screen points. Stored intensity
values are then retrieved from the frame buffer and painted on the screen one row at
a time.
 Returning of electron beam from right end to left end after refreshing each scan line
is called horizontal retrace.
 At the end of each frame, the electron beam returns to the top left corner to begin
next frame called vertical retrace.

Interlaced vs. non-interlaced scan (refresh
procedure)
 In interlaced scan, each frame is displayed in two passes. First
pass for odd scan lines and another for even ones.
 In non-interlaced refresh procedure, electron beam sweeps
over entire scan lines in a frame from top to bottom in one
pass.

Architecture of Raster Scan display system

Architecture of Raster Scan display system
 There is a special purpose processor called video controller or display controller, is used to control the
operation of the display device.
 When a particular command is called by the application program, the graphics subroutine package sets the
appropriate pixels in the frame buffer. The video controller then cycles through the frame buffer, one scan line
at a time. It will bring a value of each pixel contained in the frame buffer and uses it to control the intensity of
the CRT electron beam.
 The display processor is a separate processor that performs graphics function such as scan conversion and
raster operation.
 System memory holds data and those program that execute on the CPU.
 The display processor memory holds data plus program that perform scan conversion and
 raster operation.
 The frame buffer stores displayable image created by scan conversion & raster operation.

Advantages and Disadvantages of Raster
Scan display
 It has an ability to fill the areas with solid colors or patterns
 The time required for refreshing is independent of the complexity
of the image
 Low Resolution
 Electron beam coordinated to whole screen not exclusively to
those parts of screen where picture is to be drawn. So, tedious
when the drawn picture estimate is especially not as much as the
whole screen.

Video controller
 It is a special-purpose processor used to control the operation of the
display device.
 Two Registers (𝑥 𝑎𝑛𝑑 𝑦) are used to store screen pixel coordinates.
 Initially, 𝑥 = 0 𝑎𝑛𝑑 𝑦 = 0
 As first scan line is generated, the x register is incremented up to 𝑥𝑚𝑎𝑥 .
Each pixel value is fetched and used to control the intensity of CRT
beam. After first scan line, 𝑥 register address is reset to 0 and 𝑦 register
address is incremented by 1. The process is continued until the last scan
line (𝑦 = 𝑦𝑚𝑎𝑥 ) is generated.

Random Scan (Vector) Display
 In random scan system, the electron beam is directed only to the part
of screen where the picture is to be drawn. It draws a picture one line
at a time, so it is also called vector display.
 Picture definition is stored as a set of line drawing commands in an
area of memory called refresh display file.
 To display a picture, the system cycles through the set of commands
in the display file.
 After all commands are processed, the system cycle backs to the
first line command in the list.

Advantages and Disadvantages of Random
Scan Display
 Can produce output with high quality
 Better for animation
 Refreshing image depends upon its complexity
 Costlier

Color CRT monitor
 The CRT displays color picture by using the combination of phosphorous that emits
different color light. By combining the emitted light from the different phosphorous,
range of color can be generated. Two basic technique for producing color display
with CRT are:
 Beam penetration method:
This method is commonly used for random scan system. In beam penetration
method, two layers of phosphor usually red and green are coated on the CRT
screen, and displayed color depends on how far the electron beam penetrates into
phosphor layer. Slow electron beam excites only the outer red layer. Very fast
electron beam penetrates through red and excites the inner green layer.
Intermediate beam speeds produce combination of red and green light.

Color CRT monitor
 Shadow mask method:
This method is commonly used in raster scan systems because they can
produce wide range of colors than beam penetration. A shadow mask
CRT has three phosphor color dots at each pixel position. One emits red
light, another emits green light and third emits blue light.
The CRT has three electron guns, one for each color dot and shadow-
mask grid is placed just behind the phosphor coated screen.
 Two types of arrangements are there for shadow-mask method:
- Delta-delta arrangement
- In-line arrangement

Direct-View Storage Tubes (DVST)
 A Direct-View storage tube is a type of CRT that stores the picture information as a charge distribution just behind the
phosphor coated screen.
 Two electron guns are used in DVST:
 Primary gun: Used to store the picture pattern.
 Flood gun: Used for maintaining the picture display.
 Advantages:
- No refreshing is needed.
- Very complex picture can be displayed at very high resolutions without flicker.
 Disadvantages:
- To update any part of image must redraw all parts of image.
- do not display color.
- To erasing and redrawing process can take several second for a picture.

Flat Panel Display
 Flat-Panel Display refers to a class of video devices that have reduced
volume, weight and power requirements compared to CRT.
 There are two categories of flat panel displays:
1. Emissive Displays (or emitters): Emissive displays are device that
convert electrical energy into light. E.g. light emitting diode etc.
2. Non-emissive Displays (or non-emitters): Non-emissive displays use
optical effects to convert sunlight or light from other sources (backlight)
into graphics pattern. E.g.Liquid Crystal Display (LCD).

Raster scan system vs Random scan system

Numericals
 Q. There is a system with 24 bits per pixel and resolution of 1024 by 1024. Calculate
the size of frame buffer.
Solution:
Resolution = 1024 × 1024
Total number of pixel = 1024*1024 = 1048576 pixels
Per pixel storage = 24 bits
Total storage required in frame buffer = 1048576*24 = 25165824 bits
= 25165824/8 byte
= 25165824/(8*1024) kb
= 25165824/(8*1024*1024)Mb
= 3 Mb

Numericals
 Q. Consider a RGB raster system is to be designed using 8 inch by 10 inch screen
with a resolution of 100 pixels per inch in each direction. If we want to store 8 bits
per pixel in the frame buffer, how much storage do we need for the frame buffer?
Solution:
Size of screen = 8 inch × 10 inch
Pixel per inch = 100
Total no. of pixel = (8*100)*(10*100) = 800000 pixels
Per pixel storage = 8 bit
Total storage required in frame buffer = 800000*8 bits = 6400000 bits
= 6400000/8 bytes = 800000 byte

Numericals
 Q. Consider a raster scan system having 12 inch by 12 inch with a resolution of 100 pixels per inch in each direction. If display
controller of this system refresh the screen at the rate of 50 frames per second, how many pixels could be accessed per second
and what is the access time per pixel of the system.
Solution:
Size of screen = 12 inch × 12 inch
Resolution = 100 pixels per inch
Total no. of pixels in one frame = (12*100)*(12*100)
Refresh rate = 50 frames per second i.e. 50 frames can be accessed in 1 sec.
Total no. of pixel accessed in 1 sec = 50*(12*100)*(12*100) = 72000000 pixels
50 frames can be accessed in 1 sec.
1 frames can be accessed in 1/50 sec.
(12*100*12*100) pixels can be accessed in 1/50 sec.
Then, 1 pixel can be accessed in 1/(50*12*100*12*100) sec.
= 109/(50*12*100*12*100) ns
= 13.88 ns.

Scan Conversion
 The process of representing continuous graphics object as a
collection of discrete pixels is called scan conversion.
 Scan Conversion of line:
Say 𝑦 = 𝑚𝑥 + 𝑏 be the equation of line with end point (𝑥1 , 𝑦1 )
and (𝑥2 , 𝑦2 ) then,
 𝑚 = (y2 – y1) / (x2- x1) = Δy / Δx
b = y1 – mx1
 Yk+1 = m.xk+1 + b

Digital Differential Analyzer (DDA) algorithm
 It is a scan conversion line algorithm based on calculating
either ∆𝑥 or ∆𝑦 using equation
𝑚 = ∆𝑦 / Δx
The equation of the line is given as;
𝑦 = 𝑚𝑥 + 𝑏 …………..(i)
𝑚 = (𝑦2 − 𝑦1 ) / (𝑥2 − 𝑥1 ) ……………. (ii)
For any interval ∆𝑥 , corresponding interval is given by ∆𝑦 = 𝑚∆
𝑥.

Digital Differential Analyzer (DDA) algorithm
 If m is positive, m<=1 and L-R; ∆𝑥 = 1 and 𝑦𝑘+1 = 𝑦𝑘 + 𝑚
 If m is positive, m<=1 and R-L; ∆𝑥 = -1 and 𝑦𝑘+1 = 𝑦𝑘 - 𝑚
 If m is negative, |m|<=1 and L-R; ∆𝑥 = 1 and 𝑦𝑘+1 = 𝑦𝑘 + 𝑚
 If m is negative, |m|<=1 and R-L; ∆𝑥 = -1 and 𝑦𝑘+1 = 𝑦𝑘 - 𝑚
 If m is positive, m>1 and L-R; ∆y = 1 and x𝑘+1 = x𝑘 + 1/𝑚
 If m is positive, m>1 and L-R; ∆y = -1 and x𝑘+1 = x𝑘 - 1/𝑚
 If m is negative, |m|>1 and L-R; ∆y = -1 and x𝑘+1 = x𝑘 - 1/𝑚
 If m is negative, |m|>1 and R-L; ∆y = 1 and x𝑘+1 = x𝑘 + 1/𝑚

Advantages and Disadvantages of DDA
 It is simple to understand.
 It requires no special skills for implementation.
 It is faster method than direct use of the line equation y=mx+c.
 m is stored in floating point number.
 Accumulation of round-off error in successive additions can cause error
 positions to drift away from the actual line path for long line segments.
 Rounding operations and floating-point-arithmetic are time consuming.

Examples
 Q. Digitized the line with end points (0, 0) and (4, 5) using DDA.
Solution:
(𝑥1 , 𝑦1 ) = (0, 0)
(𝑥2 , 𝑦2 ) = (4, 5)
𝑚 = (y2 – y1) / (x2 - x1) = 1.25
Since, 𝑚 > 1, from DDA algorithm we have;
𝑦𝑘+1 = 𝑦𝑘 + 1
𝑥𝑘+1 = 𝑥𝑘 + 1 / 𝑚

Examples
 Q. Digitized the line with end points (3, 7) and (8, 3) using DDA.
Solution:
(𝑥1 , 𝑦1 ) = (3, 7)
(𝑥2 , 𝑦2 ) = (8, 3)
𝑚 = y2 – y2 / 𝑥2 −𝑥1 = −0.8
 Since, m<1, from DDA algorithm we have;
 𝑥𝑘+1 = 𝑥𝑘 + 1
 𝑦𝑘+1 = 𝑦𝑘 + 𝑚

Bresenham’s line drawing algorithm (BSA)
 Case I: 0 < 𝑚 < 1
Let (𝑥𝑘 , 𝑦𝑘 ) is pixel at 𝑘 𝑡ℎ
step then next point to plot may
be either (𝑥𝑘 + 1, 𝑦𝑘 ) or (𝑥𝑘 +
1, 𝑦𝑘 + 1).
Let 𝑑1 & 𝑑2 be the separation
of pixel position (𝑥𝑘 + 1, 𝑦𝑘 )
and (𝑥𝑘 + 1, 𝑦𝑘 + 1) from the
actual line path 𝑦 = 𝑚𝑥 + 𝑏

BSA
 Then at sampling point (𝑥𝑘 + 1), 𝑦 = 𝑚(𝑥𝑘 + 1) + 𝑏
 From figure,
 𝑑1 = 𝑦 − 𝑦𝑘 = 𝑚(𝑥𝑘 + 1) + 𝑏 − 𝑦𝑘
 𝑑2 = (𝑦𝑘 + 1) − 𝑦 = (𝑦𝑘 + 1) − 𝑚(𝑥𝑘 + 1) − 𝑏
 Now, 𝑑1 − 𝑑2 = 2𝑚(𝑥𝑘 + 1) − (𝑦𝑘 + 1) − 𝑦𝑘 + 2𝑏 = 2𝑚(𝑥𝑘 + 1) − 2𝑦𝑘 + 2𝑏 − 1
 Let us define a decision parameter 𝑃𝑘 for the 𝑘 𝑡ℎ step by
 𝑃𝑘 = ∆𝑥(𝑑1 − 𝑑2 )
 ∆𝑥 > 0 Therefore, 𝑃𝑘 < 0 if 𝑑1 < 𝑑2 & 𝑃𝑘 ≥ 0 if 𝑑1 ≥ 𝑑2
 ∴ 𝑃𝑘 = ∆𝑥(𝑑1 − 𝑑2 ) = ∆𝑥{2 (∆𝑦/∆𝑥) (𝑥𝑘 + 1) − 2𝑦𝑘 + 2𝑏 − 1} = 2∆𝑦. 𝑥𝑘 − 2∆𝑥. 𝑦𝑘 + 𝑐 ……(i)
Where the constant 𝑐 =2∆𝑦 + ∆𝑥(2𝑏 − 1).

BSA
 Therefore, initial decision parameter,
 𝑃0 = 2∆𝑦. 𝑥0 − 2∆𝑥. 𝑦0 + 𝑐 [from (i)]
=2∆𝑦𝑥0 − 2∆𝑥𝑦0 +2∆𝑦 + ∆𝑥(2𝑏 − 1)
=2∆𝑦𝑥0 − 2∆𝑥𝑦0 +2∆𝑦 + 2𝑏∆𝑥 − ∆𝑥
=2∆𝑦𝑥0 − 2∆𝑥𝑦0 +2∆𝑦 + 2(𝑦0 − (Δy/∆𝑥) 𝑥0 )∆𝑥 − ∆𝑥
=2∆𝑦𝑥0 − 2∆𝑥𝑦0 +2∆𝑦 + 2∆𝑥𝑦0 − 2∆𝑦𝑥0 − ∆𝑥
=2∆𝑦 − ∆𝑥
 𝑃0 = 2∆𝑦 − ∆𝑥

BSA
 Now, for next step;
 𝑃𝑘+1 = 2∆𝑦. 𝑥𝑘+1 − 2∆𝑥. 𝑦𝑘+1 + 𝑐 ……..(ii)
 ∴ 𝑃𝑘+1 − 𝑃𝑘 = 2∆𝑦(𝑥𝑘+1 − 𝑥𝑘 ) − 2∆𝑥(𝑦𝑘+1 − 𝑦𝑘 ) From (i) & (ii)
 ∴ 𝑃𝑘+1 = 𝑃𝑘 + 2∆𝑦 − 2∆𝑥(𝑦𝑘+1 − 𝑦𝑘 ) [Since, 𝑥𝑘+1 = 𝑥𝑘 + 1]
 Where, 𝑦𝑘+1 − 𝑦𝑘 = 0 or 1
 If 𝑃𝑘 < 0,
𝑦𝑘+1 = 𝑦𝑘 so 𝑃𝑘+1 = 𝑃𝑘 + 2∆𝑦
 If 𝑃𝑘 ≥ 0,
𝑦𝑘+1 = 𝑦𝑘 + 1 so 𝑃𝑘+1 = 𝑃𝑘 + 2∆𝑦 − 2∆𝑥

BSA Algorithm
1. Input the two line endpoints and store the left endpoint in (𝑥0 , 𝑦0 ).
2. Load (𝑥0 , 𝑦0 ) into the frame buffer i.e. plot the first point.
3. Calculate constants ∆𝑥, ∆𝑦, 2∆𝑦 and 2∆𝑦-∆𝑥 and obtain the starting value for
the decision parameter as 𝑃0 = 2∆𝑦 − ∆𝑥
4. At each 𝑥𝑘 , along the line, starting at k=0, perform the following tests:
If 𝑃𝑘 < 0, then next point to plot is (𝑥𝑘 + 1, 𝑦𝑘 ) and 𝑃𝑘+1 = 𝑃𝑘 + 2∆𝑦
Otherwise, the next point to plot is (𝑥𝑘 + 1, 𝑦𝑘 + 1) and 𝑃𝑘+1 = 𝑃𝑘 + 2∆𝑦 − 2∆𝑥
5. Repeat step 4 ∆𝑥 times.
 [Note: For m>1, just interchange the role of x & y]

BSA
 Case II: 𝑚 > 1
 Let (𝑥𝑘 , 𝑦𝑘 ) is pixel at 𝑘 𝑡ℎ step then
next point to plot may be either (𝑥𝑘 , 𝑦𝑘 +
1) or (𝑥𝑘 +1, 𝑦𝑘 + 1).
 Let 𝑑1 & 𝑑2 be the separation of pixel
position (𝑥𝑘 , 𝑦𝑘 + 1) and (𝑥𝑘 + 1, 𝑦𝑘 + 1)
from the actual line path, 𝑦 = 𝑚𝑥 + 𝑏
 The actual value of x is given by;
𝑥 = (𝑦 − 𝑏)/𝑚
 Then at sampling point (𝑦𝑘 + 1)
𝑥 = (𝑦𝑘 + 1 − 𝑏)/𝑚

BSA
 If 𝑃𝑘 < 0, 𝑥𝑘+1 = 𝑥𝑘 so 𝑃𝑘+1 = 𝑃𝑘 + 2∆𝑥
 If 𝑃𝑘 ≥ 0, 𝑥𝑘+1 = 𝑥𝑘 + 1 so 𝑃𝑘+1 = 𝑃𝑘 + 2∆𝑥 − 2∆𝑦
 Therefore, initial decision parameter, 𝑃0 = 2∆𝑥𝑦0 − 2∆𝑦𝑥0 + 𝑐
= 2∆𝑥𝑦0 − 2∆𝑦𝑥0 + 2(1 − 𝑏)∆𝑥 − ∆𝑦
= 2∆𝑥𝑦0 − 2∆𝑦𝑥0 + 2∆𝑥 − 2𝑏∆𝑥 − ∆𝑦
= 2∆𝑥𝑦0 − 2∆𝑦𝑥0 + 2∆𝑥 − 2(𝑦0 − 𝑚𝑥0 )∆𝑥 − ∆𝑦
= 2∆𝑥𝑦0 − 2∆𝑦𝑥0 + 2∆𝑥 − 2(𝑦0 − (Δy/∆𝑥) 𝑥0 )∆𝑥 − ∆𝑦
 𝑃0 = 2∆𝑥 − ∆𝑦

Examples
 Q. Digitize the line with endpoints (20, 10), (30, 18) using Bresenham’s
line algorithm.
 Solution:
 (𝑥1 , 𝑦1 ) = (20, 10)
 (𝑥2 , 𝑦2 ) = (30, 18)
 𝑚 = y2-y1/𝑥2 −𝑥1 = 0.8 < 1
 Here, ∆𝑥 = 10, ∆𝑦 = 8, 2∆𝑦 = 16, 2∆𝑦 − 2∆𝑥 = -4
 The initial decision parameter ( 𝑃0 ) = 2∆𝑦 − ∆𝑥 = 16 − 10 = 6 > 0

Examples
 Since, for the Bresenham’s line drawing algorithm of slope 𝑚 <
1, we have
 If 𝑃𝑘 ≥ 0,
𝑦𝑘+1 = 𝑦𝑘 + 1 & 𝑥𝑘+1 = 𝑥𝑘 + 1 and 𝑃𝑘+1 = 𝑃𝑘 + 2∆𝑦 − 2∆𝑥
 If 𝑃𝑘 < 0,
𝑦𝑘+1 = 𝑦𝑘 & 𝑥𝑘+1 = 𝑥𝑘 + 1 and 𝑃𝑘+1 = 𝑃𝑘 + 2∆𝑦

Examples
 Q. Digitize the line with endpoints (20, 15) & (30, 30) using Bresenham’s line algorithm.
 Solution:
 (𝑥1 , 𝑦1 ) = (20, 15)
 (𝑥2 , 𝑦2 ) = (30, 30)
 𝑚 = 1.5 > 1
 Here, ∆𝑥 = 10, ∆𝑦 = 15, 2∆𝑥 = 20, 2∆𝑥 − 2∆𝑦 = −10
 The initial decision parameter ( 𝑃0 ) = 2∆𝑥 − ∆𝑦 =20-15=5>0
 Since, for the Bresenham’s line drawing algorithm of slope 𝑚 > 1, we have
 If 𝑃𝑘 ≥ 0,
 𝑥𝑘+1 = 𝑥𝑘 + 1 & 𝑦𝑘+1 = 𝑦𝑘 + 1 and 𝑃𝑘+1 = 𝑃𝑘 + 2∆𝑥 − 2∆𝑦
 If 𝑃𝑘 < 0,
 𝑥𝑘+1 = 𝑥𝑘 & 𝑦𝑘+1 = 𝑦𝑘 + 1 and 𝑃𝑘+1 = 𝑃𝑘 + 2∆𝑥

Examples
 Q. How would you digitize a line with end points A(6, 12) and B(10, 5) using Bresenham’s line drawing algorithm?
 Solution:
 (𝑥1 , 𝑦1 ) = (6, 12)
 (𝑥2 , 𝑦2 ) = (10, 5)
 𝑚 = −1.75 ∴ |𝑚| = 1.75 > 1
 Here, ∆𝑥 = |𝑥2 − 𝑥1 | = 4, ∆𝑦 = |𝑦2 − 𝑦1 | = 7, 2∆𝑥 = 20, 2∆𝑥 − 2∆𝑦 = −10
 The initial decision parameter ( 𝑃0 ) = 2∆𝑥 − ∆𝑦 = 8 − 7 = 1 > 0
 Since, for the Bresenham’s line drawing algorithm of slope 𝑚 > 1, we have
 (Here, 𝑦1 > 𝑦2 so 𝑦 is decremented in successive step)
 If 𝑃𝑘 ≥ 0,
 𝑥𝑘+1 = 𝑥𝑘 + 1 & 𝑦𝑘+1 = 𝑦𝑘 − 1 and 𝑃𝑘+1 = 𝑃𝑘 + 2∆𝑥 − 2∆𝑦
 If 𝑃𝑘 < 0,
 𝑥𝑘+1 = 𝑥𝑘 & 𝑦𝑘+1 = 𝑦𝑘 − 1 and 𝑃𝑘+1 = 𝑃𝑘 + 2∆𝑥

Advantages of Bresenham’s line algorithm
(BLA) over DDA:
 In DDA algorithm each successive point is computed in floating point, so it required
more time and memory space. While in BLA each successive point is calculated in
integer value or whole number. So it requires less time and less memory
 In DDA, since the calculated point value is floating point number, it should be
rounded at the end of calculation but in BLA it does not need to round, so there is no
accumulation of rounding error.
 Due to rounding error, the line drawn by DDA algorithm is not accurate, while in BLA
line is accurate.
 DDA algorithm cannot be used in other application except line drawing, but BLA can
be implemented in other application such as circle, ellipse, and other curves.
 Disadvantage: Additional paramater i.e. decision parameter must be calculated at
each step.

Circle
 Circle is defined as a set of points
that are all at a given distance ‘r’
from the center position (𝑥𝑐 , 𝑦𝑐 ).
Equation of circle centered at (𝑥𝑐 , 𝑦
𝑐 ) with radius ‘r’ is
 (𝑥 − 𝑥𝑐 )2 + (𝑦 − 𝑦𝑐 )2 = 𝑟 2
 Symmetry of Circle
Calculation of circle point (𝑥, 𝑦) in
one octant yields the circle points
shown for the other seven octants.

Midpoint Circle Algorithm
 Assume that we have just plotted point (xk,
yk).
 The next point is a choice between (xk+1,
yk) and (xk+1, yk-1). We would like to
choose the point that is nearest to the
actual circle.
 Let us define a circle function as;
 f(x,y)=x2+y2-r2
f(x,y) = 0 𝑖𝑓 (𝑥, 𝑦) 𝑖𝑠 𝑜𝑛 𝑡ℎ𝑒 𝑐𝑖𝑟𝑐𝑙𝑒
f(x,y) > 0 𝑖𝑓 (𝑥, 𝑦) 𝑖𝑠 𝑜𝑢𝑡𝑠𝑖𝑑𝑒 𝑡ℎ𝑒 𝑐𝑖𝑟𝑐𝑙𝑒
f(x,y) < 0 𝑖𝑓 (𝑥, 𝑦) 𝑖𝑠 𝑖𝑛𝑠𝑖𝑑𝑒 𝑡ℎ𝑒 𝑐𝑖𝑟𝑐𝑙𝑒

Algorithm
 1. Input radius ‘r’ and circle center (𝑥𝑐 , 𝑦𝑐 ) and obtain the first point on the
circumference of a circle centered on origin as (𝑥0 , 𝑦0 ) = (0, 𝑟)
 2. Calculate the initial value of the decision parameter as 𝑝0 =5/4 − 𝑟
 3. At each 𝑥𝑘 position, starting at k=0, perform the following test:
If 𝑝𝑘 < 0, the next point on circle is (𝑥𝑘 + 1, 𝑦𝑘 ) and 𝑝𝑘+1 = 𝑝𝑘 + 2𝑥𝑘+1 + 1
Otherwise, the next point on circle is (𝑥𝑘 + 1, 𝑦𝑘 − 1) and 𝑝𝑘+1 = 𝑝𝑘 + 2𝑥𝑘+1 + 1 − 2𝑦𝑘+1
4. Determine the symmetry point in other seven octants.
5. Move each calculated pixel position (x, y) onto the circular path centered on (𝑥𝑐 , 𝑦𝑐 )
and plot the co-ordinate values,
𝑥 = x + 𝑥c & y =y +yc
 6. Repeat step 3 through 5 until 𝑥 ≥ 𝑦.

Examples
 Q. Digitize the circle 𝒙𝟐 + 𝒚𝟐 = 𝟏𝟎𝟎 in first octant.
 Solution:
 Center = (0, 0)
 Radius (r) =10
 Initial point = (0, r) = (0, 10)
 Initial decision parameter 𝑝0 = 1 − 𝑟 = 1 − 10 = −9
 From mid-point circle algorithm we have;
 If 𝑝𝑘 < 0; Plot (𝑥𝑘 + 1, 𝑦𝑘 ) and 𝑝𝑘+1 = 𝑝𝑘 + 2𝑥𝑘+1 + 1
 𝑝𝑘 ≥ 0; Plot (𝑥𝑘 + 1, 𝑦𝑘 − 1) and 𝑝𝑘+1 = 𝑝𝑘 + 2𝑥𝑘+1 + 1 − 2𝑦𝑘+1

Examples
 Q. Digitize the circle with radius r =10 centered (3, 4) in first octant.
 Solution:
 Note: When center is not origin, we first calculate the octants points of the circle in thesame way as
the center at origin then add the given circle center on each calculated pixel.
 Center = (3, 4) Radius (r) =10
 Initial point = (0, r) = (0, 10)
 If 𝑝𝑘 < 0; Plot (𝑥𝑘 + 1, 𝑦𝑘 ) and 𝑝𝑘+1 = 𝑝𝑘 + 2𝑥𝑘+1 + 1
 𝑝𝑘 ≥ 0; Plot (𝑥𝑘 + 1, 𝑦𝑘 − 1) and 𝑝𝑘+1 = 𝑝𝑘 + 2𝑥𝑘+1 + 1 − 2𝑦𝑘+1

Examples
 Q. Digitize the circle with radius r =5 centered (2, 3).
 Solution:
 Center = (2, 3) Radius (r) =5
 Initial point = (0, r) = (0, 5)
 If 𝑝𝑘 < 0;
 Plot (𝑥𝑘 + 1, 𝑦𝑘 ) and 𝑝𝑘+1 = 𝑝𝑘 + 2𝑥𝑘+1 + 1
 𝑝𝑘 ≥ 0;
 Plot (𝑥𝑘 + 1, 𝑦𝑘 − 1) and 𝑝𝑘+1 = 𝑝𝑘 + 2𝑥𝑘+1 + 1 − 2𝑦𝑘+1

Filled Area Primitives
 Filling of polygon with solid color.
 Suppose we want to color a polygon.
 Coloring must be done only inside its boundary.
 There are two basic approaches to area filling in raster systems:
 One way to fill an area is to determine the overlap intervals for scan
lines that crosses the area.
 Another method for area filling is to start from a given interior position
and point outward from this until a specified boundary is met.

Scan line polygon fill algorithm
 The basic scan-line algorithm is as
follows:
- Find the intersections of the scan
line with all edges of the polygon
- Sort the intersections points from
left to right. i.e. (a, b, c, d)
- Fill in all pixels between pairs of
intersections that lie interior to the
polygon. i.e. (a, b) & (c, d).

Problem
 For scan line L1 a, b & c are interior
point, therefore we take pairwise points
(a, b) & (b, c) and fill all the pixel
between these points.
 For scan line L2, we should only take
pairwise points (P, Q) & (R, S) because
(Q, R) is not part of polygon.
 For scan line L1, we took the vertex ‘b’
twice i.e.(a, b) & (b, c) but for scan line
‘L2’ we did not take ‘Q’ twice.
 How to determine this?

Solution
 Solution:
 Make a clockwise or anticlockwise traverse on the edge.
 If ‘y’ is monotonically increasing or decreasing and direction of
‘y’ changes, then we have take the vertex twice, otherwise take
vertex only once.

Inside outside Test
 This test is used to identify
whether a given point is inside
the polygon or outside the
polygon.
 Rule: To identify a point whether
it is exterior or interior, draw a
line from that point to outside a
polygon, if this line crosses even
number of edges the point is
exterior otherwise it is interior.

Scan-Line Fill of Curved Boundary area
 It requires more work than polygon filling,
since intersection calculation involves
nonlinear boundary. For simple curves such
as circle or ellipses, performing a scan line
fill is straight forward process. We only
need to calculate the two scan-line
intersection on opposite sides of the curve.
Then simply fill the horizontal spans of pixel
between the boundary points on opposite
side of curve. Symmetries between
quadrants are used to reduce the boundary
calculation. We can fill generating pixel
position along curve boundary using mid-
point method

Boundary fill Algorithm
 It accepts an input, the co-ordinate of interior point 𝑝(𝑥, 𝑦), a fill color and a
boundary color.
 Starting from point 𝑝(𝑥, 𝑦), test is performed to determine whether the
neighboring pixel is already filled or boundary is reached. If not the
neighboring pixels are filled with fill color and their neighbors are tested.
This process is repeated till boundary is reached.
 Two mechanism is used for finding the neighboring pixel:
4-connected if they are adjacent horizontally and vertically.
8-connected if they are adjacent horizontally, vertically and diagonally.
 This algorithm is used when boundary is of single color.

Flood Fill Algorithm
 This algorithm is used when boundary is of different color.
 We start from a specified interior pixel (x, y) and reassign all
pixel values that are
 currently set to a given interior color with desired fill-color.

Difference between Boundary and Flood fill
Algorithm

CG_ch1.pptx

Recommended

Recommended

More Related Content

Similar to CG_ch1.pptx

Similar to CG_ch1.pptx (20)

Recently uploaded

Recently uploaded (20)

CG_ch1.pptx