Shape Drawing Algorithms
Shmuel Wimer
Bar Ilan Univ., Engineering Faculty
March 2010
1
Display
Window
ymax
World –coordinate limits
xmin
y
ymin
xmax
5
4
Screen –coordinates
3
2
1
0
0 1
March 2010
2
3
4
5
x
(4,2) pixel
coordinate
2
Line Drawing Algorithms
We’d like to display straight line on the screen.
In analog displays, such as vector-scan, a smooth line can be
displayed, as line equation is translated into deflection voltages.
On raster systems, lines are plotted with pixels which have vertical
and horizontal finite resolution.
The outcome is a jaggy line.
March 2010
3
straight line equation: y  mx  b
yend
yend  y0
m
; b  y0  mx0
xend  x0
y0
x0
xend
Straight line drawing uses increments  x or  y and finds the
counterpart. If |m|  1  y  m x, and if |m|  1  x   y m .
In raster systems lines are plotted with pixels and step sizes in the
horizontal and vertical directions must be sampled at nearest pixel
positions.
March 2010
4
Digital differntial analyzer (DDA) samples the line in unit
steps in one coordinate and the nearest integer value is
calculated in the other coordinate.
If m  1, sampling at  x  1 obtains: yk 1  yk  m and pixel
coordinate is obtained by rounding to nearest interger.
Similarly, if m  1,  y  1 and xk 1  xk  1 m.
DDA avoids mutltiplication, but involves floating point
addition. A round-off error is accumulated, drifting pixels
position from the original line.
March 2010
5
Bresenham's algorithm is accurate and efficient, using only
incremental integer calculations. Assume m  1. We step to
successive columns ( x  1).
We start at pixel (x0 ,y0 ). Assume that pixel (xk ,y k ) is decided
to be displayed. Next pixel is either (xk +1,yk ) or (xk +1,y k 1 ).
Decision on yk or yk 1 is
made according to which
yk 1
y
one is closer to the real y
yk
of the line.
March 2010
xk  1
6
x is sampled at next pixel. In real line: y  m  xk 1  b.
Distance from lower pixel: dlower  y  yk  m  xk 1  b  yk .
From upper pixel: dupper   yk 1  y  yk 1 m  xk  1  b.
Compare distances. Set pixel
according to smaller distance.
d lower  d upper 
2m  xk  1  2 yk  2b  1.
March 2010
yk 1
y
yk
dupper
dlower
xk  1
7
m  y x . Multiplying by x  0 doesn't cahnge the sign
of difference. The decision parameter pk is defined by:
pk  x  dlower  d upper   2 xk y  2 yk x  2y  x  2b  1 .
constant
If pk  0 we plot the lower pixel; otherwise upper is drawn.
March 2010
8
The decision pk can be computed recursively as follows:
pk 1  2y  xk 1  2x  yk 1  2y  x  2b  1 .
constant
pk 1  pk  2y  xk 1  xk   2x  yk 1  yk  
 0 if pk  0
2y  2x  yk 1  yk   2y  
.
 2x if pk  0
March 2010
9
Circle Drawing Algorithms
x  x  y  y   r
2
c
2
2
 x, y 
c
r
y  yc  r 2   xc  x 
2

yc
xc
We could use above equation to
step along the x axis from xc- r
to xc+ r and calculate y positions
of pixels.
March 2010
10
This requires considerable amount of computation (square root)
The drawing appearance is poor since the vertical spacing
between drawn pixels is uneven.
Appearance can be improved by changing the role of x and y
whenever the absolute value of the slope of circle is crossing 1.
But this requires more computation.
Polar coordinates can be used with
uniform stepping of θ. This spaces
pixels evenly along circumference.
x  xc  r cos 
y  yc  r sin 
Time consuming due to trigonometric computations.
March 2010
11
We can use large angular steps and
connect the points by straight lines.
For smoother boundary we can use
angular steps of 1/r which plots
pixels approximately one pixel
apart of each other (r∙1/r =1).
Any of the methods can use
symmetry for efficiency.
All methods involve
expensive computations.
March 2010
  y, x 
  x, y 
  x,  y 
  y,  x 
 y, x
O
45
 x, y 
 x,  y 
 y,  x 
12
Midpoint Circle Algorithm determines the mid point between
two pixels. If it falls inside the circle, the lower pixel is plotted,
otherwise the upper does. Assume w.l.o.g that circle is centered
at  0, 0  .  xc , yc  can be added later.
x2  y 2  r 2  0
fcirc  x, y   x2  y2  r 2
midpoint
yk
 0 inside

