Unit 1: Introduction

Introduction: Graphics is defined as any sketch or a drawing or a special network that pictorially
represents some meaningful information. Computer Graphics is used where a set of image needs to be
manipulated or the creation of the image in the form of pixels and is drawn on the computer. Computer
graphics is the creation, display, manipulation and storage of picture and experimental data for proper
visualization using a computer. Computer Graphics can be used in digital photography, film, entertainment,
electronic gadgets and all other core technologies which are required. It is a vast subject and area in the
field of computer science. Computer Graphics can be used in UI design, rendering, geometric object,
animation and many more. In most area, computer graphics is an abbreviation of CG. There are several
tools used for implementation of Computer Graphics. The basic is the <graphics.h> header file in C.
Types of Computer Graphics:
 Raster Graphics: In raster graphics pixels are used for an image to be drawn. It is also known as a
bitmap image in which a sequence of image is into smaller pixels. Basically a bitmap indicates a
large number of pixels together.
 Vector Graphics: In vector graphics, mathematical formulae are used to draw different types of
shapes, lines, objects and so on.

History of Computer Graphics: Computer Graphics (CG) was first developed as a visualization tool.
Computer graphics were basically introduced for scientists and engineers in government and corporate
research centers, i.e., Bell Labs and Boeing in the 1950s. After then the tools would be developed at
Universities in the 60s and 70s at places, i.e., Ohio State University, MIT, University of Utah, Cornell, North
Carolina, and the New York Institute of Technology. The computer graphics are invented by
researchers Verne Hudson and William Fetter of Boeing. It is often brief as computer graphics.
Some of the major foot steps towards development of Computer Graphics is listed below:
 1940-1941: The first directly digital computer-generated graphics that would associate with today
as being actual CG. The very first radiosity image was invented at MIT in the 1940s.
 1950: John Whitney Sr. invents his computer-assisted mechanisms to create some of his graphic
artwork.
 1951: Vector scope computer graphics display on the computer at MIT.
 1955: Sage system uses the first light pen as an input device at MIT Lab by Bert Sutherland.
 1957: In the National Bureau of Standards first image-processed photo was used. The IBM 740
created a sequence of points on a CRT monitor to represent lines and shapes.
 1960: William Fetter was first termed “Computer Graphics” for cockpit drawing. John Whitney
Sr. invents motion graphics in LA.
 1965: IBM 2250, the first graphics computer available.
 1966: Ralph Baer developed the first consumer computer graphics game, “Odyssey.”
 1973: The concept of Z-buffer algorithm and texture mapping were developed by Edwin Catmull.
 1975: Dr. Edwin Catmull introduced the Tween animation system.
 1978: For the mechanical Universe Jim Blinn produced the first series of animation. Jim Blinn has
also published the technique of bump mapping.
 1980: The first digital computer was used in computer graphics in the Digital Equipment
Corporation (DEC).
 1982: The first broad use of 3D graphics animation was done in Disney featured film. AutoCAD
1.0 is launched-It is only used for wire frame representation (visual representation of a 3D physical
object).
 1985: Medical imaging software combined with Voxel (volume element) technology.
 1987: Video graphics array (VGA) standard was introduced.
  1989: Super video graphics array (SVGA) was introduced.
 1993: Mosaic, the web browser was released by UIUC for general usage. The Codename of mosaic
was “Mozilla.” The Mosaic, the first web browser was released. First public call made by cell phone.
 1995: First, fully CGI (Computer-generated imagery) was released. MS Internet Explorer 1.0
released.
 2000: The first web-based CAD system Sketchup released.
 2009: The state of the art of computer graphics, as of 2009, was brief in a short video.
 2013: Now, it is possible to create graphics on a home computer.
 2018: Now, we can create “realistic” graphics on mobile phones. We can also create a completely
CGI-based human face in real-time.

Applications of Computer Graphics:

 Computer-Aided Design for engineering and architectural: Objects may be displayed in a
wireframe outline form. Multi-window environment is also favored for producing various zooming
scales and views. Animations are useful for testing performance.
 Presentation: To produce illustrations which summarize various kinds of data. Except 2D, 3D
graphics are good tools for reporting more complex data.
 Computer Art: Painting packages are available. With cordless, pressure-sensitive stylus, artists can
produce electronic paintings which simulate different brush strokes, brush widths, and colors.
Photorealistic techniques, morphing (a special effect in motion pictures and animations that
changes (or morphs) one image or shape into another through a seamless transition) and
animations are very useful in commercial art. For films, 24 frames per second are required. For
video monitor, 30 frames per second are required.
 Entertainment: Motion pictures, Music videos, and TV shows, Computer games.
 Education and Training: Training with computer-generated models of specialized systems such as
the training of ship captains and aircraft pilots.
 Visualization: For analyzing scientific, engineering, medical and business data or behavior.
Converting data to visual form can help to understand mass volume of data very efficiently.
 Image Processing: Image processing is to apply techniques to modify or interpret existing pictures.
It is widely used in medical applications.
 Graphical User Interface: Multiple window, icons, menus allow a computer setup to be utilized
more efficiently.
 Unit 2: Graphics Hardware
Basic Concept:
Raster: A rectangular array of points and dots.
Pixel : One dot or picture element of the raster.
Scan line: A row of pixel.

Bit map: Ones and Zeros representation of rectangular array of point on the screen.
Black & white → bitmap
Color→ pixmap
n-1
Scan line

Pixel
0
m×n raster m-1

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.

