UNIT 1 PPT

GRAPHICS
SUB CODE : CS71

BRANCH :IT
YEAR\SEM : IV \ VII
PREPARED BY:
Mr.S.Vimal M.E.,
Asst.Prof/IT,
NEC 1
UNIT I OUTPUT PRIMITIVES
SYLLABUS
Introduction Line curve and ellipse

algorithms Attributes Two dimensional
Geometric Transformations Two
Dimensional Viewing
2
Output Primitives
Introduction
Advantages of Interactive Graphics
Natural means of communicating with a
computer
Creating & reproducing pictures- easy
Uses of Computer Graphics

User Interfaces
Office automation
cartography
3
Graphics Systems
Display Devices
Cathode Ray tube
Raster-Scan Displays
Random-Scan Displays
Colour CRT Monitors & etc.,
Input Devices
Keyboard
Mouse Image
Scanners & etc.,
Hard Copy Devices
4
Output Primitives
Definition
A scene has been represented by basic geometric
structure which map into rectangular grid of pixel
Keyword
Pixel : little rectangles with same size and
shape at each screen points
Image : is a rectangular grid or array of pixels.
5
Output Primitives
The simplest form of output primitives are:
Points
Straight Lines
These primitives are defines in the graphics

library (high level)
Learn the device-level algorithm for
displaying 2D output primitives
6
Points
Accomplished by converting a single coordinate
position by an application program into
appropriate operations for output device in use
(i.e. monitor)
Electron beam is turned on to illuminate the

screen phosphor depending on the display
technology (Random-scan/Raster-scan)
7
Point
The point is referred as vertex and is specified

using command
Vertex() Coordinates (x,y,z)

POINTS
type
8
Output Primitives
9
Why Lines?
Lines
most common 2D primitive - done 100s or 1000s of
times each frame
even 3D wireframes are eventually 2D lines!
optimized algorithms contain numerous
tricks/techniques that help in designing more
advanced algorithms
10
Lines?
11
Lines?
12
Line Requirements
Must compute integer coordinates of pixels which lie on or near a line or circle.
Pixel level algorithms are invoked hundreds or thousands of times when an image is
created or modified must be fast!
Lines must create visually satisfactory images.
Lines should appear straight
Lines should terminate accurately
Lines should have constant density
Line algorithm should always be defined.
13
Basic Line Equation
Cartesian Coordinate System

Given two points
6
P1=(X1,Y1), P2=(X2, Y2) 5

P = (X,Y)
Consider a third point 4 P2 = (X2,Y2)

on the 3
line: P = (X,Y) 2
1 P1 = (X1,Y1)
Y = [(Y2-Y1)/(X2-X1)]*(X-
X1)+ Y1 1 2 3 4 5 6
RISE Y2-Y1
or SLOPE =
RUN
=
X2-X1
Y = mx + b
14
Other Helpful Formulas
Length of line segment between P1 and P2:
L ( x 2 x 1 ) ( y 2 y1 )
2 2
Midpoint of a line segment between P1 and P3:

( x 1 x 3 ) ( y1 y 3 )
P2 ( , )
2 2
Two lines are perpendicular iff
1) M1 = -1/M2
2) Cosine of the angle between them is 0.
15
Parametric Form
Given points P1 = (X1, Y1) and P2 = (X2, Y2)

X = X1 + t(X2-X1)
Y = Y1 + t(Y2-Y1)
We get all the other points on the line segment between
(X1,Y1) and (X2,Y2) as 0 < t < 1
16
Basic Line Equation y=mx+b
. Equation for straight line
. y = mx + b
. m = slope
. m is the changes in y divided by changes of x
. m = y / x
. b = the point where the line intercepts of y axis.
. Line from (x1,y1) to (x2,y2)

. Slope
. m = y /x
. y = y2-y1
. x = x2-x1
. m = y2-y1/x2-x1
. y axis Intercept
. b = y1 m.x1
17
Simple DDA Line Algorithm
The digital differential analyzer (DDA) is

