Computer Graphics

Week 5

Presentation By: Ms. Ifrah Mansoor

Presentation By: Ms.Ifrah Mansoor

Topics to be covered
• Frame Buffer Model
• 2D Scan Conversion
• Line Rasterization
• Basic Mathematics Rules
• Raster Algorithms and Graphics
• Use of Raster Graphics
• Types of Raster Graphics
• Line Drawing Algorithms, Working, Implementation

Presentation By: Ms.Ifrah Mansoor

Frame Buffer Model

Presentation By: Ms.Ifrah Mansoor

Presentation By: Ms.Ifrah Mansoor
Frame Buffer Model
• Picture definition is stored in a memory area called the refresh buffer or frame
buffer, where the term frame refers to the total screen area.

Working:
• This memory area holds the set of color values for the screen points. These
stored color values are then retrieved from the refresh buffer and used to control
the intensity of the electron beam as it moves from spot to spot across the
screen. In this way, the picture is “painted” on the screen one scan line at a time,
as demonstrated

Presentation By: Ms.Ifrah Mansoor

Frame Buffer Model
Frame Buffer is also called Color Buffer:
Each screen spot that can be illuminated by the electron beam is referred to as a
pixel or pel (shortened forms of picture element). Since the refresh buffer is used
to store the set of screen color values, it is also sometimes called a color buffer.

Also, other kinds of pixel information, besides color, are stored in buffer
locations, so all the different buffer areas are sometimes referred to collectively
as the “frame buffer.”

Home television sets and printers are examples of other systems using raster-scan
methods.

Presentation By: Ms.Ifrah Mansoor

Frame Buffer Model
Raster Systems and Frame Buffers:
• Raster systems are commonly characterized by their resolution, which is the number of pixel
positions that can be plotted.

• Another property of video monitors is aspect ratio, which is now often defined as the number of
pixel columns divided by the number of scan lines that can be displayed by the system.

• The number of bits per pixel in a frame buffer is sometimes referred to as either the depth of the
buffer area or the number of bit planes.

• A frame buffer with one bit per pixel is commonly called a bitmap, and a frame buffer with multiple
bits per pixel is a pixmap, but these terms are also used to describe other rectangular arrays, where
a bitmap is any pattern of binary values and a pixmap is a multicolor pattern.

Presentation By: Ms.Ifrah Mansoor

Presentation By: Ms.Ifrah Mansoor
DAC Convertor:
• Digital Data stored • Analog Data converted
by DAC for CRT display
in Frame Buffer after digitizing

Presentation By: Ms.Ifrah Mansoor

Single-bit Black & White Frame Buffer

Presentation By: Ms.Ifrah Mansoor

 • A frame buffer is a
large, contiguous piece
of computer memory.

• At a minimum there is
one memory bit for
each pixel.

• This amount of
memory is called a bit
plane. The picture is
built up in the frame
buffer one bit at a time

Presentation By: Ms.Ifrah Mansoor

 • Lookup Table is a
concept that is
brought in to achieve
greater color depth
by using lesser
amount of memory.

• A framebuffer stores
the color
representation for
every pixel on the
screen. Its size will
depend upon the
screen resolution.
Presentation By: Ms.Ifrah Mansoor
N-bit planes and Lookup Table

Presentation By: Ms.Ifrah Mansoor

Presentation By: Ms.Ifrah Mansoor
Lookup table for 3-bit plane of 3 primary
colors

Presentation By: Ms.Ifrah Mansoor

Presentation By: Ms.Ifrah Mansoor
Presentation By: Ms.Ifrah Mansoor
Presentation By: Ms.Ifrah Mansoor
2D Scan Conversion

Presentation By: Ms.Ifrah Mansoor

 2D Scan Conversion
• The process of representing continuous graphics object as a
collection of discrete pixels is known as scan conversion.

• This can be demonstrated by a line that is defined by its two

endpoints and the equation of that line.
• Also, by a circle that is represented by its mid-point and the
radius

Presentation By: Ms.Ifrah Mansoor

 • In computer graphics, we