Fig: Cathode-ray tube (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.
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. Range of persistence of different phosphors can react many seconds.
- 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.

Aspect Ratio
- Aspect ratio is generally used to determine the relative horizontal and vertical sizes of
computer graphics.
- As a simple example, a square image has an aspect ratio of 1:1 since the height and width
are the same. if a computer graphic has an aspect ratio of 3:1, this means the width of the
graphic is three times of the height of the image.
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.

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.

Raster Scan Displays:

This displays are most common type of graphics monitor which employs CRT. It is based on television
technology. In raster scan system electron beam sweeps across the screen, from top to bottom covering
one row at a time. A pattern of illuminated pattern of spots is created by turning beam intensity on and off
as it moves across each row. A memory area called refresh buffer or frame buffer stores picture definition.
This memory area holds intensity values for all screen points. Stored intensity values are restored from
frame buffer and painted on screen taking one row at a time. Each screen point is referred to as pixels.

In raster scan systems refreshing is done at done at a rate of 60-80 frames per second. Refresh rates are
also sometimes described in units of cycles per second / Hertz (Hz). At the end of each scan line, electron

beam begins to display next scan line after returning to left side of screen. The return to the left of screen
after refresh of each scan line is known as horizontal retrace of electron beam. At the end of each frame
electron beam returns to top left corner and begins the next frame.
A fixed area of the system memory is reserved for the frame buffer, and the video controller is given direct
access to the frame buffer memory. The co-ordinates of the graphics monitor starts at the top left screen
corner. Positive x values increasing to the right and y values decreasing from top to bottom.

- 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:
 Real life images with different shades can be displayed.
 Color range available is bigger than random scan display.

DISADVANTAGES:
 Resolution is lower than random scan display.
 More memory is required.
 Data about the intensities of all pixel has to be stored.

Random Scan Display:

In Random-Scan Display electron beam is directed only to the areas of screen where a picture has to be
drawn. It is also called vector display, as it draws picture one line at time. It can draw and refresh
component lines of a picture in any specified sequence. Pen plotter is an example of random-scan displays.

The number of lines regulates refresh rate on randolm-scan displays. An area of memory called refresh
display files stores picture definition as a set of line drawing commands. The system returns back to first-
line command in the list, after all the drawing commands have been processed. High-quality vector
systems can handle around 100,00 short lines at this refresh rate. Faster refreshing can burn phosphor. To
avoid this every refresh cycle is delayed to prevent refresh rate greater than 60 frames per second.
Suppose we want to display a square ABCD on the screen. The commands will be:
Draw a line from A to B

Draw a line from B to C

Draw a line from C to D

Draw a line from D to A

Architecture of random scan display is shown below:

Input in the form of an application program is stored in the system memory along with graphics package.
Graphics package translates the graphic commands in application program into a display file stored in
system memory. This display file is then accessed by the display processor to refresh the screen. The
display processor cycles through each command in the display file program.

ADVANTAGES:
 Higher resolution as compared to raster scan display.
 Produces smooth line drawing.
 Less Memory required.

DISADVANTAGES:
 Realistic images with different shades cannot be drawn.
 Colour limitations.

Random Scan Raster Scan

1. It has high Resolution 1. Its resolution is low.
2. It is more expensive 2. It is less expensive
3. Any modification if needed is easy 3.Modification is tough
4. Solid pattern is tough to fill 4.Solid pattern is easy to fill
5. Refresh rate depends on resolution 5. Refresh rate does not depend on the picture.
6. Only screen with view on an area is displayed. 6. Whole screen is scanned.
7. It is restricted to line drawing applications 7. It is suitable for realistic display.

Video Controller:
In the output circuitry, it is video controller who generates horizontal and vertical deflection voltage with
the help of which monitor can sweep its beam across screen during raster scan. The various location in
frame buffer and their corresponding screen positions are referenced in Cartesian coordinates in raster
scan system. In graphics monitor, coordinates are started from the left corner of screen. In some of
personal computers, origin of coordinate is at upper left corner of screen. in this type of system, positive
values of x are increases towards right side and positive values for y are increases towards bottom to top
as it is

To store coordinates of screen pixels, two register namely, X-register and Y-register are used. At the start
of refresh cycle, X-register is set to 0 and Y-register is set to ymax. The address of (x, y) is translated to
memory address where color value for this pixel position is stored. The role of video controller in this
processor is to retrieve this color value for we can set binary number from frame buffer and breaks up into
3 separate parts and then send each of part to separate digital-to-analog converter. After conversion we
obtain the voltages which are used to control intensity of three electron guns which are at (x, y) screen
position by horizontal and vertical deflections. This procedure is as shown in the following
After this, register-X is get increment by 1 and same procedure follows for next pixels along same line until
x reaches xmax. On this scan line, when last pixel has been processed, x-register get reset to 0 and Y-
register is start getting decrement by 1 for scanning of next line. Again same procedure is followed by y-
axis which is that to scan lines until pixels on last scan line are generated. To display one pixel on screen,
very little time is available. To display all frame on screen it consumes more time than given time. So to
solve this issue, in single access multiple adjacent pixels are fetched from frame buffer. When this pixels
get processed, other group of pixels are picked up from buffer for processing.

Frame Buffer:
As we know that computers understand only the binary language and everything is stored in the form of
bits even if it is an image. At a minimum, there is one memory bit for each pixel. This is called the bit plane.
That is the number of bits required to store the image equal to the number of pixels. So, Frame buffer is a
large contiguous piece of memory where the image is stored as a pattern of bits. And Amount of frame
buffer memory required depends on the resolution of the screen.

You know that one memory bit can have 2 possible states. A single bit plane will give a black and white
display. That is, zero is for black and one is for white. Now suppose you want to draw a straight line then
put the values for those pixels as one and the remaining will be stored as zero.

Image as a pattern of bits Arrangement of pixels in 8X8 Display Screen

Suppose now we want to change the image then we only need to modify the contents of the frame buffer
to represent new patterns of pixels.
Colors are incorporated using additional bit planes. That is for colors, we need to store more information
per pixel. Therefore, there will be more bits corresponding to each pixel location on the screen. These are
called additional bit planes.

Further, suppose we have 3 bits per pixel. Hence, it will produce 8 possible values. That is, we can interpret
8 intensity levels.
 Color R G B
Black 0 0 0
Red 1 0 0
Green 0 1 0
Blue 0 0 1
Yellow 1 1 0
Cyan 0 1 1
Magenta 1 0 1
White 1 1 1
3 bit planes for 8 colors
With n bit planes a total of 2n intensity levels are possible.
The memory required by the frame buffer depends. Firstly on the Total number of bit planes of colors/total
intensity levels. Secondly on the Resolution of the screen.
Memory required by frame buffer=n x resolution
Actually, a frame buffer is a portion of Random access Memory (RAM). However, Modern video cards
contain frame buffer circuitry in their cores.

Digital to Analog Converter:

While most users don’t notice, audio output on laptops and desktops can be a little disappointing. There’s
a number of elements that contribute to this problem, and one factor is the digital-to-analog converter, or
DAC.

A DAC is responsible for converting the string of digital bits that make up a digital audio recording into
analog sound waves. It does this by converting the binary representations of sound contained within an
audio file into a continuously-varying electrical signal, as seen in the simplified graph of the process above.
That’s then transported to an amp. The amp boosts the signal and passes it off to your output device. Your
speakers then turn that electrical signal into sound using the principles of electromagnetism.
There are a couple factors that contribute to the improved sound you’ll get from an external DAC. The
most prominent is reduced digital noise from surrounding hardware. Better components also play a role.
External DACs use higher-quality chips for the conversion process. These offer higher bit rates, better
accuracy, and improved functionality. Most external DACs also include superior technical designs, better-
maintained fidelity of the original signal and reduced extraneous noise.
CRT Colour Monitors:
A color CRT monitor displays color picture by using a combination of phosphors that emit different colored
light. By combining the emitted light a range of colors can be generated.

Two basic methods for producing color displays are:

 Beam Penetration Method
 Shadow-Mask Method

Beam Penetration Method: Random scan monitors use the beam penetration method for displaying color
picture. In this, the inside of CRT screen is coated two layers of phosphor namely red and green. A beam of
slow electrons excites only the outer red layer, while a beam of fast electrons penetrates red layer and
excites the inner green layer. At intermediate beam speeds, combination of red and green light is emitted
to show two additional colors- orange and yellow.

Advantages
 Less expensive

Disadvantages
 Quality of images are not good as comparable with other methods
 Four colors are allowed only

Shadow Mask Method: Raster scan system are use shadow mask methods to produce a much more range
of colors than beam penetration method. In this, CRT has three phosphor color dots. One phosphor dot emits
a red light, second emits a green light and third emits a blue light. This type of CRT has three electrons guns
and a shadow mask grid as shown in figure below:

In this figure, three electrons beams are deflected and focused as a group onto the shadow mask which
contains a series of holes. When three beams pass through a hole in shadow mask they activate dot triangle
as shown in figure above:

The colors we can see depend on the amount of excitation of red, green and blue phosphor. A white area is
a result of all three dots with equal intensity while yellow is produced with green and red dots and so on.

Advantages
 Produce realistic images
 Produced different colors
 Shadows scenes.

Disadvantages
 low resolution
 Expensive
 Electron beam directed to whole screen
 Unit 3: Two Dimensional Algorithms
Line Drawing Algorithm: A procedure used to digitize or rasterize pixel data available on frame buffer.
The process of representing continuous graphics object as a collection of discrete pixels is called scan
conversion. For e.g. a line is defined by its two end points and the line equation.
Scan Conversion of a line: Say 𝑦 = 𝑚𝑥 + 𝑏 be the equation of line with end point (𝑥1, 𝑦1) and (𝑥2, 𝑦2)
𝑦2 −𝑦1
then, 𝑚 =
𝑥2 −𝑥1
∆y
𝑚=
∆x
Here, 𝑚 represents the slope of line path where by ∆𝑥 & ∆𝑦 gives the deflection needed towards
horizontal and vertical direction to get new pixel from current pixel position.
Slope of line also describes the nature and characteristics of line that is going to display. In this
section we will learn about two types of Line drawing algorithms. They are;

Digital Differential Algorithm (DDA): It is a scan conversion line algorithm based on calculating either ∆𝑥 or
∆𝑦 using equation,
∆y
𝑚=
∆x

The equation of the line is,

𝑌 = 𝑚𝑥 + 𝑏 …………………. (i)
For any interval △x, corresponding interval is given by △y = m △x.

Case I: (m <= 1), Case II: (m > 1),

We sample at unit x interval We sample at unit y-interval
i.e. △ x = 1 i.e. △ y = 1
𝒙𝒌+𝟏 = 𝒙𝒌 + 𝟏 And compute each successive x-values.
Therefore,
Then we compute each successive y-values,
1=𝑚△x
△y=m
1
→ 𝒚𝒌+𝟏 = 𝒚𝒌 + 𝒎 →△ x =
𝑚
𝟏
→ 𝒙𝒌+𝟏 = 𝒙𝒌 +
𝒎
𝒚𝒌+𝟏 = 𝒚𝒌 + 𝟏

DDA Algorithm:
1. Declare the variables, x1, y1 and x2, y2, dx, dy, del x, del y as real and k as integer.
2. Perform
dx = x2-x1
dy = y2 – y1
3. Test if dy < dx then
Steps = dx
Else steps = dy
4. set del x = dx/steps
del y = dy/steps
x=x1
y=y1
5. plot(x,y)
6. Do for k=1 to steps
 x = x + del x
y = y + del y
plot(x,y)
End do.

Advantage:
 It is a faster method than method of using direct use of line equation.
 It allows us to detect the change in th6+e value of x and y, so plotting of same point twice is not
possible.
 It is an easy method because each step involves just two additions.

Disadvantage:
 Rounding off operations and floating point operations consumes a lot of time.

Q. Digitized the line with end points (0, 0) and (4, 5) using DDA.
Solution:
Given,
(𝑥1, 𝑦1) = (0, 0)
(𝑥2, 𝑦2) = (4, 5)
𝒚𝟐 −𝒚𝟏 5−0
𝒎= = = 1.25
𝒙𝟐 −𝒙𝟏 4−0

Since, (𝑚 > 1), from DDA algorithm we have;

𝟏
𝒙𝒌+𝟏 = 𝒙𝒌 + 𝒚𝒌+𝟏 = 𝒚𝒌 + 𝟏
𝒎

Calculation:
1
𝑥1 = 𝑥0 + = 0 + 0.8 = 0.8
1.25
*For (x, y) plot, take round value of (x, y)
𝑦1 = 𝑦0 + 1 = 0 + 1 = 1

i x y x-plot y-plot (x, y)

0 0 0 0 0 (0, 0)
1 0.8 1 1 1 (1, 1)
2 1.6 2 2 2 (2, 2)
3 2.4 3 2 3 (2, 3)
4 3.2 4 3 4 (3, 4)
5 4 5 4 5 (4, 5)

Q. Digitized the line with end points (3, 7) and (8, 3) using DDA.
Solution:

Given,
(𝑥1, 𝑦1) = (3, 7)
(𝑥2, 𝑦2) = (8, 3)
𝒚𝟐 − 𝒚𝟏 3−7
𝒎= = = −0.8
𝒙𝟐 − 𝒙𝟏 8−3
Since, m<1, from DDA algorithm we have;
𝒙𝒌+𝟏 = 𝒙𝒌 + 𝟏
𝒚𝒌+𝟏 = 𝒚𝒌 + 𝒎

K x y x-plot y-plot (x, y)

 0 3 7 3 7 (3, 7)
1 4 6.2 4 6 (4, 6)
2 5 5.4 5 5 (5, 5)
3 6 4.6 6 5 (6, 5)
4 7 3.8 7 4 (7, 4)
5 8 3 8 3 (8, 3)

Bresenham Line Drawing Algorithm: Bresenham Line Drawing Algorithm determines the points of
an n-dimensional raster that should be selected in order to form a close approximation to a straight
line between two points.
To draw the line we have to compute first the slope of the line form two given points.
Bresenham Line Drawing Algorithm contains two phases:
1. Slope (m) < 1.
2. Slope (m) >= 1.
According to slope Decision Parameter is calculated, which is used to make decision for selection of
next pixel point in both the phases.

Derivation of Decision Parameter 𝑷𝒌

For slope (m<1):
In the above figure, the y coordinate is at a line 𝑥𝑘 + 1 is,
𝑦 = 𝑚(𝑥𝑘 + 1) + 𝑏
𝑑𝑢(Upper) and 𝑑𝑙(Lower) are given as;
𝑑𝑙 = 𝑦 − 𝑦𝑘 𝑑𝑢 = (𝑦𝑘 + 1) − 𝑦
= 𝑚(𝑥𝑘 + 1) + 𝑏 − 𝑦𝑘 = (𝑦𝑘 + 1) − 𝑚(𝑥𝑘 + 1) − 𝑏
𝑑𝑢 and 𝑑𝑙 are used to make a simple decision about which pixel is closer to the mathematical
line. This simple decision is based on the difference between the two pixel positions.
𝑑𝑙 − 𝑑𝑢 = 𝑚(𝑥𝑘 + 1) + 𝑏 − 𝑦𝑘 − 𝑦𝑘 − 1 + 𝑚(𝑥𝑘 + 1) + 𝑏
𝑑𝑙 − 𝑑𝑢 = 2𝑚(𝑥𝑘 + 1) − 2𝑦𝑘 + 2𝑏 − 1
𝑑𝑦
Multiplying both sides by 𝑑𝑥 and replacing 𝑚 with ,
𝑑𝑥
𝑑𝑦
𝑑𝑥 (𝑑𝑙 − 𝑑𝑢) = 𝑑𝑥[2 (𝑥𝑘 + 1) − 2𝑦𝑘 + 2𝑏 − 1 ]
𝑑𝑥
𝑑𝑦 𝑑𝑦
= 2𝑑𝑥 𝑥𝑘 + 2𝑑𝑥 − 2𝑑𝑥𝑦𝑘 + 2𝑑𝑥𝑏 − 𝑑𝑥
𝑑𝑥 𝑑𝑥
 = 2𝑑𝑦𝑥𝑘 + 2𝑑𝑦 − 2𝑑𝑥𝑦𝑘 + 2𝑑𝑥𝑏 − 𝑑𝑥
= 2𝑑𝑦𝑥𝑘 − 2𝑑𝑥𝑦𝑘 + 𝐶
Where, 𝐶 = 2𝑑𝑦 + 𝑑𝑥(2𝑏 − 1)

So, a decision parameter 𝑃𝑘 for the kth step along a line is given by,
𝑃𝑘 = 𝑑𝑥(𝑑𝑙 − 𝑑𝑢 )
𝑃𝑘 = 2𝑑𝑦𝑥𝑘 − 2𝑑𝑥𝑦𝑘 + 𝑐

At step K+1, the decision parameter is given as,

𝑃𝑘+1 = 2𝑑𝑦𝑥𝑘+1 − 2𝑑𝑥𝑦𝑘+1 + 𝑐

Subtracting 𝑃𝑘 from the above statement we get,

𝑃𝑘+1 − 𝑃𝑘 = 2𝑑𝑦𝑥𝑘+1 − 2𝑑𝑥𝑦𝑘+1 + 𝑐 − 2𝑑𝑦𝑥𝑘 + 2𝑑𝑥𝑦𝑘 − 𝑐
𝑃𝑘+1 = 𝑃𝑘 + 2𝑑𝑦(𝑥𝑘+1 − 𝑥𝑘 ) − 2𝑑𝑥(𝑦𝑘+1 − 𝑦𝑘 )

But, 𝑥𝑘+1 = 𝑥𝑘 + 1
𝑃𝑘+1 = 𝑃𝑘 + 2𝑑𝑦 − 2𝑑𝑥(𝑦𝑘+1 − 𝑦𝑘 )

Where, (𝑦𝑘+1 − 𝑦𝑘 ) either 0 or 1 depending on the sign of 𝑃𝑘

Cases (m<1):
1. Pixel at the top position: 𝑷𝒌 ≥ 𝟎 → (𝒚𝒌+𝟏 = 𝒚𝒌 + 𝟏)
𝑷𝒌+𝟏 = 𝑷𝒌 + 𝟐𝒅𝒚 − 𝟐𝒅𝒙
2. Pixel at the bottom position: 𝑷𝒌 < 𝟎 → (𝒚𝒌+𝟏 = 𝒚𝒌 )
𝑷𝒌+𝟏 = 𝑷𝒌 + 𝟐𝒅𝒚
3. The first decision parameter 𝑃0 is evaluated at (𝑥0 , 𝑦0 )is given as,
𝑃0 = 𝑑𝑥(𝑑𝑙 − 𝑑𝑢)
𝑃0 = 𝑑𝑥[2𝑚(𝑥0 + 1) − 2𝑦0 + 2𝑏 − 1]
𝑃0 = 𝑑𝑥(2𝑚𝑥0 + 2𝑚 − 2𝑦0 + 2𝑏 − 1)
= 𝑑𝑥[2(𝑚𝑥0 + 𝑏 − 𝑦0 ) + 2𝑚 − 1)
𝑑𝑦
Since, 𝑚𝑥0 + 𝑏 − 𝑦0 = 0 and 𝑚 = , we have,
𝑑𝑥
𝑷𝟎 = 𝟐𝒅𝒚 − 𝒅𝒙

Similarly, for slope (m) >= 1:

𝑃𝑘+1 = 𝑃𝑘 + 2𝑑𝑥 − 2𝑑𝑦(𝑥𝑘+1 − 𝑥𝑘 )
Cases (m>=1):
1. Pixel at the top position: 𝑷𝒌 ≥ 𝟎 → (𝒙𝒌+𝟏 = 𝒙𝒌 + 𝟏)
𝑷𝒌+𝟏 = 𝑷𝒌 + 𝟐𝒅𝒙 − 𝟐𝒅𝒚
2. Pixel at the bottom position: 𝑷𝒌 < 𝟎 → (𝒙𝒌+𝟏 = 𝒙𝒌 )
𝑷𝒌+𝟏 = 𝑷𝒌 + 𝟐𝒅𝒙
3. The first decision parameter P0 is evaluated at (x0,y0) is given as,
𝑷𝟎 = 𝟐𝒅𝒙 − 𝒅𝒚

Bresenhan’s Algorithm:
1. Input the two end points (x1,y1) and (x2,y2)
2. Compute dx = /x2-x1/ and dy = /y2-y1/
3. Calculate slope(m) = dy/dx
4. If m<1,
I. Find initial decision parameter Pk = 2dy – dx
II. At each Xk along the line, starting at k = 0, perform the following test −
* If Pk < 0, the next point to plot is (xk + 1,yk) and
Pk+1 = Pk + 2dy
else
* plot (xk+1,yk+1)
* Pk+1 = Pk + 2dy − 2dx
III. Repeat step 4 (dx - 1) times.
5. else,
IV. Find initial decision parameter Pk = 2dx – dy
V. At each yk along the line, starting at k = 0, perform the following test −
* If Pk < 0, the next point to plot is (xk,yk+1) and
Pk+1 = Pk + 2dx
else
* plot (xk+1,yk+1)
* Pk+1 = Pk + 2dx − 2dy
VI. Repeat step 4 (dy - 1) times.
6. Exit.

Q. Digitize the line with endpoints (20, 10), (30, 18) using Bresenham’s line algorithm.
Solution:
Here,
(𝑥1, 𝑦1) = (20, 10)
(𝑥2, 𝑦2) = (30, 18)
𝒚𝟐 −𝒚𝟏 18−10
𝒎= = = 0.8 < 1
𝒙𝟐 −𝒙𝟏 30−20
Here, ∆𝑥 = 10, ∆𝑦 = 8
The initial decision parameter 𝑷𝟎 = 𝟐𝒅𝒚 − 𝒅𝒙 = 16 − 10 = 6 > 0
Since, for the Bresenham’s line drawing algorithm of slope 𝑚 < 1, we
have
If 𝑷𝒌 ≥ 𝟎, (𝒚𝒌+𝟏 = 𝒚𝒌 + 𝟏) & (𝒙𝒌+𝟏 = 𝒙𝒌 + 𝟏)
𝑷𝒌+𝟏 = 𝑷𝒌 + 𝟐𝒅𝒚 − 𝟐𝒅𝒙
If 𝑷𝒌 < 𝟎, (𝒚𝒌+𝟏 = 𝒚𝒌 ) & (𝒙𝒌+𝟏 = 𝒙𝒌 + 𝟏)
𝑷𝒌+𝟏 = 𝑷𝒌 + 𝟐𝒅𝒚
k 𝑷𝒌 (𝒙𝒌+𝟏 , 𝒚𝒌+𝟏 )
0 6 (21, 11)
1 2 (22, 12)
2 -2 (23, 12)
3 14 (24, 13)
4 10 (25, 14)
 5 6 (26, 15)
6 2 (27, 16)
7 -2 (28, 16)
8 14 (29, 17)
9 10 (30, 18)

Q. Digitize the line with endpoints (20, 15) & (30, 30) using Bresenham’s line algorithm.
Solution:
Here,
(𝑥1, 𝑦1) = (20, 15)
(𝑥2, 𝑦2) = (30, 30)
𝒚𝟐 −𝒚𝟏 30−15
𝒎= = = 1.5 > 1
𝒙𝟐 −𝒙𝟏 30−20
Here, ∆𝑥 = 10, ∆𝑦 = 15

The initial decision parameter, 𝑃0 = 2𝑑𝑥 − 𝑑𝑦 = 20 − 15 = 5 > 0

Since, for the Bresenham’s line drawing algorithm of slope 𝑚 > 1, we have

If 𝑷𝒌 ≥ 𝟎, (𝒚𝒌+𝟏 = 𝒚𝒌 + 𝟏) & (𝒙𝒌+𝟏 = 𝒙𝒌 + 𝟏)

𝑷𝒌+𝟏 = 𝑷𝒌 + 𝟐𝒅𝒙 − 𝟐𝒅𝒚
If 𝑷𝒌 < 𝟎, (𝒚𝒌+𝟏 = 𝒚𝒌 + 𝟏) & (𝒙𝒌+𝟏 = 𝒙𝒌 )
𝑷𝒌+𝟏 = 𝑷𝒌 + 𝟐𝒅𝒙

k 𝑷𝒌 (𝒙𝒌+𝟏 , 𝒚𝒌+𝟏 )
0 5 (21, 16)
1 -5 (21, 17)
2 15 (22, 18)
3 5 (23, 19)
4 -5 (23, 20)
5 15 (24, 21)
6 5 (25, 22)
7 -5 (25, 23)
8 15 (26, 24)
9 5 (27, 25)
10 -5 (27, 26)

Advantages of Bresenham’s line algorithm (BLA) over DDA:

 In DDA algorithm each successive point is computed in floating point, so it requiredmore 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 atthe
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 BLAline 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.

Mid-point Circle Generation Algorithm: Circle is defined as a set of points that are all at a given
distance ‘r’ from the center position. Equation of a circle centered at (x,y) with radius ‘r’ is;
𝑥2 + 𝑦2 = 𝑟2
Calculation of circle point (x,y) in one octant yields the circle points for the other seven octants.
This is known as symmetry of circle.

(−𝑦, 𝑥) (𝑦, 𝑥)

(−𝑥, 𝑦)
(𝑥, 𝑦)

(−𝑥, −𝑦)
(𝑥, − 𝑦)

(−𝑦, −𝑥) (𝑦, − 𝑥)

Assume that we have just plotted point (𝑥𝑘 , 𝑦𝑘 ). The next point is a choice between (𝒙𝒌 + 𝟏, 𝒚𝒌 ) and
(𝒙𝒌 + 𝟏, 𝒚𝒌 − 𝟏). We would like to choose the point that is nearest to the actual circle.

Suppose,
𝑓 (𝑥, 𝑦) = 𝑥 2 + 𝑦 2 − 𝑟 2
Then,
If 𝑓 (𝑥, 𝑦) > 0 point lies outside the boundary
If 𝑓 (𝑥, 𝑦) = 0 point lies on the boundary
If 𝑓 (𝑥, 𝑦) < 0 point lies inside the boundary

Let’s calculate the midpoint of the coordinates (𝒙𝒌 + 𝟏, 𝒚𝒌 )and(𝒙𝒌 + 𝟏, 𝒚𝒌 − 𝟏).

𝑥𝑘 +1+𝑥𝑘 +1 𝑦𝑘 +𝑦𝑘 −1 1
2
,
2
= 𝑥𝑘 + 1, 𝑦𝑘 − 2

Our decision parameter is,

1
𝑃𝑘 = (𝑥𝑘 + 1)2 + (𝑦𝑘 − )2 − 𝑟 2
2
For K+1 iteration,
1
𝑃𝑘+1 = (𝑥𝑘+1 + 1)2 + (𝑦𝑘+1 − )2 − 𝑟 2
2
Now,
1 1
𝑃𝑘+1 - 𝑃𝑘 = (𝑥𝑘+1 + 1)2 - (𝑥𝑘 + 1)2 + (𝑦𝑘+1 − )2 - (𝑦𝑘 − )2 - 𝑟 2 + 𝑟 2
2 2
2 1 2 1
= (𝑥𝑘 + 1 + 1) - (𝑥𝑘 + 1 )2 + (𝑦𝑘+1 − ) - (𝑦𝑘 − )2 - 𝑟 2 + 𝑟 2
2 2

Where, (𝑥𝑘+1 ) = (𝑥𝑘 + 1)

1 1
= (𝑥𝑘 + 2)2 - (𝑥𝑘 + 1)2 + (𝑦𝑘+1 − )2 - (𝑦𝑘 − )2 - 𝑟 2 + 𝑟 2
2 2
1 1
= (𝑥𝑘 ) + 4 + 4𝑥𝑘 - 𝑥𝑘 - 1 - 2𝑥𝑘 + 𝑦𝑘+1 + - 𝑦𝑘+1 - 𝑦𝑘2 -
2 2 2
+ 𝑦𝑘
4 4
𝑃𝑘+1 = 𝑃𝑘 + 2𝑥𝑘 + 3 + 𝑦 2𝑘+1 - 𝑦𝑘+1 - 𝑦𝑘2 + 𝑦𝑘

Where, 𝑦𝑘+1 is either 𝑦𝑘 or 𝑦𝑘 − 1 depending on the sign of 𝑃𝑘 .

If 𝑷𝒌 < 𝟎 : (𝒚𝒌+𝟏 = 𝒚𝒌 )
𝑃𝑘+1 = 𝑃𝑘 + 2𝑥𝑘 + 3 + 𝑦 2𝑘 - 𝑦𝑘 - 𝑦𝑘2 + 𝑦𝑘
𝑷𝒌+𝟏 = 𝑷𝒌 + 𝟐𝒙𝒌 + 𝟑
If 𝑷𝒌 > 𝟎 : (𝒚𝒌+𝟏 = 𝒚𝒌 − 𝟏)
𝑷𝒌+𝟏 = 𝑷𝒌 + 𝟐𝒙𝒌 - 𝟐𝒚𝒌 + 𝟓

Initial decision parameter, (𝒙𝟎 , 𝒚𝟎 ) = (𝟎, 𝒓)

1
𝑃𝑜 = (𝑥0 + 1)2 + (𝑦0 − )2 − 𝑟 2
2
1 2
= (0 + 1 )2 + (𝑟 − ) − 𝑟2
2
1
= 1 + 𝑟2 + −𝑟− 𝑟 2
4
5
= –𝑟
4
𝑷𝒐 = 𝟏 − 𝒓 (Increment are integer, putting round value)

Algorithm:
Step1: Put x =0, y =r
Calculate p=1-r
Step2: Repeat steps while x ≤ y
Plot (x, y)
If (p<0)
Then set p = p + 2x + 3
Else
p = p + 2(x-y)+5
y =y - 1 (end if)
x =x+1 (end loop)
Step3: End

Q. Digitize the circle 𝒙𝟐 + 𝒚𝟐 = 𝟏𝟎𝟎 in first octant.

Solution:
Here,
 Center = (0, 0)
Radius (r) =10
Initial point = (0, r) = (0, 10)
Initial decision parameter P0 = 1 − 𝑟 = 1 − 10 = −9

From mid-point circle algorithm we have,

If P𝑘 < 0;
Plot (𝑥𝑘 + 1, 𝑦𝑘) and P𝑘+1 = P𝑘 + 2𝑥𝑘+1 + 3
P𝑘 ≥ 0;
Plot (𝑥𝑘 + 1, 𝑦𝑘 − 1) and P𝑘+1 = P𝑘 + 2𝑥𝑘+1 + 5 − 2𝑦𝑘+1

k 𝑷𝒌 (𝑥𝑘+1, 𝑦𝑘+1)
0 -9 (1, 10)
1 -6 (2, 10)
2 -1 (3, 10)
3 6 (4, 9)
4 -3 (5, 9)
5 8 (6, 8)
6 5 (7, 7)

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 the
same way as the center at origin then add the given circle center on each calculated
pixel.
Here,
Center = (3, 4)
Radius (r) =10
Initial point = (0, r) = (0, 10)
Initial decision parameter P0 = 1 − 𝑟 = 1 − 10 = −9

From mid-point circle algorithm we have;

If P𝑘 < 0;
Plot (𝑥𝑘 + 1, 𝑦𝑘) and P𝑘+1 = P𝑘 + 2𝑥𝑘+1 + 3
P𝑘 ≥ 0;
Plot (𝑥𝑘 + 1, 𝑦𝑘 − 1) and P𝑘+1 = P𝑘 + 2𝑥𝑘+1 + 5 − 2𝑦𝑘+1

k 𝒙𝒌 (𝑥𝑘+1, 𝑦𝑘+1) (𝑥𝑘+1, 𝑦𝑘+1)

at (0, 0) at (3, 4)
0 -9 (1, 10) (4, 14)
1 -6 (2, 10) (5, 14)
2 -1 (3, 10) (6, 14)
3 6 (4, 9) (7, 13)
4 -3 (5, 9) (8, 13)
5 8 (6, 8) (9, 12)
6 5 (7, 7) (10, 11)
Q. Digitize the circle with radius r =5 centered (2, 3).
Solution:
Here,
Center = (2, 3)
Radius (r) =5
Initial point = (0, r) = (0, 5)
Initial decision parameter P0 = 1 − 𝑟 = 1 − 5 = −4
From mid-point circle algorithm we have;
If P𝑘 < 0;
Plot (𝑥𝑘 + 1, 𝑦𝑘) and P𝑘+1 = P𝑘 + 2𝑥𝑘+1 + 3
P𝑘 ≥ 0;
Plot (𝑥𝑘 + 1, 𝑦𝑘 − 1) and P𝑘+1 = P𝑘 + 2𝑥𝑘+1 + 5 − 2𝑦𝑘+1

1st Other pixels (in …octant)

k P𝑘 (𝑥𝑘+1, 𝑦𝑘+1) 2nd 3rd 4th 5th 6th 7th 8th
0 -4 (1, 5) (5,1) (-5,1) (-1, 5) (-1, -5) (-5,-1) (5,-1) (1, -5)
1 -1 (2, 5) (5,2) (-5,2) (-2, 5) (-2, -5) (-5,-2) (5,-2) (2, -5)
2 4 (3, 4) (4,3) (-4,3) (-3, 4) (-3, -4) (-4,-3) (4,-3) (3, -4)
3 3 (4, 3) (3,4) (-3,4) (-4, 3) (-4, -3) (-3,-4) (3,-4) (4, -3)

Actual pixels
1st octant 2nd octant 3rd octant 4th octant 5th octant 6th octant 7th octant 8th octant
(3, 8) (7, 4) (-3, 4) (1, 8) (1, -2) (-3, 2) (7, 1) (3, -2)
(4, 8) (7, 5) (-3, 5) (0, 8) (0, -2) (-3, 1) (7, 1) (4, -2)
(5, 7) (6, 6) (-2, 6) (-1,7) (-1, -1) (-2, 0) (6, 0) (5, -1)
(6, 6) (5, 7) (-1, 7) (-2, 6) (-2, 0) (-1, -1) (5, -1) (6, 0)

Ellipse Generation Algorithm: Ellipse is an elongated circle. Therefore elliptical curves can be
generated by modifying circle drawing procedures to take into account the different dimensions of an
ellipse along the major and minor axes.
The equation of ellipse in standard form is given by, m<1
𝑥2 𝑦2 R1 m=-1
+ =1 (−𝑥, 𝑦) (𝑥, 𝑦)
𝑎2 𝑏2
R2 m>1
Where,
Semi-major axis = a = 𝑟𝑥
Semi-minor axis = b = 𝑟𝑦 (𝑥, −𝑦)
(−𝑥, −𝑦)
𝑥 2 𝑏2 +𝑦 2 𝑎2
=1
𝑎2𝑏2

𝑏2 𝑥 2 + 𝑎2 𝑦 2 − 𝑎2 𝑏2 = 0 ……………………….. I

So, the ellipse function centered at origin is,

𝑓 (𝑥, 𝑦) = 𝑏2 𝑥 2 + 𝑎2 𝑦 2 − 𝑎2 𝑏2
If,𝑓 (𝑥, 𝑦) < 0, the point lies inside the ellipse
𝑓(𝑥, 𝑦) = 0, the point lies on the ellipse
 𝑓(𝑥, 𝑦) > 0, the point lies outside the ellipse

Starting at (0, b), we take unit

steps in x-direction until we reach the
boundary between region 1 (R1) and
region 2 (R2). Then we switch to unit
steps in y-direction over the remainder
of curve in first quadrant. At each step
we need to test the value of the slope
of the curve.

Now, calculating the slope of

the ellipse,

Differentiating both sides of equation I w.r.t x

𝑑
(𝑏 2 𝑥 2 + 𝑎 2 𝑦 2 − 𝑎 2 𝑏 2 ) = 0
𝑑𝑥
𝑑(𝑦 2 ) 𝑑 (−𝑏2 𝑥 2 + 𝑎2 𝑏2 )
=
𝑑𝑥 𝑑𝑥 𝑎2
𝑑𝑦 −2𝑏2 𝑥
. 2𝑦 =
𝑑𝑥 𝑎2
2
𝑑𝑦 −2𝑏 𝑥
= =𝑚
𝑑𝑥 2𝑎2 𝑦

𝑑𝑦
At the boundary of the R1 & R2, = −1
𝑑𝑥
−2𝑏2 𝑥 = −2𝑎2 𝑦
Therefore, we move out of R1 when,
−𝟐𝒃𝟐 𝒙 ≥ −𝟐𝒂𝟐 𝒚

Region: 1 [(𝒙𝒌 + 𝟏, 𝒚𝒌 ), (𝒙𝒌 + 𝟏, 𝒚𝒌 − 𝟏)]

1
Midpoint:(𝑥𝑘 + 1, 𝑦𝑘 − )
2

From equation I,
𝑏2 𝑥 2 + 𝑎2 𝑦 2 − 𝑎2 𝑏2 =0
1
𝑏2 (𝑥𝑘 + 1)2 + 𝑎2 (𝑦𝑘 − )2 − 𝑎2 𝑏2 = 𝑃1𝑘 ……………………. II
2
For next step, i.e. k+1
1
𝑏2 (𝑥𝑘+1 + 1)2 + 𝑎2 (𝑦𝑘+1 − )2 − 𝑎2 𝑏2 = 𝑃1𝑘+1
2
1
𝑏 [(𝑥𝑘 + 1) + 1] + 𝑎 (𝑦𝑘+1 − )2 − 𝑎2 𝑏2 = 𝑃1𝑘+1 ……………… III
2 2 2
2

Subtracting equation II from III

2 2 2(
1 2 1 2
𝑏 [(𝑥𝑘 + 1) + 1] − 𝑏 𝑥𝑘 + 1 )2 + 𝑎 (𝑦𝑘+1 − ) − 𝑎 (𝑦𝑘 − ) − 𝑎2 𝑏2 + 𝑎2 𝑏2
2 2
2 2
= 𝑃1𝑘+1 − 𝑃1𝑘
 1 1
𝑏2 [(𝑥𝑘 + 1)2 + 1 + 2(𝑥𝑘 + 1)] − 𝑏2 (𝑥𝑘 2 + 1 + 2𝑥𝑘 ) + 𝑎2 (𝑦𝑘+1 2 + − 𝑦𝑘+1 ) − 𝑎2 (𝑦𝑘 2 +
4 4
− 𝑦𝑘 ) = 𝑃1𝑘+1 − 𝑃1𝑘
1 1
𝑏2 (𝑥𝑘 2 + 1 + 2𝑥𝑘 + 1 + 2𝑥𝑘 + 2 − 𝑥𝑘 2 − 1 − 2𝑥𝑘 ) + 𝑎2 (𝑦𝑘+1 2 + − 𝑦𝑘+1 − 𝑦𝑘 2 − + 𝑦𝑘 )
4 4
= 𝑃1𝑘+1 − 𝑃1𝑘
𝑏 2(𝑥𝑘 + 1) + 1] + 𝑎2 (𝑦𝑘+1 2 − 𝑦𝑘 2 − 𝑦𝑘+1 + 𝑦𝑘 ) = 𝑃1𝑘+1 − 𝑃1𝑘
2[

𝑃1𝑘+1 = 𝑃1𝑘 + 𝑏2 (2𝑥𝑘+1 + 1) + 𝑎2 (𝑦𝑘+1 2 − 𝑦𝑘 2 − 𝑦𝑘+1 + 𝑦𝑘 )

When 𝑷𝟏𝒌 < 𝟎 → 𝒚𝒌+𝟏 = 𝒚𝒌

𝑃1𝑘+1 = 𝑃1𝑘 + 𝑏2 (2𝑥𝑘+1 + 1) + 𝑎2 (𝑦𝑘 2 − 𝑦𝑘 2 − 𝑦𝑘 + 𝑦𝑘 )
𝑷𝟏𝒌+𝟏 = 𝑷𝟏𝒌 + 𝒃𝟐 𝟐𝒙𝒌+𝟏 + 𝒃𝟐

When 𝑷𝟏𝒌 ≥ 𝟎 → 𝒚𝒌+𝟏 = 𝒚𝒌 − 𝟏

𝑃1𝑘+1 = 𝑃1𝑘 + 𝑏2 2𝑥𝑘+1 + 𝑏2 +𝑎2 [(𝑦𝑘 − 1)2 − 𝑦𝑘 2 − (𝑦𝑘 − 1) + 𝑦𝑘 ]
𝑃1𝑘+1 = 𝑃1𝑘 + 𝑏2 2𝑥𝑘+1 + 𝑏2 +𝑎2 (𝑦𝑘 2 + 1 − 2𝑦𝑘 − 𝑦𝑘 2 − 𝑦𝑘 + 1 + 𝑦𝑘 )
𝑃1𝑘+1 = 𝑃1𝑘 + 𝑏2 2𝑥𝑘+1 + 𝑏2 −2𝑎2 (𝑦𝑘 − 1)
𝑷𝟏𝒌+𝟏 = 𝑷𝟏𝒌 + 𝒃𝟐 𝟐𝒙𝒌+𝟏 + 𝒃𝟐 −𝟐𝒂𝟐 𝒚𝒌+𝟏

Initial decision parameter: Put (0, b) in 𝑃1𝑘

1
𝑃10 = 𝑏2 (0 + 1)2 + 𝑎2 (𝑏 − )2 − 𝑎2 𝑏2
2
1
𝑃10 = 𝑏2 + 𝑎2 (𝑏2 + − 𝑏) − 𝑎2 𝑏2
4
2
𝑎
𝑃10 = 𝑏2 + 𝑎2 𝑏2 + − 𝑎2 𝑏 − 𝑎2 𝑏2
4
𝟐
𝒂
𝑷𝟏𝟎 = 𝒃𝟐 + − 𝒂𝟐 𝒃
𝟒
Region: 2 [(𝒙𝒌 , 𝒚𝒌 − 𝟏), (𝒙𝒌 + 𝟏, 𝒚𝒌 − 𝟏)]
1
Midpoint:(𝑥𝑘 + , 𝑦𝑘 − 1)
2

From equation I,
𝑏2 𝑥 2 + 𝑎2 𝑦 2 − 𝑎2 𝑏2 =0
1
𝑏2 (𝑥𝑘 + )2 + 𝑎2 (𝑦𝑘 − 1)2 − 𝑎2 𝑏2 = 𝑃2𝑘 ……………………. IV
2
For next step, i.e. k+1
1
𝑏2 (𝑥𝑘+1 + )2 + 𝑎2 (𝑦𝑘+1 − 1)2 − 𝑎2 𝑏2 = 𝑃2𝑘+1
2
1
𝑏 (𝑥𝑘+1 + )2 + 𝑎2 [(𝑦𝑘 − 1) − 1)]2 − 𝑎2 𝑏2 = 𝑃2𝑘+1 ……………… V
2
2