a scan-conversion line algorithm based
on calculating either y or x where
y = y2-y1 y
x = x1-x2 m
x
For lines with a positive slope greater
than 1
Xk+1 = Xk +1/m
For lines with a positive slope less than
1
Yk+1 = Yk + m
18
DDA Code
#include device.h
#define ROUND (a) ((int) (a+0.5))
void lineDDA( int xa, int ya, int xb, int yb) DDA create good lines but
{ int dx = xb-xa, dy = yb ya, steps, k; it is too time consuming
float xinc, yinc, x = xa, y = ya;
due to the round function
if (abs(dx) > abs(dy)) steps = abs(dx); and long operation on real
else steps = abs(dy); values
xinc = dx/(float) steps;
yinc = dy/(float) steps;
setPixel(ROUND(x), ROUND(y));
for (k=0; k<steps; k++) {
x += xinc; y+= yinc;
setPixel(ROUND(x), ROUND(y));
}
19
DDA Example
Compute which pixels should be turned on to

represent the line from (6,9) to (11,12).
step = ?
xinc = ?
yinc = ?
13
12
11
10
6 7 8 9 10 11 12 13
20
DDA Example
Line from (6,9) to (11,12).
step := Max of (ABS(11-6), ABS(12-9)) = 5

Xinc := 1
Yinc := 0.6
Values computed are: 13
12
(6,9), (7,9.6),
11
(8,10.2), (9,10.8), 10
(10,11.4), (11,12) 9
6 7 8 9 10 11 12 13
21
DDA
. Advantages:
. Faster than using y = mx +b
. Eliminates multiplication (mx) by using screen
characteristics, i.e. incrementing pixel.
. Disadvantages:
. Floating point arithmetic is slower than
integer arithmetic.
. Rounding down take time.
. Long line s can drift from the true line due to
floating point round-off errors.
22
DDA
23
Bresenhams Line Drawing Algorithm
1. Input the two line endpoints and store the left endpoint in (X0,Y0)
2. Load (X0,Y0) into the frame buffer; that is, plot the first point.
3. Calculate constants X, Y, 2Y, and 2Y - 2X, and obtain the
starting value for the decision parameter as
P0 = 2Y - X
4. 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 + 2Y
Otherwise, the next point to plot is (Xk + 1, Yk + 1) and
Pk+1 = Pk + 2Y - 2X
5. Repeat step 4, X times.
24
Bresenhams Line Drawing Algorithm
25
Bresenhams Line Algorithm
#include device.h
void lineBres( int xa, int ya, int xb, int yb)
{ int dx = abs(xb-xa), dy = abs(yb ya);
int p = 2*dy-dx;
int twoDy = 2*dy, twoDyDx = 2* (dy-dx);
int x,y,xEnd;
/* Determine which point to use as start, which as end */
if (xa > xb){
x = xb; y = yb; xEnd = xa; }
else { x = xa; y = ya; xEnd = xb; }
setPixel(x,y);
while (x < xEnd){
x++;
if (p < 0) p += twoDy;
else { y++; p += twoDyDx;}
setPixel(x,y); }
}
26
Example
We digitize the line with endpoints (20,10) and
(30,18)
X= 10, Y = 8, 2Y = 16, 2Y - 2X = -4
p0 = 2Y - X = 6
k pk (xk+1,yk+1) k pk (xk+1,yk+1)
0 6 (21,11) 5 6 (26,15)
1 2 (22,12) 6 2 (27,16)
2 -2 (23,12) 7 -2 (28,16)
3 14 (24,13) 8 14 (29,17)
4 10 (25,14) 9 10 (30,18)
27
Bresenham
. Advantages
. Accurate and efficient incremental
integer calculations
. Can be adapted to draw circles and
curves.
Generalization:
Increment (x or y) depending on slope (m)
starting endpoints (left or right)
special case (Y=0 or X =0)
28
Optimizations
Speed can be increased even more by detecting cycles in the

decision variable. These cycles correspond to a repeated
pattern of pixel choices.
The pattern is saved and if a cycle is detected it is repeated

without recalculating.
16
15
14
13
12
11
10
6 7 8 9 10 11 12 13 14 15 16 17
di= 2 -6 6 -2 10 2 -6 6 -2 10
29
Output Primitives
Three other output primitives:
1. Circles
2. Ellipses
3. Curves
30
Circles
1. Circles
Properties:
Is a set of points from a given distance of r from center
position (xC, yC).
Is divided into 4 quadrants and 8 octants .
Symmetrical is used to reduce the number of calculations.
31
Circles
1. Cartesion Co-ordinates. (Square root method)

. Distance relationship expressed by the
Pythagorean theorem in Cartesian coordinates
as: (x-xc)2 (y-yc)2 = r2
. So, when stepping along the x axis in units

intervals from xc to xc+ r and calculate the
corresponding y co-ordinate with
y = yc r2 (xc-x)2
32
Circles
Cartesion Co-ordinates. (Square root method)

. void circleSqrt(const int a, const int b, const int r) {
int i;
int r2 = r*r;
int x1, x2;
int y1, y2;
double y;
for(i = 0; i <= r; i++) {
y = sqrt((double) (r2 - i*i));
x1 = a + i;
x2 = a - i;
y1 = ROUND(b + y);
y2 = ROUND(b - y);
setPixel(x1, y1);
setPixel(x2, y1);
setPixel(x1, y2);
setPixel(x2, y2);}
return; }
33
Circles
34
Circles
Cartesion Co-ordinates. (Square root method) (cont)

. Disadvantages
. Considerable amount of calculation (squares and square roots).
. Spacing between pixel is not uniform around the circle.
. Based on the upper octant (between y axis and 45o line), circles increases
faster along x axis compared to y axis. Since we are stepping along x axis,
pixels with successive x co-ordinate positions can have the same y co-ordinate
reduce or no gap.
. In the lower octant , the circle increases faster along the y axis compared to x
axis. Pixels with successive y co-ordinates need to have the same x co-
ordinates to avoid gaps. Since , we are using x axis in unit of intervals, so each
pixel has a unique y-coordinates bigger gap.
35
Circles
Cartesion Co-ordinates. (Square root method) (cont)
. Solutions:
- to change the logic or formula whether to y
or x depending on the upper or lower octant.
- use polar co-ordinates
Note: changing formula is requiring more

calculation.
36
Circles
2 Polar Co-ordinates (trigonometric functions)

. The equation of a circle is written in the polar co-ordinates r
and as
x = xc + r.cos
y = yc + r.sin
. x and y are the co-ordinates of a point on the circumference,

i.e the end point of a line drawn from the centre of the circle
to the circumference the radius.
37
Circles
Polar Co-ordinates (trigonometric functions)
38
Circles

. The calculation of x and y with polar co-ordinates calculates
the distance of x and y from the center of the circle.
. is the step size.
. A step size of = 1/r will produce a continuous circle with the pixel
is approximately 1 unit a apart.
. The larger of the step size will cause the straight lineconnection.
Disadvantages:
a. Trigonometric calculations (sin and cos) are computationally
expensive. 39
Circles
40
Circle Drawing Algorithm
3. Bresenham Algorithm (Mid Point)
. To avoid rounding where incrementing integer for
calculation is faster and more efficient.
. Center is not always at (0,0)
. In this algorithm, parameter P is used to determine the y

co-ordinate of the next pixel to plot.
. Decision parameter P is based on circle function f that

determines whether pixel is
. inside the boundary
. on the circle boundary
. outside the circle boundary
fcircle = x2 + y2 r2
41
Bresenham Algorithm (Mid Point)

. Step along the x axis in unit intervals (k) from k=0 to
k=r
. Plot the first point (0,r)
. From (0,r) then we need to decide whether to plot on

(xk+1,yk) or (xk+1, yk-1)
.The decision parameter P is the circle function evaluated

at the mid-point between these two pixels.
P = fcircle(xk+1,yk 0.5)
42
. If P < 0
The mid-point is inside the boundary, so the pixel at
(xk+1,yk) is closer to the circle boundary and should be
plotted.
. P is then incremented by 2(x) + 1.
. If P= 0 or P > 0
The mid-point is outside or on the circle boundary. So
the pixel at (xk+1,yk-1) is closer to the circle boundary
and need to be plotted.
. P is then incremented by 2(x-y) + 1.
43

We only need to calculate the values on the border of the circle in the
first octant. The other values may be determined by symmetry.
Assume a circle of radius r with center at (0,0).
(-b,a) (b,a)
Procedure Circle_Points(x,y :Integer);
Begin
Plot(x,y);
Plot(y,x); (-a,b) (a,b)
Plot(y,-x);
Plot(x,-y); (-a,-b) (a,-b)
Plot(-x,-y);
Plot(-y,-x);
Plot(-y,x);
Plot(-x,y) (-b,-a) (b,-a)
End;
44
Fast Circles
Consider only the first octant of a circle of radius r centered on
the origin. We begin by plotting point (r,0) and end when x
< y. 2
2 2
x +y -r =0 x=y
The decision at each step is whether to choose the pixel

directly above the current pixel or the pixel which is above
and to the left (8-way stepping).
Assume Pi = (xi, yi) is the current pixel.

Ti = (xi, yi +1) is the pixel directly above
Si = (xi -1, yi +1) is the pixel above and to the
left.
45
Fast Circles - The Decision Variable
f(x,y) = x2 + y2 - r2 = 0 (x i -1/2, y + 1)i
T = (x ,y
i +1)
i
f(xi - 1/2 + e, yi + 1)
= (xi - 1/2 + e)2 + (yi + 1)2 - r2 e
= (xi- 1/2)2 + (yi+1)2 - r2 + 2(xi-1/2)e + e2 S = (x i-1,y +1)i
= f(xi - 1/2, yi + 1) + 2(xi - 1/2)e + e2 = 0
Let di = f(xi - 1/2, yi+1) = -2(xi - 1/2)e - e2
P = (x ,y
i )i
If e < 0 then di > 0 so choose point S = (xi - 1, yi + 1).
di+1 = f(xi - 1 - 1/2, yi + 1 + 1) = ((xi - 1/2) - 1)2 + ((yi + 1) +
1)2 - r2
= di - 2(xi -1) + 2(yi + 1) + 1 = di + 2(yi+1- xi+1) + 1
If e > 0 then di < 0 so choose point T = (xi, yi + 1).

di+1 = f(xi - 1/2, yi + 1 + 1) = di + 2yi+1 + 1
46
Fast Circles - Decision Variable (cont.)
The initial value of di is

d0 = f(r - 1/2, 0 + 1) = (r - 1/2)2 + 12 - r2
= 5/4 - r {1-r can be used if r is an integer}
When point S = (xi - 1, yi + 1) is chosen then

di+1 = di + -2xi+1 + 2yi+1 + 1
When point T = ( xi , yi + 1) is chosen then

di+1 = di + 2yi+1 + 1
47
Fast Circle Algorithm
Void circleMidpoint (int xcenter, int ycenter, int radius)
{ int x=0;
int y=radius;
int p=1-radius;
void circlePlotPoints (int , int, int, int);
/* Plot first set of points */
circlePlotPoints (xCenter, yCenter, x,y);
while (x<y) { x++;
if (p<0)
p +=2* x + 1;
else {
y--;
p += 2 * (x-y) + 1;}
circlePlotPoints (xCenter, yCenter, x, y); }
}
void circlePlotPoints (int xCenter, int yCenter, int x, int y)
{ setPixel (xCenter + x, yCenter + y);
setPixel (xCenter - x, yCenter + y);
setPixel (xCenter + x, yCenter - y);
setPixel (xCenter - x, yCenter - y);
setPixel (xCenter + y, yCenter + x);
setPixel (xCenter - y, yCenter + x);
setPixel (xCenter + y, yCenter - x);
setPixel (xCenter - y, yCenter -x); } 48
Fast Circle Algorithm
49
Ellipses
. An ellipses is an elongated circle and can be drawn with modified

circle drawing algorithm.
. An ellipse has set of fixed points (foci) that will have a constant
total of distance from all the points on the boundary.
. An ellipse has 2 axes

. Major: straight line running through the two foci
and the long axis.
. Minor: straight line running through the centre that bisects

the major axis the short axis.
50
Ellipses
.Ellipse symmetry
. Ellipses are symmetrical between the four quadrants.
. Ellipses drawing algorithm only need to calculate the pixels

for one quadrant.
.The general ellipse algorithm in Cartesian co-ordinates is

Ax2 + By2 + Cxy + Dx + Ey + F = 0
.As for circles, algorithms that use Cartesian or polar co

ordinates are computationally expensive.
51
Ellipses
Mid-Point Ellipses Algorithm
. A modification of the mid-point circle algorithm
.. Incremental integer calculations.
. Calculations are easier if:
1. the circle is centered on the origin (0,0)
. points are placed in the correct position by
adding xc to the x co-ordinates and y, to the y
co-ordinates. ie performing a translation
2. the major and minor axes are aligned to be
parallel with x and y axes.
. ellipses are drawn at the correct angle by
rotating the points to their correct position.
52
Ellipses
.A decision parameter P is used to determine the y co-

ordinate of the next pixel or plot.
. Decision parameter P is based on ellipse function f that

determines whether a pixel is
. inside the ellipse boundary
. on the ellipse boundary
. outside the ellipse boundary.
53
Ellipses
fellipse(x,y) < 0 if(x,y) is inside the ellipse boundary

= 0 if(x,y) is on the ellipse boundary
> 0 if(x,y) is outside the ellipse boundary.
. Need to divide the quadrant into two regions and process

the pixel in each region separately
. In region 1 the ellipse increases faster along the x axis
than y axis.
. In region 2 the ellipse increases faster along the y axis

than x axis.
. Plot the first point (0,r) 54

Ellipses
. Region 1:
. Step along the x axis in unit intervals (k) until the
boundary between region 1 and region 2.
. If we have just plotted pixel(xk,yk), the choices for the

next pixel to plot are (xk + 1, yk) and (xk + 1, yk 1)
. The decision parameter P is the ellipse function

evaluated at the mid-point between these two pixels.
P=fellipse(xk+1 , yk 0.5)
55
Ellipses
The initial value of the decision parameter in

Region 1
p0 = r2y r2xry + 0.25r2x
56
Ellipses
. If Pk < 0
. The mid-point is inside the ellipse boundary so the
pixel at (xk + 1, yk) ) is closer to the ellipse boundary
and should be plotted.
. Pk+1 = Pk + 2r2yxk+1 + r2y
. If Pk=0 or Pk>0;
. The mid-point is outside or on the ellipse boundary
pixel at (xk+1,yk-1) is closer to the ellipse boundary
and should be plotted.
.Pk+1 = P k + 2r2yxk+1 - 2r2xyk+1 + r2y