need to represent
continuous graphics
objects using discrete
pixels. This process is
known as scan conversion.

• Every graphics system must

transform the primitives
like lines, circles, and
ellipses into a collection of
pixels
Presentation By: Ms.Ifrah Mansoor
Presentation By: Ms.Ifrah Mansoor
2D Scan Conversion
• Advantage of developing algorithms for scan conversion
1.Algorithms can generate graphics objects at a faster rate.
2.Using algorithms memory can be used efficiently.
3.Algorithms can develop a higher level of graphical objects.

Presentation By: Ms.Ifrah Mansoor

2D Scan Conversion
• Scan Conversion or Rasterization:
• The process of representing continuous graphics object as a collection of
discrete pixels by identifying their locations and setting them on is called
Scan Conversion.

• The process of determining which pixels will provide the best

approximation to the desired line is properly known as Rasterization.

Examples of 2D objects that can be scan converted:

Point, Line, Sector, Arc, Ellipse, Rectangle, Polygon, Characters,Filled Region

Presentation By: Ms.Ifrah Mansoor

2D Scan Conversion of a Point

Presentation By: Ms.Ifrah Mansoor

2D Scan Conversion of a Line

Presentation By: Ms.Ifrah Mansoor

2D Scan Conversion of a Line

In the following three algorithms, we refer the one point of line as

(x0,y0) and the second point of line as (x1, y1).

Algorithms are:
• The Naïve Line Drawing Algorithm
• DDA (Digital Differential Analyzer) Algorithm
• Bresenham’s Line Algorithm

Presentation By: Ms.Ifrah Mansoor

Line Rasterization

Presentation By: Ms.Ifrah Mansoor

 Jaggies is a term for
various kinds of
anomalies in computer
graphics outputs or
display imaging. The
result displays shape edges
composed of small squares
or “steps” instead of a
smoothly contoured line.
Presentation By: Ms.Ifrah Mansoor
Presentation By: Ms.Ifrah Mansoor
Presentation By: Ms.Ifrah Mansoor
Raster Algorithms

Presentation By: Ms.Ifrah Mansoor

What are Raster Algorithms?

Raster Algorithms is “The process of converting geometric

primitives into their discrete approximations”

Presentation By: Ms.Ifrah Mansoor

What are Raster Graphics?
Raster graphics, also called bitmap graphics, a type of digital image that
uses tiny rectangular pixels, or picture elements, arranged in a grid
formation to represent an image

Presentation By: Ms.Ifrah Mansoor

Usage of Raster Graphics?
• Raster graphics are best used for non-line art images; specifically
digitized photographs, scanned artwork or detailed graphics. Non-line
art images are best represented in raster form because these typically
include subtle chromatic gradations, undefined lines and shapes, and
complex composition

Presentation By: Ms.Ifrah Mansoor

Types of Raster Algorithms

Presentation By: Ms.Ifrah Mansoor

Line Drawing Algorithms
1. The Naïve Algorithm

Presentation By: Ms.Ifrah Mansoor

1. The Naïve Algorithm

Presentation By: Ms.Ifrah Mansoor

The Line Equation:

Presentation By: Ms.Ifrah Mansoor

1. The Naïve Algorithm
The naïve algorithm is a basic algorithm for line drawing. By using two endpoints and
line equation we find inner points of the line to be drawn.

Presentation By: Ms.Ifrah Mansoor

Presentation By: Ms.Ifrah Mansoor
Presentation By: Ms.Ifrah Mansoor
Hence, Naïve Algorithm can be briefly written as,

(Scan Conversion of a point)

Presentation By: Ms.Ifrah Mansoor

 As, m>1
So the case 2 is satisfied.
Find value of x by using
equation: x = y/m and
increment value of y at
each step.

Presentation By: Ms.Ifrah Mansoor

Hence, increase y and find x as m>1
Put y = 0 to 6, m=3

y x = y/m (x,y) Plot(x,y)