Subtracting equation IV from V

1 2 1 2
𝑏 (𝑥𝑘+1 + ) − 𝑏 (𝑥𝑘 + ) + 𝑎2 [(𝑦𝑘 − 1) − 1)]2 − 𝑎2 (𝑦𝑘 − 1)2 − 𝑎2 𝑏2 + 𝑎2 𝑏2
2 2
2 2
= 𝑃2𝑘+1 − 𝑃2𝑘
 1 1
𝑏2 (𝑥𝑘+1 2 + + 𝑥𝑘+1 ) − 𝑏2 (𝑥𝑘 2 + + 𝑥𝑘 ) + 𝑎2 [(𝑦𝑘 − 1)2 + 1 − 2(𝑦𝑘 − 1)] − 𝑎2 (𝑦𝑘 2 + 1
4 4
− 2𝑦𝑘 ) = 𝑃2𝑘+1 − 𝑃2𝑘
1 1
𝑏2 (𝑥𝑘+1 2 + + 𝑥𝑘+1 − 𝑥𝑘 2 − − 𝑥𝑘 ) + 𝑎2 (𝑦𝑘 2 + 1 − 2𝑦𝑘 + 1 − 2𝑦𝑘 + 2 − 𝑦𝑘 2 − 1 + 2𝑦𝑘 )
4 4
= 𝑃2𝑘+1 − 𝑃2𝑘
𝑏 (𝑥𝑘+1 + 𝑥𝑘+1 − 𝑥𝑘 2 − 𝑥𝑘 ) + 𝑎2 (−2𝑦𝑘+1 + 1) = 𝑃2𝑘+1 − 𝑃2𝑘
2 2

