Lecture 1 Introductionpersonal.sut.ac.th/paramate/files/compgraph/lecture02.pdf · ∆y = m ·∆x...
Transcript of Lecture 1 Introductionpersonal.sut.ac.th/paramate/files/compgraph/lecture02.pdf · ∆y = m ·∆x...
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