raster algorithm.pdf

RASTER ALGORITHMS
oRaster Displays
o Monitor Intensities
o RGB colour
oLine Drawing
o Simple Anti-aliasing
o Image Capture and Storage
oGraph Algorithms

RASTER DISPLAYS
Displays that use the raster scan technique for assembling an
electronic image on a screen by drawing a raster of horizontal lines.
 Image represented by a rectangular grid of pixels (picture elements)
 Image stored in a frame buffer. Which are then retrieved from the frame buffer
and “painted” on the screen one row (scan line) at a time
 electron gun(s) continually scanning in a regular pattern (line by line across
entire screen)

RASTER DISPLAYS
Cathode Ray Tube
The primary output device in a graphical system is the video monitor. The main
element of a video monitor is the Cathode Ray Tube

RASTER DISPLAYS
CRT, flat panel, television (rect array of pixels)
Printers (scanning: no physical grid but print ink)
Digital cameras (grid light-sensitive pixels)
Scanner (linear array of pixels swept across)
Store image as 2D array (of RGB [sub-pixel]values)
In practice, there may be resolution mismatch, resize across platforms
(phone, screen, large TV)
Displays and Raster Devices :

Intensity usually stored with 8 bits [0…255]
HDR can be 16 bits or more [0…65535]
Resolution-independent use [0…1] intermediate
Monitor takes input value [0…1] outputs intensity
Non-zero intensity for 0, black level even when off
1.0 is maximum intensity (output 1.0/0.0 is contrast)
Non-linear response (as is human perception)
0.5 may map to 0.25 times the response of 1.0
Gamma characterization and gamma correction
Monitor Intensities
MONITOR INTENSITIES

RGB COLOUR
The RGB color model is one of the most widely used color representation method
in computer graphics. It uses a color coordinate system with three primary colors:

RGB COLOUR
The following formulas summarize the
conversion between the two color
models:

LINE DRAWING
In any 2-Dimensional plane if we connect two points (x0, y0) and
(x1, y1), we get a line segment. But in the case of computer
graphics we can not directly join any two coordinate points, for
that we should calculate intermediate point’s coordinate and put a
pixel for each intermediate point, of the desired color with help of
functions like putpixel(x, y, K) in C, where (x,y) is our co-
ordinate and K denotes some color.

LINE DRAWING
Important Algorithm:
DDA Algorithm (Digital differential analyzer)
Bresenham’s Line-Drawing Algorithm
A line connects two points. It is a basic element in graphics. To draw a line, you
need two points between which you can draw a line.

LINE DRAWING
DDA Algorithm
Step 1 − Get the input of two end points (X0,Y0) and (X1, Y1).
Step 2 − Calculate the difference between two end points.
dx = X1 - X0
dy = Y1 - Y0
Step 3 − Based on the calculated difference in step-2, you need to
identify the number of steps to put pixel. If dx > dy, then you
need more steps in x coordinate; otherwise in y coordinate.
if (absolute(dx) > absolute(dy))
Steps = absolute(dx);
else
Steps = absolute(dy);

Step 4 − Calculate the increment in x coordinate and y coordinate.
Xincrement = dx / (float) steps;
Yincrement = dy / (float) steps;
Step 5 − Put the pixel by successfully incrementing x and y
coordinates accordingly and complete the drawing of the line.
LINE DRAWING
for(int v=0; v < Steps; v++)
{
x = x + Xincrement;
y = y + Yincrement;
putpixel(Round (x), Round (y));
}

LINE DRAWING
DDA Algorithm:
Consider one point of the line as (X0,Y0) and the second point of the line as (X1,Y1).
// calculate dx , dy
dx = X1 - X0;
dy = Y1 - Y0;
// Depending upon absolute value of dx & dy
// choose number of steps to put pixel as
// steps = abs(dx) > abs(dy) ? abs(dx) : abs(dy)
steps = abs(dx) > abs(dy) ? abs(dx) : abs(dy);
// calculate increment in x & y for each steps
Xinc = dx / (float) steps;
Yinc = dy / (float) steps;
// Put pixel for each step
X = X0;
Y = Y0;
for (int i = 0; i <= steps; i++)
{
putpixel (X,Y,WHITE);
X += Xinc;
Y += Yinc;
}

