4- 1 raster display model pixel (picture element, 像素 )

4- 1

Raster Display Model

Display

Pixel (Picture Element, 像素 )

4- 2

Scan Conversion Lines

• DDA (Digital Differential Analyzer)• Bresenham Algorithm• Midpoint Algorithm• Double-step Algorithm

選最接近線的 pixels?

4- 3

DDA Line-Drawing Algorithm

x x+1

m

/* x0 <= x1 and y0 <= y1 */void Line (x0,y0,x1,y1,c)int x0,y0,x1,y1,c;{ float m = (y1-y0)/(x1-x0), y = y0; int x;

for (x = x0; x <= x1; x++){ WritePixel(x,round(y),c); y += m; }}

Drawback: floating-point arithmetic

4- 4

Midpoint AlgorithmsLine passing through and ( , ) ( , ):x y x y0 0 1 1

f x y dy x dx y x y x y( , ) ( ) 1 0 0 1 0

where dx x x

dy y y

1 0

1 0

Let be written asF x y f x y( , ) ( , )2

F x y ax by c( , )

wherea dy

b dx

c x y x y

2

2

2 1 0 0 1( )

Note that and

denote the same line.

F x y f x y( , ) ( , ) 0 0

( 都是整數 )

4- 5

Midpoint Algorithms

E

NE

i i+1

yi

F x y ax by c b( , ) , ( ) 0

d F x y ( , )

Decision variable:

d F i yi i ( , . )1 0 5

F x y( , ) 0

4- 6

Pixel E is chosen ( )di 0

E

NE

i i+1

yi

i+2

d F i yi i 1 2 0 5( , . )

d d ai i 1

d F i y

a i b y c

a i b y c a

F i y a

d a

i i

i

i

i

i

1 2 0 5

2 0 5

1 0 5

1 0 5

( , . )

( ) ( . )

( ) ( . )

( , . )

4- 7

Pixel NE is chosen ( )di 0

E

NE

i i+1

yi

i+2

d F i yi i 1 2 1 5( , . )

d d a bi i 1

d F i y

a i b y c

a i b y c a b

F i y a b

d a b

i i

i

i

i

i

1 2 1 5

2 1 5

1 0 5

1 0 5

( , . )

( ) ( . )

( ) ( . )

( , . )

4- 8

What about d1 ?

d F x y

a x b y c

ax by c a b

F x y a b

a b

dy dx

1 0 0

0 0

0 0

0 0

1 0 5

1 0 5

2

2

2

2

( , . )

( ) ( . )

/

( , ) /

/

瞭解了為什麼定義F x y f x y( , ) ( , )2

4- 9

// Midpoint algorithm for drawing lines// with x0 <= x1 and y0 <= y1.//Line(int x0,int y0,int x1,int y1,int c){ int dx = x1-x0, dy = y1-y0; int incrE = 2*dy, incrNE = (dy-dx)*2; int d = 2*dy-dx;