𝑏2 (𝑥𝑘+1 2 + 𝑥𝑘+1 − 𝑥𝑘 2 − 𝑥𝑘 ) − 𝑎2 2𝑦𝑘+1 + 𝑎2 = 𝑃2𝑘+1 − 𝑃2𝑘

𝑃2𝑘+1 = 𝑃2𝑘 + 𝑏2 (𝑥𝑘+1 2 + 𝑥𝑘+1 − 𝑥𝑘 2 − 𝑥𝑘 ) − 𝑎2 2𝑦𝑘+1 + 𝑎2

When 𝑷𝟐𝒌 > 𝟎 → 𝒙𝒌+𝟏 = 𝒙𝒌

𝑷𝟐𝒌+𝟏 = 𝑷𝟐𝒌 − 𝒂𝟐 𝟐𝒚𝒌+𝟏 + 𝒂𝟐

When 𝑷𝟐𝒌 ≤ 𝟎 → 𝒙𝒌+𝟏 = 𝒙𝒌 + 𝟏

𝑃2𝑘+1 = 𝑃2𝑘 + 𝑏2 [(𝑥𝑘 + 1)2 + 𝑥𝑘 + 1 − 𝑥𝑘 2 − 𝑥𝑘 )] − 𝑎2 2𝑦𝑘+1 + 𝑎2
𝑃2𝑘+1 = 𝑃2𝑘 + 𝑏2 (𝑥𝑘 2 + 1 + 2𝑥𝑘 + 𝑥𝑘 + 1 − 𝑥𝑘 2 − 𝑥𝑘 ) − 𝑎2 2𝑦𝑘+1 + 𝑎2
𝑃2𝑘+1 = 𝑃2𝑘 + 2𝑏2 (𝑥𝑘 + 1) − 𝑎2 2𝑦𝑘+1 + 𝑎2
𝑷𝟐𝒌+𝟏 = 𝑷𝟐𝒌 + 𝟐𝒃𝟐 𝒙𝒌+𝟏 − 𝒂𝟐 𝟐𝒚𝒌+𝟏 + 𝒂𝟐