57
Ellipses
. Region 2:
. Step along the y axis in unit intervals (k) for the
remainder of the curve until y = 0
.If we have just plotted pixel (xk,yk), the choices for the
next pixel to plot are (xk,yk-1) and (xk+1,yk-1)
.The decision parameter P is the ellipse function

evaluated at the mid-point between these two pixels.
P = fellipse(xk+0.5 , yk 1)
58
Fast Ellipses
The circle algorithm can be generalized to work for an ellipse
but only four way symmetry can be used.
All the points in one quadrant must be computed. Since

Bresenham's algorithm is restricted to only one octant, the
computation must occur in two stages. The changeover
occurs when the point on the ellipse is reached where the
tangent line has a slope of 1. In the first quadrant, this is
when the x and y coordinates are both at 0.707 of their
maximum.
59
Other Curves
. Conic sections such as

. Parabolas
.determined by initial velocity v0 and acceleration g

(gravity) y = yo + a(x-xo)2 + b(x-x0)
a and b are constants

V Velocity
- .determined by parameter t
(time in second)
Yo G .gravity
x = x0 + vx0t Vo
y = y0 + vyot 0.5gt2
Xo
60
Speed Improvement
Parallel Line Algorithms

. DDA and BRESENHAM determine pixel positions
sequentially and faster with parallel computer
. Line Segmentation Algorithm