0 0 0 (0,0)
1 0.3 (0.3,1) (0,1)
Given in the
2 0.6 (0.6,2) (1,2) question that find x
3 1 (1,3) (1,3) up to 0 to 6 steps.

4 1.3 (1.3,4) (1,4) When steps are not

given, then repeat
5 1.6 (1.6,5) (2,5) the process until
endpoint is not
6 2 (2,6) (2,6) reached.
Presentation By: Ms.Ifrah Mansoor
Plot Points

Presentation By: Ms.Ifrah Mansoor

Presentation By: Ms.Ifrah Mansoor
• Limitations of Naïve Line Drawing Algorithm:
• The naive line drawing algorithm is inefficient and thus, slow on a
digital computer. Its inefficiency stems from the number of operations
and the use of floating-point calculations.

Presentation By: Ms.Ifrah Mansoor

Line Drawing Algorithms
2. The DDA Algorithm

Presentation By: Ms.Ifrah Mansoor

2. The DDA Algorithm
• The Digital Difference Analyzer (DDA) algorithm is used to draw lines
on a screen incrementally. The algorithm is called the Digital
Difference Analyzer because it interpolates points based on the
difference between the start and end points.

• It is an incremental method of scan conversion of line. In this method

calculation is performed at each step but by using results of previous
steps.

Presentation By: Ms.Ifrah Mansoor

 General DDA Algorithm
Step 1: Get the input of two end points (x1, y1) and (x2, y2).
Step 2: Calculate the differences 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(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(x,y);
Presentation By: Ms.Ifrah Mansoor
}
 2. The DDA Algorithm
• Procedure:
• Given the starting and ending coordinates of a line,
• DDA Algorithm attempts to generate the points between the starting
and ending coordinates.

Starting coordinates = (X1, Y1)

Ending coordinates = (X2, Y2)

Presentation By: Ms.Ifrah Mansoor

2. The DDA Algorithm
• Procedure:

Step-01:

Calculate ΔX, ΔY and m from the given input. These parameters are
calculated as-
• ΔX = X2 – X1
• ΔY =Y2 – Y1
• m = ΔY / ΔX

Presentation By: Ms.Ifrah Mansoor

 2. The DDA Algorithm
• Procedure:
• Step-02:

Find the number of steps or points in between the starting and ending
coordinates.

if (absolute (ΔX) > absolute (ΔY))

Steps = absolute (ΔX)
else
Steps = absolute (ΔY)

Presentation By: Ms.Ifrah Mansoor

 2. The DDA Algorithm
• Procedure:
Step-03:
Suppose the current point is (Xp, Yp)
and the next point is (Xp+1, Yp+1).
Find the next point by following the
below three cases

Presentation By: Ms.Ifrah Mansoor

 2. The DDA Algorithm
• Procedure:
• Step-04:

• Keep repeating Step-03 until the end point is reached or the number
of generated new points (including the starting and ending points)
equals to the steps count.

Presentation By: Ms.Ifrah Mansoor

 2. The DDA Algorithm
• Practice Problem for DDA:
• Problem-01:
Calculate the points between the starting point (5, 6) and ending point (8, 12)

• Solution-
Given-
• Starting coordinates = (X1, Y1) = (5, 6)
• Ending coordinates = (X2, Y2) = (8, 12)

Presentation By: Ms.Ifrah Mansoor

 2. The DDA Algorithm
• Practice Problem for DDA:
Step-01:
Calculate ΔX, ΔY and m from the given input.
• ΔX = X2 – X1 = 8 – 5 = 3
• ΔY =Y1 – Y1 = 12 – 6 = 6
• m = ΔY / ΔX = 6 / 3 = 2

Step-02:
Calculate the number of steps.
• As |ΔX| < |ΔY| = 3 < 6, so number of steps = ΔY = 6
Presentation By: Ms.Ifrah Mansoor
 2. The DDA Algorithm
• Practice Problem for
DDA:
Step-03:
• As M > 1, so case-03 is
satisfied.
• Now, Step-03 is
executed until Step-04 is
satisfied.