Example: If a line is drawn from (2, 3) to (6, 15) with use of DDA. How
many points will needed to generate such line?
Solution: P1 (2,3) P11 (6,15)
x1=2
y1=3
x2= 6
y2=15
dx = 6 - 2 = 4
dy = 15 - 3 = 12
m =
For calculating next value of x takes x = x + 1/m
LINE DRAWING

LINE DRAWING
Disadvantage of DDA Algorithm:
 Floating point arithmetic in DDA algorithm is still time consuming.
 The algorithm is orientation dependent. Hence end point accuracy is poor.
 Although DDA is fast, the accumulation of round-off error in successive
additions of floating point increment, however can cause the calculation pixel
position to drift away from the true line path for long line segment.
 Rounding-off in DDA is time consuming.
 It produces Aliasing effect: - The exact location / exact line is not found we
get a zig-zag line.
 It is the simplest algorithm and it does not require special skills for
implementation.
 It is a faster method for calculating pixel positions than the direct use
of equation y=mx + b.
Advantages of DDA algorithm:

Bresenham’s Line-Drawing Algorithm
LINE DRAWING
The idea of Bresenham’s algorithm is to avoid floating point multiplication
and addition to compute mx + c, and then computing round value of (mx +
c) in every step. In Bresenham’s algorithm, we move across the x-axis in
unit intervals.
 We always increase x by 1, and we choose about next y, whether we need to
go to y+1 or remain on y. In other words, from any position (Xk, Yk) we
need to choose between (Xk + 1, Yk) and (Xk + 1, Yk + 1).
 We would like to pick the y value (among Yk + 1 and Yk) corresponding to
a point that is closer to the original line.

Step1: Start Algorithm
Step2: Declare variable x1,x2,y1,y2,d,i1,i2,dx,dy
Step3: Enter value of x1,y1,x2,y2
Where x1,y1are coordinates of starting point
And x2,y2 are coordinates of Ending point
Step4: Calculate dx = x2-x1
Calculate dy = y2-y1
Calculate i1=2*dy
Calculate i2=2*(dy-dx)
Calculate d=i1-dx
Step5: Consider (x, y) as starting point and xendas maximum possible value of x.
LINE DRAWING
If dx < 0
Then x = x2
y = y2
xend=x1
elseIf dx > 0
Then x = x1
y = y1
xend=x2

LINE DRAWING
Step6: Generate point at (x,y)coordinates.
Step7: Check if whole line is generated.
If x > = xend
Stop.
Step8: Calculate co-ordinates of the next pixel
Step9: Increment x = x + 1
Step10: Draw a point of latest (x, y) coordinates
Step11: Go to step 7
Step12: End of Algorithm
If d < 0
Then d = d + i1
If d ≥ 0
Then d = d + i2
Increment y = y + 1

LINE DRAWING
Example: Starting and Ending position of the line are (1, 1) and (8, 5).Find
intermediate points.
Solution: x1=1
y1=1
x2=8
y2=5
dx= x2-x1=8-1=7
dy=y2-y1=5-1=4
I1=2* ∆y=2*4=8
I2=2*(∆y-∆x)=2*(4-7)=-6
d = I1-∆x=8-7=1
x y d=d+I1 or I2
1 1 d+I2=1+(-6)=-5
2 2 d+I1=-5+8=3
3 2 d+I2=3+(-6)=-3
4 3 d+I1=-3+8=5
5 3 d+I2=5+(-6)=-1
6 4 d+I1=-1+8=7
7 4 d+I2=7+(-6)=1

x y d=d+I1 or I2
1 1 d+I2=1+(-6)=-5
2 2 d+I1=-5+8=3
3 2 d+I2=3+(-6)=-3
4 3 d+I1=-3+8=5
5 3 d+I2=5+(-6)=-1
6 4 d+I1=-1+8=7
7 4 d+I2=7+(-6)=1
LINE DRAWING

The Bresenham line algorithm has the following advantages:
– An fast incremental algorithm
– Uses only integer calculations
The disadvantage of such a simple algorithm is that it is meant for basic line
drawing. Resultant line is not very smooth.
LINE DRAWING
Advantages and disadvantages of Bresenham line algorithm:

