lecture 2 review (part i)

36
Lecture 2 Review (Part I) Paramate Horkaew School of Computer Engineering, Institute of Engineering Suranaree University of Technology

Upload: others

Post on 11-Jan-2022

7 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Lecture 2 Review (Part I)

Lecture 2 Review (Part I)

Paramate Horkaew

School of Computer Engineering, Institute of EngineeringSuranaree University of Technology

Page 2: Lecture 2 Review (Part I)

Frame Buffer Classบทนี้เนนแนวคิด โครงสรางขอมูล และขั้นตอนวิธี การสรางชุดคําสั่งกราฟกประเภท Device Independent โดยเฉพาะอยางยิ่ง การนํา array ชนิด byte (unsigned character) มาสรางหนวยความจําแสดงผล (Frame Buffer) ซึ่งออกแบบใน ลักษณะ OOP ดังนี้

Page 3: Lecture 2 Review (Part I)

Line Drawing Algorithms

วิธีการวาดเสนตรงแบบแรก คือ Digital Differential Analyzer (DDA)

กรณีที่ 1) m นอยกวาหรือเทากับ 1

เลื่อนไปตามแนวแกน x ครั้งละ 1 จุดภาพ (dX = 1) เนื่องจากวา:

จากสมการเสนตรงจะไดวา dY = m · dX

เมื่อ dX = 1 และ 0 <= m <= 1 จะไดวา

dY <= 1 หมายความวา ความแตกตางของ ระยะหางระหวางจุดตามแนวตั้งมีคาไมเกิน 1 จุดภาพ (เสนไมขาดตอน)

dX

กรณีอื่นๆ ของคา m และ quadrant ของเสนตรง ก็พิจารณาในทํานองเดียวกัน

Page 4: Lecture 2 Review (Part I)

Line Drawing Algorithms

วิธีที่สอง คือ Bresenham’s Algorithm ซึ่งใชหลักการสรางตัวแปรตัดสินใจ

ตัวแปรตดัสินใจอยูในรูปของ pk = d1 - d2

( )

( )12222

21

−∆+∆=+⋅∆−⋅∆=

−∆=

bxyccyxxy

ddxp

kk

k

( )xyp

yyxyppcyxxyp

cyxxyp

kkkk

kkk

kkk

∆−∆=−∆−∆+=+⋅∆−⋅∆=

+⋅∆−⋅∆=

++

+++

222222

22

0

11

111

สังเกตวา yk+1 – yk จะมีคาเปน 0 หรือ 1 ขึ้นอยูกับเครื่องหมายของ pk สวนคา ∆y, ∆x และ ∆y - ∆x เปนจํานวนเต็ม คาคงที่ซึ่งคํานวณ เพียงครั้งเดียว

Page 5: Lecture 2 Review (Part I)

Bresenham’s Implementation

ในกรณีที่ 0 < m < 1 algorithm สามารถเขียนดวย C++ ไดดังนี้

Step x, Inc y

Step y, Inc xStep y, Dec x

Step x, Dec y

Step y, Dec xStep y, Inc x

Step x, Dec y

Step x, Inc y

Page 6: Lecture 2 Review (Part I)

Homework

กําหนดใหจุดปลายทั้งสองจุดของเสนตรงเปน (20, 10) และ (30, 16) จง

1) คํานวณความชันของเสนตรง2) หาสมการของเสนตรง3) ใช DDA Algorithm ในการหาพิกัดจุดลําดับที่ k4) หาคาตัวแปรตัดสินใจที่ตําแหนงเริ่มตน (p0)5) ใช Bresenham’s Algorithm ในการหาคาตัวแปรตัดสินใจ (pk) และพิกัดจุด

ลําดับที่ k

กําหนดให k = 0 ถึง 9 แจกจางคาผลลัพธที่ไดในตาราง โดยใชตารางของผลจาก ขอ 3 และ ขอ 5 แยกกัน

(เฉลยการบาน)

Page 7: Lecture 2 Review (Part I)

Midpoint Circle Algorithm

สมมติวาเราไดวาดจุด (xk, yk) ไปแลว ขั้นตอไปคือพิจารณาเลือกระหวางจุด yk และ yk-1 สําหรับพิกัด xk+1 ซึ่งทําไดโดยคํานวณคาตัวแปรตัดสินใจที่ midpoint

( ) 22

2

211

21,1

