TWO-DIMENSIONAL GEOMETRIC

งานนำเสนอเรื่อง: "TWO-DIMENSIONAL GEOMETRIC"— ใบสำเนางานนำเสนอ:

1 TWO-DIMENSIONAL GEOMETRIC
TRANSFORMATION Translation Rotation Scaling Shearing

2 ภาพ (Image) ในที่นี้แบ่งออกเป็น 2 ประเภท
Primitive drawing ภาพที่เกิดจากคำสั่งพื้นฐาน เช่น จุด เส้นตรง วงกลม สามเหลี่ยม สี่เหลี่ยม เส้นโค้ง ฯลฯ 2. Complex ภาพที่เกิดจาก จุด (pixel) มาประกอบกันเข้า เช่น คน บ้าน วิว ภาพที่เป็น bitmap

3 โดยที่ H เป็นระยะทางที่เปลี่ยนแปลงในแกนนอน (แกน x)
TRANSLATION เป็นการย้ายตำแหน่งของภาพจากเดิมไปสู่ตำแหน่งใหม่หรือจากจุด (x,y) เดิม ไปเป็น (x’,y’) โดยที่ (x,y) (x’,y’) X’ = x + H Y’ = y + V V H โดยที่ H เป็นระยะทางที่เปลี่ยนแปลงในแกนนอน (แกน x) V เป็นระยะที่เปลี่ยนแปลงในแกนตั้ง (แกน y)

4 y x

5 y x

6

7 เป็นการหมุนของวัตถุ โดยเปลี่ยนตามมุมของการหมุน (rotation
angle) ในทิศทางทวนเข็มนาฬิการอบจุดหมุน (pivot point) y (x,y) r rsin   x rcos  ในระบบแกนโพลาร์โคออร์ดิเนต x = r cos  y = r sin 

8 y r x ในที่นี้ r = √x2+y2 =√12+12 = √2  = tan-1 1 = 45 องศา
(1,1) r y = rsin  1  1 x x = rcos  ในที่นี้ r = √x2+y2 =√12+12 = √2  = tan-1 1 = 45 องศา โพลาร์โคออร์ดิเนต x = r cos  = √2 cos 45 = √2 (1/√2 ) = 1 = x y = r sin = √2 sin 45 = √2 (1/√2 ) = 1 = y

9 จุด (x,y) เดิมหมุนไปในทิศทาง ทวนเข็มนาฬิกาไปเป็นมุม  จะได้
x’ = r x cos (+) y’ = r x sin (+) (x’,y’) r r (x,y)   x x = r cos() Y = r sin () Cos(A+B) = Cos(A)Cos(B) – Sin(A)Sin(B) Sin(A+B) = Sin(A)Cos(B) + Cos(A)Sin(B) โดยใช้กฎของ sine และ cosine ตามหลักตรีโกณมิติได้ x’ = r x cos() x cos() - r x sin () x sin() y’ = r x sin() x cos() + r x cos () x sin()

10 y y x x X’ = X x cos() - Y x sin () Y’ = Y x cos() + X x sin() 
Pivot Point Pivot Point X’ = X x cos() - Y x sin () Y’ = Y x cos() + X x sin()

11 ในกรณีของการหมุนวัตถุด้วยมุมรอบจุดหมุน (pivot point) โดยมี่จุดหมุนไม่ได้อยู่ที่จุดกำเนิด (origin) ต้องคำนวณตามลำดับขั้นตอนดังนี้ ย้ายจุดหมุน (pivot point) มาอยู่ที่จุด origin ดังนั้น ทุกๆจุดของวัตถุต้องย้ายมาอยู่ตำแหน่งใหม่ (x’,y’) โดยที่ X’ = X – xp y’ = Y - yp

12 2. ทำการ rotate ด้วยมุม  รอบจุด origin ได้จุดใหม่ (x’,y’)
X’’ = X’ x cos() – Y’ x sin () Y’’ = Y’ x cos() + X’ x sin() โดยการจัดเทอมทางตรีโกณมิติ และแทนค่า x’,y’ ลงในสมการ X’’ = (X-xp) x cos() – (Y-yp) x sin () Y’’ = (Y-yp) x cos() + (X-xp) x sin()

