Line Drawing

1
Line Drawing
2
In the time before time

• Many algorithms in computer graphics date back to
  early plotting devices.
• Cartography, CAD, x-ray crystallography were
  early applications.

• The pen in a plotter is moved by stepper motors,
  so they were capable of moving to only discretely
  addressable positions.

3
How do we draw a point?

• A point on the screen with position (x, y) plot
  a pixel with corresponding position
• Sample code
• SetPixel ( x, y )

4
Drawing an ideal line

• Recall that a vector-scan display was capable of
  a near perfect line
• Move to the start point
• Turn on the electron beam
• Move to the end point
• Turn off the electron beam
• Raster-scan displays are not as easy to draw
  lines on
• Electron beam motion is predetermined
• Have to draw (rasterize, scan-convert) into the
  framebuffer to control image intensity at
  discrete points

5
Less than ideal lines

• Raster-scan devices address discrete pixels
• The endpoints and intermediate points must be set
  individually
• The points are calculated from the
  slope-intercept equation
• Ideal Line
• Rasterized line
• raster line - g/lurus dibentuk dengan memilih
  pixel yang paling hampir dengan laluan sebenar.

6
Less than ideal lines

• As close to ideal line as possible
• Even thickness, brightness
• No discontinuities (gaps in the line)
• Fast line drawing is a fundamental operation on
  which many other routines are built

7
Equation of a line

• y m x c . Eq. 1
• dx x1 - x0
• dy y1 - y0
• m dy / dx
• c y0 - m x0

8

• Based on Eq.1 and positions of 2 endpoints (x1,
  y1), (x2, y2)
• Therefore,
• and

9
Algorithm

• 2 types
• - Digital Differential Analyzer (DDA)
• - Bresenham

10
Digital Differential Analyzer (DDA)

• Consider m ve , mlt1
• Sample at unit-x
• - x increase by 1
• ?x x2 - x1 1
• xk1 - xk 1
• xk1 xk 1
• Corresponding y
• ?y m. ?x
• ?y m
• y2 - y1 m
• yk1 - yk m
• yk1 yk m

11
DDA Example
Consider endpoints P1(0,0), P2(7,4)
m (yn-y0)/(xn-x0) (4-0)/(7-0) 0.571
m ve , mlt1
Sample at unit x xk1 xk 1 Corresponding y
pos. yk1 yk m
k xk1 yk1 yk(round)
0 0 0 0

1
1
1
0.571
12
DDA Example
Consider endpoints P1(0,0), P2(7,4)
m (yn-y0)/(xn-x0) (4-0)/(7-0) 0.571
m ve , mlt1
Sample at unit x xk1 xk 1 Corresponding y
pos. yk1 yk m
k xk1 yk1 yk(round)
0 0 0 0
1 1 0.571 1

2
2
1.142
1
13
DDA Example
Consider endpoints P1(0,0), P2(7,4)
m (yn-y0)/(xn-x0) (4-0)/(7-0) 0.571
m ve , mlt1
Sample at unit x xk1 xk 1 Corresponding y
pos. yk1 yk m
k xk1 yk1 yk(round)
0 1 0.571 1
1 2 1.142 1

1.713
2
2
3
14
DDA Example
Consider endpoints P1(0,0), P2(7,4)
m (yn-y0)/(xn-x0) (4-0)/(7-0) 0.571
m ve , mlt1
Sample at unit x xk1 xk 1 Corresponding y
pos. yk1 yk m
k xk1 yk1 yk(round)
2 3 1.713 2

2.284
3
3
4
15
DDA Example
Consider endpoints P1(0,0), P2(7,4)
m (yn-y0)/(xn-x0) (4-0)/(7-0) 0.571
m ve , mlt1
Sample at unit x xk1 xk 1 Corresponding y
pos. yk1 yk m
k xk1 yk1 yk(round)
2 3 1.713 2
3 4 2.284 3