ryx

yxfp

kk

kkck

−⎟⎠⎞

⎜⎝⎛ −++=

⎟⎠⎞

⎜⎝⎛ −+=

• คาเปนลบ หมายถึง midpoint อยูภายในวงกลม

• คาเปนบวก หมายถึง midpoint อยูภายนอกวงกลม

Page 8: Lecture 2 Review (Part I)

Recursive Decision Parameter

ตัวแปรตัดสินใจ ณ รอบที่ k+1 สามารถคํานวณไดในทํานองเดียวกัน

( )

( ) ( ) ( ) 1122111

21,1

122

11

22

12

111

+−−−+++=

−⎟⎠⎞

⎜⎝⎛ −+++=

⎟⎠⎞

⎜⎝⎛ −+=

+++

+

+++

kkkkkkk

kk

kkck

yyyyxpp

ryx

yxfp

สังเกตวา yk+1 จะมีคาเปน yk หรือ yk-1 ขึ้นอยูกับเครื่องหมายของ pk

⎩⎨⎧

≥−++<++

=++

++ 0212

012

11

11

kkkk

kkkk pyxp

pxpp

Page 9: Lecture 2 Review (Part I)

Lecture 2 Raster Algorithms(Part II)

Paramate Horkaew

School of Computer Engineering, Institute of EngineeringSuranaree University of Technology

Page 10: Lecture 2 Review (Part I)

Lecture Outline

• Frame Buffer Class• Simple Graphic Primitive Algorithms

– Line Drawing Algorithms (Direct v.s. Integer Arithmetic)– Circle Drawing Algorithms– Rasterization of Arbitrary Curves– Polynomial Curve and Spline Drawing Algorithms

• Filled-Area Primitives– Polygon Filling– Flood-Fill Algorithm– Inside-Outside Tests

• Output Primitive Attributes• Picture Approximation using Halftone

Page 11: Lecture 2 Review (Part I)

Filled Area Primitives

Simple Polygon Filling Algorithm

วิธีการที่งายที่สุด ของการระบายรูปหลายเหลี่ยมคือ Line Scan Algorithm

1. วาดรูป Polygon เชื่อมตอจุดโดยใช เทคนิค การวาดเสนตรง

2. จัดเก็บจุดที่ประกอบเปนขอบของ Polygon (หรือ Edge Pixels)

3. เรียงจุดดังกลาว ใน Array ตามลําดับพิกัดใน แนวตั้ง (y) จากนอยไปมาก

4. สําหรับพิกัด y แตละคา ถามี จุดเดียวแสดงวาเปนจุดยอดบนสดุ หรือ ลางสุด ใหระบายสีจุดนั้น

5. มิฉะนั้น ระบายสีระหวางจุดที่มี x มากและ นอยที่สุด ดังรูป

y0

y1

yn-1

x

xmin xmax

y2 xmin xmaxxb

x

Page 12: Lecture 2 Review (Part I)

Concave Polygons

นิยาม

Polygon เรียกวาเปน concave ก็ตอเมื่อ มุมภายใน อยางนอย 1 มุม มีขนาด มากกวา 180 องศา (π เรเดียน)

Concave polygon จะตองมีอยางนอย 4 ดานเสมอ (ไมมีรูปสามเหลี่ยมใดๆ เปน concave)

ขั้นตอนวิธีการระบาย Concave Polygon ขยายผลจากการระบาย Convex Polygon ดังนี:้

ระบุจุดขอบ (edge pixels)เรียง edge pixels ตามลําดับของ y

for (จุดที่มีคา y เทากัน) doเรียงลําดับตามคาของ xระบายระยะ เวนระยะ ตามแนวนอน

end for

Page 13: Lecture 2 Review (Part I)

Exceptions (I)

กรณีที่ 1 scan line ตัดผานจุดยอดของ polygon พอดี ที่จุดหมายเลข 2 มีความเปนไปได อยู 2 รูปแบบ

1.1 จุดที่ scan line ตัดผานแบง polygon ออกเปนสองชวง (span) ซึ่งอยูภายใน polygon ทั้งสองชวง (scan line y’)

1.2 จุดที่ scan line ตัดผานแบง polygon ออกเปนสองชวง แตมีเพยีงชวงเดียวที่ อยูภายใน polygon (scan line y)

Page 14: Lecture 2 Review (Part I)

Identifying Sharing Vertices