• Clipping: In computer graphics our screen act as a 2-D coordinate system. it is
not necessary that each and every point can be viewed on our viewing pane(i.e.
our computer screen). We can have viewpoints, which lie in particular range
(0,0) and (Xmax, Ymax). So, clipping is a procedure that identifies those
portions of a picture that are either inside or outside of our viewing pane.
• In case of point clipping, we only show/print points on our window which are
in range of our viewing pane, others points which are outside the range are
discarded.
Point Clipping Algorithm in Computer Graphics

Point Clipping Algorithm:
• Get the minimum and maximum coordinates of both viewing pane.
• Get the coordinates for a point.
• Check whether given input lies between minimum and maximum coordinate of
viewing pane.
• If yes display the point which lies inside the region otherwise discard it.
Point Clipping Algorithm in Computer Graphics

• Given a set of lines and a rectangular area of interest, the task is to remove lines
which are outside the area of interest and clip the lines which are partially
inside the area.
• Cohen-Sutherland algorithm divides a two-dimensional space into 9 regions
and then efficiently determines the lines and portions of lines that are inside the
given rectangular area.
• The algorithm can be outlines as follows:-
Line Clipping (Cohen–Sutherland Algorithm)
Nine regions are created, eight "outside" regions and one "inside" region.
For a given line extreme point (x, y), we can quickly find its region's four
bit code. Four bit code can be computed by comparing x and y with four
values (x_min, x_max, y_min and y_max).
If x is less than x_min then bit number 1 is set.
If x is greater than x_max then bit number 2 is set.
If y is less than y_min then bit number 3 is set.
If y is greater than y_max then bit number 4 is set

There are three possible cases for
any given line.
• Completely inside the given
rectangle : Bitwise OR of
region of two end points of line
is 0 (Both points are inside the
rectangle)
• Completely outside the given rectangle : Both endpoints share at least one outside region
which implies that the line does not cross the visible region. (bitwise AND of endpoints !=
0).
• Partially inside the window : Both endpoints are in different regions. In this case, the
algorithm finds one of the two points that is outside the rectangular region. The intersection
of the line from outside point and rectangular window becomes new corner point and the
algorithm repeats

Step 1 : Assign a region code for two endpoints of given line.
Step 2 : If both endpoints have a region code 0000
then given line is completely inside.
Step 3 : Else, perform the logical AND operation for both region codes.
Step 3.1 : If the result is not 0000, then given line is completely
outside.
Step 3.2 : Else line is partially inside.
Step 3.2.1 : Choose an endpoint of the line
that is outside the given rectangle.
Step 3.2.2 : Find the intersection point of the
rectangular boundary (based on region code).
Step 3.2.3 : Replace endpoint with the intersection point
and update the region code.
Step 3.2.4 : Repeat step 2 until we find a clipped line either
trivially accepted or trivially rejected.
Step 4 : Repeat step 1 for other lines
Pseudo Code:

Polygon Clipping | Sutherland–Hodgman Algorithm
A convex polygon and a convex clipping area are given. The task is to clip polygon edges
using the Sutherland–Hodgman Algorithm. Input is in the form of vertices of the polygon
in clockwise order.
Input : Polygon : (100,150), (200,250), (300,200)
Clipping Area : (150,150), (150,200), (200,200), (200,150) i.e. a Square
Output : (150, 162) (150, 200) (200, 200) (200, 174)

SIMPLE ANTI ALIASING
Anti Aliasing concept:
Suppose we want to draw a line from point(1 , 1) to point(8 , 4) with rectangular edges
. The ideal line would be the one shown in figure A . Since we want to display it on
screen we cannot use that . Line needs to go through a process
called Rasterization which would determine color of individual pixels. Later we have
to perform anti-aliasing or line smoothing.
The result produced by line drawing algorithm is show in figure B.
Fig A. is the ideal line and Fig B. is resultant line from line drawing algorithm. The
aliasing effect is the appearance of jagged edges or “jaggies” in a rasterized image (an
image rendered using pixels)