int y = y0; for (int x = x0; x <= x1; x++) { WritePixel(x,y,c); if (d <= 0) { d += incrE;} // choose E else { d += incrNE; y++; } // choose NE }}

4- 10

Scan Converting Circles

8-way Symmetry

( , )x y

( , )y x

( , ) x y

( , ) y x

( , )y x

( , )x y( , ) x y

( , ) y x

void CirclePoints(x,y,c)int x,y,c;{ WritePixel(x,y,c); WritePixel(y,x,c); WritePixel(y,-x,c); WritePixel(x,-y,c); WritePixel(-x,-y,c); WritePixel(-y,-x,c); WritePixel(-y,x,c); WritePixel(-x,y,c);}

4- 11

E

SE

F x y x y R( , ) 2 2 2

i i+1 i+2

yi

d F i y

i y Ri i

i

( , . )

( ) ( . )

1 0 5

1 0 52 2 2

choose E if

SE if

d

di

i

0

0

Consider the second octant ( )45 90

4- 12

E

SE

i i+1 i+2

yi

E is chosen ( )di 0

d F i yi i 1 2 0 5( , . )

d d ii i 1 2 3( )

d F i y

i y R

i y R i

d i

i i

i

i

i

1

2 2 2

2 2 2

2 0 5

2 0 5

1 0 5 2 3

2 3

( , . )

( ) ( . )

( ) ( . ) ( )

( )

4- 13

E

SE

i i+1 i+2

yi

SE is chosen ( )di 0

d F i yi i 1 2 1 5( , . )

d d i yi i i 1 2 2 5( )

d F i y

i y R

i y R i y

d i y

i i

i

i i

i i

1

2 2 2

2 2 2

2 1 5

2 1 5

1 0 5 2 2 5

2 2 5

( , . )

( ) ( . )

( ) ( . ) ( )

( )

4- 14

How about d0 ?

dd i d

d i y dii i

i i i

1

2 3 0

2 2 5 0

( ),

( ),

We need only test d 0.

d R0 1

d F R

R R

R

0

2 2

1 05

1 05

125

( , . )

( . )

.

4- 15

// The Midpoint Algorithm for drawing// circles with the center at the origin// and the radius equal to R.void Circle (int R, int c){ int i = 0, j = R, d = 1 - R;

CirclePoint(i,j,c); while (i<j) if (d < 0) d += i*2+3; // Select E else { d += (i-j)*2+5; j--; } // Select SE i++; CirclePoint(i,j,c); }}

4- 16

Filling Polygons

• which pixels to fill

• what value to fill them

Decide

exteriorboundaryinterior

(A). Fill solid color:

(1) Scan-line algorithm

(2) Seed-filling algorithm

(B). Fill patterns

We will discuss:

4- 17

rectangle:

xmin xmax

ymin

ymax

for (x = xmin; x <= xmax; x++)

for (y = ymin; y <= ymax; y++)

WritePixel(x,y,c);

shared edge

Do not write pixels on

shared edge twice!

4- 18

polygons:

• draw those pixels strictly

interior to the region.• use scan lines.• spatial coherence.• span coherence• scan-line coherence• edge coherence

basic idea:

2

4

6

8

10

12

2 4 6 8 10 12 14

A B

C

D

E

F

A: (2,3)

B: (7,1)

C: (14,5)

D: (14,11)

E: (7,7)

F: (2,9)

2 7 14 14 7 2

3 1 5 11 7 9

x

y

A B C D E F

vertices list

4- 19

data structures

(a,b)

(c,d)

y max

xm

in

1/m

d a c-ad-b

next

(1) Edge data structure:

(2) Edge Table (ET):

9 7-5 2

11 7 6 4

11 13 0

9 2 0

3 7 5 7 6 4

AB BC

FA

CD

EF DE

0

1

2

3

4

5

6

7

8

9

increasing x coorinatey

4- 20

(3) Active Edge Table (AET):

2

4

6

8

10

12

2 4 6 8 10 12 14

A B

C

D

EF

a data structure that keeps track of the setof edges the scan line intersects and theintersection points.

11 12 6 4

DE

11 13 0

CD

9 2-5 2

EF

9 2 0

FA

11 10

6 4

DE

11 13 0

CD

AETpointer

AETpointer

scan line 9 (increasing x order)

scan line 10

y max x

1/m

4- 21

Edge Coherence

yy+1y+2y+3y+4

1/m

// program for calculating the

// intersection points of an edge

// and a scan line.

x = xmin;

for (y = ymin; y <= ymax; y++) {

output(x,y);

x += 1/m;

}

(m: slope, m,m)

j

y mx c

y jx

j c

m

4- 22

odd-parity rule

0 1 2 3 4 5 6

special cases:

(1). intersections not at the grid:

(2). intersections at the grid:

interiorexterior

4- 23

(3). intersections are at the grid and are shared vertices:

We count the ymin vertex of an edge in the parity

calculation but not the ymax vertex; therefore, a

ymax vertex is drawn only if it is the ymin vertex for

the adjacent edge.

(4). horizontal edges:

A B

C D

E

FG

HI

J

We do not count the vertices of a horizontal edge

when calculating parity.

範例 : (assume that all vertices are at the grid)

A B

C D

E

FG

HI

J

4- 24

1. Build ET and initialize AET to be empty.

2. Set y to the smallest y coordinate that has an entry

in the ET, i.e., y for the first nonempty bucket.

3. Repeat until the AET and ET are empty:

3.1 Move from ET bucket y to the AET those

edges whose ymin = y, then sort the AET on x

(merge sort).

3.2 Fill in desired pixel values on scan line y by

using pairs of x coordinate from the AET

(odd-parity rule).

3.3 Remove from the AET those edges for

which y = ymax.

3.4 Increment y by 1 (set it to the next scan line).

3.5 For each nonvertical edge remaining in the AET,

update x for the new y (edge coherence).

Outline of the algorithm for filling polygons with solid color

4- 25

Seed fillingSeed filling is used to fill areas defined pixels

on the screen which form a bounded region.

It works for a closed area of any shape.

seed

4- 26

int bndColor, fillColor;

void seed_fill (int x, int y){ int pixColor = ReadPixel(x,y);

if (pixColor != bndColor && pixColor != fillColor ) { WritePixel(x,y,fillColor); seed_fill(x+1,y); seed_fill(x-1,y); seed_fill(x,y+1); seed_fill(x,y-1); }}

Drawbacks:

• recursive calls are expensive.

• redundant checking of filling pixels.

• the case of out of screen is not handled.

4- 27

Pattern Filling

bitmap

ideas:

• transparent mode:

bit is 1 WritePixel with foreground color.bit is 0 do not WritePixel.

• opaque mode:

bit is 1 WritePixel with foreground color.bit is 0 WritePixel with background color.

4- 28

anchor point of bitmap:

1. put the left-top pixel of the bitmap on some vertex.

優點 : the pattern is stick to the primitive, sowhen the primitive is moved the pattern remainsthe same.

優點： easy to implement and the pattern is notdependent on the location.缺點： need to calculate the bounding rectangle.

2. Use the left-top corner of the boundingrectangle of the primitive as the anchor point.

4- 29

SRGP uses this method.

3. Consider the entire screen is being tiled with the pattern and think of the primitive as consisting of an outline or filled area of transparent bits that let the pattern show through.

優點： easy to implement. 缺點： the pattern is dependent on the location.

Suppose that the bitmap is an M by N array of bits.

Then we can use the following code to write pixel:

if (pattern[x%M,y%N])

WritePixel(x,y,value);

4- 30

Thick Primitives

• Replicating Pixels:

4- 31

• Moving Pen (Fat Pen):

• Filling area:

4- 32

Clipping （剪裁）

• clipping before scan conversion:

* calaulate intersection points first.

* suitable for simple primitives such as lines,

rectangles, and polygons.

A A

before clipping after clipping

• scissoring (clipping during scan conversion):

* write only pixels in the clipping region.

* need quick bound checking.

• brute force method:* generate the entire collection of primitives into

a temporary canvas and then copy only the

contents of the clip rectangle to the destination

canvas

* mostly used to generate text.

4- 33

Clipping Lines

• Cohen-Sutherland Algorithm

• Parametric Line Clipping Algorithm

1. Determine whether a point is in the clipping rectangle

xmin xmax

ymax

ymin

x x x

y y ymin max

min max

(x,y)

4- 34

Types of Intersection:

E

A

B

F

C

D

G

H

D’

H’

G’

A

B

C

D’

H’

G’

• no intersections

• trival acception

Both endpoints are inside the clippingrectangle such as the line AB.

(line EF)

• intersect with one edge

• intersect with two edge

(line CD)

(line GH)

4- 35

直覺作法：

E

A

B

F

C

D

G

H

D’

H’

G’

I

J

I’

J’

若非簡單被接受的線（如 AB ），則逐一檢查該線是否和clipping rectangle 的四條邊線段相交。做法如下： 1. 計算該線和上圖中四條邊線的交點。 2. 檢查交點是否落於方塊內。 3. 若某一交點在方塊內，則將該交點變為新的 線段端點（如 CD 和 GH) 。 4. 若交點全在方塊外，則該線落在方塊外 （如 IJ ）。