2.855
3
4
5
16
DDA Example
Consider endpoints P1(0,0), P2(7,4)
m (yn-y0)/(xn-x0) (4-0)/(7-0) 0.571
m ve , mlt1
Sample at unit x xk1 xk 1 Corresponding y
pos. yk1 yk m
k xk1 yk1 yk(round)
2 3 1.713 2
3 4 2.284 3
4 5 2.855 3

3.426
3
5
6
17
DDA Example
Consider endpoints P1(0,0), P2(7,4)
m (yn-y0)/(xn-x0) (4-0)/(7-0) 0.571
m ve , mlt1
Sample at unit x xk1 xk 1 Corresponding y
pos. yk1 yk m
k xk1 yk1 yk(round)
3 4 2.284 3
4 5 2.855 3
5 6 3.426 3

3.997
4
6
7
18
DDA Exercise
1. Consider endpoints P1(0,0), P2(6, 4)
Calculate the points that made up the line P1P2
2. Now, consider endpoints P3(0,0), P4(4, 6)
Calculate the points that made up the line P3P4
19
Answer 1
(x0, y0) (0, 0), (xn, yn) (6, 4) m
(4-0)/(6-0) 0.67 mve lt 1 Sample at unit x
xk1 xk 1 yk1 yk1 m
xk1 yk1 yk1(round)
1 0.67 1
2 1.34 1
3 2.01 2
4 2.68 3
5 3.35 3
6 4.02 4
20
Answer 2
(x0, y0) (0, 0), (xn, yn) (4, 6) m
(6-0)/(4-0) 1.5 Sample at unit x xk1 xk
1 yk1 yk1 m
xk1 yk1 yk1(round)
1 1.5 2
2 3.0 3
3 4.5 5
4 6.0 6
Ada gap (tidak bersambung)! Guna sample pd unit y
21
What went wrong?

• Our algorithm steps along the x-axis setting
  pixels, so it leaves obvious gaps
  (discontinuities) when the magnitude of the slope
  is greater than 1
• Easy fix?
• Check the magnitude of the slope, if its greater
  than 1 step along the y-axis (sampling at y
  direction)

Sample code can be found at section 3-2 in
Hearn Bakers book see the limitation and
make enhancement
22

• Sample at unit y
• ( y increase by 1)
• yk1 yk1 1
• Corresponding x pos
• xk1 xk 1/m

m ?y /?x m 1/?x ?x 1/m xk1- xk 1/m xk1
xk 1/m
23
Answer 2
(x0, y0) (0, 0), (xn, yn) (4, 6) m
(6-0)/(4-0) 1.5 m ve gt 1 Sample at unit
y yk1 yk1 1 xk1 xk 1/m
xk1 xk1 (round) yk1
0.67 1 1
1.34 1 2
2.01 2 3
2.68 3 4
3.35 3 5
4.02 4 6
24
??????

• Dlm contoh, garis dilukis dari kiri ke kanan,
  bagaimana pula jika garis lurus dilukis dari
  kanan ke kiri???
• Bagaimana pula bagi garis lurus berkecerunan (m)
  negatif.
• Bagaimana pula bagi garis lurus yang mendatar
  (m0) dan menegak(m? )

25
Bresenhams Line Algorithm
26
Bresenhams Line Algorithm

• Based on integer calculation.

16
15
14
Actual path
13
12
11
10
9
8
8 9 10 11 12 13 14 15 16
Next pixel ? (11, 10) or (11, 11)?? Bresenhams
algorithm selects the nearest point (to the
actual path). At each sampling, increment is
either 0 or 1.
27
X Y increments

• Consider the first condition
• m lt 1, m has a positive value
• Bresenhams increments x by 1 and y by 0 or 1
• This makes sense for our lines, we want them to
  be continuous
• If the magnitude of the slope were more than 1,
  wed swap x y

28
Pixel selection

• If current pixel is at (xk, yk)

