Dr. Varin Chouvatut. - cs. · PDF...

16
Transformation Dr. Varin Chouvatut. 1

Transcript of Dr. Varin Chouvatut. - cs. · PDF...

Page 1: Dr. Varin Chouvatut. - cs. · PDF fileการแปลงรูปทางเรขาคณิต 2 มิติ •การเปลี่ยนแปลงการหมุน

Transformation Dr. Varin Chouvatut.

1

Page 2: Dr. Varin Chouvatut. - cs. · PDF fileการแปลงรูปทางเรขาคณิต 2 มิติ •การเปลี่ยนแปลงการหมุน

การแปลงรูปทางเรขาคณิต 2 มิติ

• การเปลี่ยนแปลงการหมนุ ขนาด และรูปร่าง สามารถท าได้โดยวิธีการแปลงรูปทางเรขาคณิต (geometric transformations) ที่ใช้วิธีการเปลี่ยนลกัษณะพิกดัของวตัถ ุ

• การแปลงรูปทางเรขาคณิตประกอบไปด้วย 1. การย้ายต าแหน่ง (Translation)

2. การหมนุ (Rotation)

3. การย่อ/ขยาย (Scaling)

4. การสะท้อน (Reflection)

5. การบดิ (Shear)

การแปลงรูปแบบพืน้ฐาน

2

Page 3: Dr. Varin Chouvatut. - cs. · PDF fileการแปลงรูปทางเรขาคณิต 2 มิติ •การเปลี่ยนแปลงการหมุน

การยา้ยต าแหน่ง (Translation)

• การย้ายต าแหน่งจะถกูใช้เพ่ือเคลื่อนย้ายวตัถจุากต าแหน่งพิกดัหนึ่งไปยงัอีกพิกดัหนึ่ง ตามเส้นทางที่เป็นเส้นตรง

• เราสามารถย้ายจดุ 2 มิติได้โดยการบวกระยะทางการย้าย (translation distances) 𝑡𝑥 และ 𝑡𝑦 ให้กบัพิกดัของจดุเดิม 𝑥, 𝑦 เพ่ือย้ายจดุไปยงัพิกดัใหม ่ 𝑥 , 𝑦

𝑥 = 𝑥 + 𝑡𝑥 , 𝑦 = 𝑦 + 𝑡𝑦

• คูอ่นัดบั 𝑡𝑥 , 𝑡𝑦 ดงักลา่ว เรียกวา่ เวคเตอร์การย้าย (translation vector) หรือ เวคเตอร์การเลื่อน (shift vector)

3

Page 4: Dr. Varin Chouvatut. - cs. · PDF fileการแปลงรูปทางเรขาคณิต 2 มิติ •การเปลี่ยนแปลงการหมุน

• ถ้าเราใช้ column vectors แทนพิกดัต าแหน่ง และเวคเตอร์การย้าย จะเขียนได้เป็น

𝑷 =𝑥1

𝑥2, 𝑷 =

𝑥 1𝑥 2

, 𝑻 =𝑡𝑥

𝑡𝑦

• เราจงึสามารถเขียนสมการการย้ายต าแหน่ง 2 มิติในรูปแบบเมตริกซ์ได้เป็น 𝑷 = 𝑷 + 𝑻

• การย้ายต าแหน่งเป็นการเปลี่ยนแปลงรูปแบบไม่ท าให้เสียรูปร่าง (rigid-body transformation) กลา่วคือ เป็นเพียงการเคลื่อนย้ายวตัถโุดยไมท่ าให้เกิดการเปลี่ยนรูปทรง ทกุจดุบนวตัถจุะถกูเคล่ือนย้ายด้วยระยะทางเทา่ๆกนั

4

Page 5: Dr. Varin Chouvatut. - cs. · PDF fileการแปลงรูปทางเรขาคณิต 2 มิติ •การเปลี่ยนแปลงการหมุน

การหมุน (Rotation)

• การหมนุ 2 มิติจะท าได้โดยการเปลี่ยนต าแหน่งของวตัถไุปตามเส้นทางวงกลมบนระนาบ 𝑥𝑦

• จะมีการก าหนดมมุการหมนุ (rotation angle) เป็น 𝜃 และก าหนดต าแหน่งจดุหมนุ (rotation point or pivot point) เป็น 𝑥𝑟 , 𝑦𝑟 โดยจะท าการหมนุวตัถไุปรอบๆจดุนี ้