13 3. ทำการย้ายจุดหมุนกลับสู่จุด pivot point เดิมได้จุด (x’’’,y’’’)
X’’’ = X’’ + xp Y’’’ = Y’’ + yp แทนค่า x’’,y’’ ลงในสมการได้ X’’’ = (X-xp) x cos() – (Y-yp) x sin () + xp Y’’’ = (Y-yp) x cos() + (X-xp) x sin() + yp

14 1. Translate Object 3. Translate 2. Rotate (xp,yp) (xp,yp) (xp,yp)

15 Scaling factor > 1 วัตถุที่ได้ขนาดใหญ่กว่าเดิม
การลดหรือขยายขนาดของรูป สามารถเปลี่ยนแปลงขนาดของวัตถุ ได้โดยนำจุดใดๆ ที่ประกอบขึ้นเป็นวัตถุ คูณกับค่า Scaling Factor Scaling factor > 1 วัตถุที่ได้ขนาดใหญ่กว่าเดิม Scaling factor < 1 วัตถุที่ได้เล็กกว่าเดิม ในการ scaling มีจุดในการกำหนดตำแหน่งของวัตถุที่ต้องการ ลดหรือขยาย เรียกว่า fixed point ถ้ากำหนด fixed point ที่ origin(0,0) จุด (x,y) ต้องการ scale ด้วย Sx ทิศทางในแนวแกน X Sy ทิศทางในแนวแกน Y

16 ได้จุดใหม่ (x,y) โดยที่ X’ = X x Sx Y’ = Y x Sy y y
Fixed Point distance Fixed Point distance x x

17 ในการกำหนดจุด (xp,yp) เป็น fixed point ซึ่งไม่ได้
อยู่ที่จุด origin มีขั้นตอนในการ scaling ดังนี้ 1. ย้ายจุด (xp,yp) ไปที่ origin X’ = X - Xp, Y’ = Y - Yp 2. Scale จุดโดยคูณกับ Sx, Sy X’’ = X’ x Sx, Y’’ = Y’ x Sy 3. ย้ายจุด (Xp,Yp) จาก origin สู่จุดเดิม X’’’ = X’’ + Xp, Y’’’ = Y’’ + Yp แทนค่า X’,Y’,X’’,Y’’ ในสมการได้ X’’’ = (X - Xp) x Sx + Xp Y’’’ = (Y - Yp) x Sy + Yp

18 1. Translate Object 3. Translate 2. Scaling (xp,yp) (xp,yp) (xp,yp)

19

20 เป็นการเปลี่ยนแปลงวัตถุในลักษณะเป็นการเปลี่ยนแปลงค่า
SHEARING เป็นการเปลี่ยนแปลงวัตถุในลักษณะเป็นการเปลี่ยนแปลงค่า ในด้าน x หรือ y ด้านใดด้านหนึ่ง มี 2 แบบคือ x-shear และ y-shear X-shear เป็นการเปลี่ยนแปลงค่าจากจุด (x,y) เป็น (x’,y’) โดยที่ X’ = X + shx . Y , Y’ = Y , shx  0 Y-shear เป็นการเปลี่ยนแปลงค่าจากจุด (x,y) เป็น (x’,y’) โดยที่ X’ = X, Y’ = Y + shy . X , shy  0

21 X-shear (0,1) (1,1) (2,1) (3,1) (1,0) (0,0) (0,0) (1,0)

22 Y-shear (1,3) (0,1) (1,1) (0,1) (1,2) (1,0) (0,0) (0,0)

23 Inverse Transformation
Translate : -H, -V Rotate : - Scale : 1/Sx, 1/Sy Shear : -Shx, -Shy

24 MATRIX REPRESENTATION
OF TRANSFORMATIONS 0 0 [ x’ y’ 1] = [ x y 1]