Next pixel to be plotted (xk1, yk1)(xk1, yk),
or (xk1, yk1)? Determine by the value of
decision parameter, pk
Please refer to Hearn Bakers, section 3-2.
29
Pixel selection

• If current pixel is at (xk, yk)

Next pixel to be plotted (xk1, yk1)(xk1, yk),
or (xk1, yk1)? Determine by the value of
decision parameter, pk
?x ? ve
Please refer to Hearn Bakers, section 3-2.
30
Decision parameter

• In short

pk negative d1 ? d2 pixel at scanline yk is nearer to the actual path plot (xk1, yk)
pk positive d1 ? d2 pixel at scanline yk1 is nearer to the actual path plot (xk1, yk1)
31
Algorithm

• Bresenhams line algorithm for m lt 1
• Input 2 endpoints, store left endpoints as (x0,
  y0).
• Load into frame buffer (plot the first point).
• Calculate constants ?x, ?y, 2?y, 2?y 2?x and
  initial value of decision parameter
• At each xk along the line, start at k0, test
• if pk lt 0, plot (xk1, yk) and
• else plot (xk1, yk1) and
• Repeat step 4 ?x times.

32
(No Transcript)
33
Exercise

• Calculate pixel positions that made up the line
  connecting endpoints (12, 10) and (17, 14).

1. (x0, y0) ?
2. ?x ?, ?y ?, 2?y ?, 2?y 2?x ?
3. p0 2?y ?x ?
k pk (xk1, yk1)




34
Exercise

• Calculate pixel positions that made up the line
  connecting endpoints (12, 10) and (17, 14).

1. (x0, y0) (12, 10)
2. ?x 5, ?y 4, 2?y 8, 2?y 2?x -2
3. p0 2?y ?x 3
k pk (xk1, yk1)
0 3
1
2

35
Exercise

• Calculate pixel positions that made up the line
  connecting endpoints (12, 10) and (17, 14).

1. (x0, y0) (12, 10)
2. ?x 5, ?y 4, 2?y 8, 2?y 2?x -2
3. p0 2?y ?x 3
k pk (xk1, yk1)
0 3 (13, 11)
1 1 (14, 12)
2 -1 (15, 12)
3 7 (16, 13)
4 5 (17, 14)

36
Circle Drawing
37
A very fine place to start

• Lets begin by looking at the equation of a
  circle
• Solving for y
• And this is one of the sample codes
• void circleSimple(int xCenter, int yCenter, int
  radius, Color c)
• int x, y, r2
• r2 radius radius
• for (x -radius x lt radius x)
• y (int)(sqrt(r2 - xx) 0.5)
• setPixel(xCenter x, yCenter y, c)
• setPixel(xCenter x, yCenter y, c)

38
The result

• We came across this problem with lines before
• Sometimes the slope of the line tangent to a
  point the circle is greater than 1. Stepping in x
  wont work there.
• So we could look for this case and step in y

39
Is it a good solution?

• maybe not!
• But on both cases, we were taking advantage of
  the circles symmetry when we draw both positive
  and negative values for y (or x).
• This is called 2-way symmetry.
• Are there more symmetries to exploit?

40
Symmetry abounds

• Sure, lets try 4-way symmetry.
• With just a quick hack, we get
• void circle4Way(int xCenter, int yCenter, int
  radius, Color c)
• int x, y, r2
• setPixel(xCenter, yCenter radius, c)
• setPixel(xCenter, yCenter radius, c)
• r2 radius radius
• for (x 1 x lt radius x)
• y (int)(sqrt(r2 - xx) 0.5)
• setPixel(xCenter x, yCenter y, c)
• setPixel(xCenter x, yCenter y, c)
• setPixel(xCenter - x, yCenter y, c)
• setPixel(xCenter - x, yCenter y, c)

41
The same result but in half the time

• That didnt fix a thing.
• Oh sure, its faster just half as many
  evaluations but its no more correct than our
  first try.
• Why didnt this work?

42
Symmetry to the rescue this time for sure

