Lecture 1 Review

Paramate Horkaew

School of Computer Engineering, Institute of EngineeringSuranaree University of Technology

Raster Devices

Raster Devices

คืออุปกรณแสดงผล ที่พบไดโดยทั่วไป ไดแก จอภาพ และ เครื่องพิมพ

ลักษณะจําเพาะคือ แตละจุด หรือ Picture Element (Pixel) ซึ่งประกอบกันขึ้นเปนภาพบนอุปกรณแสดงผล จะอางถึง (Map) หนวยความจํา แบบ Random Access (RAM) ซึ่งสามารถเขาถึงได โดย CPU หรือ Register ควบคุม

(2, 2)@0004

CPU

Busอุปกรณแสดงผล หนวยความจําบัฟเฟอร

Raster Terminology (Review)

Pixel depth คือขนาดแตของหนวยความจําแตละตําแหนง (บิต) ซึ่งกําหนดพิสัยของความเขมของจุดภาพนั้น เชน 1 บิต หมายถึงจุดภาพนั้น ดับ หรือ สวาง 8 บิต หมายถึง จุดภาพมีความเขมแตกตางกัน 256 ระดับ

Color คือจํานวนสีพื้นฐาน ที่ประกอบขึ้นเปนจุดภาพนั้นๆ เชน จอภาพ CRT มี 3 สี ไดแก แดง (R) เขียว (G) น้ําเงิน (B) แตละสีมี Pixel depth 8 บิต จะแสดงจุดภาพที่มีสีที่สวางแตกตางกันได 16 ลานสี หรือ Pixel depth รวม 24 บิต

Resolution คือ จํานวนจุดภาพทั้งหมด ที่ปรากฏบนอุปกรณแสดงผล

(2, 2)@0004

CP

U Bus

CX

CY8 bit 8 bit 8 bit

SetPixel (2, 2, color (124, 92, 17))

Application Programmer’s Interface

บรรยายครั้งนี้กลาวถึง Algorithm ในการแปลงคําสั่ง Uniform Graphics เปน API พื้นฐาน ซึ่งมักอยูในรูปของ Library ที่มีพรอมมากับ Compiler ทั่วไป

Lecture 2 Raster Algorithms

Paramate Horkaew

School of Computer Engineering, Institute of EngineeringSuranaree University of Technology

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

• Picture Approximation using Halftone• Text Generation

Device Independence

เทคนิคหนึ่งที่พยายามทําใหโปรแกรมกราฟก ขึ้นอยูกับความสามารถของอุปกรณ ใหนอยที่สุด คอื พยายามสรางฟงกชันกราฟกพื้นฐานขึ้นมาเอง

ถึงแมวาจะมีผลทําใหความเร็วของการทํางานลดลง แตโปรแกรมจะมีความยืดหยุน สูง เทคนิคนี้ ใชกันมาก โดย ผูเขียนโปรแกรม Micro-controller สําหรับ แสดงผล และ ผูผลิตระบบพัฒนาโปรแกรม (Integrated Development Environment : IDE) เชน ชุดคําสั่ง GDI ของ Microsoft Foundation Class เพื่อ อํานวยความสะดวก ใหกับ ผูเขียนโปรแกรม ไดเรียกใช

http://msdn.microsoft.com/developercenters/

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

Pixel Coordinates

การอางถึงตําแหนงใน frame buffer โดยกําหนดคาพกิัด (x, y) สามารถทําได ดวยการคํานวณ ตําแหนงใน array ขนาด 1 มิติ ดงันี้

(0, 0) (1, 0) (m_cx-1, 0)

(0, m_cy-1) (m_cx-1, m_cy-1)

m_cx

m_cy

1 pixel

X

y

Device Dependence Function

จากการประกาศ class จะเห็นวามีเพียงฟงกชันเดียว ที่อางอิงกับระบบปฏิบัติการ Windows นั้นคือ การเรียกใช pointer (handle) ไปยัง Device Context (DC)

การสงขอมูลใน Frame Buffer ออกทางจอภาพทําไดโดยเรียกฟงกชันของ OS

Implementation Example

การเรียกใช class cfbuffer สามารถทําไดดังนี้

1) กําหนดขนาดของหนวยความจํา (init)2) ตั้งคาปริยายใหกับหนวยความจําเปนศูนย (clrscr)3) กําหนดคาสีของแตละจุด (setpixel)4) แสดงผลออกหนาจอ (display)

ymax

0 xmax

Line Drawing Algorithms

การวาดเสนตรงบนจอภาพสามารถแสดงได โดยเริ่มจากการศึกษาสมการเสนตรง

bxmy +⋅=

โดยที่ m และ b คือ ความชัน และ จุดตดัแกน y ของเสนตรง ตามลําดับ