. n processors.
. Divide line into n segments and assign pixel position
calculations of one segment to one processor.
dXp = (dX + np -1 )/np)
Xk = Xo +kdXp
dYp = m dXp
Yk = Yo +round(kdYp)
61
Speed Improvement
Bounding Rectangle Algorithm.

. Assign 1 processor to 1 pixel inside the bounding rectangle
(needs x. y processors)
. Each processor calculates the perpendicular distance of the

pixel from the line.
. Plot point if the distance of the pixel from the line is less
than or equal to the line thickness.
62
Speed Improvement
Parallel Curve Algorithm
. Like straight lines, parallel curve algorithms use

segmentation and bounding rectangles.
. Curve segmentation
. Circle
. Divide the circular arc the upper octant
into sub-arc segments.
. Assign the pixel calculations for each

segment to a different processor.
63
Speed Improvement
. Ellipse
. Divide the elliptical arc in the first quadrant
into sub-arc segment.
. Assign the pixel calculations for each segment

to a different processor.
64
Filled-Area Primitives
Two ways of area filling on raster system
1. By determining the overlaps intervals for scan

lines that cross the area.
2. By starting from interior position outward until

specified boundary condition is encountered.
65
Filled-Area Primitives
. Polygon
- Concave
- Convex
66
Polygon Classifications
An interior angle of a polygon is an angle inside the

polygon boundary formed by two adjacent edges
If all interior angles of a polygon are less than or equal
to 180 degree, the polygon is said to be convex
If there is at least one interior angle greater than 180
degree, the polygon is said to be concave
The order of vertices for a polygon can be either
clockwise or anti-clockwise
67
Identifying Concave/Convex
Setup vectors for all edges

Perform cross product to adjacent vectors to
test for concavity
Perform dot product if we want to determine the
angle between two edges
All vector products will be the same value
(positive or negative) for convex polygon
If there are some cross products yield a positive
and some yield a negative value, we have a
concave polygon
68
Identifying Concave (cont.)
Vn
Ej
Vm
V6 E5 V5
Ej = (Vnx Vmx , Vny Vmy)
E4
(E1 X E2) > 0
V4 (E2 X E3) > 0
E6 E3 (E3 X E4) < 0
(E4 X E5) > 0
V3 (E5 X E6) > 0
(E6 X E1) > 0
E2
E1 V2 EJ X EK = EJXEKY - EJYEKX
V1
69
Example
Given 6 vertices:
V1 = (1,1)
V2 = (5,1)
V3 = (7,3)
V4 = (4,5)
V5 = (4,10)
V6 = (1,10)
Prove that these vertices is for concave polygon. What can

you say about the cross product values if we change the
order of these vertices (v6 becomes v1, v5 becomes v2,
etc).
70
Angle between Edges
Exact angle between two adjacent edges

Use dot product operation
a.b = |a||b|cos
|a| means the magnitude of vector a
|a| =
ax a y
2 2
71
Angle Between Edges
Example:
Given 2 vectors a = (2,3) and b = (6,3). Determine
the angle between these two vectors
Determine the angle between E3 and E4 (refer to
previous example)
72
Inside-Outside Tests
Inside-Outside Tests.
. Filling means coloring a region
. How to identify interior or exterior region.
- Once determined only then interior to be filled accordingly.
. Two well known rules which decide the interior or exterior.
. Odd-even rule
. Non-zero winding rule.
73
Odd-Even Rule
. Also known as odd-parity and even-odd rule.
. How its work?
. Pick a point of P in the region of interest.
. Draw a line from P to a distant point which lower than the
smallest x.
. Move from P along the line to the distant point.
. Count the number of region edges the line crosses.
. If the number of crossed is odd then P is inside the interior region
. If the number of crossed is even then P is inside the exterior
region. 74
Non-Zero Winding Number Rule.

. Each boundary is given a direction number and then sum the numbers.
. Rules.
. The line chosen must not pass through any vertices.
. If first y values less than second y value
Then give direction number 1.
. If first y values greater than second y value
Then give direction number 1.
. Move from P along the line to the distant point.
. Add or minus based on the direction number when crossing the edges.
. Interior regions have non-zero winding numbers.
. Exterior regions have a winding number of 0.
75
Inside-Outside Test
Can be used for scan-line / Boundary /Flood fill

methods
76
Character Generation
.Overall design or style for set of characters is called type-face

.Ex: Courier, Helvetica, New York.
.Type-face are serif and san-serif (optima).
.Font is originally referred to size and format.
Two different representation for storing fonts:
77
Bitmapped Fonts:
.Characters represented as a rectangular grid or bits.
.Simple and quick to draw because character is mapped onto

pixel positions in the frame buffer.
.However, it needs a lot of space. Each variation in size and

style needs to be stored separately in a font cache.
.Can still generate different size and styles from a single

bitmap but the results are poor quality because bitmap
descriptions do not scale well. 78
Outline Fonts
.Characters described by straight lines and curves.
.Can generate different sizes and styles by manipulating curve

definition.
. Slow because they must be scan converted into the frame

buffer
79
So, between these two representation:

. Outline take less space.
. Bitmapped are faster to draw than outline fonts
. Outline produce higher quality characters.
80
Summary
Output primitives
(points, straight-line, circle, ellipse, curves)
DDA vs Bresenham
Inside-Outside Test
Odd-even rule / even-odd rule
Non zero winding rule
serif vs san serif
Outline vs Bitmap
81
Summary
Inside-Outside Test
Odd-even rule / even-odd rule
Non zero winding rule
serif vs san serif
Outline vs Bitmap
82
Attributes of Graphics
Primitives
83
Agenda
Color and gray scale

