Lec-4_Rendering-1.pdf

Rendering – 1
(Scan Conversion of Line and Circle)
Lenin Laitonjam
NIT Mizoram
Computer Grapics - CSL 1603

Rendering
• To draw something on the screen, we need to consider
pixel grid
• Discreet space
• We need to map the representations from continuous to
discreet space
• The mapping process is called rendering
• Also called scan conversion/rasterization
• We will have a look at scan conversion of
• Point
• Line
• Circle
Rendering

Point Scan Conversion
•Trivial: simply round off to the nearest pixel
position
The point can be mapped to
any of the four pixel
positions, depending on the
coordinate value
e.g. (1.1, 2.6) maps to (1, 3)
Rendering

Line Scan Conversion
• A line segment is defined by the coordinate
positions of the line end-points
• What happens when we try to draw this on a
pixel based display?
• How to choose the correct pixels
Rendering

Line Equation
• Slope-intercept line
equation
where
x
y
y0
yend
xend
x0
b
x
m
y 


0
0
x
x
y
y
m
end
end



0
0 x
m
y
b 


Rendering

A Very Simple Solution
• Simply work out the corresponding y coordinate
for each unit x coordinate
• Let’s consider the following example
x
y
(2, 2)
(7, 5)
2 7
2
5
Rendering

• First work out m and b:
5
3
2
7
2
5




m
5
4
2
5
3
2 



b
 Now for each x value work out the y value
5
3
2
5
4
3
5
3
)
3
( 



y 5
1
3
5
4
4
5
3
)
4
( 



y
5
4
3
5
4
5
5
3
)
5
( 



y 5
2
4
5
4
6
5
3
)
6
( 



y
Rendering

• Now just round off the results and turn on these
pixels to draw our line
3
5
3
2
)
3
( 

y
3
5
1
3
)
4
( 

y
4
5
4
3
)
5
( 

y
4
5
2
4
)
6
( 

y
Rendering

• However, this approach is just way too slow
• In particular,
• The equation y = mx + b requires the
multiplication of m by x
• Rounding off the resulting y coordinates
• We need a faster solution
Rendering

A Quick Note About Slopes
• In the previous example, we chose to solve the
line equation to get y coordinate for each x
coordinate
• What if we had done it the other way around?
• So this gives us:
where: and
m
b
y
x


0
0
x
x
y
y
m
end
end


 0
0 x
m
y
b 


Rendering

A Quick Note About Slopes
• Leaving out the details this gives us:
• We can see easily that this line doesn’t look very
good!
• We choose which way to work out the line pixels
based on the slope of the line
• If the slope of a line is between -1 and 1, work out y
coordinates based on x coordinates
• Otherwise do the opposite – x coordinates are computed
based on y coordinates
4
3
2
3
)
3
( 

x 5
3
1
5
)
4
( 

x
Rendering

The DDAAlgorithm
• The digital differential analyzer (DDA)
algorithm takes an incremental approach in order
to speed up scan conversion
• Consider the list of points that we determined for
the line in our previous example:
(2, 2), (3, 23/5), (4, 31/5), (5, 34/5), (6, 42/5), (7, 5)
• Notice that as the x coordinates go up by one, the
y coordinates simply go up by the slope of the line
• This is the key insight in the DDA algorithm
Rendering

The DDAAlgorithm
• When m is between -1 and 1, begin at the first
point in the line and, by incrementing x by 1,
calculate the corresponding y as follows
• When m is outside these limits, increment y by 1
and calculate the corresponding x as follows
m
y
y k
k 

1
m
x
x k
k
1
1 


Rendering

The DDAAlgorithm
• Again the values calculated by the equations
used by the DDA algorithm must be rounded
Rendering

The DDAAlgorithm Summary
• The DDA algorithm is much faster than our
previous attempt
• In particular, there are no longer any
multiplications involved
• However, there are still two big issues
• Accumulation of round-off errors can make the
pixelated line drift away from what was intended
• The rounding operations and floating point
arithmetic involved are time-consuming
Rendering

The Bresenham Line Algorithm
• Move across the x axis in unit intervals and
at each step choose between two different y
coordinates
Rendering

• The y coordinate on the mathematical line at
xk+1 is:
Derivation
• At sample position xk+1 the vertical
separations from the mathematical line are
labelled dupper and dlower
b
x
m
y k 

 )
1
(
Rendering

Derivation
• So, dupper and dlower are given as follows:
and
• We can use these to make a simple decision
about which pixel is closer to the mathematical
line
k
lower y
y
d 

k
k y
b
x
m 


 )
1
(
y
y
d k
upper 

 )
1
(
b
x
m
y k
k 



 )
