1. A. A. Datti 2018

2. HTML5 Canvas
Wall Clock
Rasterization
2D Transformations
2

3. 3
• Recall that a digital output device is arranged in form
of a rectangular grid of pixels call the raster
x
y

4. 4
• Hence the reason an image appears ‘pixelated’ when
you zoom in:

5. 5
• A line segment in a scene is defined by the coordinate
positions of the line end-points
x
y
(2, 2)
(7, 5)

6. 6
• But what happens when we try to draw
this on a pixel based display?
• How do we choose which pixels to turn on?
Brute Force Line Drawing Algorithm

7.  The starting point is the equation of a straight line:
 where m, the gradient of the line is:
 and c, its intercept of the y-axis is:

8. 8
x
y
(2, 2)
(7, 5)
2 3 4 5 6 7
2
5
6
.
0
5
3
2
7
2
5





m
8
.
0
5
4
2
5
3
2 




c
• First work out m and c:
• Now for each x value work out the y value:
6
.
2
5
3
2
5
4
3
5
3
)
3
( 




y 2
.
3
5
1
3
5
4
4
5
3
)
4
( 




y
8
.
3
5
4
3
5
4
5
5
3
)
5
( 




y 4
.
4
5
2
4
5
4
6
5
3
)
6
( 




y
Brute Force Line Drawing Algorithm

9. 9
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
0 1 2 3 4 5 6 7 8
0
1
2
3
4
5
6
7
Brute Force Line Drawing Algorithm

10.  The routine (in pseudo code) to draw a line might look like this:
 method lineDraw(x0,y0,x1,y1)
 {
DeltaY = y1-y0;
DeltaX = x1-x0;
m = DeltaY/DeltaX;
c = y0 - (m*x0);
for(int x=x0; x<x1; x++) {
y=(m*x) + c;
plotPoint(x,y)
}
}

11. 11
Observations
 Simple Implementation
 Gaps
 Vertical and Horizontal Lines
 High Computational Cost due to floating Point Arithmetic
 Integer Arithmetic is much faster.

12. 12
If the slope of a line is between -1 and 1 then we work out the y
coordinates for a line based on it’s unit x coordinates. Otherwise
gaps will appear.
To solve this we do the opposite – x coordinates are computed
based on unit y coordinates
m = 0
m = -1/3
m = -1/2
m = -1
m = -2
m = -4
m = ∞
m = 1/3
m = 1/2
m = 1
m = 2
m = 4
m = 0
Reducing Gaps

13. 13
Incremental algorithm - Each iteration is based on the
preceding step
yk =mxk+c
yk+1 =mxk+1+c
=m(xk+dx)+c
=mxk+c+mdx
=yk+mdx
If dx=1, then yk+1=yk+m
A unit change in x changes y by m
The slope of the line m needs to be computed just once

14. 14
Again the values calculated by the equations used by the
DDA algorithm must be rounded to match pixel values
(xk, yk)
(xk+1, yk+m)
(xk, round(yk))
(xk+1, round(yk+m))
(xk, yk) (xk+ 1/m, yk+1)
(round(xk), yk)
(round(xk+ 1/m), yk+1)

15. 15
compute m;
if m < 1:
{
float y = y0; // initial value
for(int x = x0;x <= x1; x++){
y += m;
setPixel(x, round(y));
}
}
else // m > 1
{
float x = x0; // initial value
for(int y = y0;y <= y1; y++){
x += 1/m;
setPixel(round(x), y);
}
}

16. 16
How is DDA better than Brute Force?

17. What are the set of pixels to be activated when a line
between (20,10) and (30,18) is being drawn using:
Brute Force Line drawing algorithm?
DDA Line drawing algorithm?