การระบุวา scan line นั้นจัดอยูในรูปแบบใด สามารถทําได ดังตอไปนี้

• เดิน (trace) ตามเสนรอบ polygon ในทิศทาง ทวนเข็ม หรือ ตามเข็ม นาฬิกา ก็ได

• สําหรับ จุดยอด ของ polygon สังเกตลักษณะของ การเปลี่ยนแปลง คา y• ถาคา y ลดลงตลอด (หรือเพิ่มขึ้นตลอด) เมื่อเทียบ จุดยอดเปน จุดศูนย กลาง (monotonic) แสดงวา จุดตัดนั้น แบงออกเปนสวนคือที่อยูภายใน ก บภายนอก polygon (กรณี 1.2) ใหตัดเสนขอบลง 1 scan line

• ถาคา y เปลี่ยนแปลง ไปในทิศทางตรงกันขาม แสดงวา จุดตัดนั้นแบง scan line ออกเปน 2 สวน ภายใน polygon (กรณี 1.1) เพิ่มจุดตัดซ้ํา 2 จุด

Scan line y+1Scan line yScan line y-1

Page 15: Lecture 2 Review (Part I)

Exceptions (II)กรณีที่ 2 บางสวนของ Polygon ถูกตัดทิ้ง เนื่องจาก เกินมาจากเนื้อที่ แสดงผล ซึ่ง สามารถแกไขได 2 วิธี

1.1 คํานวณ algorithm สําหรับวาดเสนตรง ทุกครั้ งที่มีการทดสอบ Polygon Fill เพื่อใหสามารถ อางอิงสวนที่(จะ)ถูกตัดทิ้งได แตเมื่อทําการวาดผลลัพธ ให วาดเฉพาะสวนที่อยูภายใน Raster (Frame) Buffer เทานั้น (ยุงยาก)

1.2 ใชวิธี Containment Test (นับจํานวนจุดที่เวคเตอร จากจุดที่กําหนดตัดกับ polygon: ODD = inside, EVEN = outside)

Page 16: Lecture 2 Review (Part I)

Coherent Polygon Processing

เราสามารถใชประโยชน ความเกี่ยวเนื่องกันขององคประกอบ polygon สําหรับ scan line ที่ติดกัน มาใชเพิ่ม ประสิทธิภาพ ในการประมวลผลได

ตัวอยางเชน ในกรณีนี้ สังเกตวา ความชัน m ของเสนขอบ ของ polygon (edge) มีคาคงที่ ระหวาง scan line ที่ติดกัน (ดังรูป) ซึ่งสามารถเขียนความสัมพันธไดวา

เราสามารถใชประโยชนyxxx

mxx

yyxxyym

kk

kk

kk

kk

kk

∆∆

+=

+=

=−−−

=

+

+

+

+

+

1

1

1

1

1

11since

คา x ที่จุดตัด scan line ถัดไป

เขียนในรูปของสมการเสนขอบ

Page 17: Lecture 2 Review (Part I)

An Efficient Polygon Algorithm

จากสมการหาพิกัด x ของจุดตัดระหวาง scan line ที่ k กับ polygon

yxxx kk ∆

∆+=+1

เราสามารถหาคําตอบแบบวนซ้ํา โดยใช การคํานวณแบบ จํานวนเต็ม ไดโดย

• กําหนดให counter เริ่มตนเปน 0• ทุกครั้งที่เลื่อนไปพิจารณา scan line ถัดไป k = k + 1 ใหเพิ่มคา counter ไป ∆x

• ถา counter ที่ไดมีคามากกวา ∆y เราจะเพิ่มคาจุดตดั x ไป 1 (นั่นคือ พจนเศษสวนขางหลังมีคา หลังจาก ตัดเศษ เปนจํานวนเต็มเทากับ 1) แลวลดคา counter ลง ∆y

• วนซ้ําขั้นตอนที่ 2 และ 3 สําหรับ scan line ถัดไปสําหรับเสนขอบ polygon ที่พิจารณา

Page 18: Lecture 2 Review (Part I)

Precise Integer Arithmeticเราสามารถหาคําตอบที่แมนตรงยิ่งขึ้นโดยใชการ ปดเศษ แทนการ ตัดเศษ

• กําหนดให counter เริ่มตนเปน 0• ทุกครั้งที่เลื่อนไปพิจารณา scan line ถัดไป k = k + 1 ใหเพิ่มคา counter ไป 2∆x = (∆x+ ∆x)