ถากําหนด จุดปลายสองจุด คือ (x1, y1) และ (x2, y2) ตัวแปรสมการเขียนไดเปน

x1 x2

y1

y2

11

12

12

xmybxxyym

⋅−=−−

=

Digital Differential Analyzer (DDA)

จากการสังเกตพบวา ความแตกตางตามแกน x (∆x = x2 - x1) และ แกน y (∆y =y2- y1) จะสัมพันธ กับคาความชัน m ตามสมการ

∆y = m ·∆x และ ∆x = ∆y / m

เนื่องจากใน Computer Graphics เราจะพิจารณา Frame Buffer ซึ่งมีระบบปริภมู ิแบบ Discrete นั่นคือ ∆ จะมีคาเปนจํานวนเต็มหนวยเทานั้น (pixels) ดังนั้น แบง การพิจารณาเปน 2 กรณี เมื่อ m และ ∆x มีคาเปนบวก

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

mxx kk

11 +=+myy kk +=+1

ถา ∆x มีคาเปนลบก็เพียงแตเปลี่ยนเครื่องหมายหนา m จาก + เปน -

Digital Differential Analyzer (DDA)

ในทํานองเดียวกัน กรณีที่ m มีคาเปนลบ จะพิจารณาจากคาสัมบูรณของ m

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

mxx kk

11 +=+myy kk +=+1

DDA Algorithm จะเร็วกวาทําการคํานวณจากสมการตรงๆ โดยการตัดกระบวนการ คูณ (พกิัด x กับความชัน m) ทิ้ง แลวแทนที่ดวยการบวก จํานวนจริง

อยางไรก็ดี ขอควรระวังคือ หากเสนตรงมีความยาวมาก ความผิดพลาดจะสะสม จน กระทั่งเบี่ยงเบนไปจาก เสนตรงที่ตองการอยางเดนชดั อาจแกไขโดยการบวกคา สะสมเปนจํานวนจริง แลวปดเศษเปนจํานวนเต็ม กอนจะวาดจุดภาพ ทวาวิธีนี้จะใชเวลา CPU คอนขางมาก

Digital Differential Analyzer (DDA)

DDA Algorithm สามารถเขียนดวย C++ บน class cfbuffer ไดดงันี้

Bresenham’s Line Algorithmเปน algorithm เพื่อใชสําหรับวาดเสนตรง ที่มีประสิทธิภาพ และเที่ยงตรง คิดคน โดย Bresenham ในป 1961 ซึ่งคํานวณ โดยใชเพียงเลขจํานวนเต็ม อีกทั้งยัง สามารถนําไปประยุกต ใชสําหรับวาดเสนโคง ตางๆไดอีกดวย

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

Discrete and Exact Lines

ที่ตําแหนงพิกัดที่ xk+1 กําหนดให d1 และ d2 เปนระยะหางในพิกัดแนวดิ่งจากเสนตรงจริง y = m (xk+1) + b ทางดานลาง และ ดานบน ตามลําดับ

( )( )

( ) bxmyyyd

ybxmyyd

kk

k

kk

k

−+−+=−+=

−++=−=

111

1

2

1

( ) 1221221 −+−+=− byxmdd kkความแตกตางของระยะทั้งสองคือ

Decision Parameter pk

กําหนดให m = ∆y/ ∆x และ นิยามตัวแปลสําหรับเลือกตําแหนง y ดังนี้

( )

( )12222

21

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

−∆=

bxyccyxxy

ddxp

kk

k

ในที่นี้เนื่องจาก ∆x มีคาเปนบวก pk จะมีเครื่องหมายเดียวกับ d1-d2 นั่นคือ

• ถา pk เปนลบแสดงวา d1< d2 หรือ yk ใกลเสนจริงมากกวา yk+1 เลือก yk

• ถา pk เปนบวกแสดงวา d1 > d2 หรือ yk+1 ใกลเสนจริงมากกวา yk เลือก yk+1

Integer Arithmetic

ปรับสมการใหอยูในรูปของตัวแปล p เปนฟงกชันของ k เทานั้น

( )xyp

yyxyppcyxxyp

cyxxyp

kkkk

kkk

kkk

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

+⋅∆−⋅∆=

++

+++

222222

22

0

11

111

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

คา ∆y, ∆x และ ∆y - ∆x เปนจํานวนเต็ม คาคงที่ซึ่งคํานวณ เพียงครั้งเดียว

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

Homework

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

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

ลําดับที่ k

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

(สงวันพฤหัสหนา)

Drawing A Circle

วงกลมที่มีจุดศูนยกลางที่ (xc, yc) และรัศมี r มีสมการ ดังนี้

( ) ( ) 222 ryyxx cc =−+−

วิธีรวาดวงกลมที่กําหนดอยางงายที่สุดคือ กําหนดคา x แลววาดจุดที่ตําแหนง y

