Output Primitives
Output Primitives
3
(0,0)
POINTS CRT
(maxx,maxy)
5
Digital devices display a straight line by plotting discrete
coordinate points along the line path which are calculated
from the equation of the line.
Screen locations are referenced with integer values, so plotted positions
may only approximate actual line positions between two specific
endpoints.
A computed line position of (10.48, 20.51) will be converted to pixel
position (10, 21). This rounding of coordinate values to integers causes
lines to be displayed with a stairstep appearance (the “jaggies”).
Particularly noticeable on systems with low resolution.
To smooth raster lines, pixel intensities along the line paths must be
adjusted.
6
LINE DRAWING ALGORITHMS
Cartesian equation:
y = mx + c y2
where y1
m – slope x1 x2
c – y-intercept
y 2 − y1 y
m= =
x2 − x1 x
7
SLOPE
+ve -ve
if |m| = 1 45°
= 45° 45°
if |m| 1
-45° < < 45° °
°
if |m| 1
45° < < 90° or °
8
|m| = 1
y=x
m=1
c=0 y
x y 8
0 0 7
1 1 6
2 2 5
3 3 4
4 4
3
5 5
2
6 6 1
7 7 0
8 8 x
0 1 2 3 4 5 6 7 8
9
|m| 1
y=½x+1
m=½
y
c=1
8
x y round(y)
7
0 1 1
1 1.5 2 6
2 2 2 5
3 2.5 3 4
4 3 3 3
5 3.5 4 2
6 4 4 1
7 4.5 5 0
8 5 5 0 1 2 3 4 5 6 7 8 x
10
|m| 1
y = 3x - 2
m=3
y
c = -2
8
x y round(y)
0 -2 -2 7
1 1 1 6
2 4 4 5
3 7 7 4
4 10 10 3
5 13 13 2
6 16 16 1
7 19 19 0
8 22 22 x
0 1 2 3 4 5 6 7 8
outside
11
THE DIGITAL DIFFERENTIAL ANALYZER (DDA)
ALGORITHM
y
=m means that for a unit (1) change in x there is
x m-change in y.
x y Do not use
i.e. y = 3x + 1 m=3 0 1
y = 3x + 1
to calculate y.
1 4 Use m
2 7
3 10
4 13
5 16
x 1
= means that for a unit (1) change in y there is
y m 1/m change in x.
12
THE DDA METHOD
Uses differential equation of the line : m
If slope |m| 1 then increment x in steps of 1 pixel
and find corresponding y-values.
If slope |m| 1 then increment y in steps of 1 pixel
and find corresponding x-values.
Desired line
(xi+1,round(yi+m))
(xi,yi) (xi+1,yi+m)
(xi,round(yi))
14
IF SLOPE M 0
if |m| 1 if |m| 1
xi+1 = xi + 1 yi+1 = yi + 1
yi+1 = yi + m xi+1 = xi + 1/m
Right
Right
Left
Left 15
PROCEEDING FROM RIGHT-ENDPOINT TO LEFT-ENDPOINT
IF SLOPE M 0
if |m| 1 if |m| 1
xi+1 = xi - 1 yi+1 = yi - 1
yi+1 = yi - m xi+1 = xi - 1/m
Right
Right
Left
Left 16
IF SLOPE M < 0
if |m| 1 if |m| 1
xi+1 = xi + 1 yi+1 = yi - 1
yi+1 = yi + m xi+1 = xi - 1/m
Left
Left
Right
Right 17
PROCEEDING FROM RIGHT-ENDPOINT TO LEFT-ENDPOINT
IF SLOPE M 0
if |m| 1 if |m| 1
xi+1 = xi - 1 yi+1 = yi + 1
yi+1 = yi - m xi+1 = xi + 1/m
Left
Left
Right
Right 18
EXAMPLE (DDA)
0 m 1
y = 13 x + 1 xi +1 = xi + 1
yi +1 = yi + 13
x y round(y)
y
0 1 1 8
1 4/3 1 7
2 5/3 2 6
5
3 2 2
4
4 7/3 2
3
5 8/3 3
2
6 3 3 1
7 10/3 3 0
8 11/3 4 0 1 2 3 4 5 6 7 8 x
19
EXAMPLE (DDA)
m −1
y = −3x + 8 yi +1 = yi − 1
xi +1 = xi − (− 13 )
y x round(x)
y
8 0 0 8
7 1/3 0 7
6 2/3 1 6
5
5 1 1
4
4 4/3 1
3
3 5/3 2
2
2 2 2 1
1 7/3 2 0
0 8/3 3 0 1 2 3 4 5 6 7 8 x
20
void LineDDA(int x0, int y0, int x1, int y1)
{
int dx = x1 – x0, dy = y1 – y0, steps;
if (abs(dx)>abs(dy)) steps = abs(dx);
else steps = abs(dy);
// one of these will be 1 or -1
double xIncrement = (double)dx / (double )steps;
double yIncrement = (double)dy / (double )steps;
double x = x0;
double y = y0;
setPixel(round(x), round(y));
for (int i=0; i<steps; i++) {
{
x += xIncrement;
y += yIncrement;
setPixel(round(x), round(y));
}
}
0 1 2 3 4 5 6 7 8 9 10 11 12
22
BRESENHAM LINE ALGORITHM
A MORE EFFICIENT APPROACH
A
B
Start position
23
BRESENHAM LINE ALGORITHM
True line
ti
si
Decision parameter
di = (si - ti)
If di 0, then closest pixel is below true line (si smaller)
If di 0, then closest pixel is above true line (ti smaller)
25
EXAMPLE:
dy
Let gradient (slope) 0.5 (i.e. 0.5 or 2dy dx)
dx
Start pixel at (x0,y1)
y5 At x1 :
s1 = dy t1 = dx - dy
d1 = (si - ti) = dy - (dx - dy) = 2dy - dx
y3 but 2dy dx di 0 y stays the same
hence next pixel is at (x1,y1)
y2
3dy 4dy At x2 :
2dy s2 = 2dy t2 = dx - 2dy
y1 dy
d2 = (s2 – t2) = 2dy - (dx - 2dy) = 4dy - dx
Suppose d2 0 y is incremented
y0 hence next pixel is at (x2,y2)
x0 x1 x2 x3 x4 x5
At x3 :
s3 = 3dy - dx t2 = 2dx - 3dy
d3 = (s2 – t3) = 6dy - 3dx 0
so y stays the same
hence next pixel is at (x3,y2)
26
IN GENERAL For a line with gradient ≤ 1
d0 = 2dy – dx
if di 0 then yi+1 = yi
di+1 = di + 2dy
if di ≥ 0 then yi+1 = yi + 1
di+1 = di + 2(dy – dx)
xi+1 = xi + 1
3 14 (24,13) 16
4 10 (25,14) 15
5 6 (26,15) 14
6 2 (27,16) 13
7 -2 (28,16)
12
8 14 (29,17)
11
9 10 (30,18)
10
20 21 22 23 24 25 26 27 28 29 30 31 32
28
void LineBres(int x0, int y0, int x1, int y1) // line for |m| < 1
{
int dx = abs(x1 – x0), dy = abs(y1 – y0);
int d = 2 * dy – dx, twoDy = 2 * dy, twoDyMinusDx = 2 * (dy – dx);
int x, y;
if (x0 > x1) { // determines which point to use as start, which as end
x = x1;
y = y1;
x1 = x0;
}
else {
x = x0;
y = y0;
}
setPixel(x,y);
while (x < x1) {
x++;
if (d < 0) d += twoDy;
else {
y++;
d += twoDyMinusDx;
}
setPixel(x, y);
}
}
29
SPECIAL CASES
Special cases can be handled separately
Horizontal lines (y = 0)
Vertical lines (x = 0)
Diagonal lines (|x| = |y|)
directly into the frame-buffer without processing them through the line-
plotting algorithms.
30
PARALLEL LINE ALGORITHMS
Take advantage of multiple processors.
Given np processors, subdivide the line path into np Bresenham segments.
For a line with slope 0 m 1 and leftpoint (x0,y0) the distance to the
right endpoint (left endpoint for next segment) is
x + n p − 1
where x p =
np
x = width of the line
xp is computed using integer division
31
PARALLEL LINE ALGORITHMS (CONTINUE)
i.e. x = 15 , np = 4 processors
15 + 4 − 1 18
x p = = =4
4 4
yp = mxp
At the kth segment, the starting y-coordinates is
yk = y0 + round(kyp)
Also, the initial decision parameter for Bresenham’s algorithm
at the start of the kth subinterval is:
pk = (kxp)(2y) – round(kyp)(2x) + 2y – x
32
ANTI-ALIASING FOR STRAIGHT LINES
Lines generated can have jagged or stair-step appearance, one
aspect of phenomenon called aliasing, caused by fact that pixels
are integer coordinate points.
33
ANOTHER RASTER EFFECT
Line B
Line A
35
CIRCLE EQUATIONS
Polar form
x = rCos
y = rSin (r = radius of circle)
P=(rCos, rSin)
r rSin)
x
rCos)
36
DRAWING A CIRCLE
= 0°
while ( < 360°)
x = rCos
y = rSin
setPixel(x,y)
= + 1°
end while
Disadvantages
To find a complete circle varies from 0° to 360°
The calculation of trigonometric functions is very slow.
37
CARTESIAN FORM
Use Pythagoras theorem
x2 + y2 = r2
r y
x
y
(
P = x, r 2 − x 2 )
r y
x x
38
CIRCLE ALGORITHMS
Step through x-axis to determine y-values
Disadvantages:
– Not all pixel filled in
– Square root function is very slow 39
CIRCLE ALGORITHMS
Use 8-fold symmetry and only compute pixel
positions for the 45° sector.
(-x, y) (x, y)
General Principle
The circle function:
f circle ( x, y) = x 2 + y 2 − r 2
and
0 if (x,y) is inside the circle boundary
f circle ( x, y ) = = 0 if (x,y) is on the circle boundary
0 if (x,y) is outside the circle boundary
41
BRESENHAM’S CIRCLE ALGORITHM
p1 p3
yi
D(si)
yi - 1 D(ti)
p2
xi xi + 1
43
THE ALGORITHM
x0 = 0
y0 = r
p0 = [12 + r2 – r2] + [12 + (r-1)2 – r2] = 3 – 2r
if pi < 0 then
yi+1 = yi
pi+1 = pi + 4xi + 6
45
EXERCISES
46
DECISION PARAMETERS
47
ADVANTAGES OF BRESENHAM CIRCLE
Only involves integer addition, subtraction and multiplication
There is no need for squares, square roots and trigonometric functions
48
MIDPOINT CIRCLE ALGORITHM
Midpoint
yi
yi-1 x2 + y2 – r2 = 0
xi xi+1 xi+2
49
MIDPOINT CIRCLE ALGORITHM
The decision parameter is the circle at the midpoint
between the pixels yi and yi – 1.
pi = f circle ( xi + 1, yi − 12 )
= ( xi + 1) 2 + ( yi − 12 ) 2 − r 2
50
DECISION PARAMETERS
Decision Parameters are obtained using incremental
calculations
Note:
pi +1 = f circle ( xi +1 + 1, yi +1 − ) 1
2 xi+1 = xi +1
= ( xi + 2) 2 + ( yi +1 − 12 ) 2 − r 2
OR
51
1. Initial values:- point(0,r) THE ALGORITHM
x0 = 0
y0 = r move circle origin at (0,0
2. Initial decision parameter x = x – xc and y = y –
p0 = f circle (1, r − 12 ) = 1 + (r − 12 ) 2 − r 2 = 54 − r
3. At each xi position, starting at i = 0, perform the
following test: if pi < 0, the next point is (xi + 1, yi) and
pi+1 = pi + 2xi+1 + 1
52
EXAMPLE
r = 10
p0 = 1 – r = -9 (if r is integer round p0 = 5/4 – r to integer)
Initial point (x0, y0) = (0, 10)
10
i pi xi+1, yi+1 2xi+ 2yi+ 9
1 1 8
0 -9 (1, 10) 2 20 7
1 -6 (2, 10) 4 20 6
2 -1 (3, 10) 6 20 5
3 6 (4, 9) 8 18
4
3
4 -3 (5, 9) 10 18
2
5 8 (6, 8) 12 16 1
6 5 (7, 7) 0
0 1 2 3 4 5 6 7 8 9 10
53
EXERCISES
54
EXERCISES
55
MIDPOINT FUNCTION
void plotpoints(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);
}
void circle(int r)
{
int x = 0, y = r;
plotpoints(x,y);
int p = 1 – r;
while (x<y) {
x++;
if (p<0) p += 2*x + 1;
else {
y--;
p += 2*(x-y) + 1;
}
plotpoints(x,y);
}
} 56
ELLIPSE-GENERATING ALGORITHMS
Ellipse – A modified circle whose radius varies from a maximum
value in one direction (major axis) to a minimum value in the
perpendicular direction (minor axis).
d1
F1 P=(x,y)
d2
F2
The sum of the two distances d1 and d2, between the fixed
positions F1 and F2 (called the foci of the ellipse) to any
point P on the ellipse, is the same value, i.e.
d1 + d2 = constant
57
ELLIPSE PROPERTIES
Expressing distances d1 and d2 in terms of the focal coordinates F1
= (x1, x2) and F2 = (x2, y2), we have:
( x − x1 ) 2 + ( y − y1 ) 2 + ( x − x2 ) 2 + ( y − y2 ) 2 = constant
ry
rx
2
x − xc y − yc
2
Cartesian coordinates: + = 1
rx ry
Polar coordinates: x = xc + rx cos
y = yc + ry sin
58
ELLIPSE ALGORITHMS
Symmetry between quadrants
Not symmetric between the two octants of a quadrant
Thus, we must calculate pixel positions along the elliptical arc
through one quadrant and then we obtain positions in the
remaining 3 quadrants by symmetry
(-x, y) (x, y)
ry
rx
59
ELLIPSE ALGORITHMS
f ellipse ( x, y ) = ry2 x 2 + rx2 y 2 − rx2 ry2
Decision parameter:
0 if ( x, y ) is inside the ellipse
f ellipse ( x, y ) = = 0 if ( x, y ) is on the ellipse
0 if ( x, y ) is outside the ellipse
Slope = -1
1
ry 2 dy 2ry2 x
Slope = =− 2
rx dx 2rx y
60
ELLIPSE ALGORITHMS Slope = -1
ry 1 2
rx
dy
= −1 2ry2 x = 2rx2 y
dx
therefore, we move out of region 1 whenever
2ry2 x 2rx2 y
61
MIDPOINT ELLIPSE ALGORITHM
Midpoint
yi
yi-1
xi xi+1 xi+2
p1i +1 = f ellipse ( xi +1 + 1, yi +1 − 12 )
= ry2 ( xi + 2) 2 + rx2 ( yi +1 − 12 ) 2 − rx2 ry2
OR
p1i +1 = p1i + 2ry2 ( xi + 1) 2 + ry2 + rx2 ( yi +1 − 12 ) 2 − ( yi − 12 ) 2
where yi+1 = yi
or yi+1 = yi – 1
63
DECISION PARAMETER (REGION 1)
Decision parameters are incremented by:
2ry2 xi +1 + ry2 if p1i 0
increment = 2
y i +1 y
2 r x + r 2
− 2 r 2
x yi +1 if p1i 0
At initial
2r 2 x =position
0 (0, ry)
y
2r y = 2rx2 ry
x
2
Midpoint
yi
yi-1
xi xi+1 xi+2
Decision parameter:
p 2i = f ellipse ( xi + 12 , yi − 1)
= ry2 ( xi + 12 ) 2 + rx2 ( yi − 1) 2 − rx2 ry2
If p2i > 0 the midpoint is outside the ellipse xi is closer
If p2i ≤ 0 the midpoint is inside the ellipse xi + 1 is closer 65
DECISION PARAMETER (REGION 2)
p 2i +1 = f ellipse ( xi +1 + 12 , yi +1 − 1)
= ry2 ( xi +1 + 12 ) 2 + rx2 ( yi − 2) 2 − rx2 ry2
OR
p 2i +1 = p 2i − 2rx2 ( yi − 1) + rx2 + ry2 ( xi +1 + 12 )2 − ( xi + 12 )2
where xi+1 = xi
or xi+1 = xi + 1
66
DECISION PARAMETER (REGION 2)
Decision parameters are incremented by:
−2rx2 yi +1 + rx2 if p 2i 0
increment = 2
y i +1
2 r x − 2 r 2
y
x i +1 + rx
2
if p 2i 0
67
MIDPOINT ELLIPSE ALGORITHM
1. Input rx, ry, and ellipse center (xc, yc), and obtain the first point
on an ellipse centered on the origin as
(x0, y0) = (0, ry)
2. Calculate the initial parameter in region 1 as
p 2i +1 = p 2i − 2rx2 yi +1 + rx2
otherwise, the next point is (xi + 1, yi – 1) and
6
5
4
3
2
1
0
0 1 2 3 4 5 6 7 8 71
EXERCISES
72
MIDPOINT ELLIPSE FUNCTION
void ellipse(int Rx, int Ry)
{
int Rx2 = Rx * Rx, Ry2 = Ry * Ry;
int twoRx2 = 2 * Rx2, twoRy2 = Ry2 * Ry2;
int p, x = 0, y = Ry;
int px = 0, py = twoRx2 * y;
ellisePlotPoints(xcenter, ycenter, x, y);
// Region 1
p = round(Ry2 – (Rx2 * Ry) + (0.25 * Rx2));
while (px < py) {
x++;
px += twoRy2;
if (p < 0) p += Ry2 + px;
else {
y--;
py -= twoRx2;
p += Ry2 + px – py;
}
ellisePlotPoints(xcenter, ycenter, x, y);
}
// Region 2
p = round(Ry2 * (x+0.5) * (x+0.5) + Rx2 * (y-1)*(y-1) – Rx2 * Ry2;
while (y > 0) {
y--;
py -= twoRx2;
if (p > 0) p += Rx2 – py;
else {
x++;
px += twoRy2;
p += Rx2 – py + px;
}
ellisePlotPoints(xcenter, ycenter, x, y);
}
}
73
REFERENCE
Computer Graphics By Hearn and Baker
74