Initial decision parameter:

Obtained by putting the last point of Region1 (R1) in the equation,
1
𝑃20 = 𝑏2 (𝑥𝑘 + )2 + 𝑎2 (𝑦𝑘 − 1)2 − 𝑎2 𝑏2
2
𝟏
𝑷𝟐𝟎 = 𝒃𝟐 (𝒙 + )𝟐 + 𝒂𝟐 (𝒚 − 𝟏)𝟐 − 𝒂𝟐 𝒃𝟐
𝟐

Algorithm:
1. Take input radius along x axis and y axis and obtain center of ellipse.
2. Initially, we assume ellipse to be centered at origin and the first point as: (x, y) = (0, b).
3. Obtain the initial decision parameter for region 1 as:
𝟐
𝒂𝟐
𝑷𝟏𝟎 = 𝒃 + − 𝒂𝟐 𝒃
𝟒
4. For every 𝑥𝑘 position in region 1 :
If 𝑷𝟏𝒌 < 𝟎 then the next point along the is (𝒙𝒌 + 𝟏, 𝒚𝒌 ) and 𝑷𝟏𝒌+𝟏 = 𝑷𝟏𝒌 + 𝒃𝟐 𝟐𝒙𝒌+𝟏 + 𝒃𝟐
Else, the next point is (𝒙𝒌+𝟏 , 𝒚𝒌 − 𝟏) and 𝑷𝟏𝒌+𝟏 = 𝑷𝟏𝒌 + 𝒃𝟐 𝟐𝒙𝒌+𝟏 + 𝒃𝟐 −𝟐𝒂𝟐 𝒚𝒌+𝟏
5. Obtain the initial value in region 2 using the last point (x, y) of region 1 as:
𝟏
𝑷𝟐𝟎 = 𝒃𝟐 (𝒙 + )𝟐 + 𝒂𝟐 (𝒚 − 𝟏)𝟐 − 𝒂𝟐 𝒃𝟐
𝟐
6. At each 𝑦𝑘 in region 2 starting at k =0 perform the following task.
If 𝑷𝟐𝒌 > 𝟎 the next point is (𝒙𝒌 , 𝒚𝒌 − 𝟏)and 𝑷𝟐𝒌+𝟏 = 𝑷𝟐𝒌 − 𝒂𝟐 𝟐𝒚𝒌+𝟏 + 𝒂𝟐
Else, the next point is (𝒙𝒌 + 𝟏, 𝒚𝒌 − 𝟏)and 𝑷𝟐𝒌+𝟏 = 𝑷𝟐𝒌 + 𝟐𝒃𝟐 𝒙𝒌+𝟏 − 𝟐𝒂𝟐 𝒚𝒌+𝟏 + 𝒂𝟐
𝟐
7. Repeat the steps for region 1 until (𝟐𝒃 𝒙 ≥ 𝟐𝒂𝟐 𝒚)