Color functions
Point attributes and functions
Line attributes and functions
Curve attributes and functions
Character attributes
Antialiasing
84
Learning Objectives
Understand what are the main attributes
of graphic primitives
color, antialiasing,
point attributes,
line attributes,
curve attributes,
character attributes
85
Line Attributes and Functions
Line attributes
Basic attributes: color, width, style
Width
can be set in the line drawing algorithm as well as
the length and point spacing.
Raster algorithms display line attributes by plotting
pixel spans, like plotting multiple pixels along the
line either horizontally (m<1)of vertically (m>1).
Produces lines of slightly different width according
to the slope, and also abrupt ends (horizontal or
vertical).
Add line caps at the end (butt cap, round cap,
projecting square cap).
86
Line Attributes and Functions
Line attributes
Width
thick polylines with previous method do not
connect smoothly
miter join: extend the outer boundaries of each
segment until they join
round join: cap connection with circular
boundary
bevel join: display line segments with butt caps
and fill-in triangular gap between the two butts.
87
Line Attributes and
Functions
Line attributes
Style
Solid lines, dashed lines, dotted lines can be
generated by modifying the line drawing
algorithm spacing between drawn pixels
Can be also generated from the raster by using
a pixel mask, for example 11111000 will display
a dashed line with dash length of 5 and inter-
dash length of 3.
88
Line Attributes and
Functions
Line attributes
Pen and brush options
Select several pen and brush styles
Shape, size, pattern
Can be implemented in a pixel mask
Change the mask to change the pen/brush
89
Line Attributes and
Functions
Line attribute functions
gl.glLineWidth (width); // width is the width of the line
Default width is 1.0

gl.glLineStipple (repeatFactor, pattern);
pattern references a 16-bit integer that describes how the line should
be displayed (default 0xFFFF, all bits set to 1, solid line)
repeatFactor specifies how many times each bit in the pattern is to be
repeated before the next bit in the pattern in applied (default 1).
Example: displays 0x00FF -------- -------- --------
8 solid line pixels, followed by 8 spaces
Requires first glEnable (GL_LINE_STIPPLE);
line-pattern feature can be disabled by glDisable (GL_LINE_STIPPLE);
gl.glShadeModel (GL.GL_SMOOTH); // linear interpolation of
colors
90
Display
91
Color and Gray Scale
RGB color buffer

Store RGB color codes in frame buffer or in
a separate table
Color code placed at pixel location
Minimum number of colors for 3-bits
Left bit Red, Middle bit Green, Left bit
Blue
0 black, 1 blue, , 7 white
More color bits increase the size of the
frame buffer: 24-bits * 1024 * 1024 = 3MB
92
Color tables
Color map (color look-up table)
Each pixel in the frame buffer contains a
value (Ex. 196) corresponding to an entry
in the color table (Ex. 2081), which has 256
entries.
Color table contains a 3-byte color code
that represents an RGB color 1-byte for
the Red, 1-byte for the Green, 1-byte for
the Blue.
Pick 256 colors from a total of 17 million,
and save storage: 1024 * 1024 = 1MB 93
(from Donald Hearn and Pauline Baker)
94
Gray scale
Shades of gray
0 dark gray, 1 light gray
Other color parameters
Intensity (amount of light energy)
Luminance (perceived brightness)
95
Color Functions
Set color display mode to RGB

glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
GLUT_SINGLE or GLUT_DOUBLE
GLUT_RGB, GLUT_RGBA, GLUT_INDEX
gl.glEnable(GL.GL_COLOR_RGB); // in JOGL
Alpha value (RGBA) for color blending of

overlapping primitives (transparent or not)
Affects the color state from that function call
on (not retroactive)
gl.glColor*
* means b (byte), i (int), s (short), d (double), f
(float)
default (1.0f, 1.0f, 1.0f, 1.0f) for white
96
Color Functions
public void triangleColor ()