• โดยค่ามมุการหมนุอาจเป็น • ค่าบวก (positive) – ส าหรับการหมนุแบบทวนเข็มนาฬิการอบจดุหมนุ (pivot point)

• ค่าลบ (negative) – ส าหรับการหมนุแบบตามเข็มนาฬิการอบจดุหมนุ (pivot point)

• การเปลี่ยนแปลงรูปโดยการหมนุนี ้อาจนิยามได้โดยการหมนุรอบแกนหมนุแกนหนึง่ท่ีตัง้ฉากกบัระนาบ 𝑥𝑦 และผ่านจดุหมนุ (pivot point)

เช่น แกน 𝑧 ท่ีตัง้ฉากกบัระนาบ 𝑥𝑦 และวิ่งผ่านจดุ 𝑥𝑟 , 𝑦𝑟 5

Page 6: Dr. Varin Chouvatut. - cs. · PDF fileการแปลงรูปทางเรขาคณิต 2 มิติ •การเปลี่ยนแปลงการหมุน

• โดยการใช้คณุสมบตัิตรีโกณมิติ เราสามารถเขียนพิกดัหลงัการเปลี่ยนแปลงในพจน์ของมมุ 𝜃 และ 𝜙 ได้เป็น

𝑥′ = 𝑟 cos 𝜙 + 𝜃 = 𝑟 cos 𝜙 cos 𝜃 − 𝑟 sin 𝜙 sin 𝜃 𝑦′ = 𝑟 sin 𝜙 + 𝜃 = 𝑟 cos 𝜙 sin 𝜃 + 𝑟 sin 𝜙 cos 𝜃

• โดย 𝑟 คือระยะทางที่คงท่ีของจดุจากจดุก าเนิด (origin), มมุ 𝜙 คือต าแหน่งเชิงมมุของจดุจากแนวนอน, และ 𝜃 คือ มมุการหมนุ

• สงัเกตวุ่ากรณีดงักลา่ว เป็นกรณีที่จดุหมนุ (pivot point) อยู่ที่จดุก าเนิด

• พิกดัเดิมของจดุในพิกดัเชิงมมุ (polar coordinates) คือ 𝑥 = 𝑟 cos 𝜙 , 𝑦 = 𝑟 sin 𝜙

• เมื่อแทนคา่ 𝑥 และ 𝑦 ลงในสมการ 𝑥′ และ 𝑦′ เราจะได้สมการส าหรับการหมนุจดุ ณ ต าแหน่ง 𝑥, 𝑦 เป็นมมุ 𝜃 รอบจดุก าเนิด (origin) ดงันี ้

𝑥′ = 𝑥 cos 𝜃 − 𝑦 sin 𝜃 𝑦′ = 𝑥 sin 𝜃 + 𝑦 cos 𝜃

6

Page 7: Dr. Varin Chouvatut. - cs. · PDF fileการแปลงรูปทางเรขาคณิต 2 มิติ •การเปลี่ยนแปลงการหมุน

• เมื่อเราเขียนในรูปแบบ column vectors ส าหรับต าแหน่งพิกดั จะได้สมการการหมนุในรูปแบบเมตริกซ์เป็น

𝐏′ = 𝐑 ∙ 𝐏 โดยที่เมตริกซ์การหมนุคือ

𝐑 =cos 𝜃 − sin 𝜃sin 𝜃 cos 𝜃

• หากต้องการเขียนต าแหน่งพิกดัในรูปแบบ row vectors ซึง่จะได้เวคเตอร์พิกดัต าแหน่งใหม่เป็น 𝑥′ 𝑦′ ซึง่ค านวณได้จาก

𝐏′T= 𝐑 ∙ 𝐏 T

= 𝐏T ∙ 𝐑T

โดย 𝐏T = 𝑥 𝑦 • สมการการแปลงรูปแบบหมนุจดุรอบจดุหมนุท่ีก าหนด

ณ ต าแหน่ง 𝑥𝑟 , 𝑦𝑟 คือ 𝑥′ = 𝑥𝑟 + 𝑥 − 𝑥𝑟 cos 𝜃 − 𝑦 − 𝑦𝑟 sin 𝜃 𝑦′ = 𝑦𝑟 + 𝑥 − 𝑥𝑟 sin 𝜃 + 𝑦 − 𝑦𝑟 cos 𝜃