Q. Digitize the ellipse with 𝒓𝒙 = 𝟖, 𝒓𝒚 = 𝟔 and center at (3, 5).

 Solution:

given, 𝒓𝒙 = 𝒂 = 𝟖

𝒓𝒚 = 𝒃 = 𝟔

For region 1:
The initial point for the ellipse at origin
(𝑥0, 𝑦0) = (0, 𝑟𝑦) = (0, 6)
The initial decision parameter
𝒂𝟐 𝟖𝟐
𝑷𝟏𝟎 = 𝒃𝟐 + − 𝒂𝟐 𝒃 = 𝟔𝟐 + − 𝟔𝟐 ∗ 𝟖 = −𝟑𝟑𝟐
𝟒 𝟒

From midpoint algorithm, for region 1 we know,

If P1𝑘 < 0 then,
𝒙𝒌+𝟏 = 𝒙𝒌 + 𝟏, 𝒚𝒌+𝟏 = 𝒚𝒌 and 𝑷𝟏𝒌+𝟏 = 𝑷𝟏𝒌 + 𝒃𝟐 𝟐𝒙𝒌+𝟏 + 𝒃𝟐
If P1𝑘 ≥ 0 then,
𝒙𝒌+𝟏 = 𝒙𝒌 + 𝟏, 𝒚𝒌+𝟏 = 𝒚𝒌 − 𝟏 and 𝑷𝟏𝒌+𝟏 = 𝑷𝟏𝒌 + 𝒃𝟐 𝟐𝒙𝒌+𝟏 + 𝒃𝟐 −𝟐𝒂𝟐 𝒚𝒌+𝟏