25 MATRIX REPRESENTATION
OF TRANSFORMATIONS TRANSLATION 0 0 H V 1 [ x’ y’ 1] = [ x y 1]

26 MATRIX REPRESENTATION
OF TRANSFORMATIONS ROTATION Cos  Sin  0 -Sin  Cos  0 [ x’ y’ 1] = [ x y 1]

27 MATRIX REPRESENTATION
OF TRANSFORMATIONS SCALING Sx 0 Sy 0 [ x’ y’ 1] = [ x y 1]

28 MATRIX REPRESENTATION
OF TRANSFORMATIONS SHEARING X-Shear Shx [ x’ y’ 1] = [ x y 1] Y-Shear 1 Shy 0 [ x’ y’ 1] = [ x y 1]

29 Scaling Relative to a Fixed Point
-xp –yp 1 Sx 0 0 0 Sy 0 xp yp 1 Sx Sy (1-Sx)xp (1–Sy)yp 1 =

30 Rotation About a Pivot Point
Cos  Sin  0 -Sin  Cos  0 -xp –yp 1 xp yp 1 Cos Sin -Sin Cos (1-Cos)xp+ypsin (1-Cos)xp+ypsin 1 =

31 Reflection Y reflect กับแกน x X’ = x Y’ = -y x 0 0 [ x’ y’ 1] = [ x y 1]

32 Reflection y reflect กับแกน y X’ = -x Y’ = y x [ x’ y’ 1] = [ x y 1]

33 Reflection y reflect กับส้นตรง y= x X’ = y Y’ = x x [ x’ y’ 1] = [ x y 1]

34 2 D Rotation Composite Transformation P1
1.Translate P1 to origin 2. Rotate 3. Translate Back to P1 T(x1,y1) . R() . T (-x1, -y1)

35 2 D Composite Transformation Translate -> Rotate
Rotate -> Translate

36 จากจอภาพชนิดหนึ่ง มีความละเอียด (resolution) 1024 x 768 จุด
และสามารถ แสดงความละเอียดของ สีได้ ล้านสี (24 bits) จะต้องใช้ memory ของ Video Card จำนวนเท่าใด อธิบายและคำนวณพอเข้าใจ 2. รูปสี่เหลี่ยมจัตุรัสรูปหนึ่ง มีค่า Coordinate ใน World Coordinates ดังแสดงข้างล่างนี้ ถูกแปลงรูป (transform) ไปโดยมีขั้นตอนของการแปลงรูปตามลำดับต่อไปนี้ ก) ขยายรูป (scaling) ให้โตขึ้น 2 เท่าของรูปเดิม โดยมี fixed point อยู่ที่จุดศูนย์ กลางของรูปจัตุรัส ข) หมุนรูป (rotation) ไป 90 ํ ทวนเข็มนาฬิกา โดยมีจุดหมุน (pivot point) อยู่ที่จุดล่างซ้าย (bottom left) ของรูปจัตุรัสที่ได้จากข้อ ก แล้ว อธิบายหลักการและวิธีการ รวมทั้งเมตริกซ์ที่ใช้ในการ transform ดังกล่าว และคำนวณหาจุดยอดที่ได้หลังจากการแปลงรูปแล้ว

37 จงแสดงวิธีการและคำนวณหา Coordinate ที่ได้หลังจากการ Mapping
(100,200) (200,200) (100,100) (200,100) จงแสดงวิธีการและคำนวณหา Coordinate ที่ได้หลังจากการ Mapping รูปสามเหลี่ยมรูปหนึ่ง ซึ่งมีจุดยอด (100,100), (800,400), (800,100) โดยกำหนด window (0,1000,0,500) และกำหนด viewport เป็น NDC ทั้งหมด 5 viewport คือ (0,1,0,1) , (0,1,0,0.5), (0,1,0.5,1), (0,0.5,0,1), (0.5,1,0,1)ให้กำหนด resolution ที่เหมาะสมแล้วคำนวณหาจุดที่ได้ใน Screen Coordinate

38 (100,200) (200,200) (150,150) (200,100) (100,100)