• ถา counter ที่ไดมีคามากกวา ∆y เราจะเพิ่มคาจุดตดั x ไป 1 (นั่นคือ พจนเศษสวนขางหลังมีคา หลังจากตัดเศษ เปนจํานวนเต็มเทากับ 1) แลวลดคา counter ลง 2∆y = (∆y+ ∆y)

• วนซ้ําขั้นตอนที่ 2 และ 3 สําหรับ scan line ถัดไปสําหรับเสนขอบ polygon ที่พิจารณา

ขั้นตอนวิธีดังกลาว เทียบไดกับ การเปรียบเทียบคาที่เพิ่มขึ้น ∆x กับ ∆y/2(มากกวา 0.5 ปดขึ้น) ดังนั้นถา m=7/3 คา counter สําหรับ k แรกๆ จะเปนดังนี้0, 6, 12 (ลดลงเปน 12-2*7 = -2), 4, 10 (ลดลงเปน -4), … ซึ่งจะได วาคา x จะเปน x0+ 0, x0+ 0, x0+ 1, x0+ 1, x0+ 2, ...

Page 19: Lecture 2 Review (Part I)

Implementation of the Algorithm

• เดินไปตามขอบ (edge) ของ polygon แตละเสนในทิศทางทวนเข็ม (หรือตามเข็ม) นาฬิกา

• ทําการ shorten edge ในกรณีที่จุดยอด (vertex) ตัดผาน scan line พอดีเพื่อแยก แยะชนิดของจุดแบงเสน scan line

• จัดเก็บแตละ edge ไวในตาราง edge โดยเรียงตามลําดับ พิกดั y ที่นอยที่สุด (จุดยอดลางสุดของ edge)

• ในแตละชอง ของตาราง ใสสมการของ edge ไดแก คา y ที่มากที่สุด (จุดบนสุด), จุดตัด x ของจุดลางสุด และคา 1/m

• สําหรับแตละ scan line เรียงสมการตาม ลําดับ ของคาจุดตัด x จากซายไปขวา

จากโครงสรางขอมูลดังกลาว ไลลําดับ scan line จากจุดลางสุดของ polygon ไปจุดบนสุด เพื่อสราง active edge list ซึ่งนําไปหาคา x ของจุดตัด เพื่อนาํไปสูขั้นตอน scan line polygon filling algorithm ตอไป

Page 20: Lecture 2 Review (Part I)

Implementation Diagramแผนผังแสดง โครงสรางขอมูล ของ integer arithmetic ของ scan line algorithm ซึ่งประกอบดวย sorted edge table และ active edge list

Page 21: Lecture 2 Review (Part I)

Inside and Outside Tests

ที่ผานมา เราพิจารณา การประมวลผล เฉพาะ Polygon เดี่ยวอยางงาย ซึ่งแตละ edge จะไมตัดกัน ทวา สําหรับกรณีทั่วไปใน Computer Graphics เราสามารถ นิยามจุดยอดของ polygon (vertices) ไดอิสระ ซึ่งอาจจะทําใหเกิดการซอนทับ กันของ edges ได (self-intersection) ดังรูป

Algorithm ที่ใชสําหรับพิจารณาวา จุดที่กําหนด อยูดานใน (interior pixel) หรอื ดานนอก (exterior pixel) polygon ที่สําคัญมีอยูสองวิธี

Page 22: Lecture 2 Review (Part I)

Nonzero Winding Number Rules

วิธีนี้จะทําการนับจํานวนที่ edge ของ polygon วนรอบจุด ที่ตองการทดสอบ ในทิศทาง ทวนเข็มนาฬิกา ซึ่งสามารถทําไดดังตอไปนี้

Algorithm

• จากจุดที่ตองการทดสอบ ลาก vector u ใหตดัผาน polygon แตไมผานจุด ยอดมุมใดๆ ไปยังระยะอนันต กําหนดคา winding counter เปน 0

• หาผลคูณ cross product (ในระนาบ x, y) ระหวาง vector u กับ edge E ที่ตดัผาน

• ผลลัพธที่ไดจะเปน องคประกอบ z ตั้งฉากกับระนาบ x, y พิจารณาได 2 กรณี