Methods of Antialiasing (AA) –
Aliasing is removed using four methods:
Using high-resolution display: One way to reduce aliasing effect and increase sampling
rate is to simply display objects at a higher resolution. Using high resolution, the jaggies
become so small that they become indistinguishable by the human eye.
Post filtering (Supersampling):
In this method, we are increasing the sampling resolution by treating the screen as if it’s made
of a much more fine grid, due to which the effective pixel size is reduced.
Pre-filtering (Area Sampling):
In area sampling, pixel intensities are calculated proportional to areas of overlap of each pixel
with objects to be displayed. Here pixel color is computed based on the overlap of scene’s
objects with a pixel area
Pixel phasing:
It’s a technique to remove aliasing. Here pixel positions are shifted to nearly approximate
positions near object geometry.
SIMPLE ANTI ALIASING

© 2002 R. C. Gonzalez & R. E. Woods
y (intensity values)
Generating a digital image. (a)
Continuous image. (b) A
scaling line from A to B in the
continuous image, used to
illustrate the concepts of
sampling and quantization. (c)
sampling and quantization. (d)
Digital scan line.
a b
c d

© 2002 R. C. Gonzalez & R. E. Woods
(a) Continuous image
projected onto a sensor array.
(b) Result of image sampling
and quantization.
a b

0 0 0 75 75 75 128 128 128 128
0 75 75 75 128 128 128 255 255 255
75 75 75 200 200 200 255 255 255 200
128 128 128 200 200 255 255 200 200 200
128 128 128 255 255 200 200 200 75 75
175 175 175 225 225 225 75 75 75 100
175 175 100 100 100 225 225 75 75 100
75 75 75 35 35 35 0 0 0 35
35 35 35 0 0 0 35 35 35 75
75 75 75 100 100 100 200 200 200 200

Sampling
1024
512
256
128
64
32

Sampling
1024 512 256
128 64 32

Quantization
8-bit 7-bit 6-bit 5-bit
4-bit 3-bit 2-bit 1-bit

IMAGE CAPTURE AND STORAGE
CCD(Charge Couple Device) Vs CMOS(Complementary Metal Oxide Semiconductor)
1. It transport the charge across the chip and reads it at one
corner of the array.
2. Analogue signal. Need AD converter
3. Not flexible
4. It creates high quality of image and less prone to noise
5. Consumes more power
6. Expensive
7. Fill factor (percentage of a pixel devoted in collecting the
light): High
1. Several transistors are used at each pixel to amplify and
move the charge using traditional wires.
2. Digital Signal
3. Flexible in capturing the image data as each pixel is read
using individual transistor.
4. Quality of image is ok but more prone to noise.
5. Consumes less power
6. Cost effective
7. Less

Image capture
a variety of devices can be used:
cameras
area CCD
scanners
line CCD in a flatbed scanner
spot detector in a drum scanner

Most computer images are stored in raster graphics formats or compressed
variations, including GIF, JPEG, and PNG, which are popular on the World Wide
Web.
Three-dimensional voxel raster graphics are employed in video games and are
also used in medical imaging such as MRI scanners.

Given coordinate of two points A(x1, y1) and B(x2, y2) such that x1 < x2 and y1 < y2.
The task to find all the intermediate points required for drawing line AB on the
computer screen of pixels. Note that every pixel has integer coordinates.
Mid-Point Line Generation Algorithm
How to find if a point is above a line or below a line?
Below are some assumptions to keep algorithm simple.
We draw line from left to right.
x1 < x2 and y1< y2
Slope of the line is between 0 and 1. We draw a line from lower left to upper right.

Cases other than above assumptions can be
handled using reflection.
Let us consider a line y = mx + B.
We can re-write the equation as :
y = (dy/dx)x + B or
(dy)x + B(dx) - y(dx) = 0
Let F(x, y) = (dy)x - y(dx) + B(dx) -----(1)
Let we are given two end points of a line
(under above assumptions)
 For all points (x,y) on the line, the
solution to F(x, y) is 0.
 For all points (x,y) above the line, F(x,
y) result in a negative number.
 And for all points (x,y) below the line,
F(x, y) result in a positive number.
This relationship is used to
determine the relative
position of M
M = (Xp+1, Yp+1/2)
So our decision parameter
d is,
d = F(M) = F(Xp+1, Yp+1/2)