Presentation By: Ms.Ifrah Mansoor

 2. The DDA Algorithm
• Practice Problem for
DDA:
Step-04:
As endpoint (8,12) is
reached so the process is
stopped. Now, plot
achieved points.

Presentation By: Ms.Ifrah Mansoor

 2. The DDA Algorithm
• Home Practice Problem for DDA:
• Calculate the points between the starting point (5, 6) and
ending point (13, 10).

• Calculate the points between the starting point (1, 7) and

ending point (11, 17)

Presentation By: Ms.Ifrah Mansoor

2. The DDA Algorithm
• Advantages of DDA:
• It is a simple algorithm.
• It is easy to implement.
• It avoids using the multiplication operation which is costly in terms of time complexity.

• Disadvantages of DDA:
• There is an extra overhead of using round off( ) function.
• Using round off( ) function increases time complexity of the algorithm.
• Resulted lines are not smooth because of round off( ) function.
• The points generated by this algorithm are not accurate.
• Successive addition of floating points increment causes calculated pixels to drift away
from the true line.
Presentation By: Ms.Ifrah Mansoor
Line Drawing Algorithms
3. The Bresenhem’s Algorithm

Presentation By: Ms.Ifrah Mansoor

3. The Bresenhem’s Algorithm
• This algorithm is used for scan converting a line. It was developed by
Bresenham.

• It is an efficient method because it involves only integer addition,

subtractions, and multiplication operations. These operations can be
performed very rapidly so lines can be generated quickly.

• In this method, next pixel selected is that one who has the least
distance from true line.

Presentation By: Ms.Ifrah Mansoor

 3. The Bresenhem’s Algorithm
• Assume a pixel P1'(x1',y1'),then select one pixel position at a time in the horizontal
direction toward P2'(x2',y2’).

Then the next pixel is

1.Either the one to its right (lower-bound for the line)
2.One top its right and up (upper-bound for the line)

The line is best approximated by those pixels that fall the least distance from the
path between P1',P2'
Presentation By: Ms.Ifrah Mansoor
 3. The Bresenhem’s Algorithm
• Hence, the Bresenhems algorithm uses a decision parameter (Pk) which
calculates the distance between true line and scan converted pixels and selects
those pixels who have nearest distance from the true line.

• Thus, Bresenhem reduces the drawbacks of DDA algorithm by avoiding floating

point operations by using decision parameter.

Presentation By: Ms.Ifrah Mansoor

General Bresenhem’s Algorithm

Presentation By: Ms.Ifrah Mansoor

 General Bresenhem’s Algorithm
Briefly, Bresenhem algorithm can be written as,

Presentation By: Ms.Ifrah Mansoor

3. The Bresenhem’s Algorithm
• Procedure:
• Given the starting and ending coordinates of a line,
• Bresenhems Algorithm attempts to generate the points between the
starting and ending coordinates.

Starting coordinates = (X1, Y1)

Ending coordinates = (X2, Y2)

Presentation By: Ms.Ifrah Mansoor

3. The Bresenhem’s Algorithm
Procedure:
Step-01:

Calculate ΔX and ΔY from the given input. These parameters are calculated as-
• ΔX = X2 – X1
• ΔY =Y2 – Y1

Step-02:

Calculate the decision parameter Pk. It is calculated as-

• Pk = 2ΔY – ΔX

Presentation By: Ms.Ifrah Mansoor

3. The Bresenhem’s Algorithm
Procedure:
Step-03:
Suppose the current point is (Xk, Yk) and the next point is (Xk+1, Yk+1).
Find the next point depending on the value of decision parameter Pk.
Follow the below two cases-

Presentation By: Ms.Ifrah Mansoor

3. The Bresenhem’s Algorithm
Procedure:
Step-04:

Keep repeating Step-03 until the end point is reached or number of iterations equals
to (ΔX-1) times.

Presentation By: Ms.Ifrah Mansoor

3. The Bresenhem’s Algorithm
Practice Problem for Bresenhem Algorithm:
Problem-01:

Calculate the points between the starting coordinates (9, 18) and ending coordinates
(14, 22)