// displays a three-colored triangle
{
gl.glClear (GL.GL_COLOR_BUFFER_BIT);
// apply clear color to color buffer
gl.glBegin(GL.GL_TRIANGLES); // Drawing Using Triangles
gl.glColor3f(1.0f, 0.0f, 0.0f); // set color to red
gl.glVertex2i( 100, 150); // top
gl.glColor3f(0.0f, 1.0f, 0.0f); // set color to green
gl.glVertex2i(10,10); // bottom Left
gl.glColor3f(0.0f, 0.0f, 1.0f); // set color to blue
gl.glVertex2i(180,15); // bottom right
gl.glEnd(); // finished drawing the triangle
97
Color Functions
98
Color Functions
Point center = new Point(100, 75);
float [][] CLUT ={{1.0f,0.0f,0.0f}, {1.0f,0.5f,0.0f},
{1.0f,1.0f,0.0f},{0.0f,1.0f,0.0f},{0.0f,0.0f,1.0f},
{1.0f,0.0f,1.0f}, {0.5f,0.0f,0.5f}, {1.0f,0.0f,0.5f}};
Point [] vertex = new Point [8];

for (k = 0; k < 8; k++) {
theta = Math.PI * 2 * k / 8.0;
vertex[k] = new Point();
vertex[k].setLocation(
(int) (center.getX() + 50 * Math.cos (theta)),
(int) (center.getY() + 50 * Math.sin (theta)));
}
gl.glBegin (GL.GL_POLYGON);
for (k = 0; k < 8; k++) {
gl.glColor3fv (CLUT[k]);
gl.glVertex2d (vertex[k].getX(), vertex[k].getY());
}
gl.glEnd ( ); // finished drawing The Triangle
99
Color Functions
100
Point Attributes and Functions
Attributes are any parameters that affect

the way graphic primitives are
displayed.
Basic attributes
Color
Size
Point
Color
Size is a multiple of the pixel size (a
square).
gl.glPointSize (size); // size is the number of pixels 101
Curve Attributes and Functions
Same parameters as for lines

Width
Color
Dot-dash patterns
Pen/brush options
Raster curves produced by
horizontal/vertical span
102
Character Attributes
Font (typeface)
Helvetica, Courier, Times Roman,
Underlining style
solid, dotted, double
Style
boldface, italics, outline, shadow
Size
10-point, 12-point,
Color.
103
(from Donald Hearn and Pauline Baker)
104
Font (typeface)
Helvetica, Courier, Times Roman,
Underlining style
solid, dotted, double
Style
boldface, italics, outline, shadow
Size
10-point, 12-point,
Color
Direction (up vector)
105
Two methods
With bitmap functions
create images of each character
With GLUT character generating routines
available in OpenGL from GLUT class
BITMAP_HELVETICA_10
BITMAP_HELVETICA_12
BITMAP_HELVETICA_18
BITMAP_TIMES_ROMAN_10
BITMAP_TIMES_ROMAN_24

glutBitmapCharacter, glutBitmapString,
glutBitmapLength, glutBitmapWidth
106
Antialiasing
Used to improve the appearance of lines.

gl.glEnable ( primitive_type )
primitive_type:
GL_POINT_SMOOTH
GL_LINE_SMOOTH
GL_POLYGON_SMOOTH
Color-blending
gl.glEnable (GL.GL_BLEND)
gl.glBlendFunc ( GL.GL_SRC_ALPHA,
GL.GL_ONE_MINUS_SRC_ALPHA)
107
2D Transformations with Matrices
a1,1 a1, 2 a1,3

A a2,1 a2 , 2 a2 , 3
a3,1 a3, 2 a3,3
A matrix is a rectangular array of numbers.
A general matrix will be represented by an upper-case italicised

letter.
The element on the ith row and jth column is denoted by ai,j. Note
that we start indexing at 1, whereas C indexes arrays from 0.
108
Matrices Addition
Given two matrices A and B if we want to add B to A

(that is form A+B) then if A is (nm), B must be (nm),
Otherwise, A+B is not defined.
The addition produces a result, C = A+B, with elements:
Ci , j Ai , j Bi , j
1 2 5 6 1 5 2 6 6 8
3 4 7 8 3 7 4 8 10 12

109
Matrices Multiplication
Given two matrices A and B if we want to multiply B by A

(that is form AB) then if A is (nm), B must be (mp), i.e.,
the number of columns in A must be equal to the number
of rows in B. Otherwise, AB is not defined.
The multiplication produces a result, C = AB, with

elements:
m
Ci , j aik bkj
k 1
(Basically we multiply the first row of A with the first

column of B and put this in the c1,1 element of C. And so
on).
110
Matrices Multiplication (Examples)
26+ 63+ 72=44
2 6 7 6 8 44 76
4 5 8 3 3 55 95

9 2 3 2 6 66 96
6 8
2 6

4 5 3 3
Undefined!
2 6 2x2 x 3x2 2!=3

2x2 x 2x4 x 4x4 is allowed. Result is 2x4 matrix
111
Matrices -- Basics
Unlike scalar multiplication, AB BA

Matrix multiplication distributes over addition:
A(B+C) = AB + AC
Identity matrix for multiplication is defined as I.
The transpose of a matrix, A, is either denoted AT or A is
obtained by swapping the rows and columns of A:
a1,1 a2,1
a1,1 a1, 2 a1,3
A A' a1, 2 a2, 2
a2,1 a2, 2 a2 , 3
a1,3 a2,3
112
2D Geometrical Transformations
Translate
Shear
Rotate Scale
113
Scale Points
Points can be scaled (stretched) by sx along the x axis and by sy

along the y axis into the new points by the multiplications:
We can specify how much bigger or smaller by means of a scale factor
To double the size of an object we use a scale factor of 2, to half the size of
an obejct we use a scale factor of 0.5
x' s x x
y P(x,y) y' s y y
sy y
P(x,y) x' s x 0 x
y' 0 s y y
sx x x
sx 0
If we define S , then we have P =SP
0 s y
114
Rotate Points (cont.)
Points can be rotated through an angle about the origin:

| OP ' || OP | l
P(x,y)
x' | OP ' | cos( ) l cos( )

y P(x,y)
l
y
l cos cos l sin sin
O x x
x cos y sin
x' cos sin x

y ' | OP ' | sin( ) l sin( ) y ' sin cos y

l cos sin l sin cos
x sin y cos
P =RP
115
Review
Translate: P = P+T
Scale: P = SP
Rotate: P = RP
Spot the odd one out
Multiplying versus adding matrix
Ideally, all transformations would be the
same..
easier to code
Solution: Homogeneous Coordinates
116
Homogeneous Coordinates
For a given 2D coordinates (x, y), we introduce a third dimension:
[x, y, 1]
In general, a homogeneous coordinates for a 2D point has the form:
[x, y, W]
Two homogeneous coordinates [x, y, W] and [x, y, W] are said to be of the

same (or equivalent) if
x = kx eg: [2, 3, 6] = [4, 6, 12]

y = ky for some k 0 where k=2
W = kW
Therefore any [x, y, W] can be normalised by dividing each element by W:

[x/W, y/W, 1]
117
Homogeneous Transformations
Now, redefine the translation by using homogeneous coordinates:
x' 1 0 dx x
x' x d x y ' 0
y ' y d 1 d y y
y 1 0 0 1 1
P' T P
Similarly, we have:
Scaling Rotation
x' s x 0 0 x x' cos sin 0 x

y ' 0 y ' sin 0 y
sy 0 y cos
1 0 0 1 1 1 0 0 1 1
P = S P P = R P
118
Composition of 2D Transformations
1. Additivity of successive translations
We want to translate a point P to P by T(dx1, dy1) and then to P by

another T(dx2, dy2)
P' ' T (d x 2 , d y 2 ) P' T (d x 2 , d y 2 )[T (d x1 , d y1 ) P]

On the other hand, we can define T21= T(dx1, dy1) T(dx2, dy2) first, then
apply T21 to P:
P' ' T21P

where
T21 T (d x 2 , d y 2 )T (d x1 , d y1 )
1 0 d x 2 1 0 d x1 1 0 d x1 d x 2
0 1 d y 2 0 1 d y1 0 1 d y1 d y 2
0 0 1 0 0 1 0 0 1
119
Examples of Composite 2D Transformations
(1,3)
T(-1,2) T(1,-1)
(2,2)
(2,1)
1 0 1 1 0 1
T21 0 1 1 0 1 2
0 0 1 0 0 1
1 0 0
0 1 1
0 0 1
120
Composition of 2D Transformations (cont.)
2. Multiplicativity of successive scalings

P' ' S ( s x 2 , s y 2 )[ S ( s x1 , s y1 ) P]
[ S ( s x 2 , s y 2 ) S ( s x1 , s y1 )]P
S 21P
where S 21 S ( s x 2 , s y 2 ) S ( s x1 , s y1 )
sx 2 0 0 s x1 0 0
0 s y 2 0 0 s y1 0
0 0 1 0 0 1
s x 2 * s x1 0 0
0 s y 2 * s y1 0
0 0 1
121
3. Additivity of successive rotations
P' ' R( 2 )[ R(1 ) P]

[ R( 2 ) R(1 )]P
R21P
where R21 R ( 2 ) R (1 )
cos 2 sin 2 0 cos 1 sin 1 0
sin 2 cos 2 0 sin 1 cos 1 0
0 0 1 0 0 1
cos( 2 1 ) sin( 2 1 ) 0
sin( 2 1 ) cos( 2 1 ) 0
0 0 1
122
4. Different types of elementary transformations discussed above

can be concatenated as well.
P' R( )[T (d x , d y ) P]
[ R( )T (d x , d y )]P
MP
where M R( )T (d x , d y )
123
Consider the following two questions:
1) translate a line segment P1 P2, say, by -1 units in the x direction

and -2 units in the y direction.
P2(3,3)
P2
P1(1,2)
2). Rotate a line segment P1 P2, say by degrees counter clockwise,