• เช่นเดียวกบัการย้ายต าแหน่ง การแปลงรูปโดยการหมนุก็เป็นการเปลี่ยนแปลงรูปแบบไมท่ าให้เสียรูปร่าง (rigid-body transformation) ที่เคลื่อนย้ายวตัถโุดยไมท่ าให้รูปทรงของวตัถเุสียไป

7

Page 8: Dr. Varin Chouvatut. - cs. · PDF fileการแปลงรูปทางเรขาคณิต 2 มิติ •การเปลี่ยนแปลงการหมุน

การยอ่/ขยาย (Scaling)

• การแปลงรูปแบบย่อ/ขยาย คือ การเปลี่ยนแปลงขนาดรูปทรงของวตัถ ุ

• เป็นการจดัการกบัรูปจ าพวกรูปหลายเหลี่ยม (polygons) โดยการคณูคา่พิกดั 𝑥, 𝑦 ของแตล่ะจดุยอด (vertex) ด้วยตวัประกอบการย่อ/ขยาย (scaling factors) 𝑠𝑥 และ 𝑠𝑦 เพ่ือสร้างเป็นพิกดัใหม ่ 𝑥′, 𝑦′

𝑥′ = 𝑥 ∙ 𝑠𝑥 , 𝑦′ = 𝑦 ∙ 𝑠𝑦 • โดยสมการการแปลงข้างต้นสามารถเขียนในรูปแบบของเมตริกซ์ได้ดงันี ้

𝑥′

𝑦′ =𝑠𝑥 00 𝑠𝑦

∙𝑥𝑦

หรือ 𝐏′ = 𝐒 ∙ 𝐏

โดยท่ี 𝐒 เป็นเมตริกซ์การย่อ/ขยายขนาด 2 × 2

8

Page 9: Dr. Varin Chouvatut. - cs. · PDF fileการแปลงรูปทางเรขาคณิต 2 มิติ •การเปลี่ยนแปลงการหมุน

• คา่ตวัเลขคา่บวก (positive) ใดๆก็ตามสามารถก าหนดให้กบัตวัประกอบการย่อ/ขยาย 𝑠𝑥 และ 𝑠𝑦 ได้ โดยท่ี 1. < 1 ย่อ (ลด) ขนาดรูปทรงของวตัถ ุ

2. > 1 ขยาย (เพิ่ม) ขนาดรูปทรงของวตัถ ุ

3. 𝑠𝑥 = 𝑠𝑦 การย่อ/ขยายแบบเอกรูป (uniform scaling)

4. 𝑠𝑥 ≠ 𝑠𝑦 การย่อ/ขยายแบบผลต่าง (differential scaling)

A scaled line is reduced in size and moved closer to the coordinate origin.

9

Page 10: Dr. Varin Chouvatut. - cs. · PDF fileการแปลงรูปทางเรขาคณิต 2 มิติ •การเปลี่ยนแปลงการหมุน

• เราสามารถควบคมุต าแหน่งของวตัถทุี่ถกูย่อ/ขยายขนาดได้โดยก าหนดจดุคงท่ี (fixed

point) 𝑥𝑓 , 𝑦𝑓 โดยจดุต าแหน่งนีจ้ะไม่มีการเปลี่ยนแปลงหลงัจากการแปลงรูปแบบย่อ/ขยาย

• รูปหลายเหลี่ยม (polygon) จะถกูย่อ/ขยายขนาดโดยสมัพทัธ์ (relative) กบัจดุคงท่ีนี ้โดยจะย่อ/ขยายระยะหา่งของแตล่ะจดุยอด (vertex) ของรูปไปยงัจดุคงท่ีนีแ้ทน โดยมีสมการ

𝑥′ = 𝑥𝑓 + 𝑥 − 𝑥𝑓 𝑠𝑥, 𝑦′ = 𝑦𝑓 + 𝑦 − 𝑦𝑓 𝑠𝑦

• ซึง่เราสามารถเขียนสมการการแปลงรูปนีไ้ด้ใหม ่เพ่ือแยกพจน์การคณูและการบวกออกจากกนัได้โดย

𝑥′ = 𝑥 ∙ 𝑠𝑥 + 𝑥𝑓 1 − 𝑠𝑥

𝑦′ = 𝑦 ∙ 𝑠𝑦 + 𝑦𝑓 1 − 𝑠𝑦

10

Page 11: Dr. Varin Chouvatut. - cs. · PDF fileการแปลงรูปทางเรขาคณิต 2 มิติ •การเปลี่ยนแปลงการหมุน