( )22 xxryy cc −−±=

ขอเสียวิธีนี้คือ• การคํานวณที่ใชเวลาของ CPU มาก• ระยะหางระหวางจุดไมสม่ําเสมอ การเลื่อนคา x ที่ละนอย ไมแกปญหา เพราะวาทําใหใชเวลามากขึ้นไปอีก

Midpoint Circle Algorithm

เนื่องจากสมการวงกลมแบบเต็มรูป มีความซับซอน เราอาจจะเลื่อนวงกลมมาที่จุด กําเนิดกอน (xc, yc) = (0, 0) แลวหลังจากนั้นจึงเลื่อนไปยังจุดที่ถูกตอง โดยการบวกจุดภาพที่ไดดวยคาพิกัด (xc, yc) นอกจากนี้วงกลมยังมีความสมมาตรเทียบกับแกน x = ±y และแกน x และ y ดังรูป

ดังนั้นเราจึงสามารถคํานวณเพียงแคในสวนที่ x = 0 ถึง x = y แลว สะทอนพิกัดจุดไปยัง octant ตางๆ

ดวยคุณสมบัติของวงกลม คาความชันใน octant นี้มีคาตั้งแต 0 ถึง -1 เราจึงสามารถใช Bresenham’s Algorithm ที่เพิ่มคาในแกน x ทีละ 1 จุดได

Implicit Circle Function

นิยามฟงกชัน (implicit) ของวงกลมดังนี้

( ) 222, ryxyxfc −+=

คาของฟงกชันที่ (x, y) สามารถแยกพิจารณาได 3 กรณี

• คาเปนลบ หมายถึง (x, y) อยูภายในวงกลม• คาเปนศูนย หมายถึง (x, y) อยูบนเสนรอบวงของวงกลม• คาเปนบวก หมายถึง (x, y) อยูภายนอกวงกลม

ซึ่งสามารถใชแทนตัวแปรตัดสินใจในทํานองเดียวกับ Bresenham’s Algorithm

Deriving Decision Parameter

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

( ) 22

2

211

21,1

ryx

yxfp

kk

kkck

−⎟⎠⎞

⎜⎝⎛ −++=

⎟⎠⎞

⎜⎝⎛ −+=

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

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

Successive 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

Algorithm Summary

1) เลื่อนวงกลมไปที่จุดกําเนิด คํานวณตัวแปรตัดสินใจเริ่มตน p0

2) คํานวณพิกัดที่ (xk+1, yk+1) โดยใชตัวแปรตัดสินใจที่ pk โดยที่ xk+1 = xk+1 และ yk+1 = yk หรือ yk-1

3) สะทอนจุดที่คํานวณไดไปยังอีก 7 octants ที่เหลือ

4) เลื่อนวงกลมไปที่จุดศูนยกลางที่ตองการ ทําซ้ําขั้นตอนที่ 2-4 ขณะที่ x < y

( ) ( )

Nrr

rrr

rfp

ryx

c

∈−≈

−=−⎟⎠⎞

⎜⎝⎛ −+=

⎟⎠⎞

⎜⎝⎛ −=

=

,145

211

21,1

,0,

22

0

00

แบบฝกหัด จงเขียนฟงกชัน C++ จากคําอธิบายขั้นตอนวิธี midpoint circle drawing algorithm

Rasterization of Curves

จากตัวอยางการใชตัวแปรตัดสินใจของ Bresenham สําหรับเสนตรง และขั้นตอนวิธี midpoint ของ วงกลม เราสามารถขยายผล เพื่อนํามาใชสราง เสนโคงใดๆ ได

นิยามเสนโคงในรูปของ implicit function กลาวคือ f (x, y) = 0 จะเปนการแบงปริภูมิ Cartesian ออกเปนสองระนาบ ดังรูป

x

y

f > 0

f < 0

f = 0

Rasterization of Curvesการหาขั้นตอนวิธีสรางเสนโคงใดๆ สามารถทําไดดังนี้

• หาสมการ คาตัวแปรตัดสินใจในรูปของพิกัด x และ y (pk)• หาสมการ recursive pk+1 = pk + g (xk, yk, xk±1, yk±1)• ทั้งนี้ตองระวังในเรื่องของ เครื่องหมาย เนื่องคาความชันของเสนโคงเปนไปได

ทั้ง + และ - และคาสัมบูรณ อาจจะมีคามากกวาหรือนอยกวา 1 ก็ได

อีกวิธีหนึ่งที่งายกวาคือการหาตําแหนงจุด ที่ฟ งกชันของเสนโค งเปลี่ยนเครื่องหมาย แตวา การทํางานจะชากวามาก ดังรูป

Conclusion

• 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

• Picture Approximation using Halftone• Text Generation