缺點：計算量大，沒有效率。

4- 36

Cohen-Sutherland Algorithm

概念：

假定線段的兩個端點座標分別為 (x1,y1) 和 (x2,y2) ，則當下列任一條件滿足時，此線段必不在方塊內：

(1) and

and

and

and

min min

max max

min min

max max

x x x x

x x x x

y y y y

y y y y

1 2

2 1 2

3 1 2

4 1 2

( )

( )

( )

E

A

B

FC D

G

H

I

J

1. trivial rejection:

4- 37

region codes:技巧：1001

0001

0101 0100 0110

0010

10101000

0000

y y max y y min x x minx x max

1: true, 0: false

If the logical and of the codes of the endpointsis not zero, the

line can be trivially rejected; otherwise, we need further checking.

typedef struct {

unsigned all;

unsigned left:1; unsigned right:1;

unsigned bottom:1; unsigned top:1;

} outcode;

outcode CompCode (float x, float y,

float xmin, float xmax, float ymin, float ymax)

{

outcode code;

code.all = 0;

if (y > ymax) { code.top = 1; code.all += code.top; }

else if (y < ymin) { code.bottom = 1; code.all += code.bottom; }

else if (x > xmax) { code.right = 1; code.all += code.right; }

else if (x < xmin) { code.left = 1; code.all += code.left; }

return code;

}