1
(
1
Rendering

Derivation
•This simple decision is based on the difference
between the two pixel positions:
• Let’s substitute m with ∆y/∆x where ∆x and ∆y
are the differences between the end-points:
1
2
2
)
1
(
2 




 b
y
x
m
d
d k
k
upper
lower
)
1
2
2
)
1
(
2
(
)
( 








 b
y
x
x
y
x
d
d
x k
k
upper
lower
)
1
2
(
2
2
2 









 b
x
y
y
x
x
y k
k
c
y
x
x
y k
k 





 2
2
Rendering

Derivation
• So, a decision parameter pk for the kth step
along a line is given by:
• The sign of the decision parameter pk is the
same as that of dlower – dupper
• If pk is negative, then choose the lower pixel,
otherwise choose the upper pixel
c
y
x
x
y
d
d
x
p
k
k
upper
lower
k










2
2
)
(
Rendering

Derivation
• Remember coordinate changes occur along the x
axis in unit steps, so we can do everything with
integer calculations
• At step k+1 the decision parameter is given as:
•Subtracting pk from this we get:
c
y
x
x
y
p k
k
k 





 

 1
1
1 2
2
)
(
2
)
(
2 1
1
1 k
k
k
k
k
k y
y
x
x
x
y
p
p 





 


Rendering

Derivation
• But, xk+1 is the same as xk+1 so:
•where yk+1 - yk is either 0 or 1 depending on the
sign of pk
• The first decision parameter p0, evaluated at
(x0, y0), is given as:
)
(
2
2 1
1 k
k
k
k y
y
x
y
p
p 




 

x
y
p 


 2
0
Rendering

1. Input the two line end-points, storing the left end-point
in (x0, y0)
2. Plot the point (x0, y0)
3. Calculate the constants Δx, Δy, 2Δy, and (2Δy - 2Δx) and
get the first value for the decision parameter as:
4. At each xk along the line, starting at k = 0, perform the
following test. If p < 0, the next point to plot is
(xk+1, yk) and:
x
y
p 


 2
y
p
p 

 2
Rendering

• The algorithm and derivation above assumes
slopes are less than 1 (|m| < 1.0), for other slopes
we need to adjust the algorithm slightly
Otherwise, the next point to plot is (xk+1, yk+1) and:
5. Repeat step 4 until x < (x2-1)
x
y
p
p 



 2
2
Rendering

Circle Scan Conversion
• The equation for a circle is:
where r is the radius of the circle
• So, we can write a simple circle drawing
algorithm by solving the equation for y at unit x
intervals using:
2
2
2
r
y
x 

2
2
x
r
y 


Rendering

Circle Scan Conversion
• Unsurprisingly this is not a brilliant solution
• Firstly, the resulting circle has large gaps where
the slope approaches the vertical
• Secondly, the calculations are not very efficient
• The square (multiply) operations
• The square root operation – try really hard to avoid
these!
• We need a more efficient, more accurate solution
Rendering

Eight-Way Symmetry
• Circles centred at (0, 0) have eight-way symmetry
– this fact can be exploited to design an efficient
algorithm
Rendering

Mid-Point Circle Algorithm
• An incremental algorithm for drawing circles
• Algorithm calculates pixels only for the top
right eighth of the circle
• Other points are derived using the eight-way
symmetry
Rendering

• Assume that we have
just plotted point (xk, yk)
•The next point is a
choice between (xk+1, yk)
and (xk+1, yk-1)
•We would like to choose
the point that is nearest to
the actual circle
• So how do we make this
choice?
Rendering

• Let’s re-jig the equation of the circle slightly to
give us:
• The equation evaluates as follows:
• By evaluating this function at the midpoint
between the candidate pixels we can make our
decision
2
2
2
)
,
( r
y
x
y
x
fcirc 










,
0
,
0
,
0
)
,
( y
x
f circ
boundary
circle
the
inside
is
y)
(x,
if
boundary
circle
on the
is
)
,
(
if y
x
boundary
circle
the
outside
is
)
,
(
if y
x
Rendering

• Assuming we have just plotted the pixel at (xk,yk) so
we need to choose between (xk+1,yk) and (xk+1,yk-1)
• Our decision variable can be defined as:
•If pk < 0 the midpoint is inside the circle and the pixel
at yk is closer to the circle
• Otherwise the midpoint is outside and yk-1 is closer
2
2
2
)
2
1
(
)
1
(
)
2
1
,
1
(
r
y
x
y
x
f
p
k
k
k
k
circ
k








Rendering

• To ensure things are as efficient as possible we
can do all of our calculations incrementally
• First consider:
or
where yk+1 is either yk or yk-1 depending on the
sign of pk
 
  2
2
1
2
1
1
1
2
1
]
1
)
1
[(
2
1
,
1
r
y
x
y
x
f
p
k
k
k
k
circ
k













1
)
(
)
(
)
1
(
2 1
2
2
1
1 






 

 k
k
k
k
k
k
k y
y
y
y
x
p
p
Rendering

• The first decision variable is given as
• Then if pk < 0 then the next decision variable is
given as:
• If pk > 0 then the decision variable is
r
r
r
r
f
p circ








4
5
)
2
1
(
1
)
2
1
,
1
(
2
2
0
1
2 1
1 

 
 k
k
k x
p
p
1
2
1
2 1
1 



 
 k
k
k
k y
x
p
p
Rendering

• Input radius r and circle centre (xc, yc), then set the
coordinates for the first point on the circumference
of a circle centred on the origin as:
• Calculate the initial value of the decision parameter
as:
• If p < 0, the next point along the circle centred on (0,
0) is (x+1, y) and:
))
roundoff(
,
0
(
)
,
( r
y
x 
r
p 

4
5
1
2 

 x
p
p
Rendering

• Otherwise the next point along the circle is
(x+1, y-1) and
• Determine symmetry points in the other seven
octants
• Move each calculated pixel position (x, y) onto
the circular path centred at (xc, yc) to plot the
coordinate values:
• Repeat steps 3 to 5 until x >= y
y
x
p
p 2
1
2 



c
x
x
x 
 c
y
y
y 

Rendering

Thank You

Lec-4_Rendering-1.pdf

Recommended

Recommended

More Related Content

Similar to Lec-4_Rendering-1.pdf

Similar to Lec-4_Rendering-1.pdf (20)

Recently uploaded

Recently uploaded (20)

Lec-4_Rendering-1.pdf