49
Line Drawing Line Drawing and Generalization and Generalization

Line Drawing and Generalization. Outline overview line drawing circle drawing curve drawing

Embed Size (px)

Citation preview

Page 1: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Line Drawing Line Drawing and Generalizationand Generalization

Page 2: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Outline

overview line drawing circle drawing curve drawing

Page 3: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

1. Overview

application data structures/models

application programs

graphics systems

display devices

graphics primitives OpenGL

pixel information

Page 4: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Geometric Primitives

Building blocks for a 3D object

Application programs must describe their service requests to a graphics system using geometric primitives !!!

points, lines, polygons

Why not providing data structures directly to the graphics system?

Page 5: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

display lists evaluators per-vertex operations & primitive assembly pixel operations rasterizationrasterization texture assembly per-fragment operations

per-vertex operations &primitive assembly

rasterization frame buffer

texture assembly

display lists

evaluators

pixel operations

per-fragmentoperations

geometricdata

pixeldata

OpenGL Rendering Pipeline

Page 6: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Continuity

8-connectivity(king – continuity)

4-connectivity(rook – continuity)

Page 7: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

|L|

} 0cbyax

,yyy,xxx|y){(x,L

1

21211

|L|

}n 1,2,...,i|)y,{(xL

2

ii2

f

f : L1 => L2 quality degradation!!

Line drawing is at the heart of many graphics programs.

Smooth, even, and continuous as much as possible !!!

Simple and fast !!!

2. Line Drawing

(x1, y1)

(x2, y2)

Page 8: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Bresenham’s Line Drawing Algorithm via

Pragram Transformation

additions / subtractions only integer arithmetic not programmers’ point of view but system developers’ point of view

Page 9: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

var yt : real; x, y, xi, yi : integer;

for xi := 0 to x do begin

yt := [y/x]*xi;

yi := trunc(yt+[1/2]);

display(xi,yi);

end;

var yt : real; x, y, xi, yi : integer;

yt := 0;

for xi := 0 to x do begin

yi := trunc(yt + [1/2]);

display(xi,yi);

yt := yt+[y/x]

end;

Eliminate multiplication !!!

x

y

y = mx, m = [y/x]

*

** x ≥ y ∴m ≤ 1x, y: positive integers

(0,0)

(∆x, ∆y)

Page 10: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

var ys : real; x, y, xi, yi : integer;

ys := 1/2;

for xi := 0 to dx do begin

yi := trunc(ys);

display(xi,yi);

ys := ys+[y/x]

end;

var ysf : real; x, y, xi, ysi : integer;

ysi := 0;

ysf := 1/2;

for xi := 0 to x do begin

display(xi,ysi);

if ysf+[y/x] < 1 then begin

ysf := ysf + [y/x];

end else begin

ysi := ysi + 1;

ysf := ysf + [y/x-1];

end;

end;

sfsis yyy

integer part fractional part

***

****

01x

yysf

0ysf

Motivation(Cont’)

2

1

x

y1

x

y

2

1ysf

Page 11: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Motivation(Cont’)

xy2yx2 sf

var x, y, xi, ysi, r : integer;

ysi := 0;

for xi := 0 to x do begin

display(xi,ysi);

if then begin

end else begin

ysi := ysi + 1;

end;

end;

2

1

x

yysf

0ysf

1x

yyy sfsf

x

yyy sfsf

ryx2 sf

0yx2 sf

x]2y[2yx2yx2 sfsf

y2yx2yx2 sfsf

Page 12: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Motivation(Cont’)var x, y, xi, ysi, r : integer;

ysi := 0;

r := 2*y - x;

for xi := 0 to x do begin

display(xi,ysi);

if r < 0 then begin

r := r + [2*y];

end else begin

ysi := ysi + 1;

r := r + [2*y -2*x ];

end;

end;

Bresenham’s Algorithm !!!

No multiplication/ division.

No floating point operations.

ryx2 sf

Page 13: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Line-Drawing Algorithms

1x 2x

2y

1y

x

y

x

y

xx

yym

mxyb

bmxy

12

12

11

xmy

Assumptions

0m

xx 21

1 1(x ,y )

2 2(x ,y )

( x>0)

Page 14: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

DDA(Digital Differential Analyzer) Algorithm

basic ideay

m

1x

0mx my

Take unit steps with one coordinate and

calculate values for the other coordinate

i.e.1m0 my:y

1x:x

i1i

i1i

or

m1 m

1x:x

1y:y

i1i

i1i

discontinuity !!

Why?

Page 15: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

DDA(Cont’)procedure dda (x1, y1, x2, y2 : integer);

var

x, y, k : integer;

x, y : real

begin

x := x2 - x1;

y := y2 - y1;

x := x1; y := y1;

display(x,y);

for k := 1 to x do begin

x := x + 1;

y := y + [y/x];

display(round(x),round(y));

end { for k }

end; { dda }

expensive !!

no

*’s

Assumption : 0 m <1, x1<x2

Page 16: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Bresenham’s Line Algorithm

basic idea− Find the closest integer coordinates to the actual line path using only

integer arithmetic

− Candidates for the next pixel position

Specified

Line Path

1m0 Specified

Line Path

Page 17: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

1)y1,(xthen0pif

)y1,(xthen0pif

cxy2yx2p

ccxy2yx2

1))x(2by(2xy2yx2

1)x(2bxy21)y(x2)dx(dp

x)y/m (where12b2y1)2m(xddd

b1)m(x1yy-1yd

y-b1)m(xy-yd

bmxy

iii

iii

iii

ii

ii

ii21i

ii21

iii2

iii1

ii

Bresenham’s Line algorithm(Cont’)

bmxy

ix 1xi 2xi

2yi

1yi

iy

1xi

iy

1yi y

2d

1d

i i+1

0 m 1

x x

ix

Page 18: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Bresenham’s Line algorithm(Cont’)i i i

i 1 i 1 i 1

i 1 i i 1 i i 1 i

i 1 i i 1 i

i ii 1

i

ii 1

p x 2 xy c2 y

p 2 yx 2 xy c

p p 2 y(x x ) 2 x(y y )

p p 2 y 2 x(y y )

y if p 0 y

y 1 otherwise

p 2 y p

i

i

1 1 1

1 1

1

if p 0

p 2 y 2 x otherwise

Now,

p 2 yx 2 xy c

2 y x 2 y x(2b 1)

y -( y/ x)x

p 2 y x

=1

Page 19: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Bresenham’s Line algorithm(Cont’)procedure bres_line (x1, y1, x2, y2 : integer);

var

x, y, x,y,p,incrE,incrNE : integer;

begin

x := x2 – x1;

y := y2 – y1;

p := 2*y - x;

incrE := 2*y;

incrNE := 2*(y - x);

x := x1; y := y1; display(x,y);

while x < x2 do begin

if p<0 then begin

p := p + incrE;

x := x + 1;

end; { then begin }

else begin

p := p + incrNE;

y := y + 1;

x := x + 1;

end; { else begin }

display (x, y);

end { while x < x2 }

end; { bres_line}

Homework #2 Extend this algorithm for general cases.

Page 20: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Midpoint Line Algorithm

)y1,(x ii

1/2)y1,(x ii

1)y1,(x ii

0y)F(x,

Van Aken, “An Efficient Ellipse - Drawing Algorithm”

IEEE CG & A, 4(9), 24-35, 1984.

)y,(x ii

Q

M

E

NE

Current pixel

Choices for next pixel

0)2

1y1,F(x ifNE

0)2

1y1,F(x if E

closer to is Q

line on the is y)(x, if 0y)F(x,

cbyaxy)F(x,

B,xc and x,b y,a Letting

Bxyxxyy)F(x,

0BxyxxyBxx

yy

ii

ii

Page 21: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

xy2xy2)cxyyx(2)2

1y1,2F(xP

otherwisex2-y2P

0P ify 2P P

otherwise1y

0P if yy

1x x

)yx(y2)xy(x2PP

2c1)x(2y1)y(x2P

2c1)x(2y1)y(x2P

x,b andy a Since

c)1b(2y1)a(x2)2

1y1,2F(xPLet

c)2

1b(y1)a(x)

2

1y1,F(x

11111

i

ii1i

i

ii1i

i1i

i1ii1ii1i

1i1i1i

iii

iiiii

iiii

Midpoint Line Algorithm (Cont’)

Page 22: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

xy

y2)(x2,

y1)(x1,

x

y

Midpoint Line Alg. (Cont’)

otherwise1)y1,(x

0P if )y1,(x)y,(x

x-y2P

otherwisex2y2P

0P if y 2PP

ii

iii1i1i

1

i

ii1i

Page 23: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Midpoint Line Alg. (Cont’)Midpoint Line Algorithm(Cont’)

procedure mid_point (x1, y1, x2, y2,value : integer);

var

x, y,incrE,incrNE,p,x,y : integer;

begin

x := x2 – x1;

y := y2 – y1;

p := 2*y - x;

incrE := 2*y;

incrNE := 2*(y-x);

x := x1; y := y1;

display(x,y);

while x x2 do begin

if p < 0 then begin

p := p + incrE;

x := x + 1;

end; { then begin }

else begin

p := p + incrNE;

y := y + 1;

x := x + 1;

end; { else begin }

display(x,y);

end; { while x x2 }

end; { mid_point }

Page 24: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Geometric Interpretation

yx : slope yx : slope

any slope

Bresenhams’s algorithm

Page 25: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

x

y

Geometric Interpretation(Cont’)

Page 26: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Aliasing Effects

staircases (or jaggies)

intensity variation

line drawing

Page 27: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

animation

texturing

popping-up

Page 28: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Anti-aliasing Lines

Removing the staircase appearance of a line

Why staircases?raster effect !!!

need some compensation in line-drawing algorithms for this raster effect?

How to anti-alias?well, …

increasing resolution.However, ...

Page 29: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Increasing resolution

memory costmemory bandwidthscan conversion timedisplay device cost

Page 30: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

super sampling

(postfiltering)

area sampling

(prefiltering)

stochastic sampling

Cook, ACM Trans. CG, 5(1),

307-316, 1986.

Anti-aliasing Line (Cont’)Anti-aliasing Techniques

Page 31: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Area Sampling (Prefiltering)

Page 32: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

box filter cone filter

Filters

unweighted area sampling weighted area sampling

Page 33: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Table look-up for f(D, t)

The table is invariant of the slope of line! Why?

The search key for the table is D! Why?

D

Page 34: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

22 dydx

vdx vD

cos

Intensity Functions f(D, t)(assumption : t=1)

2 2

dx

dx dycos

0v

Page 35: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

How to compute D (assumption : t=1)

otherwise.1)(yy

0P ifyyyy vwhere

,dydx

vdxcosvD

i

ii1i

22

i i i

1P =2F(M)=2F(x +1,y + ),

2where F(x,y)=ax+by+c

Page 36: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

i i

i

2 2 2 2 2 2

i i

2 2 2 2 2 2

i i

2 2

(x 1,y )

(P x)v x 2v x D ,

x y 2 x y 2 x y

(x 1,y 1):

2(1 v) x 2 x 2v x

2 x-2v x 2 x 2v x D

2 x y 2 x y 2 x y

(x 1,y 1):

2(1 v) x 2 x 2v x

2 x 2 D

2 x y

2 2

v x

2 x y

How to compute D, incrementally

cbyaxy)F(x,

0cbyax

0BxxyyxBxx

yy

i

ii i

i i

i i

i i

i i

i i

i i

i

i

P 0:

a(x 1) c v y y y

bbv a(x 1) by c

vdx = F(x +1,y )

2v x 2F(x 1,y )

2a(x 1) 2by 2c

12a(x 1) 2b(y ) 2c b

21

2F(x 1,y ) x2

P x

1v x (P x)

2

. and Let ydyxdx

Page 37: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

i i i

i

2 2

i i

2 2 2 2

i i

2 2 2 2

P 0: (x 1,y 1)

2v x P x

2v xD

2 x y

(x 1,y 2):

2 x 2v x

2 x 2v xD

2 x y 2 x y

(x 1,y ):

2 x 2v x

2 x 2v xD

2 x y 2 x y

IF (Cont’)Similarly,

M

D

1 - v

1 + v

)y,(xP pp

0v

v

Page 38: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

IF (Cont’)x := x2 - x1;y := y2 - y1;p := 2 *y - x; {Initial value p1 as before}incrE := 2 * y; {Increment used for move to E}incrNE := 2 * (y - x); {Increment used for move to NE}

• two_v_x := 0; {Numerator; v = 0 for start pixel}• invDenom := 1 / (2 * Sqrt(x * x + y * y)); {Precomputed inverse denominator}• two_x_invDenom := 2 * x * invDenom; {Precomputed constant}

x := x1;y := y1;

• IntensifyPixel (x, y, 0); {Start pixel}• IntensifyPixel(x, y + 1, two_x_invDenom); {Neighbor}• IntensifyPixel(x, y - 1, two_x_invDenom); {Neighbor}

while x < x2 do begin if p < 0 then begin {Choose E}

• two_v_x := p + x; p := p + incrE; x := x + 1 end else begin {Choose NE}

• two_v_x := p - x; p := p + incrNE; x := x + 1; y := y + 1; end; {Now set chosen pixel and its neighbors}

• IntensifyPixel (x, y, two_v_x * invDenom);• IntensifyPixel (x, y + 1, two_x_invDenom - two_v_x * invDenom);• IntensifyPixel (x, y - 1, two_x_invDenom + two_v_x * invDenom)

end {while}

222

1

yx

x2vD

0x2v

0v

initially,

Page 39: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

xc

ycr

22

222

xc)(xrycy

ryc)(yxc)(x

xc

ycr

rsinθycy

rcosθxcx

θ

3. Circle Drawing

Page 40: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

y)(x,o45

y)(x,

x)(y,x)y,(

y)x,(

y)x,(

x)y,( x)(y,

using symmetry

(0,r)

r

symmetry

Page 41: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Midpoint Circle Algorithm

1)y1,(x ii

)2

1y1,(x ii

EMM

E

SE

Current pixel

Choices for next pixel

)y,(x ii )y1,(x ii

SEM

otherwise 1)y1,(x

0F(M) if )y1,(x)y,(x

Ryxy)F(x,Let

Ryx

ii

ii1i1i

222

222

Page 42: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

2 2 2i i i i i

2 2 2i 1 i 1 i 1 i i 1

i 1 i

i ii 1

i

i ii 1

1 1Let P F(x 1,y ) (x 1) (y ) R

2 21 1

P F(x 1,y ) (x 2) (y ) R , where2 2

x x 1

y if P 0 y

y 1 otherwise

P 2x 3 P

i

i i i

2 2 21 1 1 1 1

if P 0

P 2(x y ) 5 otherwise

1 1 5 P F(x 1,y ) (0 1) (R ) R R since (x ,y ) (0,R)

2 2 4

(0, R)

MCA (Cont’)

Page 43: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

i i ii 1 i 1

i i

i i ii 1

i i i

1

In summary,

(x 1,y ) if P 0 (x ,y )

(x 1,y 1) otherwise

P (2x 3) if P 0P

P (2x 2y 5) otherwise

5 P -R

4

MCA (Cont’)

Page 44: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

procedure MidpointCircle (radius,value : integer);

var

x,y : integer; P: real;

begin

x := 0; { initialization }

y := radius;

P := 5/4 - radius;

CirclePoints(x,y,value);

while y > x do begin

if P < 0 then { select E }

P : = P + 2*x + 3;

x := x + 1;

end

else begin { select SE }

P := P + 2*(x - y) + 5;

x := x + 1;

y := y - 1;

end

CirclePoints(x,y,value)

end { while }

end; { MidpointCircle }

*

**

d = P - 1/4

P = d + 1/4

* d = 1 - radius

** d < -1/4 d < 0

why?

*** d := d + 2*x + 3

**** d := d + 2(x-y) + 5

***

****

(0, R)

MCA (Cont’) y=x

Page 45: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

procedure MidpointCircle (radius,value : integer);

{ Assumes center of circle is at origin. Integer arithmetic only }

var

x,y,d : integer;

begin

x := 0; { initialization }

y := radius;

d := 1 - radius;

CirclePoints(x,y,value);

while y > x do begin

if d < 0 then { select E }

d := d + 2*x + 3;

x := x + 1;

end

else begin { select SE }

d := d+2*(x - y) + 5;

x := x + 1;

y := y - 1;

end

CirclePoints(x,y,value)

end { while }

end; { MidpointCircle }

Can you go further?

MCA (Cont’)

Page 46: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

i 1 i i

Ei i i

i i 1 i SEi i i

i i i i

E Ei 1 i i

SE SEi 1 i i i

i i i i

P P P

2x 3 if P 0 ( P )P P P

2(x y ) 5 otherwise ( P )

(x ,y ) (x 1,y )

P 2(x 1) 3 P 2

P 2(x 1 y ) 5 P 2

(x ,y ) (x 1,y 1)

E Ei 1 i i

SE SEi 1 i i i

1 1

E1 1

1 SE1

P 2(x 1) 3 P 2

P 2(x 1 y 1) 5 P 4

At (x ,y )

3 if P 0 ( P ) P

2R 5 otherwise ( P )

MCA (Cont’)

Page 47: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

MCA (Cont’)procedure MidpointCircle (radius,value : integer);

{ This procedure uses second-order partial differences to compute increments in the decision variable. Assumes center of circle is origin. }

var

x,y,d,deltaE,deltaSE : integer;

begin

x := 0; { initialization }

y := radius;

d := 1 - radius;

deltaE := 3;

deltaSE := -2*radius + 5;

CirclePoints(x,y,value);

while y > x do begin

if d < 0 then { select E }

d := d + deltaE;

deltaE := deltaE + 2;

deltaSE := deltaSE + 2;

x := x + 1;

end

else begin { select SE }

d := d + deltaSE;

deltaE := deltaE + 2;

deltaSE := deltaSE + 4;

x := x + 1;

y := y - 1

end

CirclePoints(x,y,value)

end { while }

end; { MidpointCircle }

Page 48: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

Drawing Ellipse

xc

yc

2r 1r

y

r

x22

2

21

2

1r

)r

x(1ry

21

222

2

Homework #3

Modify the midpoint circle drawing algorithm to draw ellipses.

Page 49: Line Drawing and Generalization. Outline  overview  line drawing  circle drawing  curve drawing

4. Curve Drawing

parametric equation

discrete data set

− curve fitting

− piecewise linear

f(x)y

h(t)x

g(t)y