4- 38

AB

CD

E F

G

H

IJ

若無法簡單判斷線段是在方塊內或外，則將之切分為兩段（以和邊線的交點為切分點，如 C 或 F ）。那麼，其中必有一段落在方塊外，因此可以截去該段。剩下來的那段，我們重複以上動作直到可以簡單判斷是在方塊內或外。

2. subdividing iteration:

範例：

(1) (2)

(4)(3)

4- 39

void CS_LineClipDraw (float x0, float y0, float x1, float y1, float xmin, float xmax, float ymin, float ymax){ float m = (y1 - y0) / (x1 - x0); // the slope boolean accept = FALSE; outcode outcode0, outcode1, outcodeOut; float x, y;

outcode0 = CompOutCode(x0,y0,xmin,xmax,ymin,ymax); outcode1 = CompOutCode(x1,y1,xmin,xmax,ymin,ymax); do { if (outcode0.all == 0 && outcode1.all == 0) { accept = TRUE; break; } if (outcode0.all & outcode1.all != 0) break; // reject outcodeOut = (outcode0.all != 0)? outcode0 : outcode1; if (oucodeOut.top) { x = x0 + (ymax - y0) / m; y = ymax; } else if (outCodeOut.bottom) { x = x0 + (ymin - y0) / m; y = ymin; } else if (outcodeOut.right) { y = y0 + (xmax - x0) * m; x = xmax; } else // outcodeOut.left is 1 { y = y0 + (xmin - x0) * m; x = xmin; } if (outcodeOut.all == outcode0.all) { x0 = x; y0 =y; outcode0 = CompOutCode(x0,y0,........); } else { x1 = x; y1 =y; outcode1 = CompOutCode(x1,y1,........); } } while (TRUE); if (accept) DrawLine(x0, y0, x1, y1); // floating-point version }

4- 40

Clipping Polygons

4- 41

Sutherland-Hodgman Algorithm

stratege: divide and conquer.

4- 42

input polygon: vertex list v v vn1 2, , . ......,

output polygon: vertex list v v vm1 2, , . ......,

inside outside

clippingedge

s

p(output)

inside outside

clippingedge

s p

i: output

inside outside

clippingedge

s

p

inside outside

clippingedge

sp:

secondoutput

i:first

output

(no output)

for each edge of v v v v v v v vn n n1 1 2 2 3 1, , , , ......,

check which case in the following holds.

4- 43

1. 計算交叉點 ;

typedef struct vertex {

float x, y;

} vertex;

typedef vertex edge[2];

typedef struct polygon {

unsigned nVertex;

vertex *vertexArray;

} polygon;

vertex Intersect (vertex s, vertex p, edge clipBnd)

{

float m = (p.y - s.y)/(p.x - s.x);

vertex intersectPt;

if (clipBnd[0].y == clipBnd[1].y) {

// a horizontal clipping edge.

intersectPt.y = clipBnd[0].y;

intersectPt.x = s.x + (clipBnd[0].y-s.y)/m;

}

else {

// a vertical clipping edge.

intersectPt.x = clipBnd[0].x;

intersectPt.y = s.x + (clipBnd[0].x-s.x)*m;

}

return intersetPt;

}

Implementation:

data structures:

4- 44

2. 決定多面體端點是在切割邊線的內或外 ;

boolean Inside (vertex v, edge clipBnd)

{

if (clipBnd[1].x > clipBnd[0].x) // bottom

if (v.y >= clipBnd[0].y) return TRUE;

if (clipBnd[1].x < clipBnd[0].x) // top

if (v.y <= clipBnd[0].y) return TRUE;

if (clipBnd[1].y > clipBnd[0].y) // right

if (v.x <= clipBnd[1].x) return TRUE;

if (clipBnd[1].y < clipBnd[0].y) // left

if (v.x >= clipBnd[1].x) return TRUE;

return FALSE;

}

bottom

rightleft

top

A B

D C

v

4- 45

void SH_clipPolygon_upon_one_bnd (

polygon in, // input polygon

polygon out, // clipped polygon

egde clipBnd // clipping boundary

)

{

vertex s, p;

int i = 0, j;

s = in.vertexArray[in.nVertex-1];

for (j = 0; j < in.nVertex; j++) {

p = in.vertexArray[j];

if (Inside(p, clipBnd))

if (Inside(s, clipBnd)) // case 1

out.VertexArray[i++] = p;

else { // case 4

out.VertexArray[i++] = Intersect(s,p,clipBnd);

out.VertexArray[i++] = p;

}

else if (Inside(s, clipBnd)) // case 2

out.VertexArray[i++] = Intersect(s,p,clipBnd);

// no action for case 3

s = p;

}

out.nVertex = i;

}

例： 1 1

4- 46

Generating Characters( 產生字元 )

定義字形的兩種方式： 1. bitmap fonts

2. outline fonts

1. bitmap fonts: h

font table (font cache):

利用 vedio memory 剩餘的部份儲存常用字形。

4- 47

typedef struct charLocation {

int leftX; // horizontal position

int width; // width of image

} charLocation;

typedef struct fontCacheDescriptor {

int cache; // canvas id

int descenderHeight;

int totalHeight;

int interCharacterSpacing;

charLocation locationTable[128];

} fontCacheDescriptor;

leftX

width

desc

end

tota

lHe

ight

4- 48

void SRGP_characterText (

point origin, // the starting location for printing string

char *stringToPrint,

fontCacheDescriptor fontInfo

)

{

rectangle fontCacheRect;

char charToPrint;

int i;

charLocation *fp;

origin.y -= fontInfo.descenderHeight; // match the anchor point

for (i = 0; i < strlen(stringToPrint); i++) {

charToPrint = stringToPrint[i];

fp = &fontInfo.locationTable[charToPrint];

fontCacheRect.bottomLeft = SRGP_defPoint(fp->leftX, 0);

fontCacheRect.topRight =

SRGP_defPoint(fp->leftX+fp->width-1, fontInfo.totalHeight-1);

SRGP_copyPixel(fontInfo.cache, fontCacheRect, origin);

origin.x += fp->width + fontInfo.interCharacterSpacing;

}

}

Yes, please go.優點： 簡單、速度快。缺點： 當使用字型多時，非常耗用記憶體。

size, face (normal, bold, italic)

4- 49

是否有方法僅使用一個字形定義即可據以產生不同尺寸的字型？

2. 將字的內外框所夾的區域填滿。

1. 利用數學曲線描述字的內外框形狀。

2. 若需要不同尺寸的字，則用數學公式將內外框 放大或縮小，然後填滿其間。

外框

內框

4- 50

數學曲線用以定義字形：

1. Bezier curves (eg., TrueType font, TeX CM fonts);

2. B-spline curves (eg., PostSrcipt fonts).

優點： 可以產生各種大小的字型。 對需要各種大小字形的系統而言，可以節省 記憶體。

缺點： 1. 若不需要太多不同大小字型，可能更浪費 記憶體。 2. 因為每次必須掃描產生字型，速度因此較慢。 3. 產生之字型可能比相對應之 bitmap 字型較不 美觀。

折衷方案：

用 outline 方式儲存字型，當需要時將其轉換成 bitmap 形 式存在 font cache 中，以加快字型產生。