f circ  x, y   0 boundary
 0 outside

March 2010
yk 1
xk xk 1 xk 2
13
Assuming that last plotted pixel was  xk , yk  , we need decide
whether next plotted is  xk  1, yk  or  xk  1, yk  1 .
pk  f circ  xk  1, yk  1 2    xk  1   yk  1 2   r 2
2
2
If pk  0 midpoint is inside the circle and pixel  xk  1, yk  is
closer to circle and plotted. Otherwise  xk  1, yk  1 does.
Successive decision parameters are obtained by incremental
calculations.
pk 1  f circ  xk 1  1, yk 1  1 2    xk  2    yk 1  1 2   r 2
2
2
 pk  2  xk  1   yk21  yk2    yk 1  yk   1
March 2010
14
The value of yk 1 used in the calculation of pk 1 is yk if pk  0, or
yk  1 if pk  0. So the increments of p is the following:
if pk  0
 2 xk 1  1
p  pk 1  pk  
2 xk 1  1  2 yk 1 if pk  0
Evaluations of 2 xk 1 and 2 yk 1 are also incremental 2 xk 1  2 xk  2,
2 yk 1  2 yk  2. At start position  0, r  these values are 0 and 2r ,
respectively.
p0 is obtained from  x0 , y0    0, r  , p0  f circ 1, r  1 2 
 1   r  1 2   r 2  5 4  r. p updates are made by integral
2
increments and decrements, so if r is integer, we set p0  1  r.
March 2010
15
Example: Draw a circle with r  10.
Initialization: p0  1  10  9 ; 2 x0  0 , 2 y0  20
y
k
pk
(xk+1,yk+1)
2xk+1
2yk+1
0
-9
(1,10)
2
20
1
-6
(2,10)
4
20
2
-1
(3,10)
6
20
3
6
(4,9)
8
18
4
-3
(5,9)
10
18
5
8
(6,8)
12
16
6
5
(7,7)
14
14
10
9
8
7
6
5
4
3
2
1
0
0 1 2 3 4 5 6 7 8 9 10
March 2010
x
16
Ellipse Drawing Algorithms
F1 and F2 are foci, d1  d 2  const
 x  x1    y  y1 
2
2
 x  x2    y  y2 
2
2
d1

P   x, y 
F1
d2
 const
F2
Ax 2  By 2  Cxy  Dx  Ey  F  0
Simplified if ellipse axes are parallel
to coordinate axes.
 x  xc  rx2   y  yc  ry2  1
2
2
yc
ry
rx
x  xc  rx cos  ; y  yc  ry sin 
March 2010
xc
17
Unlike circles, symmetry exists only in quadrants.
Midpoint Ellipse Algorithm is working similar to circle with a few
adaptations.
fellipse  x, y   r x  r y  r r
2 2
y
2
x
2
 0 inside

f ellipse  x, y   0 boundary
 0 outside

2 2
x y
region 1
slope  1
region 2
ry
rx
dy dx    2ry2 x   2rx2 y 
Move from region 1 to region 2 when 2ry2 x  2rx2 y
March 2010
18
ry2 x2  rx2 y2  rx2ry2  0
p1k  f ellipse  xk  1, yk  1 2 
r
2
y
 xk  1
2
r
2
x
 yk  1 2 
2
r r
2 2
x y
midpoint
yk
yk 1
p1k 1  f ellipse  xk 1  1, yk 1  1 2 
 ry2  xk  2   rx2  yk 1  1 2   rx2 ry2
2
2
2ry2 xk 1  ry2
p  p1k 1  p1k   2
2
2
2
r
x

r

2
r
 y k 1 y
x yk 1
xk xk 1 xk 2
if p1k  0
if p1k  0
These terms can be calculated by addition only.
At  0, ry  2ry2 x  0 and 2rx2 y  2rx2 ry
March 2010
19
p10 is obtained from  x0 , y0    0, ry  ,
p10  f ellipse 1, ry  1 2   ry2  rx2 ry  rx2 4.
p 2k is handled similarly. We could start at the end point
of region1 and proceed clockwise, but it is better to walk
counterclockwise, starting at  x0 , y0    rx , 0  .
March 2010
20
Polygon Fill Areas
Convex polygons are
easy to fill
Concave polygons are
more difficult to fill
Some graphics packages support convex polygon filling only.
How should polygon split into convex components?
We’d like to avoid any trigonometric or division operations.
We’ll use vector product a x b for convex / concave test.
March 2010
21
E5
Polygon vertices are counterclockwise
oriented.
V5
V6
E4
E6
V4
The cross product of successive edges
is a perpendicular vector.
E3
Z component is positive for convex
angle and negative for concave.
V3
E2
V1
E1
Only multiplications are involved.
V2
ux
uy
uz
Ei  E j  Eix
Eiy
Eiz
E jx
E jy
E jz
 E1  E2 z  0
 E2  E3 z  0
 E3  E4 z  0
 E4  E5 z  0
 E5  E6 z  0
 E6  E1 z  0