• What about 8-way symmetry?
• Now were looking for symmetries across the
  diagonal lines, i.e. where xy.
• Now when we step along x, we can permute the
  coordinates (swap x and y) and simultaneously be
  stepping along y in another part of the circle.
• Thats back to how we fixed lines!
• Bonus, its 4 times faster than the original!

43
8-way symmetry

• void circle8Way(int xCenter, int yCenter, int
  radius, Color c)
• int x, y, r2
• setPixel(xCenter, yCenter radius, c)
• setPixel(xCenter, yCenter radius, c)
• setPixel(xCenter radius, yCenter, c)
• setPixel(xCenter - radius, yCenter, c)
• r2 radius radius
• x 1
• y (int)(sqrt(r2 1) 0.5)
• while (x lt y)
• setPixel(xCenter x, yCenter y, c)
• setPixel(xCenter x, yCenter y, c)
• setPixel(xCenter - x, yCenter y, c)
• setPixel(xCenter - x, yCenter y, c)
• setPixel(xCenter y, yCenter x, c)
• setPixel(xCenter y, yCenter x, c)
• setPixel(xCenter - y, yCenter x, c)

44
Are we there yet?

• We now have a working circle rasterizer. Were
  happy. Were content.
• We have a square root in our loop.
• Can we make that go away?
• Lets look at the original equation again
• Can we do anything with this? Lets start by
  centering it at the origin.

45
Equation of a circle revisited

• We now have
• x2 y2 r2
• What if we had a function of x and y?
• f(x,y) x2 y2 - r2
• This is called a discriminator function and has a
  few nice properties
• f(x,y) lt 0 for a point inside the circle
• f(x,y) gt 0 for a point outside the circle
• f(x,y) 0 for a point on the circle

46
Midpoint Circle Algorithm

• Consider current point is at (xk, yk)
• Next point (xk1, yk), or (xk1, yk-1)?
• Take the midpoint (xk1, yk-0.5)

• Use the discriminator function to decide

47
Using the circle discriminator

• Based on the value return
•   lt 0 (x, y) is inside the circle
• f(x, y) 0 (x, y) is on the circle path
• gt0 (x, y) is outside the circle
• By using the midpoint between 2 pixel candidates,
  we can introduce a decision parameter, pk , to
  decide which to plot next
• -ve midpoint is inside the circle plot
  (xk1, yk)
• pk
• ve midpoint is outside the circle plot
• (xk1, yk-1)

48
If the current point is inside the circle

• pk lt 0!
• Lets drop the subscript for a while
• We want to know f(x1, y) so we can update p
• f(x1, y) (x 1)2 y2 r2
• f(x1, y) (x2 2x 1) y2 r2
• f(x1, y) f(x, y) 2x 1
• So we increment
• p 2x 1

Pk1
Pk
49
If the current point is outside the circle

• pk lt 0!
• Lets drop the subscript for a while
• We want to know f(x1, y-1) so we can update p
• f(x1, y1) (x 1)2 (y 1)2 r2
• f(x1, y1) (x2 2x 1) (y2 2y 2) r2
• f(x1, y1) f(x, y) 2x 2y 2
• And we increment
• p 2x 2y 2

Pk1
Pk
50
Where to begin?

• We can determine where to go next, how do we
  start?
• We have a variety of choices for our first point
  on the circle, but weve designed the increments
  to work from (0, r).
• Calculate initial value of p0 by evaluating
• p0 f(1, r0.5) 12 (r 0.5)2 r2
• p0 f(1, r0.5) 1 (r2 r 0.25) r2
• p0 1.25 r

We want to use integer calculation you can
round p0
51
Midpoint circle algorithm

• Input radius, r, and circle center (xc, yc).
  First point to be plotted will be(0, r) this is
  based on the circle centered at the origin!
• Calculate initial value of decision paramater
• At each xk, starting at k 0, test the value of
  pk