k P1𝑘 (𝑥𝑘+1, 𝑦𝑘+1)

𝟐𝒃𝟐 𝒙𝒌+𝟏 𝟐𝒂𝟐 𝒚𝒌+𝟏
0 -332 (1, 6) 72 768
1 -224 (2, 6) 144 768
2 -44 (3, 6) 216 768
3 208 (4, 5) 288 640
4 -108 (5, 5) 360 640
5 288 (6, 4) 432 512
6 244 (7, 3) 504 384

Now, we move out of region 1 since 𝟐𝒃𝟐 𝒙𝒌+𝟏 > 𝟐𝒂𝟐 𝒚𝒌+𝟏
1st quadrant 2nd quadrant 3rd quadrant 4th quadrant
(4, 11) (-4, 11) (-4, -11) (4, -11)
(5, 11) (-5, 11) (-5, -11) (5, -11)
(6, 11) (-6, 11) (-6, -11) (6, -11)
(7, 10) (-7, 10) (-7, -10) (7, -10)
(8, 10) (-8, 10) (-8, -10) (8, -10)
(9, 9) (-9, 9) (-9, -9) (9, -9)
(10, 8) (-10, 8) (-10,- 8) (10, -8)

For region 2:
Initial point for region 2 (𝑥0, 𝑦0) = (7, 3)
The initial decision parameter is
𝟏
𝑷𝟐𝟎 = 𝒃𝟐 (𝒙 + )𝟐 + 𝒂𝟐 (𝒚 − 𝟏)𝟐 − 𝒂𝟐 𝒃𝟐
𝟐
= 36(7+0.5)2 + 64(3-1)2 - 64*36