March 2010
22
Define oriented edge by: Ek  Vk 1  Vk
Apply cross product:
Ei  E j   Eiy E jz  Eiz E jy , Eiz E jx  Eix E jz , Eix E jy  Eiy E jx 
A convex corner following concave one can be eliminated by
splitting a triangle and reducing vertex degree, until all concave
corners are eliminated.
The remaining convex polygon can be further split into triangles
by a successive traversal of its vertices.
March 2010
23
Found
concave
followed by
convex
Tear off
triangle
Tear off
triangle
The problem turns to filling of triangles
March 2010
24
Inside-Outside Tests
?
?
Odd-even rule: Draw “infinite” ray and
count the number of crossings. Odd is
inside, even outside.
Avoid passing through vertices.
Nonzero winding-number rule:
Draw “infinite” directed ray. Traverse
edges and check for crossing
direction (e.g. by cross product). Add
±1 accordingly. If it sums to zero
point is outside, otherwise it is
inside.
March 2010
25
Polygon Tables
Objects are described by sets of polygon surface facets.
V1
E6
E1
E3
V5
V3
V2
E2
E5
E4
V4
March 2010
VERTEX
TABLE
V1 : x1 , y1 , z1
V2 : x2 , y2 , z2
V3 : x3 , y3 , z3
V4 : x4 , y4 , z4
V5 : x5 , y5 , z5
EDGE
TABLE
E1 : V1 , V2
E2 : V2 , V3
E3 : V3 , V1
E4 : V3 , V4
E5 : V4 , V5
E6 : V5 , V1
SURFACE-FACET
TABLE
S1 : E1 , E2 , E3
S2 : E3 , E4 , E5 , E6
26
• In hardware implementation these tables translate into
physical RW memories.
• For hardware implementations triangles are preferred,
since it makes SURFACE-FACET MEMORY
homogeneous.
• Data in memories needs to be organized to maximize
pipeline processing of facets:
– Vertices are stored such that vertex progression in VERTEX
MEMORY completes new triangle for every vertex.
– Vertex indices are their memory addresses.
• It is the SW application responsibility to triangulate
objects and load HW memories in the right order.
March 2010
27
Plane Equations
• Graphics system processes input data through several
steps:
– Transformation of modeling through viewing pipeline.
– Identification of visible surfaces.
– Rendering of surface facets.
• Information about the spatial orientation of surfaces is
needed
– Plane equations are in order.
– How to calculate those efficiently w/o divisions?
March 2010
28
General plane equation: Ax  By  Cz  D  0
x, y, z is any point on the plane. A, B, C , D are constansts
describing spatial propertis of the plane.
 x1 , y1, z1  ,  x2 , y2 , z2  and  x3 , y3 , z3  non co-linear ordered
counterclockwise,  A D  xk   B D  yk   C D  zk  1, k  1, 2,3.
A  y1  z2  z3   y2  z3  z1   y3  z1  z2 
B  z1  x2  x3   z2  x3  x1   z3  x1  x2 
C  x1  y2  y3   x2  y3  y1   x3  y1  y2 
D    x1  y2 z3  y3 z2   x2  y3 z1  y1 z3   x3  y1 z2  y2 z1  
March 2010
29
Front and Back Polygon Faces
• Polygon surfaces enclose objects.
– Need to know the outward an inward sides of polygon.
• Need to find the side of a polygon visible by an observer.
A point  x, y, z  not on the plane satisfies: Ax  By  Cz  D  0.
If Ax  By  Cz  D  0 the point  x, y, z  is behind the plane.
If Ax  By  Cz  D  0 the point  x, y, z  is in front of the plane.
The normal is N   A, B, C   V2  V1   V3  V1  , yielding
plane coeficient. Normal is used for coloring and highlighting.
March 2010
30
Scan-Line Polygon-Fill Algorithms
• This is most time consuming operation in computer
graphics.
– Use only integer arithmetic with minimum operations
• Polygons are filled with scan-line
– The sweep is vertical
– A scan-line is the pixels of same y coordinates
y
Pixels between odd-even
intersections with border
1
2
3
are inside.
4
x
March 2010
31
A problem may occur at vertices. Scan-line y’ is okay, but y is not.
The remedy is to traverse edges prior to filling and detect the values
of three consecutive of two successive edges. If they are monotonic
then one of the edges is shortened by one pixel at corner
Scan-line y’
1
1
March 2010
2
1
2
1
1
Scan-line y
32
Polygon filling takes advantage of y increments by one unit.
 xk 1, yk 1 
 xk , yk 