การแทนดว้ยรูปแบบเมตริกซ์และพิกดัเอกพนัธ์ุ (Matrix Representations & Homogeneous Coordinates)

• มีหลายโปรแกรมประยกุต์ทางกราฟิกท่ีเก่ียวข้องกบัล าดบัชดุของการแปลงรูปทางเรขาคณิต

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

• จากที่ผ่านมา เราจะสงัเกตไุด้ว่าการแปลงรูปพืน้ฐานตา่งๆสามารถแสดงได้ในรูปแบบของเมตริกซ์ดงันี ้

𝐏′ = 𝐌1 ∙ 𝐏 + 𝐌2

ซึง่ต าแหน่งพิกดั 𝐏 และ 𝐏′ อยู่ในรูป column vectors, เมตริกซ์ 𝐌1 มีขนาด 2 × 2 ที่ประกอบไปด้วยตวัประกอบการคณู (multiplicative factors), และ 𝐌2 เป็นเมตริกซ์แบบคอลมัน์โดยมีจ านวนสมาชิก 2 ตวั ซึง่ประกอบไปด้วยพจน์การย้ายต าแหน่ง (translational terms) ดงันัน้

1. ส าหรับการย้ายต าแหน่ง (translation) – 𝐌1 จะเป็นเมตริกซ์เอกลกัษณ์ (identity matrix)

2. ส าหรับการหมนุ (rotation) หรือ การย่อ/ขยาย (scaling) – 𝐌2 จะประกอบไปด้วยพจน์การย้ายต าแหน่งซึง่สมัพนัธ์กบัจดุหมนุ (pivot point) หรือ จดุคงท่ีในการย่อ/ขยาย (scaling fixed point)

11

Page 12: Dr. Varin Chouvatut. - cs. · PDF fileการแปลงรูปทางเรขาคณิต 2 มิติ •การเปลี่ยนแปลงการหมุน

• ในการสร้างล าดบัของการแปลงรูปด้วยสมการเหลา่นี ้ตวัอย่างเช่น ท าการย่อ/ขยายขนาด ตามด้วยการหมนุ จากนัน้ท าการย้ายต าแหน่ง เป็นต้น เราต้องค านวณพิกดัการแปลงรูปเหล่านีค้รัง้ละ 1 ขัน้ตอน กลา่วคือ 1. เร่ิมต้นด้วย ต าแหน่งพิกดัจะถกูย่อ/ขยาย

2. จากนัน้ พิกดัที่ถกูย่อ/ขยายแล้วจะถกูหมนุ

3. สดุท้าย พิกดัที่ถกูหมนุแล้วจะถกูย้ายต าแหน่ง

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

• เราสามารถรวมพจน์การคณูและพจน์การย้ายต าแหน่งส าหรับการแปลงรูปทางเรขาคณิต 2 มิติให้อยู่ในรูปเมตริกซ์เดียวได้ โดยการขยายรูปแบบของเมตริกซ์ขนาด 2 × 2 ไปเป็นขนาด 3 × 3

• วิธีนีจ้ะช่วยให้เราสามารถเขียนชดุของสมการการแปลงรูปทัง้หมดไว้ในรูปแบบการคณูกนัของเมตริกซ์ได้

12

Page 13: Dr. Varin Chouvatut. - cs. · PDF fileการแปลงรูปทางเรขาคณิต 2 มิติ •การเปลี่ยนแปลงการหมุน

• เพ่ือให้ได้การแปลงรูป 2 มิติอยู่ในรูปการคณูกนัของเมตริกซ์ เราจะต้องแทนต าแหน่งพิกดัคาร์ทีเซียน 𝑥, 𝑦 ด้วยพิกดัเอกพนัธุ์ (homogeneous coordinate) ท่ีม ี3 สมาชิก 𝑥ℎ , 𝑦ℎ , ℎ โดยท่ี

𝑥 =𝑥ℎ

ℎ, 𝑦 =

𝑦ℎ

• ดงันัน้การเขียนแทนพิกดัเอกพนัธุ์อาจสามารถเขียนได้เป็น ℎ ∙ 𝑥, ℎ ∙ 𝑦, ℎ ซึง่คา่พารามิเตอร์ ℎ สามารถเป็นคา่ใดก็ได้ที่ไม่เทา่กบัศนูย์