about P1.
P2
P2(3,3)

P1(1,2) P1
124
Rigid-Body vs. Affine Transformations
A transformation matrix of the form
r11 r12 tx
r r22 t y
21
0 0 1
where the upper 22 sub-matrix is orthogonal, preserves angles
and lengths. Such transforms are called rigid-body
transformations, because the body or object being transformed is
not distorted in any way. An arbitrary sequence of rotation and
translation matrices creates a matrix of this form.
The product of an arbitrary sequence of rotation, translations, and

scale matrices will cause an affine transformation, which have the
property of preserving parallelism of lines, but not of lengths and
angles.
125
Rigid-Body vs. Affine Transformations (cont.)
Rigid- body Affine

Transformation Transformation
45
Unit cube Scale in x, not in y
Shear transformation is also affine.
Shear in the x direction Shear in the y direction
1 a 0 1 0 0
SH x 0 1 0 SH y b 1 0
0 0 1 0 0 1
126
2D Viewing
3D Rendering Pipeline
Clipping
Cohen-Sutherland Line Clipping
Sutherland-Hodgeman Polygon Clipping
Viewport Transformation
Scan Conversion
Summary of Transformation
127
3D Primitives
3D Modeling Coordinates
Model Transformation
3D World Coordinates
Lighting
Viewing Transformation
3D Viewing Coordinates
Projection Transformation
2D Projection Coordinates
Clipping
2D Device Coordinates
Scan Conversion
Image 2D Device Coordinates

128
3D Primitives
3D Modeling Coordinates
Model Transformation
Lighting
Viewing Transformation
3D Viewing Coordinates
Projection Transformation
Clipping
2D Device Coordinates
Scan Conversion
Image 2D Device Coordinates

129
3D Primitives
2D Primitives
Clip portions of geometric primitives

Clipping residing outside window
Transform the clipped primitives

Viewport Transformation from screen to image coordinates
Fill pixel representing primitives

Scan Conversion in screen coordinates
Image
130
3D Primitives
2D Primitives



Image
131
Clipping
Avoid Drawing Parts of Primitives Outside

Window
Window defines part of scene being viewed
Must draw geometric primitives only inside window
World
Coordinates
132
Clipping

Window
Window defines part of scene being viewed
Must draw geometric primitives only inside window
133
Clipping

Window
Points
Lines
Polygons
Circles
etc.
134
Types of Clipping algorithms
Point clipping
Line clipping
(a) Cohen sutherland
(b) Liang barsky line clipping
(c) Nicholl lee nicholl line clipping
(d) Nonrectangular line clipping
Polygon clipping
(a) Sutherland hodgeman polygon
(b) Weiler atherton polygon
Curve clipping
Text clipping
Exterior clipping
135
Point Clipping
Is Point(x,y) Inside the Clip Window?
wy2
Inside =
(x>=wx1) &&
(x, y) (x<=wx2) &&

(y>=wy1) &&
(y<=wy2);
wy1
wx1 wx2
136
Line Clipping
Find the Part of a Line Inside the Clip Window

P7
P1
P4 P8
P3
P2
P6
P10
P5 P9
Before Clipping
137
Line Clipping
Find the Part of a Line Inside the Clip Window
P7
P4 P8
P3
P6
P5
After Clipping
138
Use Simple Tests to Classify Easy Cases First
P7
P1
P4 P8
P3
P2
P6
P10
P5 P9
139
Classify Some Lines Quickly by AND of Bit Codes

Representing Regions of Two Endpoints (Must Be 0)
1001 P7 0001 0101
Bit 4
P1
P4 P8
1000 P3 0000 0100
P2
P6
P10
Bit 3
1010 P5 0010 P9 0110
Bit 1 Bit 2
140

1001 P7 0001 0101
Bit 4
P1
P4 P8
1000 P3 0000 0100
P2
P6
P10
Bit 3
1010 P5 0010 P9 0110
Bit 1 Bit 2
141

1001 P7 0001 0101
Bit 4
P4 P8
1000 P3 0000 0100
P6
P10
Bit 3
1010 P5 0010 P9 0110
Bit 1 Bit 2
142
Compute Intersections with Window Boundary for

Lines That Cant be Classified Quickly
1001 P7 0001 0101
Bit 4
P4 P8
1000 P3 0000 0100
P6
P10
Bit 3
1010 P5 0010 P9 0110
Bit 1 Bit 2
143

1001 P7 0001 0101
Bit 4
P4 P8
1000 P3 0000 0100
P6
P10
Bit 3
1010 P5 0010 P9 0110
Bit 1 Bit 2
144

1001 P7 0001 0101
Bit 4
P4 P8
1000 P3 0000 0100
P6
P10
Bit 3
1010 P5 0010 0110
P9
Bit 1 Bit 2
145

1001 P7 0001 0101
Bit 4
P4 P8
1000 P3 0000 0100
P6
P10
Bit 3
1010 P5 0010 0110
P9
Bit 1 Bit 2
146

1001 P7 0001 0101
Bit 4
P4 P8
1000 P3 0000 0100
P6
P10
Bit 3
1010 P5 0010 0110
P9
Bit 1 Bit 2
147

1001 P7 0001 0101
Bit 4
P4 P8
1000 P3 0000 0100
P6
P10
Bit 3
1010 P5 0010 0110
P9
Bit 1 Bit 2
148

1001 0001
P7 0101
Bit 4
P4 P8
1000 P3 0000 0100
P6
P10
Bit 3
1010 P5 0010 0110
P9
Bit 1 Bit 2
149
1001 0001
P7 0101
Bit 4
P4 P8
1000 P3 0000 0100
P6
P10
Bit 3
1010 P5 0010 0110
P9
Bit 1 Bit 2
150
1001 0001
P7 0101
Bit 4
P4 P8
1000 P3 0000 0100
P6
P10
Bit 3
1010 P5 0010 0110
P9
Bit 1 Bit 2
151

1001 0001
P7 0101
Bit 4
P4 P8
1000 P3 0000 0100
P6
P10
Bit 3
1010 P5 0010 0110
P9
Bit 1 Bit 2
152

1001 0001
P7 0101
Bit 4
P4 P8
1000 P3 0000 0100
P6
P10
Bit 3
1010 P5 0010 0110
P9
Bit 1 Bit 2
153

1001 0001
P7 0101
Bit 4
P4 P8
1000 P3 0000 0100
P6
P10
Bit 3
1010 P5 0010 0110
P9
Bit 1 Bit 2
154