Scan-line yk  1
Scan-line yk
How to calculate efficiently the intersection of an edge with scan line?
yk 1  yk 

m
, yk 1  yk  1
 xk 1  xk 
1
 xk 1  xk 
m
How to avoid division?
March 2010
33
Calculate x interceps by: m 
y
x
, xk 1  xk 
x
y
Initialize a counter to 0. Then increment the counter by x each time
y is incremented by 1 (moving to new scal-line). Once counter meets
or exceeds y, x is increased by 1 and counter is decreased by y.
This is equivalent to maintaining integer and fractional parts of
intercepts and incrementing the fractional parts until it reaches
the next integer value.
March 2010
34
Example: y x  7 3.  y, count  : x   y0 , 0  : x0 ,
 y0  1,3 : x0 ,
 y0  2, 6  : x0 ,  y0  3,9    y0  3, 2  : x0  1,  y0  4,5  : x0  1,
 y0  5,8   y0  5,1 : x0  2,...
Instead of truncation we can round to nearest pixel x intersection
by comparing the counter to y 2. This can be done with integer
arithmetics by adding 2x, comparing to y, and then decreasing
counter by 2y.
Example: y x  7 3.  y, count  : x   y0 , 0  : x0 ,
 y0  1, 6  : x0 ,
 y0  2,12    y0  2, 2  : x0  1,  y0  3, 4  : x0  1,  y0  4,10  
 y0  4, 4  : x0  2,...
March 2010
35
Antialiasing
• Graphics primitives generated by raster algorithms have
jagged (stair-step) appearance, called aliasing.
– This is due to under sampling.
– Antialiasing compensates for this.
• Sampling rate could increase by higher raster resolution.
– Expensive, increase of frame buffer (memory).
– More processing (time, hardware).
– Jagging phenomena is not canceled, but only improved.
• Raster systems capable of gradual intensity of pixels can
support antialiasing by modifying pixel intensity near
boundary of primitives.
March 2010
36
Antialiasing by Supersampling
• Treat the screen as if it has finer grid than actual.
• Modify real pixel intensity according to the number of
covered sub-pixels
There are 4 possible intensities,
depending on the count of covered
pixels at every 3x3 superpixel
(1,1) is covered by 3 subpixels
(2,2) and ((3,2) are covered by 2
subpixels
(2,1) and ((3,3) are covered by 1
subpixels
March 2010
37
• Line was treated as zero width.
• In case of finite width we count the number of subpixels
inside the polygon representing the line.
Useful also for mixing foreground
and background colors in a pixel.
For instance, if foreground is red
and background is blue:
Pixelcolor 
March 2010
5  red  4  blue
9
38
Antialiasing by subpixel Weighting Masks
Central pixel is most important and has
1
2
1
a weight of 1/4. Others has a weight of
1/8 and 1/16.
2
4
2
1
2
1
Antialiasing compensates for line-intensity differences
Diagonal lines are less instance than horizontal
and vertical ones.
Supersampling with higher weights for subpixels
close to diagonal will intensify diagonal lines
March 2010
39
Antialiasing Area Boundaries
Pixel intensities are adjusted along
the boundary of area.
Subdivide area of pixels and double scanline. Count how many subpixels are inside.
Scan-line 1
Scan-line 2
75% pixel intensity
March 2010
40
Percentage of pixel area within fill area by midpoint
method (Pitteway & Watkinson).
y  mx  b
yk  1
plotted. The next nearest
yk  0.5
yk
line at xk 1 is either at yk or at
xk xk  1
y  ymid
Assume that  xk , yk  has been
yk  1.
if  0 select yk  1
  m  xk  1  b    yk  0.5  
,
 if  0 select yk
or by adding the term 1  m
if  1  m select yk  1
p   m  xk  1  b    yk  0.5  1  m  
 if  1  m select yk
March 2010
41
yk  0.5
boundary line
yk
y  m  xk  0.5  b
yk  0.5
xk  0.5
y  m  xk  0.5  b
overlap area
xk
xk  0.5
The overlap area of a pixel rectangle at  xk , yk  with the interior
of polygon is: area  mxk  b  yk  0.5  p.
We can intensify the pixel for antialiasing accordingly.
March 2010
42