• จงึกลา่วได้ว่า รูปแบบพิกดัเอกพนัธุ์จะมีจ านวนนบัไมถ้่วนส าหรับการเขียนแทนจดุพิกดั 𝑥, 𝑦 ใดๆ

• ตวัเลือกท่ีท าให้สะดวกในการค านวณตวัเลือกหนึง่คือ การตัง้คา่ ℎ = 1 ดงันัน้ แตล่ะต าแหน่ง 2 มิติจะถกูเขียนในพิกดัเอกพนัธุ์ได้เป็น 𝑥, 𝑦, 1

• ดงัท่ีกลา่วมาแล้ววา่ การแสดงต าแหน่งในพิกดัเอกพนัธุ์ช่วยให้เราสามารถแสดงสมการการแปลงรูปทางเรขาคณิตทัง้หมดได้ในรูปของการคณูกนัของเมตริกซ์ โดยพิกดั (coordinates) จะถกูแทนด้วย column vectors ที่มี 3 สมาชิก และการแปลงรูปจะถกูเขียนในรูปเมตริกซ์ขนาด 3 × 3 13

Page 14: Dr. Varin Chouvatut. - cs. · PDF fileการแปลงรูปทางเรขาคณิต 2 มิติ •การเปลี่ยนแปลงการหมุน

• ส าหรับการย้ายต าแหน่ง (translation) เราจะได้ 𝑥′

𝑦′

1

=1 0 𝑡𝑥

0 1 𝑡𝑦

0 0 1

∙𝑥𝑦1

ซึง่อาจสามารถเขียนในรูปแบบอย่างย่อได้เป็น 𝐏′ = 𝐓 𝑡𝑥, 𝑡𝑦 ∙ 𝐏

• ตวัผกผนั (inverse) ของเมตริกซ์การย้ายต าแหน่ง (translation matrix) สามารถหาได้จากการแทนคา่พารามิเตอร์ย้ายต าแหน่ง 𝑡𝑥 และ 𝑡𝑦 ด้วยคา่ติดลบเป็น −𝑡𝑥 และ −𝑡𝑦

• เช่นเดียวกนั สมการการแปลงรูปแบบหมนุ (rotation transformation) รอบจดุก าเนิดของแกนพิกดั (coordinate origin) สามารถเขียนได้เป็น

𝑥′

𝑦′

1

=cos 𝜃 − sin 𝜃 0sin 𝜃 cos 𝜃 0

0 0 1∙

𝑥𝑦1

หรือเขียนเป็น 𝐏′ = 𝐑 𝜃 ∙ 𝐏

• เมตริกซ์การหมนุผกผนั (inverse rotation matrix) หาได้จากการแทนคา่ 𝜃 ด้วย – 𝜃 14

Page 15: Dr. Varin Chouvatut. - cs. · PDF fileการแปลงรูปทางเรขาคณิต 2 มิติ •การเปลี่ยนแปลงการหมุน

• สดุท้าย การแปลงรูปแบบการย่อ/ขยาย (scaling transformation) สมัพทัธ์กบัจดุก าเนิดของแกนพิกดั (coordinate origin) สามารถแสดงได้ด้วยการคณูกนัของเมตริกซ์

𝑥′

𝑦′

1

=𝑠𝑥 0 00 𝑠𝑦 0

0 0 1

∙𝑥𝑦1

หรือ 𝐏′ = 𝐒 𝑠𝑥, 𝑠𝑦 ∙ 𝐏

• เมตริกซ์การย่อ/ขยายผกผนั (inverse scaling matrix) สามารถท าได้โดยแทน

คา่พารามิเตอร์ 𝑠𝑥 และ 𝑠𝑦 ด้วยตวัผกผนัการคณู คือ 1

𝑠𝑥 และ

1

𝑠𝑦

• ในเมตริกซ์การหมนุ และการย่อ/ขยาย โดยทัว่ไป ท่ีอาจมีจดุหมนุ (pivot point) หรือ จดุคงที่ (fixed point) ก็จะสามารถก าหนดได้โดยตรง โดยไมจ่ าเป็นต้องใช้ฟังก์ชัน่การแปลงรูปแบบเรียงล าดบัอีก

15

Page 16: Dr. Varin Chouvatut. - cs. · PDF fileการแปลงรูปทางเรขาคณิต 2 มิติ •การเปลี่ยนแปลงการหมุน

เอกสารอา้งอิง

• Donald Hearn and M. Pauline Baker, Computer Graphics: C Version, 2nd Ed., Prentice Hall, 1997.

16