How to efficiently find new value of d from its old value?
For simplicity, let as write F(x, y) as ax + by + c.
Where a = dy
b = -dx
c = B*dx
We got these values from above equation (1)
Case 1: If E is chosen then for next point :
dnew = F(Xp+2, Yp+1/2)
= a(Xp+2) + b(Yp+1/2) + c
dold = a(Xp+1) + b(Yp+1/2) + c
Difference (Or delta) of two distances:
DELd = dnew – dold
= a(Xp+2)- a(Xp+1)+ b(Yp+1/2)- b(Yp+1/2)+ c-c
= a(Xp) +2a – a(Xp) – a
= a.
Therefore, dnew = dold + dy. (as a = dy)

Case 2: If NE is chosen then for next point :
dnew = F(Xp+2, Yp+3/2)
= a(Xp+2) + b(Yp+3/2) + c
dold = a(Xp+1) + b(Yp+1/2) + c
Difference (Or delta) of two distances:
DELd = dnew -dold
= a(Xp+2)- a(Xp+1)+ b(Yp+3/2)- b(Yp+1/2)+ c-c
= a(Xp) + 2a – a(Xp) – a + b(Yp) + 3/2b – b(Yp) -1/2b
= a + b
Therefore, dnew = dold + dy – dx. (as a = dy , b = -dx)
Calculation For initial value of decision parameter d0:
d0 = F(X1+1 , Y1+1/2)
= a(X1 + 1) + b(Y1 + 1/2) +c
= aX1+ bY1 + c + a + b/2
= F(X1,Y1) + a + b/2
= a + b/2 (as F(X1, Y1) = 0 )
d0 = dy – dx/2. (as a = dy, b = -dx)

Algorithm:
Input (X1,Y1) and (X2,Y2)
dy = Y2- Y1
dx = X2 - X1
// initial value of
// decision parameter d
d = dy - (dx/2)
x = X1 , y = Y1
// plot initial given point
Plot(x , y)
// iterate through value of X
while(x < X2)
x = x+1
// 'E' is chosen
if (d < 0)
d = d + dy
// 'NE' is chosen
else
d = d + dy - dx
y = y+1
Plot(x,y)

Given coordinate of two points A(x1, y1) and B(x2, y2) such that x1 < x2 and y1 < y2.
The task to find all the intermediate points required for drawing line AB on the
computer screen of pixels. Note that every pixel has integer coordinates.
Bresenham’s algorithm: for any given/calculated previous pixel P(Xp,Yp), there are
two candidates for the next pixel closest to the line, E(Xp+1, Yp) and NE(Xp+1,
Yp+1) (E stands for East and NE stands for North-East).
In Mid-Point algorithm we do following.
1. Find middle of two possible next points.
Middle of E(Xp+1, Yp) and NE(Xp+1, Yp+1) is M(Xp+1, Yp+1/2).
2. If M is above the line, then choose E as next point.
3. If M is below the line, then choose NE as next point.

Midpoint Line Algorithm :
Find on what side of the line the mid point is:
If below then NE is closer to line
If above then E is closer to line
GRAPHICS ALGORITHMS
We know, F(x)= ax + by + c;
F(m)= F(xp+1, yp+1/2)= d;
d= a(xp+1) + b (yp+1/2)+c;
if d > 0 ,M is below the line, choose NE
if d < 0 M is above the line, choose E

Midpoint Line Algorithm :
dx = x2 - x1; dy = y2- y1;
d = 2dy - dx; ∆E = 2dy; ∆NE = 2(dy - dx);
x = x1; y = y1;
Writepixel(x,y);
While (x < x2)
if d <0
d+ = ∆E; x+ = 1;
Else
d+ = ∆NE; x+ = 1; y+ = 1;
end
Writepixel(x,y);
end While
GRAPHICS ALGORITHMS

Draw only one quarter of the circle
Use symmetry for the other three quarters.
Simple circle drawing algorithm :
Step 1: x1 = 0, ∆x = 1
Step 2: yi=√(R2-xi
2)
Step 3: round(yi )
Step 4: draw (xi ,round(yi ))
Step 5:xi=xi old+∆x
Step 6: if xi <= R goto Step 2
GRAPHICS ALGORITHMS

Midpoint Circle Algorithm
GRAPHICS ALGORITHMS
Draw one octant of the circle and use the symmetry from the previous subsection to
plot the rest of the circle.