• มีคาเปนบวก ใหนับคา counter เพิ่มขึ้น 1• มีคาเปนลบ ใหนับคา counter ลดลง 1

• ถาผลลัพธสุดทายหลังจากพิจารณาทุก edge แลวจํานวน counter ไมเทา กับ 0 จุดที่ทดสอบเปนจุดภายใน มิฉะนั้น จุดดังกลาวเปนจุดภายนอก

Page 23: Lecture 2 Review (Part I)

Fill of Curved Boundary Areas

Algorithm ประเภท scan line สําหรับ บริเวณที่มีขอบเขตเปนเสนโคง จะมีความ ซับซอน มากกวา บริเวณที่เปน polygon (ยกเวนในกรณีพิเศษที่ บริเวณเปนสวน หนึ่ง ของภาคตดักรวย เชน วงกลม หรือ วงรี)

Boundary-Fill Algorithm

เปนขั้นตอนวิธีที่สามารถสรางไดงาย และใชกันมาก ในระบบกราฟกแบบโตตอบ (Interactive Graphics) ซึ่งตองการ input จากผูใช คือจุดเริ่มตนภายในบริเวณ แลวระบายสี เริ่มจากจุดที่กําหนด แลวแผกระจายออกไป จนกระทั่งไปสิ้นสุดที่ ขอบ ของบริเวณ

Flood-Fill Algorithm

คลายกับวิธี Boundary Fill แตวาเงื่อนไขคือ เปลี่ยนสี จุดภาพที่ กําหนดวาเปน สีภายในบริเวณ ใหเปนสีที่ตองการระบาย

Page 24: Lecture 2 Review (Part I)

Boundary-Fill Algorithm

Boundary Fill ตองการ input จํานวน 3 ตัวไดแก 1) พิกัดของจุดเริ่มตน (x, y) ภายใน บริเวณที่ตองการระบาย, 2) สีที่ตองการจะระบาย และ 3) สีของขอบของบริเวณ

Steps (ความสัมพันธเวียนบังเกิด : A Recursion)

เริ่มจากจุดที่ผูใชกําหนด (x, y), algorithm จะทําการตรวจสอบจุดรอบขาง เพื่อพิจารณาวา จุดนั้นเปนจุดที่อยู บนขอบ หรือวา ภายใน บริเวณ

กรณีที่จุดอยูบนขอบ (สีของจุดปจจุบันเปนสีเดียวกับสีของขอบของบริเวณ)หยุดการคนหา (program terminates)

กรณีที่จุดอยูภายในบริเวณระบายสีจุดนั้นดวย สีที่ตองการระบาย แลวพิจารณาจุดรอบขาง (4 จุด

หรือ 8 จุด) สําหรับ recursion รอบถัดไป

Page 25: Lecture 2 Review (Part I)

Testing Neighboring Pixels

ภาพดานซายคือ แผนผังแบบ 4-connected test ในขณะที่ แผนผังดานขวามือ คือรูป แบบ 8-connected test ซึ่งรวมเอาจุดทแยงมุมทั้งสี่ไว

ถาจุดปจจุบันที่ทําการทดสอบ คือจุดที่ศรชี้ การทดสอบแบบ 4-connect จะหยุดที่กรอบดานลางในขณะที่การทดสอบ แบบ 8-connect จะแผไปถึงกรอบดานบนดวย

Page 26: Lecture 2 Review (Part I)

Recursive Filling Code

โปรแกรมดานลางแสดง recursive function ของ Boundary Fill Algorithm ชนิดที่ เปนการทดสอบจุดรอบขาง 4 จุด

สังเกตวา ฟงกชันแบบ recursive ที่เรียกตัวเอง 4(8) ครั้ง เมื่อพบจุดที่ยังไมไดระบาย 1 จุด จะใชหนวยความจํา stack ปริมาณมาก ดังนั้นจึงตองมีการปรับปรุงการทํางานใหมีประสิทธิภาพดีขึ้น

Page 27: Lecture 2 Review (Part I)

Improved Recursive Filling Code

• ระบายเฉพาะ span ในแนวนอน• Push จุดเริ่มตนของ span แถวบน และ ลาง ของเสนปจจุบันใน stack• Pop จุดเริ่มตนจาก stack แลวระบายเสนนั้นในแนวนอน (ทําซ้ํา)

1

2

1

3

1

4

5

6

Page 28: Lecture 2 Review (Part I)