39 Scaling Relative to a Fixed Point
-xp –yp 1 Sx 0 0 0 Sy 0 xp yp 1 Sx Sy (1-Sx)xp (1–Sy)yp 1 =

40 1. Translate Object 3. Translate 2. Scale (xp,yp) (xp,yp) (xp,yp)

41 Sx Sy (1-Sx)xp (1–Sy)yp 1 Sx = 2, Sy = 2,xp = 150, yp = 150 –

42 [ ] [ ] – [ ] = [ ] [ ] [ ] [ ] [ ]

43 (50,250) (250,250) (100,100) (200,100) (200,200) (100,200) (150,150) (50,50) (250,50)

44 ในการกำหนดจุด (xp,yp) เป็น fixed point ซึ่งไม่ได้
อยู่ที่จุด origin มีขั้นตอนในการ scaling ดังนี้ 1. ย้ายจุด (xp,yp) ไปที่ origin X’ = X - Xp, Y’ = Y – Yp (100,100)  (-50,-50) (100,200)  (-50,50) (200,200)  (50,50) (200,100)  (50,-50) จากจุด (x,y) เดิม ถูกย้ายไป (-150,-150)

45 2. Scale จุดโดยคูณกับ Sx, Sy
X’’ = X’ x Sx, Y’’ = Y’ x Sy จากจุด (x,y) เดิม คูณด้วย 2 (-50,-50)  (-100,-100) (50,-50)  (100,-100) (50,50)  (100,100) (-50,50)  (-100,100)

46 3. ย้ายจุด (Xp,Yp) จาก origin สู่จุดเดิม
X’’’ = X’’ + Xp, Y’’’ = Y’’ + Yp จากจุด (x,y) เดิม ถูกย้ายไป (150,150) (-100,-100)  (50,50) (100,-100)  (250,50) (100,100)  (250,250) (-100,100)  (50,250)

47 Y (50,250) (250,250) (250,50) (50,50) X

48 Rotation About a Pivot Point
Cos  Sin  0 -Sin  Cos  0 -xp –yp 1 xp yp 1 Cos Sin -Sin Cos (1-Cos)xp+ypsin (1-Cos)yp-xpsin 1 =

49 Cos Sin -Sin Cos (1-Cos)xp+ypsin (1-Cos)yp-xpsin 1 Sin 90= 1, cos 90 = 0, xp = 50, yp = 50

50 จุดยอดใหม่ที่ได้ คือ (50,50),(-150,50),(-150,250),(50,250)
[ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] จุดยอดใหม่ที่ได้ คือ (50,50),(-150,50),(-150,250),(50,250)

51 Object Translate Translate Rotate (50,50) (250,50) (250,250) (50,250)
(-150,50) (-150,250) Translate Rotate

52 500 (400,400) 1 1000 1 (100,100) (800,100) Viewport(0,1,0,1) Window(0,1000,0,500) 0.5 1 Viewport(0,0.5,0,1) 1 0.5 1 0.5 Viewport(0,1,0.5,1) 0.5 1 Viewport(0.5,1,0,1) Viewport(0,1,0,0.5)

53 จุด (a,b) ใน Window  (a’,b’) ใน Viewport
top top (a,b) vh wh right (a’,b’) left right left bottom bottom (wx,wy) wl (vx,vy) vl จุด (a,b) ใน Window  (a’,b’) ใน Viewport

54 (a,b) vh wh (a’,b’) wl vl a’ – vx = a – wx vl wl a’ = (a–wx).vl + vx
top top (a,b) vh wh right (a’,b’) left right left bottom bottom (wx,wy) wl (vx,vy) vl a’ – vx = a – wx vl wl a’ = (a–wx).vl + vx wl b’ – vy = b – wy vh wh b’ = (b–wy).vh + vy wh

55 500 1000 (400,400) 1000 500 (100,100) (800,100) 500 Window(0,1000,0,500) Viewport(0,500,500,1000) a’ – 0 = – b’ – = – 0 a’ = = b’ = = 600 (100,100) (50,600)