1001 0001
P7 0101
Bit 4
P4 P8
1000 P3 0000 0100
P6
P10
P9 Bit 3
1010 P5 0010 0110
Bit 1 Bit 2
155

1001 0001
P7 0101
Bit 4
P4 P8
1000 P3 0000 0100
P6
P10
P9 Bit 3
1010 P5 0010 0110
Bit 1 Bit 2
156

1001 0001
P7 0101
Bit 4
P4 P8
1000 P3 0000 0100
P6
Bit 3
1010 P5 0010 0110
Bit 1 Bit 2
157
Polygon Clipping
Find the Part of a Polygon Inside the Clip
Window?
Before Clipping
158
Polygon Clipping
Find the Part of a Polygon Inside the Clip

Window?
After Clipping
159
Clip to Each Window Boundary One at a Time
160
161
Sutherland-Hodgeman Polygon
Clipping
162
Sutherland-Hodgeman Polygon
Clipping
163
164
Clipping to a Boundary
Do Inside Test for Each Point in Sequence,

Insert New Points When Cross Window Boundary,
Remove Points Outside Window Boundary
P2 P1
Window
Boundary Inside
Outside
P3 P5
P4
165

P2 P1
Window
Boundary Inside
Outside
P3 P5
P4
166

P2 P1
Window
Boundary Inside
Outside
P3 P5
P4
167

P2 P1
Window
Boundary Inside
Outside
P3 P5
P4
168

P2 P1
Window
Boundary P Inside
Outside
P3 P5
P4
169

P2 P1
Window
Boundary P Inside
Outside
P3 P5
P4
170

P2 P1
Window
Boundary P Inside
Outside
P3 P5
P4
171

P2 P1
Window
Boundary P P Inside
Outside
P3 P5
P4
172

P2 P1
Window
Boundary P P Inside
Outside
173
3D Primitives
2D Primitives



Image
174
Transform 2D Geometric Primitives from

Screen Coordinate System (Projection
Coordinates) to Image Coordinate System
(Device Coordinates)
Screen Image
Viewport
175
Window vs. Viewport
Window
World-coordinate area selected for display
What is to be viewed
Viewport
Area on the display device to which a window is
mapped
Where it is to be displayed
176
Window-to-Viewport Mapping
Window Viewport
wy2 vy2
(wx, wy) (vx, vy)

wy1 vy1
wx1 wx2 vx1 vx2
Screen Coordinates Image Coordinates
vx = vx1 + (wx wx1) * (vx2 vx1) / (wx2 wx1);

vy = vy1 + (wy wy1) * (vy2 vy1) / (wy2 wy1);
177
3D Primitives
2D Primitives



Image
178
Scan Conversion
Definition
Figure out which pixels to fill
Example
Filling the inside of a triangle
P1
P2
P3
179
Triangle Scan Conversion
Simple Algorithm
Color all pixels inside a triangle
Inside triangle test
A point is inside a triangle if it is in the positive halfspace
of all three boundary lines
L1 L3
P
L2
180
Triangle Scan Conversion
Triangle Sweep-Line Algorithm

Take advantage of spatial coherence
Compute which pixels are inside using horizontal spans
Process horizontal spans in scan-line order
Take advantage of edge linearity
Use edge slopes to update coordinates incrementally
dx
dy
181
Polygon Scan Conversion
Fill Pixels Inside a Polygon

Triangle
Quadrilateral
Convex
Star-Shaped
Concave
Self-Intersecting
Holes
182
Inside Polygon Rule
Need Better Test for Points Inside a Polygon

Inside triangle test works only for convex polygon
L L
1 1
L2 L5 L2 L5B
L5A
L3 L3
L4 L4
Convex Polygon Concave Polygon

183

UNIT 1 PPT

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

UNIT 1 PPT

Caricato da

Copyright:

Formati disponibili

GRAPHICS

SUB CODE : CS71

Introduction Line curve and ellipse

Uses of Computer Graphics

Image : is a rectangular grid or array of pixels.

The simplest form of output primitives are:

These primitives are defines in the graphics

Electron beam is turned on to illuminate the

The point is referred as vertex and is specified

Vertex() Coordinates (x,y,z)

Cartesian Coordinate System

P1=(X1,Y1), P2=(X2, Y2) 5

Consider a third point 4 P2 = (X2,Y2)

Length of line segment between P1 and P2:

Midpoint of a line segment between P1 and P3:

Given points P1 = (X1, Y1) and P2 = (X2, Y2)

. Line from (x1,y1) to (x2,y2)

The digital differential analyzer (DDA) is

Compute which pixels should be turned on to

step := Max of (ABS(11-6), ABS(12-9)) = 5

Values computed are: 13

Speed can be increased even more by detecting cycles in the

The pattern is saved and if a cycle is detected it is repeated

Three other output primitives:

Is divided into 4 quadrants and 8 octants .

Symmetrical is used to reduce the number of calculations.

1. Cartesion Co-ordinates. (Square root method)

. So, when stepping along the x axis in units

Cartesion Co-ordinates. (Square root method)

Cartesion Co-ordinates. (Square root method) (cont)

. Spacing between pixel is not uniform around the circle.

Cartesion Co-ordinates. (Square root method) (cont)

Note: changing formula is requiring more

2 Polar Co-ordinates (trigonometric functions)

. x and y are the co-ordinates of a point on the circumference,

Polar Co-ordinates (trigonometric functions)

Polar Co-ordinates (trigonometric functions)

. is the step size.

Polar Co-ordinates (trigonometric functions)

. Center is not always at (0,0)

. In this algorithm, parameter P is used to determine the y

. Decision parameter P is based on circle function f that

Bresenham Algorithm (Mid Point)

. Plot the first point (0,r)

. From (0,r) then we need to decide whether to plot on

.The decision parameter P is the circle function evaluated

. P is then incremented by 2(x) + 1.

. P is then incremented by 2(x-y) + 1.

Bresenham Algorithm (Mid Point)

The decision at each step is whether to choose the pixel

Assume Pi = (xi, yi) is the current pixel.

f(x,y) = x2 + y2 - r2 = 0 (x i -1/2, y + 1)i

If e > 0 then di < 0 so choose point T = (xi, yi + 1).

The initial value of di is

When point S = (xi - 1, yi + 1) is chosen then

When point T = ( xi , yi + 1) is chosen then

. An ellipses is an elongated circle and can be drawn with modified

. An ellipse has 2 axes

. Minor: straight line running through the centre that bisects

. Ellipses drawing algorithm only need to calculate the pixels

.The general ellipse algorithm in Cartesian co-ordinates is

.As for circles, algorithms that use Cartesian or polar co

Mid-Point Ellipses Algorithm