Solution-

Given-
•Starting coordinates = (X1, Y1) = (9, 18)
•Ending coordinates = (X2, Y2) = (14, 22)

Presentation By: Ms.Ifrah Mansoor

3. The Bresenhem’s Algorithm
Practice Problem for Bresenhem Algorithm:
Step-01:

Calculate ΔX and ΔY from the given input.

• ΔX = X2 – X1 = 14 – 9 = 5
• ΔY =Y2 – Y1 = 22 – 18 = 4

Step-02:

Calculate the decision parameter.

• Pk = 2ΔY – ΔX
=2x4–5=3
So, decision parameter Pk = 3

Presentation By: Ms.Ifrah Mansoor

3. The Bresenhem’s Algorithm
Practice Problem for Bresenhem Algorithm:
Step-03:

As Pk >= 0, so case-02 is satisfied.

Thus,
• Pk+1 = Pk + 2ΔY – 2ΔX = 3 + (2 x 4) – (2 x 5) = 1
• Xk+1 = Xk + 1 = 9 + 1 = 10
• Yk+1 = Yk + 1 = 18 + 1 = 19

Similarly, Step-03 is executed until the end point is reached or number of iterations
equals to 4 times.
(Number of iterations = ΔX – 1 = 5 – 1 = 4)
Presentation By: Ms.Ifrah Mansoor
3. The Bresenhem’s Algorithm
Practice Problem for Bresenhem
Algorithm:
Step-04:
Step-03 is executed until the end point
is reached or number of iterations
equals to 4 times.

Hence, the endpoint is reached. Now

Plot (Xk+1 , Yk+1 ) values.

Presentation By: Ms.Ifrah Mansoor

3. The Bresenhem’s Algorithm
Practice Problem for Bresenhem Algorithm:
Now Plot (Xk+1 , Yk+1 ) values.

Presentation By: Ms.Ifrah Mansoor

3. The Bresenhem’s Algorithm
Home Practice Problem for Bresenhem Algorithm:

Calculate the points between the starting coordinates (20, 10)

and ending coordinates (30, 18)

Presentation By: Ms.Ifrah Mansoor

3. The Bresenhem’s Algorithm
Advantages of Bresenham Line Drawing Algorithm-
•It is easy to implement.
•It is fast and incremental.
•It executes fast but less faster than DDA Algorithm.
•The points generated by this algorithm are more accurate than DDA Algorithm.
•It uses fixed points only.

Disadvantages of Bresenham Line Drawing Algorithm-

•Though it improves the accuracy of generated points but still the resulted line is not smooth.
•This algorithm is for the basic line drawing.
•It can not handle diminishing jaggies.

Presentation By: Ms.Ifrah Mansoor

Implementation of Algorithms in
C++ using OpenGL

Presentation By: Ms.Ifrah Mansoor

 The DDA Algorithm
#include<Windows.h>
// first include Windows.h header file which is required
#include<stdio.h>
#include<gl/GL.h> // GL.h header file
#include<gl/GLU.h> // GLU.h header file
#include<gl/glut.h> // glut.h header file from freeglut\include\GL folder
#include<conio.h>
#include<stdio.h>
#include<math.h>
#include<string.h>
#include <iostream>
using namespace std;

Presentation By: Ms.Ifrah Mansoor