Flood-Fill Algorithm

บางครั้งเราอาจตองการระบายบริเวณที่ลอมรอบดวยเสนขอบหลายๆ สี ซึ่งสามารถทําไดโดย แทนที่ สีปจจุบัน ดวยสีที่ตองการระบาย ซึ่งแสดง ดวยฟงกชัน ภาษา C++ บน class frame buffer ไดดังตอไปนี้

การเพิ่มประสิทธิภาพ ของโปรแกรม โดยลดปริมาณ stack สามารถทําไดในทํานอง เดียวกันกับกรณี Boundary Fill Algorithm

Page 29: Lecture 2 Review (Part I)

Attributes of Output Primitives

นิยามไดวาคือ รูปแบบที่กําหนด สําหรับการที่จะแสดงผล output primitives ใดๆ ซึ่งแบงออกไดเปน 2 ประเภท

1. ประเภท ที่สงผลตอการวาดและแสดงผล primitive โดยตรง เชน สี และ ขนาด และ รูปแบบของลายเสน

2. ประเภท ที่สงผลตอการวาด สําหรับเงื่อนไข พิเศษ ตัวอยางเชน ขอมูลเกี่ยว กับความลึก (อางอิงกับระนาบจอภาพ) เพื่อแสดงวัตถุซอนกัน หรือ อนุญาต ใหผูใช สามารถ หยิบจับวัตถุ (ดวยอุปกรณแบบโตตอบ mouse) ได

การกําหนดคา attribute สามารถทําไดโดย กําหนดเปนตัวแปร สําหรับ ฟงกชัน ที่ทําหนาที่วาดวัตถุ (local) หรือ กําหนดเปนตัวแปรระบบ (global) ซึ่งฟงกชนั จะ ตองไปเรียกดคูาปจจุบัน เพื่อใหแสดงผลไดสอดคลองกัน

Page 30: Lecture 2 Review (Part I)

Line Attributes: Types

Attributes พื้นฐานของเสน (ตรง/โคง) ไดแก ชนิด (ลายเสน) ความหนา และ สี ในที่นี้ จะกลาวถึง วิธีการดัดแปลง ฟงกชันแสดงผลใหสัมพันธกับ คา attributes

solid line ใช algorithm การวาดเสนพื้นฐานdashed line ใช algorithm พื้นฐาน แตวาด โดยเวนชองไฟซึ่งมีความ กวางเทากับ ความหนาของเสนdotted line ใช algorithm พื้นฐาน แตวาดเปนชวงสั้นๆ โดยเวนชองไฟ มากกวาหรือเทากับความยาวของแตละชวง

ถาใช Raster Algorithm การวาดเสนเปนชวงๆ สามารถทําไดโดยการใช digital mask เพื่อ เปด/ปด จุดตดิกันที่ตองการวาดเชน 00001111 แทน mask สําหรับ dashed line ซึ่งมีระยะ 4 จุด (สังเกตวา เสนแนวนอน กับ ทแยง มีระยะตางกัน)ถาตองการวาดใหระยะเทาๆ กันทุกๆ คาความชัน ตองเปลี่ยน algorithm ใหวาด เสนทีละชวงแทน โดยแตละชวงจะกําหนดได โดยจุดปลาย 2 จุด

Page 31: Lecture 2 Review (Part I)

Line Attributes: Sizesการเปลี่ยนขนาด (ความหนา) ของเสน สามารถทําไดโดย วาดจํานวนจุดเพิ่มไป เปนจํานวนเทาตามความหนาที่ตองการ

• ถาความชันของเสนตรง นอยกวา 1 ใหเพิ่มจุดตามแนวตั้ง (ดังรูป)• ถาความชันของเสนตรง มากวา 1 ใหเพิ่มจุดตามแนวนอน ตั้งฉากกับทิศทาง

ถาตองการวาดเสนที่มีความหนามากๆ ใหออกมาสมมาตร อาจจะใชการเพิ่ม line cap ปดทายเสนก็ได ตัวอยางเชน butt cap (ดังรูป) สรางโดยวาดเสนตรงหลาย เสนขนานกัน โดยที่จุดปลายเปลี่ยนไป และความชันของจุดปลายที่เรียงกัน ใน สวนที่เปน butt มีคาเทากับ -1/m เมื่อ เสนตรงมีความชัน m

Page 32: Lecture 2 Review (Part I)