• If pk lt 0, next point will be (xk1, yk) and
• Otherwise, next point will be (xk1, yk-1) and
•  
• Determine symmetry points in the other 7 octants.
• Get the actual point for circle centered at (xc,
  yc) that is (x xc, y yc).
• Repeat step 3 to 5 until x ? y.

52
Midpoint circle algorithm

• void circleMidpoint(int xCenter, int yCenter, int
  radius, Color c)
• int x 0
• int y radius
• int p (5 - radius4)/4
• circlePoints(xCenter, yCenter, x, y, c)
• while (x lt y)
• x
• if (p lt 0)
• p 2x1
• else
• p 2(x-y1)
• y--
• circlePoints(xCenter, yCenter, x, y, c)

53
circlePoints()

• void circlePoints(int cx, int cy, int x, int y,
  Color c)
• if (x 0)
• setPixel(cx, cy y, c)
• setPixel(cx, cy y, c)
• setPixel(cx y, cy, c)
• setPixel(cx - y, cy, c)
• else if (x y)
• setPixel(cx x, cy y, c)
• setPixel(cx - x, cy y, c)
• setPixel(cx x, cy y, c)
• setPixel(cx - x, cy y, c)
• else if (x lt y)
• setPixel(cx x, cy y, c)
• setPixel(cx - x, cy y, c)
• setPixel(cx x, cy y, c)
• setPixel(cx - x, cy y, c)
• setPixel(cx y, cy x, c)
• setPixel(cx - y, cy x, c)
• setPixel(cx y, cy x, c)

54
Ellipse Drawing
55
Equation

• General equation of an ellipse
• d1 d2 constant
• Or,
• However, we will only consider standard
  ellipse

56
Symmetry

• An ellipse only has a 2-way symmetry.

57
Equation of an ellipse revisited

• Consider an ellipse centered at the origin
• What is the discriminator function?
• and its properties
• fe(x,y) lt 0 for a point inside the ellipse
• fe(x,y) gt 0 for a point outside the ellipse
• fe(x,y) 0 for a point on the ellipse

58
Midpoint Ellipse Algorithm

• Ellipse is different from circle.
• Similar approach with circle, different is
  sampling direction.
• Region 1
• Sampling is at x direction
• Choose between (xk1, yk), or (xk1, yk-1)
• Midpoint (xk1, yk-0.5)
• Region 2
• Sampling is at y direction
• Choose between (xk, yk-1), or (xk1, yk-1)
• Midpoint (xk0.5, yk-1)

59
Decision parameters

• Region 1
•  
• p1k ve
• midpoint is inside
• choose pixel (xk1, yk)
•  
• p1k ve
•   midpoint is outside
• choose pixel (xk1, yk-1)

• Region 2
•  
• p2k ve
• midpoint is inside
• choose pixel (xk1, yk-1)
•  
• p2k ve
•   midpoint is outside
• choose pixel (xk, yk-1)

60
Midpoint Ellipse Algorithm

• Input rx, ry and ellipse center (xc, yc). First
  point on the similar ellipse centered at the
  origin is (0, ry).
• Initial value for decision parameter at region 1
• At each xk in region 1, starting from k 0, test
  p1k
•   If p1k lt 0, next point (xk1, yk) and
• else, next point (xk1, yk-1) and
•  
• Determine symmetry points in the other 3 octants.
• Get the actual point for ellipse centered at (xc,
  yc) that is (x xc, y yc).
• Repeat step 3 - 6 until 2ry2x ? 2rx2yi.
•  

61
Midpoint Ellipse Algorithm

• Initial value for decision parameter in region 2
• At each yk in region 2, starting from k 0, test
  p2k
•   If p2k gt 0, next point is (xk, yk-1) and
• else, next point is (xk1, yk-1) and
•  
• Determine symmetry points in the other 3 octants.
• Get the actual point for ellipse centered at (xc,
  yc) that is (x xc, y yc).
• Repeat step 8 - 10 until y lt 0.  
•