Assume that P has been chosen as closest to the circle.
The next choice is pixel E and SE.
✦ if M is inside the circle, choose E
✦ if M is outside, choose SE
GRAPHICS ALGORITHMS

 F(x,y) = x2 + y2 - R2 = 0
The sign of F(x,y) for any point (x,y)
F(x,y) = 0 => point is on the circle
F(x,y) > 0 => point is outside the circle
F(x,y) < 0 => point is inside the circle
Check the sign of d=F(xp+1, yp-1/2)
if d > 0, choose pixel SE
if d < 0, choose pixel E
if d==0, choose either (we pick SE)
GRAPHICS ALGORITHMS

by definition: d = (xp+1) 2+(yp -1/2) 2 -R2
If E was chosen, then we shift M over 1
dnew=F(M1)= F(xp+2, yp -1/2)
= (xp+2) 2+(yp -1/2) 2 -R2
dnew=dold+(2xp+3) OR ∆E = (2xp+3)
If SE was chosen, then M goes over & down 1
dnew=F(M2)= F(xp+2, yp-3/2)
= (xp+2)2+(yp-3/2)2-R2
dnew=dold+(2xp-2yp+5) OR ∆SE= +(2xp-2yp+5)
GRAPHICS ALGORITHMS
Short Summary:
choose between E and SE, based on the sign of d
Update d by adding either ∆E or ∆SE

Creating animations using Transformations in
OpenGL
• Animation is the illusion of making us think that an object is really
moving on the screen. But underneath they are just complex
algorithms updating and drawing different objects.
• Aim: A complex animation of a walking dinosaur in 2D.
• Method: Using Transformations of individual body parts.

OpenGL
• There are 3 main transformations in Computer Graphics –
Translation, Rotation and Scaling. All can be implemented using very
simple mathematics.
Translation: X = x + tx, tx is the amount of translation in x-axis
Y = y + ty, ty is the amount of translation in y-axis
Rotation: X = xcosA - ysinA, A is the angle of rotation.
Y = xsinA + ycosA
Scaling: X = x*Sx, Sx is Scaling Factor
Y = y*Sy, Sy is Scaling Factor

OpenGL
The body of the dinosaur is split up into 8 main portions –
Head, upperBody, Tail, downBody, and the four legs
The parts are stores as text files with comma separated coordinates, which
are imported during running of the program:
• headDino
• PolyDino
• tailDino
• backlegFDino
• backlegRDino
• bodydownDino
• bodyupDino
• frontlegFDino
• frontlegRDino

Program to find line passing through 2 Points
Given two points P and Q in the coordinate plane, find the equation of the
line passing through both the points.
This kind of conversion is very useful in many geometric algorithms like
intersection of lines, finding the circumcenter of a triangle, finding the
incenter of a triangle and many more…
Example:
Input : P(3, 2)
Q(2, 6)
Output : 4x + 1y = 14
Input : P(0, 1)
Q(2, 4)
Output : 3x + -2y = -2

Let the given two points be P(x1, y1) and Q(x2, y2). Now, we find the equation
of line formed by these points.
Any line can be represented as,
ax + by = c
Let the two points satisfy the given line. So, we have,
ax1 + by1 = c
ax2 + by2 = c
We can set the following values so that all the equations hold true,
a = y2 - y1
b = x1 - x2
c = ax1 + by1
These can be derived by first getting the slope directly and then finding the
intercept of the line. OR these can also be derived cleverly by a simple
observation as under:

Derivation :
ax1 + by1 = c ...(i)
ax2 + by2 = c ...(ii)
Equating (i) and (ii),
ax1 + by1 = ax2 + by2
=> a(x1 - x2) = b(y2 - y1)
Thus, for equating LHS and RHS, we can simply have,
a = (y2 - y1)
AND
b = (x1 - x2)
so that we have,
(y2 - y1)(x1 - x2) = (x1 - x2)(y2 - y1)
AND
Putting these values in (i), we get,
c = ax1 + by1
Thus, we now have the values of a, b and c
which means that we have the line in the
coordinate plane.
filter_none

raster algorithm.pdf

More Related Content

What's hot (20)

Similar to raster algorithm.pdf (20)

More from Mattupallipardhu (13)

Recently uploaded (20)

raster algorithm.pdf