The DDA Algorithm int steps, dx = x2 - x1, dy = y2 - y1;
if (abs(dx) > abs(dy)) {
steps = abs(dx);

void line() { }
else {
glColor3f(1.0, 0.0, 0.0);
steps = abs(dy);
glPointSize(2.0);
}
int x1, y1, x2, y2; float xInc = (float)dx / (float)steps;
cout << "Enter starting point (x, y)\n"; float yInc = (float)dy / (float)steps;
cout << "Enter x1: "; float x = x1, y = y1;

cin >> x1; glBegin(GL_POINTS);

for (int i = 0; i < steps; i++) {
cout << "Enter y1: ";
glVertex2i(x, y);
cin >> y1;
x += xInc;
cout << "Enter end point (x, y)\n "; y += yInc;
cout << "Enter x2: "; }
cin >> x2; glEnd();
cout << "Enter y2: "; glFlush();
}
cin >> y2;
Presentation By: Ms.Ifrah Mansoor
The DDA Algorithm
int main(int argc, char** argv) {
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(500, 500);
glutInitWindowPosition(500, 500);
glutCreateWindow("DDA Line Drawing OpenGL");

glClearColor(1.0, 1.0, 1.0, 1.0);

glClear(GL_COLOR_BUFFER_BIT);
gluOrtho2D(0, 500, 0, 500);
glMatrixMode(GL_PROJECTION);
glViewport(0, 0, 500, 500);

glutDisplayFunc(line);
glutMainLoop();
return 0;
}

Presentation By: Ms.Ifrah Mansoor

The DDA Algorithm
Output:

Presentation By: Ms.Ifrah Mansoor

The Bresenhem’s Algorithm
#include<Windows.h> // first include Windows.h header file which is required
#include<stdio.h>
#include<gl/GL.h> // GL.h header file
#include<gl/GLU.h> // GLU.h header file
#include<gl/glut.h> // glut.h header file from freeglut\include\GL folder
#include<conio.h>
#include<stdio.h>
#include<math.h>
#include<string.h>
#include <iostream>
using namespace std;

void draw_pixel(int x, int y) {

glBegin(GL_POINTS);
glVertex2i(x, y);
glEnd();
glFlush();
}
Presentation By: Ms.Ifrah Mansoor
The Bresenhem’s Algorithm if (dx < 0) dx = -dx;
void line() { if (dy < 0) dy = -dy;
glColor3f(1.0, 0.0, 0.0); incx = 1;
glPointSize(2.0); if (x2 < x1) incx = -1;
int x1, y1, x2, y2; incy = 1;
cout << "Enter starting point (x, y)\n";
if (y2 < y1) incy = -1;
cout << "Enter x1: ";
x = x1; y = y1;
cin >> x1;
if (dx > dy) {
cout << "Enter y1: ";
draw_pixel(x, y);
cin >> y1;
e = 2 * dy - dx;
cout << "Enter end point (x, y)\n ";
inc1 = 2 * (dy - dx);
cout << "Enter x2: ";
inc2 = 2 * dy;
cin >> x2;
for (i = 0; i < dx; i++) {
cout << "Enter y2: ";
cin >> y2;
if (e >= 0) {
int dx, dy, i, e; y += incy;
int incx, incy, inc1, inc2; e += inc1;
int x, y; }
dx = x2 - x1;
dy = y2 - y1;
Presentation By: Ms.Ifrah Mansoor
The Bresenhem’s Algorithm
else else
e += inc2; e += inc2;
x += incx; y += incy;
draw_pixel(x, y); draw_pixel(x, y);
} }
} }
else { }
draw_pixel(x, y);
e = 2 * dx - dy;
inc1 = 2 * (dx - dy);
inc2 = 2 * dx;
for (i = 0; i < dy; i++) {
if (e >= 0) {
x += incx;
e += inc1;
}
Presentation By: Ms.Ifrah Mansoor
The Bresenhem’s Algorithm
int main(int argc, char** argv) {
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE |
GLUT_RGB);
glutInitWindowSize(500, 500);
glutInitWindowPosition(100, 100);
glutCreateWindow("Bresenhems Line Drawing
OpenGL");
glClearColor(1.0, 1.0, 1.0, 1.0);
glClear(GL_COLOR_BUFFER_BIT);
gluOrtho2D(0, 300, 0, 300);
glMatrixMode(GL_PROJECTION);
glViewport(0, 0, 500, 500);

glutDisplayFunc(line);
glutMainLoop();
return 0;
} Presentation By: Ms.Ifrah Mansoor
The Bresenhem’s Algorithm
Output:

Presentation By: Ms.Ifrah Mansoor

THANKYOU ☺

Presentation By: Ms.Ifrah Mansoor