computer graphics · –dda algorithm •implicit form of line –only need to test for ‘side’...
TRANSCRIPT
![Page 1: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/1.jpg)
Computer Graphics
Lecture 4
Line Drawing
![Page 2: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/2.jpg)
2
Outline
• Background
• DDA algorithm
• Midpoint algorithm
• Gupta-Sproull algorithm
![Page 3: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/3.jpg)
3
Drawing lines : Background
• Converting a continuous object in the world into a discrete object in the computer
• We need to lit the pixels instead of drawing a continuous line
![Page 4: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/4.jpg)
4
Simple Line
From linear algebra
y = a x + b
Simple approach:
increment x, calculate y
Then cast y to an integer
(x, (int)y)
Will this work?
![Page 5: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/5.jpg)
5
Does it Work?
• It seems to work okay for lines
with a slope of 1 or less
• But doesn’t work well for lines
with slope greater than 1
• Lines become more discontinuous
in appearance
• We must add more than 1 pixel
per column to make it work.
![Page 6: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/6.jpg)
6
DDA algorithm
• DDA = Digital Differential Analyser
– finite differences
• Treat line as parametric equation in t :
)()(
)()(
121
121
yytyty
xxtxtx
),(
),(
22
11
yx
yxStart point -
End point -
![Page 7: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/7.jpg)
DDA Algorithm
• Choose appropriate value for the
number of steps (n)
• Start at t = 0
• At each step, increment t by 1/n
• Ensure no pixels are missed:
– Implies: and
• Set n to maximum of dx and dy
)()(
)()(
121
121
yytyty
xxtxtx
n
dyyy
n
dxxx
oldnew
oldnew
1n
dx1
n
dy
12
12
yydy
xxdx
![Page 8: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/8.jpg)
8
DDA algorithm line(int x1, int y1, int x2, int y2)
{
float x,y;
int dx = x2-x1, dy = y2-y1;
int n = max(abs(dx),abs(dy));
float dt = n, dxdt = dx/dt, dydt = dy/dt;
x = x1;
y = y1;
while( n-- ) {
point(round(x),round(y));
x += dxdt;
y += dydt;
}
}
n - range of t.
![Page 9: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/9.jpg)
9
DDA algorithm
• Need a lot of floating point arithmetic.
– 2 ‘round’s and 2 adds per pixel.
• Can we use only integer arithmetic ?
– Easier to implement in hardware.
![Page 10: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/10.jpg)
Midpoint Algorithm: Overview
• At step p, assume pixel (𝑥𝑝, 𝑦𝑝) was lit
• Check where the line intersects with 𝑥 = 𝑥𝑝+1
• Lit (𝑥𝑝+1, 𝑦𝑝) or (𝑥𝑝+1, 𝑦𝑝 + 1) , whichever is
closer to the intersection
![Page 11: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/11.jpg)
11
Midpoint Algorithm
• Need a test to determine which side of a line a pixel lies.
• Write the line in implicit form:
0),( cbyaxyxF
•F<0 when the line is below the point
• F>0 when the line is above the points
(when b < 0) : ex. F(x,y) = x – y = 0
![Page 12: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/12.jpg)
Testing for the side of a line.
nxdx
dyynmxy so and
0..),( cydxxdyyxF
• Assume the line is connecting 𝑥𝑙 , 𝑦𝑙 , 𝑥𝑟 , 𝑦𝑟
• The slope will be 𝑑𝑦
𝑑𝑥 where 𝑑𝑥 = 𝑥𝑟 − 𝑥𝑙 ,
𝑑𝑦 = 𝑦𝑟 − 𝑦𝑙
0),( cbyaxyxF
![Page 13: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/13.jpg)
Decision variable.
Previous
Pixel
(xp,yp)
Choices for
Current pixel
Choices for
Next pixel
Let’s assume dy/dx < 1 (we can use symmetry)
Evaluate F at point M
Referred to as decision variable If d ≤ 0, select E as the next pixel
otherwise select NE as the next pixel
cybxayxFd pppp )2
1()1()
2
1,1(
M
NE
E
![Page 14: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/14.jpg)
14
Updating the decision variable
Evaluate d for next pixel, Depends on whether E or NE Is chosen :
If E chosen :
cybxayxFd ppppnew )2
1()2()
2
1,2(
But recall :
cybxa
yxFd
pp
ppold
)2
1()1(
)2
1,1(
So :
dyd
add
old
oldnew
M
E
NE
Previous
Pixel
(xp,yp)
Choices for
Current pixel
Choices for
Next pixel
![Page 15: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/15.jpg)
15
Decision variable.
If NE was chosen :
cybxayxFd ppppnew )2
3()2()
2
3,2(
So :
dxdyd
badd
old
oldnew
M
E
NE
Previous
Pixel
(xp,yp)
Choices for
Current pixel
Choices for
Next pixel
But recall :
cybxa
yxFd
pp
ppold
)2
1()1(
)2
1,1(
![Page 16: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/16.jpg)
16
Summary of mid-point algorithm
• Choose between 2 pixels at each step based upon the sign of a decision variable.
• Update the decision variable based upon which pixel is chosen.
• Start point is simply first endpoint (xl,yl).
• Need to calculate the initial value for d
![Page 17: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/17.jpg)
17
Initial value of d.
2
)2
1()1()
2
1,1(
bacbyax
cybxayxFd
ll
llllstart
But (xl,yl) is a point on the line, so F(x1,y1) =0
2/dxdydstart
Multiply by 2 to avoid floating point operations
(We are only using the sign of the decision variable)
2),(
bayxF ll
Start point is (xl,y1)
![Page 18: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/18.jpg)
Decision variable : summary
• New equation for
decision variable
• Initialization
• If E point is selected
• If NE point is selected
Only requires integer operations
dxdyd start 2
dxdydd oldnew 22
dydd oldnew 2
)(2),( cbyaxyxFd
![Page 19: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/19.jpg)
19
Midpoint algorithm
void MidpointLine(int
x1,y1,x2,y2)
{
int dx=x2-x1;
int dy=y2-y1;
int d=2*dy-dx;
int increE=2*dy;
int incrNE=2*(dy-dx);
x=x1;
y=y1;
WritePixel(x,y);
while (x < x2) {
if (d<= 0) {
d+=incrE;
x++
} else {
d+=incrNE;
x++;
y++;
}
WritePixel(x,y);
}
}
![Page 20: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/20.jpg)
Quiz
• Initialization
• If E point is selected
• If NE point is selected
dxdyd start 2
dxdydd oldnew 22
dydd oldnew 2
1. What are the decision variables at each x?
2. Which pixels will be lit?
![Page 21: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/21.jpg)
What if the slope is not between 0 and 1?
• Use symmetry
• For example,
– For m > 1, switch x and y, draw the line, and switch back x and y
– For m < 0, negate the line, draw the line, and negate again
![Page 22: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/22.jpg)
22
Circle drawing.
• Can also use Bresenham to draw circles.
• Use 8-fold symmetry
Choices for
Next pixel
M
E
SE
Previous
Pixel
Choices for
Current pixel
![Page 23: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/23.jpg)
23
Circle drawing.
• Implicit form for a circle is:
)32(chosen is E If
)522(chosen is SE If
poldnew
ppoldnew
xdd
yxdd
• Functions are linear equations in terms of (xp,yp)
–Termed point of evaluation
222 )()(),( ryyxxyxf cc
![Page 24: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/24.jpg)
24
Summary of line drawing so far.
• Explicit form of line – Inefficient, difficult to control.
• Parametric form of line. – Express line in terms of parameter t
– DDA algorithm
• Implicit form of line – Only need to test for ‘side’ of line.
– Midpoint algorithm.
– Can also draw circles.
)()(
)()(
121
121
yytyty
xxtxtx
nmxy
0..),( cydxxdyyxF
![Page 25: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/25.jpg)
25
Problems with Midpoint algorithm
• Pixels are drawn as a single line unequal line intensity with change in angle.
Pixel density = n pixels/mm
Pixel density = 2.n pixels/mm
Can draw lines in darker colours
according to line direction.
-Better solution : antialiasing !
-(eg. Gupta-Sproull algorithm)
![Page 26: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/26.jpg)
Gupta-Sproull algorithm.
• Calculate the distance of the line and the pixel center
• Adjust the color according to the distance
• Can also draw thicker lines
![Page 27: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/27.jpg)
Gupta-Sproull algorithm.
Runs in parallel with the midpoint algorithm
Calculate distance using features of mid-point algorithm
Only limited floating point operations 22
cos
dydx
vdx
vD
![Page 28: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/28.jpg)
Gupta-Sproull algorithm.
Lets compute 22
cos
dydx
vdx
vD
Need to compute v
![Page 29: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/29.jpg)
v: the signed distance between the intersection point and {E|NE}
Line:
For pixel E:
So:
Gupta-Sproull algorithm (cont)
y
1px
v
b
cax
)(
1py py v 1 pyy1px
p
py
b
cxa
)1(
22
cos
dydx
vdx
vD
![Page 30: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/30.jpg)
Gupta-Sproull algorithm (cont)
From previous slide:
From the midpoint computation,
So:
dxb
pp
yb
cxav
)1(
2/),1()1( pppp yxFcbyxavdx
22
cos
dydx
vdx
vD
![Page 31: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/31.jpg)
Gupta-Sproull algorithm (cont) From the midpoint algorithm, we had the
decision variable (remember?)
Going back to our previous equation:
)2
1,()( 1 pp yxFMFd
),1(2 pp yxFvdx
cbyxa pp 22)1(2
cbybxa pp 22/2)2/1(2)1(2
byxF pp )2/1,1(
bMF )(
bd dxd
22
cos
dydx
vdx
vD
![Page 32: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/32.jpg)
Gupta-Sproull algorithm (cont) So,
The numerator is an integer
And the denominator is constant
Only one floating point operation per pixel
222 dydx
dxdD
![Page 33: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/33.jpg)
Since we are blurring the line, we also need to compute
the distances to points yp – 1 and yp + 1
vdxdxdxvy
vdxdxdxvy
p
p
22)1(2 1for numerator
22)1(2 1for numerator
22
cos
dydx
vdx
vD
![Page 34: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/34.jpg)
Gupta-Sproull algorithm (cont)
If the NE pixel had been chosen:
vdxdxdxvy
vdxdxdxvy
p
p
22)1(2 for numerator
22)1(2 2for numerator
dxd
bd
bMF
byxF
cbybxa
cbyxa
yxFvdx
pp
pp
pp
pp
)(
)2/1,1(
22/2)2/1(2)1(2
2)1(2)1(2
)1,1(2
![Page 35: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/35.jpg)
Quiz
1. What is the denominator?
2. What is the distance of each pixel lit by midpoint
algorithm and the line
222 :E
dydx
dxdD
222 :NE
dydx
dxdD
1 -3, 3, -1, 5
![Page 36: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/36.jpg)
Gupta-Sproull algorithm (cont)
• Compute midpoint line algorithm, with the following alterations:
• At each iteration of the algorithm:
– If the E pixel is chosen, set numerator = d + dx
– If the NE pixel is chosen, set numerator = d – dx
– Update d as in the regular algorithm
– Compute D = numerator/denominator
– Color the current pixel according to D
– Compute Dupper = (2dx-2vdx)/denominator
– Compute Dlower = (2dx+2vdx)/denominator
– Color upper and lower accordingly
![Page 37: Computer Graphics · –DDA algorithm •Implicit form of line –Only need to test for ‘side’ of line. –Midpoint algorithm. –Can also draw circles. ( ) ( ) ( ) ( ) 1 2 1](https://reader034.vdocuments.mx/reader034/viewer/2022050600/5fa76cb3e0e58209cf5e684f/html5/thumbnails/37.jpg)
Readings
•Foley Chapter 3.2