Computer Graphics
Computer Graphics
Towards the Ideal Line
• We can only do a discrete approximation
Computer Graphics
Lecture 3
Line & Circle Drawing
• Illuminate pixels as close to the true path as
possible, consider bi-level display only
– Pixels are either lit or not lit
2
Computer Graphics
Computer Graphics
What is an ideal line
Simple Line
• Must appear straight and continuous
Based on slope-intercept
algorithm from algebra:
– Only possible axis-aligned and 45o lines
• Must interpolate both defining end points
• Must have uniform density and intensity
y = mx + b
Simple approach:
– Consistent within a line and over all lines
– What about antialiasing?
increment x, solve for y
Floating point arithmetic
required
• Must be efficient, drawn quickly
– Lots of them are required!!!
3
Computer Graphics
4
Computer Graphics
Modify algorithm per octant
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
and we must add more than 1 pixel
per column to make it work.
Solution? - use symmetry.
OR, increment along x-axis if dy<dx else increment along y-axis
5
6
1
Computer Graphics
Computer Graphics
•
•
•
•
• DDA = Digital Differential Analyser
– finite differences
• Treat line as parametric equation in t :
Start point - ( x1 , y1 )
End point - ( x2 , y2 )
x(t ) = x1 + t ( x2 − x1 )
DDA Algorithm
DDA algorithm
x(t ) = x1 + t ( x2 − x1 )
y (t ) = y1 + t ( y2 − y1 )
Start at t = 0
At each step, increment t by dt
Choose appropriate value for dt
Ensure no pixels are missed:
– Implies:
y (t ) = y1 + t ( y2 − y1 )
dx
<1
dt
and
dx
dt
dy
+
dt
xnew = xold +
ynew = yold
dx = x2 − x1
dy = y2 − y1
dy
<1
dt
• Set dt to maximum of dx and dy
7
Computer Graphics
8
Computer Graphics
DDA algorithm
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;
}
}
• Still need a lot of floating point arithmetic.
n - range of t.
– 2 ‘round’s and 2 adds per pixel.
• Is there a simpler way ?
• Can we use only integer arithmetic ?
– Easier to implement in hardware.
9
Computer Graphics
10
Computer Graphics
Testing for the side of a line.
Observation on lines.
while( n-- )
{
draw(x,y);
move right;
if( below line )
move up;
}
11
• Need a test to determine which side of a line
a pixel lies.
• Write the line in implicit form:
F ( x, y ) = ax + by + c = 0
•If (b<0) F<0 for points above the line, F>0 for
points below.
12
2
Computer Graphics
Computer Graphics
Decision variable.
Testing for the side of a line.
Let’s assume dy/dx < 0.5 (we can use symmetry)
F ( x, y ) = ax + by + c = 0
• Need to find coefficients a,b,c.
• Recall explicit, slope-intercept form :
Referred to as decision variable
dy
x+b
dx
y = mx + b and so y =
• So:
Evaluate F at point M
NE
M
F(x, y) = dy.x − dx.y + c = 0
E
Previous
Pixel
(xp,yp)
13
Computer Graphics
Choices for
Current pixel
Choices for
Next pixel
Computer Graphics
Decision variable.
Decision variable.
Evaluate d for next pixel, Depends on whether E or NE Is chosen :
If NE was chosen :
If E chosen :
3
3
d new = F ( x p + 2, y p + ) = a( x p + 2) + b( y p + ) + c
2
2
1
1
d new = F ( x p + 2, y p + ) = a( x p + 2) + b( y p + ) + c
2
2
But recall :
NE
M
E
Previous
Pixel
(xp,yp)
1
d = F ( x p + 1, y p + )
2
Choices for
Current pixel
Choices for
Next pixel
M
1
d old = F ( x p + 1, y p + )
2
1
= a( x p + 1) + b( y p + ) + c
2
So :
NE
d new = d old + a + b
= d old + dy − dx
E
d new = d old + a
Previous
Pixel
(xp,yp)
= d old + dy
So :
Choices for
Current pixel
Choices for
Next pixel
15
Computer Graphics
16
Computer Graphics
Summary of mid-point algorithm
Initial value of d.
Start point is (x1,y1)
• 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 (x1,y1).
• Need to calculate the initial value for d
1
1
d start = F ( x1 + 1, y1 + ) = a ( x1 + 1) + b( y1 + ) + c
2
2
b
= ax1 + by1 + c + a +
2
b
= F ( x1 , y1 ) + a +
2
But (x1,y1) is a point on the line, so F(x1,y1) =0
d start = dy − dx / 2
Conventional to multiply by 2 to remove fraction ⇒ doesn’t effect sign.
17
18
3
Computer Graphics
Computer Graphics
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);
Circle drawing.
• Can also use Bresenham to draw circles.
while (x < x2) {
if (d<= 0) {
d+=incrE;
x++
• Use 8-fold symmetry
E
} else {
d+=incrNE;
x++;
y++;
}
WritePixel(x,y);
M
SE
}
}
Previous
Pixel
Choices for
Current pixel
19
Computer Graphics
Choices for
Next pixel
20
Computer Graphics
Circle drawing.
Summary of line drawing so far.
• Explicit form of line
• Implicit form for a circle is:
– Inefficient, difficult to control.
f ( x, y ) = ( x − xc ) 2 + ( y − yc ) 2 − r 2
• Parametric form of line.
– Express line in terms of parameter t
– DDA algorithm
If SE is chosen d new = d old + (2 x p − 2 y p + 5)
If E is chosen d new = d old + ( 2 x p + 3)
• Implicit form of line
– Only need to test for ‘side’ of line.
– Bresenham algorithm.
– Can also draw circles.
• Functions are linear equations in terms of (xp,yp)
–Termed point of evaluation
21
Computer Graphics
22
Computer Graphics
Gupta-Sproull algorithm.
Problems with Bresenham algorithm
• Calculate the distance of the line and the pixel
center
• Adjust the colour according to the distance
• Pixels are drawn as a single line ⇒ unequal
line intensity with change in angle.
Pixel density = √2.n pixels/mm
Can draw lines in darker colours
according to line direction.
-Better solution : antialiasing !
-(eg. Gupta-Sproull algorithm)
Pixel density = n pixels/mm
23
4
Computer Graphics
Computer Graphics
Gupta-Sproull algorithm (cont)
Gupta-Sproull algorithm.
Recall from the midpoint algorithm:
D = v cos φ
vdx
=
dx 2 + dy 2
Calculate distance using features of mid-point algorithm
F ( x, y ) = 2(ax + by + c ) = 0 (doubled to avoid fraction)
So
yp+1
y = ( ax + c )
−b
m
M
v
x p +1 = x p + 1
D
So:
E
v=
25
Computer Graphics
y p +1 = y p
a ( x p + 1) + c
−b
v = y − y p +1
Θ
xp+1
− yp
Computer Graphics
Gupta-Sproull algorithm (cont)
Gupta-Sproull algorithm (cont)
Line to draw
From previous slide:
v=
E
xp
For pixel E:
dx
Angle = ∅
v
D
yp
dy
NE
Line to draw
NE
a ( x p + 1) + c
−b
NE
− yp
1
d = F ( M ) = F ( x p +1, y p + )
2
yp+1
m
From the midpoint computation, y
v
D
p
b = − dx
xp
E
From the midpoint algorithm, we had the decision
variable (remember?)
Θ
xp+1
So:
vdx = a ( x p + 1) + by p + c = F ( x p + 1, y p ) / 2
Line to draw
Going back to our previous equation:
NE
yp+1
2vdx = F ( x p + 1, y p )
= 2a ( x p + 1) + 2by p + 2c
yp
= 2a ( x p + 1) + 2b( y p + 1 / 2) − 2b / 2 + 2c
= F ( x p + 1, y p + 1 / 2) − b
= F (M ) − b
= d −b
= d + dx
m
v
D
xp
E
Θ
xp+1
Gupta-Sproull algorithm (cont)
Computer Graphics
Computer Graphics
Gupta-Sproull algorithm (cont)
So,
D=
d + dx
2 dx 2 + dy 2
And the denominator is constant
Since we are blurring the line, we also need to
compute the distances to points yp – 1 and yp + 1
numerator for y p − 1 ⇒ 2(1 − v)dx = 2dx − 2vdx
If the NE pixel had been chosen:
2vdx = F ( x p + 1, y p + 1)
= 2a ( x p + 1) + 2(by p + 1) + 2c
= 2a ( x p + 1) + 2b( y p + 1 / 2) + 2b / 2 + 2c
= F ( x p + 1, y p + 1 / 2) + b
= F (M ) + b
= d +b
= d − dx
numerator for y p + 2 ⇒ 2(1 − v) dx = 2dx − 2vdx
numerator for y p
⇒ 2(1 + v )dx = 2dx + 2vdx
numerator for y p + 1 ⇒ 2(1 + v )dx = 2dx + 2vdx
5
Computer Graphics
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
6