From midpoint algorithm, for region 2 we know, If P2𝑘 > 0 then

𝒙𝒌+𝟏 = 𝒙𝒌 , 𝒚𝒌+𝟏 = 𝒚𝒌 − 𝟏 and 𝑷𝟐𝒌+𝟏 = 𝑷𝟐𝒌 − 𝒂𝟐 𝟐𝒚𝒌+𝟏 + 𝒂𝟐
 If 𝑝1𝑘 ≤ 0 then

𝒙𝒌+𝟏 = 𝒙𝒌 + 𝟏, 𝒚𝒌+𝟏 = 𝒚𝒌 − 𝟏 and 𝑷𝟐𝒌+𝟏 = 𝑷𝟐𝒌 + 𝟐𝒃𝟐 𝒙𝒌+𝟏 − 𝟐𝒂𝟐 𝒚𝒌+𝟏 + 𝒂𝟐

k P2𝑘 (𝑥𝑘+1, 𝑦𝑘+1)

𝟐𝒃𝟐 𝒙𝒌+𝟏 𝟐𝒂𝟐 𝒚𝒌+𝟏
0 -23 (8, 2) 576 256

1 361 (8, 1) 576 72

2 497 (8, 0) - -

Filling Algorithm: Polygon is an ordered list of vertices. For filling polygons with particular colors, you
need to determine the pixels falling on the border of the polygon and those which fall inside the polygon.
In this section, we will see how we can fill polygons using different techniques.

Area Filling Scan Line Algorithm: This algorithm works by intersecting scanline with polygon edges
and fills the polygon between pairs of intersections. It scans the polygons from left to right and locates the
points of the scan line with the polygon edges. Then between each intersection pair specified color is filled.

This few steps are followed to fill the area;

 Assume scan line start from the left and is
outside the polygon.
 When intersect an edge of polygon, start to
color each pixel (because now we’re inside
the polygon),
 When intersect another edge, stop coloring.
 Odd number of edges: inside
 Even number of edges: outside

When a scan line intersects an edge endpoint, it intersects two edges. Which creates two cases;
 Case A: edges are monotonically increasing or decreasing.
 Case B: edges reverse direction at endpoint.
In Case A, we should consider this as only ONE edge intersection. In the above figure edge E1 falls in this
case. In Case B, we should consider this as TWO edge intersections. In the above figure edge E1 falls in this
case.

Calculation take advantages of various coherence properties of a scene that is to be displayed. Coherence
is simply that the properties of one part of a scene are related in some way to other parts of the scene so
that the relationship can be used to reduce processing.
The slope of polygon boundary line can be express in terms of
the scan-line intersection coordinates scan line
Since the change in y coordinates between the two scan lines
is simply:

𝑦𝑘+1 − 𝑦𝑘 = 1
The x-intersection value 𝑥𝑘+1 on the upper scan line can be
determined from the x-intersection value 𝑥𝑘 on the preceding
scan line as;
1
𝑥𝑘+1 = 𝑥𝑘 +
𝑚
𝑑𝑥
𝑥𝑘+1 = 𝑥𝑘 +
𝑑𝑦

Active edges table (list): This table contains all those edges of the polygon that are intersected (crossed) by
the current scan-line. Which holds y[max] of the edge, x[min] of lower endpoint and 1/m (x increment).
Example:

Boundary Fill Algorithm: Boundary Fill Algorithm starts at a pixel inside the polygon to be filled and
paints the interior proceeding outwards towards the boundary. This algorithm works only if the color with
which the region has to be filled and the color of the boundary of the region are different.

Boundary Fill Algorithm is recursive in nature: It takes an interior point(x, y), a fill color, and a boundary
color as the input. The algorithm starts by checking the color of (x, y). If its color is not equal to the fill color
and the boundary color, then it is painted with the fill color and the function is called for all the neighbors
of (x, y). If a point is found to be of fill color or of boundary color, the function does not call its neighbors
and returns. This process continues until all points up to the boundary color for the region have been
tested.

The boundary fill algorithm can be implemented by 4-connected pixels or 8-connected pixels.

4-connected pixels: After painting a pixel, the function is called for four
neighboring points. These are the pixel positions that are right, left,
above, and below the current pixel. Areas filled by this method are
called 4-connected. Below procedure shows the recursive method for
filling a 4-connected area:

Algorithm:
Step 1 − Initialize the value of seed point seedx, seedy, fcolor and dcol.
Step 2 − Define the boundary values of the polygon.
Step 3 − Check if the current seed point is of default color, then repeat
the steps 4 and 5 till the boundary pixels reached.
If getpixel(x,y) = dcol, then repeat step 4 and 5
Step 4 − Change the default color with the fill color at the seed point.
setPixel(seedx, seedy, fcol)
Step 5 − Recursively follow the procedure with four neighborhood points.
FloodFill (seedx – 1, seedy, fcol, dcol)
FloodFill (seedx + 1, seedy, fcol, dcol)
FloodFill (seedx, seedy - 1, fcol, dcol)
FloodFill (seedx, seedy + 1, fcol, dcol)
Step 6 – Exit

8-connected pixels: More complex figures are filled using this

approach. The pixels to be tested are the 8 neighboring pixels, the pixel
on the right, left, above, below and the 4 diagonal pixels. Areas filled by
this method are called 8-connected. Below procedure shows the
recursive method for filling a 8-connected area:

Algorithm:
Step 1 − Initialize the value of seed point seedx, seedy, fcolor and dcol.
Step 2 − Define the boundary values of the polygon.
Step 3 − Check if the current seed point is of default color then repeat
then steps 4 and 5 till the boundary pixels reached
If getpixel(x,y) = dcol, then repeat step 4 and 5
Step 4 − Change the default color with the fill color at the seed point.
setPixel(seedx, seedy, fcol)
Step 5 − Recursively follow the procedure with four neighborhood points
FloodFill (seedx – 1, seedy, fcol, dcol)
 FloodFill (seedx + 1, seedy, fcol, dcol)
FloodFill (seedx, seedy - 1, fcol, dcol)
FloodFill (seedx, seedy + 1, fcol, dcol)
FloodFill (seedx – 1, seedy + 1, fcol, dcol)
FloodFill (seedx + 1, seedy + 1, fcol, dcol)
FloodFill (seedx + 1, seedy - 1, fcol, dcol)
FloodFill (seedx – 1, seedy - 1, fcol, dcol)
Step 6 − Exit

Flood Fill Algorithm: In this method, a point or seed which is inside region is selected. This point is
called a seed point. Then four connected approaches or eight connected approaches is used to fill with
specified color. This algorithm is used when boundary is of different color. We start from a specified pixel
(x,y) and reassign all pixel values that are currently set to given interior color with desire fill color.
Using Recursion: The idea is simple, we first replace the color of the current pixel, then recur for 4
surrounding points. The following is a detailed algorithm.

1. Initialize the value of seed point x, y, prevC and newC.

2. Define the boundary values of the polygon.

3. If x or y is outside the screen, then return.

4. Check if the current seed point is of previous color,

getpixel(x,y)==preC, then steps 5 and 6
5. Change the default color with the fill color at the seed point.
putpixel (x, y, newC)
6. Recursively follow the procedure with four neighborhood points
floodFillUtil(x+1, y, newC, preC);
floodFillUtil(x-1, y, newC, preC);
floodFillUtil(x, y+1, newC, preC);
floodFillUtil(x, y-1, newC, preC);

Flood-Fill Vs Boundary-Fill Algorithm:

Flood-fill Algorithm Boundary-fill Algorithm

It can process the image containing more than one It can only process the image containing
boundary colors. single boundary color.
Flood-fill algorithm is comparatively slower than the Boundary-fill algorithm is faster than the
Boundary-fill algorithm. Flood-fill algorithm.
In Flood-fill algorithm a random color can be used to In Boundary-fill algorithm Interior points are
paint the interior portion then the old one is replaced painted by continuously searching for the
with a new one. boundary color.
It requires huge amount of memory. Memory consumption is relatively low in
Boundary-fill algorithm.
Flood-fill algorithms are simple and efficient. The complexity of Boundary-fill algorithm is
high.