Line Attributes: Patternsลวดลายของเสน สามารถทําไดโดยการทํา digital convolution ระหวาง รูปแบบ ที่กําหนด (pixel mask) กับเสนตรงนั้นๆ (ดังรูป)

นั่นคือ แทนทีจ่ะวาดจุดภาพ ณ ตําแหนงบนเสนตรง ตามวิธีแบบ Raster Line ก็ ใหสะสมคาใน Frame Buffer ดวยคาที่ปรากฏใน pixel mask แทน ในการใชวิธีนี้ ควรพิจารณาวาหาก mask ซอนทับกันที่ตําแหนงใดๆ จะใหมีการ 1) บวกสะสมแลวเฉลี่ย หรือวา 2) เลือกคาตาม mask กอน หรือ mask หลัง หรือวา 3) ขามจุดที่ซอนทบักันไป วิธีนี้สามารถนําไปประยุกตใชกับ Raster Polygon Filling Algorithm ไดอีกดวย

Page 33: Lecture 2 Review (Part I)

Curve Attributesสําหรับเสนโคง เราสามารถนําวิธีกําหนด รูปแบบ และ ความหนาของเสนตรงมา ใชได แตมีขอควรระวังคือ

สําหรับ รูปแบบ (dashed, dotted) จะกําหนดโดยวิธี วาดเสนโคงที่ละชวงยอยๆ เชน กรณีวงกลม จะลากเปนชวงที่มีองศา เทาๆ กัน เพื่อที่จะสราง ระยะหางที่เทา กันตลอดเสน

สําหรับความหนาเนื่องจากการวาดวงกลม (หรือเสนโคงอื่นๆ) จะใชวิธีการสะทอน จุดสมมาตร ที่ octant ตางๆ ดังนั้นการทําใหเสนหนา โดยเพิ่มจุดก็ควรจะใชวิธ ีการสะทอนในทํานองเดียวกัน

อีกวิธีหนึ่งที่งายกวา แตใชทรัพยากร CPU มากกวา คือ แทนที่จะวาดวงกลมที่มี ความหนา 3 จุดภาพ ก็วาดวงกลม ที่มีรัศมีตางๆ 2 จุดภาพ แลวระบายสีบริเวณ ระหวางกลางแทน ซึ่งวิธีนี้สามารถใชไดกับเสนโคงที่มีสมการรูปแบบอื่นๆ ไดดวย

Page 34: Lecture 2 Review (Part I)

Picture Approximation

คือขั้นตอนวิธีที่ใชสําหรับแสดงผลรูปที่มีระดับสีหลายระดับ บนอุปกรณแสดงผลที่ รองรับแค สีขาว หรือ สีดํา เทานั้น หรือ ระดับสี ที่มี จํานวนนอยกวา การประยุกตใชงานทั่วไป พบไดใน Dot Matrix/Laser Printer และจอแสดงผล แบบ LED ซึ่งมีจํานวนสีจํากัด

ขั้นตอนวิธีนี้เรียกวา การทํา Halftone แบบที่งายที่สุดเรียกวา ordered dithering โดยที่จัดสรรพื้นที่ในหนวยความจํา array จัตุรัส สําหรับแตละจุดภาพ ตัวอยาง เชน กําหนด binary array ขนาด 3x3 ซึ่งใชแทนระดับความเขมของ 1 จุดภาพ

Page 35: Lecture 2 Review (Part I)

Ordered Dithering

ดานลางแสดงตัวอยาง ของการทํา ordered dithering สําหรับภาพระดับความ เทา 256 ระดับ แตเนื่องจาก dither matrix ใชขนาด 3x3 จึงรองรับไดเพียง 10 ระดับ ดังนั้นจึงตองมีการทํา quantization บนภาพกอน

index = 9 - (int) (9.0f * value/255.0f)

Dithered ImageOriginal

Page 36: Lecture 2 Review (Part I)

Conclusions

• Frame Buffer Class• Simple Graphic Primitive Algorithms

– Line Drawing Algorithms (Direct v.s. Integer Arithmetic)– Circle Drawing Algorithms– Rasterization of Arbitrary Curves– Polynomial Curve and Spline Drawing Algorithms

• Filled-Area Primitives– Polygon Filling– Flood-Fill Algorithm– Inside-Outside Tests

• Output Primitive Attributes• Picture Approximation using Halftone