Bài giảng 2D Transformations - Các phép biến đổi 2D

Bài giảng 2D Transformations - Các phép biến đổi 2D bao gồm những nội dung về phép biến đổi hình học; tính chất của phép biến đổi Affine; phép tịnh tiến - Translation; phép quay - Rotation; phép quay một góc α quanh gốc tọa độ; phép quay một góc α quanh tâm bất kì,... Mời các bạn tham khảo.

2D Transformations

Các phép bi n đ i 2D ế ổ

Các phép bi n đ i 2D ế ổ

2D computer graphics

• Raster graphics

– Pixel art is a form of digital art, created through the use of 

raster graphics software, where images are edited on the pixel level. 

– Graphics in most old (or relatively limited) computer and 

video games, graphing calculator games, and many mobile 

phone games are mostly pixel art

• Vector graphics is the use of geometrical primitives such as pointsVector graphics is the use of geometrical primitives such as points, 

lines, , curvescurves, and shapes, and shapes or polygon or polygon(s), which are all based upon 

mathematical equations, to represent images in computer 

graphics. 

Example

Example

• B n ch t c a phép bi n đ i hình h c là thay đ i v  trí c a đ i t B n ch t c a phép bi n đ i hình h c là thay đ i v  trí c a đ i tả ả ấ ủ ấ ủ ế ế ổ ổ ọ ọ ổ ị ổ ị ủ ủ ố ượ ố ượng,  ng,  làm thay đ i đ i tổ ố ượng v  hề ướng, kích thước, hình d ng.ạ

làm thay đ i đ i tổ ố ượng v  hề ướng, kích thước, hình d ng.ạ

• Hai ph Hai phươ ương pháp đ  bi n đ i hình h c: ng pháp đ  bi n đ i hình h c:ể ế ể ế ổ ổ ọ ọ

– Bi n đ i đ i t Bi n đ i đ i tế ế ổ ố ượ ổ ố ượng: thay đ i t a đ  c a đ i t ng: thay đ i t a đ  c a đ i tổ ọ ổ ọ ộ ủ ộ ủ ố ượ ố ượng ng.

– Bi n đ i h  t a đ : t o h  t a đ  m i và t t c  đ i t Bi n đ i h  t a đ : t o h  t a đ  m i và t t c  đ i tế ế ổ ệ ọ ổ ệ ọ ộ ạ ộ ạ ệ ọ ệ ọ ộ ớ ộ ớ ấ ả ố ượ ấ ả ố ượng s  đ ng s  đẽ ượ ẽ ược  c 

, (

y x Q y

x P

R R

) , (

'

y x g y

y x f x

• Phép bi n đ i Affine là phép bi n đ i v i f(x,y) và g(x,y) là 2 Phép bi n đ i Affine là phép bi n đ i v i f(x,y) và g(x,y) là 2 ế ế ổ ổ ế ế ổ ớ ổ ớ

hàm tuy n tính:ế

hàm tuy n tính:ế

• Bi u di n phép bi n đ i Affine dBi u di n phép bi n đ i Affine dể ể ễ ễ ế ế ổ ổ ướ ạ ướ ại d ng ma tr n:i d ng ma tr n:ậ ậ

• Thông thThông thườ ường, chúng ta ch  kh o sát phép bi n Affine nên ta ng, chúng ta ch  kh o sát phép bi n Affine nên ta ỉ ỉ ả ả ế ế

thường dùng thu t ng  phép bi n đ i đ  ng  ý là phép bi n ậ ữ ế ổ ể ụ ế

thường dùng thu t ng  phép bi n đ i đ  ng  ý là phép bi n ậ ữ ế ổ ể ụ ế

đ i Affine.ổ

đ i Affine.ổ

Phép bi n đ i hình h c (cont.) ế ổ ọ

Phép bi n đ i hình h c (cont.) ế ổ ọ

f ey dx

y

c by

ax

x

' '

P T Q

y

x f

e d

c b

a y

x

1

1 0

0 1

' '

Tính ch t c a phép bi n đ i Affine ấ ủ ế ổ

Tính ch t c a phép bi n đ i Affine ấ ủ ế ổ

• B o toàn đB o toàn đả ả ườ ường th ng: Bi n đng th ng: Bi n đẳ ẳ ế ế ườ ường th ng thành đng th ng thành đẳ ẳ ườ ường th ngng th ngẳ ẳ

• Tính song song c a các đTính song song c a các đủ ủ ườ ường th ng đng th ng đẳ ẳ ượ ược b o toànc b o toànả ả

• Tính t  l  v  kho ng cách đTính t  l  v  kho ng cách đỉ ệ ề ỉ ệ ề ả ả ượ ược b o toànc b o toànả ả

• Phép t nh ti n dùng đ  d ch chuy n đ i tPhép t nh ti n dùng đ  d ch chuy n đ i tị ị ế ế ể ị ể ị ể ể ố ượ ố ượng t  v  trí này sang ng t  v  trí này sang ừ ị ừ ị

G i tr = (trọ

G i tr = (trọ x , try) là vector t nh ti n t  đi m P đ n đi m Q thì:) là vector t nh ti n t  đi m P đ n đi m Q thì:ị ị ế ừ ể ế ừ ể ế ế ể ể

Ma tr n bi n đ i c a phép t nh ti n: ậ ế ổ ủ ị ế

Ma tr n bi n đ i c a phép t nh ti n: ậ ế ổ ủ ị ế

y

tr x

x

' '

1 0

0

1 0

0

1 )

,

x y

tr tr

tr T

• Đ i hĐ i hổ ướ ổ ướng đ i tng đ i tố ượ ố ượng.ng.

• Phép quay g m có tâm quay C, góc quay Phép quay g m có tâm quay C, góc quay ồ ồ α. 

• Bi n đ i đi m P thành Q sao cho:Bi n đ i đi m P thành Q sao cho:ế ế ổ ổ ể ể

– P và Q n m trên đ P và Q n m trên đằ ằ ườ ường tròn tâm C,  ng tròn tâm C, 

– Góc PCQ b ng  Góc PCQ b ng ằ ằ α

• Do v  trí c a tâm quay nên ta có 2 lo i phép quay:Do v  trí c a tâm quay nên ta có 2 lo i phép quay:ị ị ủ ủ ạ ạ

– Phép quay quanh g c t a đ Phép quay quanh g c t a đố ọ ố ọ ộ ộ

– Phép quay quanh m t tâm b t kì Phép quay quanh m t tâm b t kìộ ộ ấ ấ

• Góc quay theo qui Góc quay theo qui ướ ước chi u dc chi u dề ề ươ ương là ngng là ngượ ược chi u kim đ ng c chi u kim đ ng ề ề ồ ồ

P

Phép  quay m t góc  ộ

Phép  quay m t góc  ộ α  quanh g c t a đ  quanh g c t a đ ố ọ ố ọ ộ ộ

P Q

1 0

0

0 cos

sin

0 sin

cos  

cos  

sin

'

  sin  

cos

'

T y

x y

y x

x

Phép  quay m t góc  ộ

Phép  quay m t góc  ộ α  quanh g c t a đ  quanh g c t a đ ố ọ ố ọ ộ ộ

Phép đ i x ng tâm (g c t a đ ) ố ứ ố ọ ộ

Phép đ i x ng tâm (g c t a đ ) ố ứ ố ọ ộ

P và Q đ i x ng qua g c t a đ  Do đó, phép đ i x ng tâm là ố ứ ố ọ ộ ố ứ

P và Q đ i x ng qua g c t a đ  Do đó, phép đ i x ng tâm là ố ứ ố ọ ộ ố ứ

phép quay quanh g c t a đ  m t góc 180ố ọ ộ ộ

phép quay quanh g c t a đ  m t góc 180ố ọ ộ ộ 0

=180 0 P Q

0 1 0

0 0

1 180

'

T y

y

x x

Phép  quay m t góc  ộ

Phép  quay m t góc  ộ α  quanh tâm b t kì  quanh tâm b t kì ấ ấ

P Q

O

C(x c ,y c ) P’

Q’

P T(­xc,­yc)

P’ T(α) Q’ T(xc,yc)

Q

• Ta có th  ch ng minh phép quay tâm C(xTa có th  ch ng minh phép quay tâm C(xể ể ứ ứ c, yc) m t góc ) m t góc ộ ộ α là kết 

hợp của các phép biến đổi sau đây:

– T nh ti n theo vector (­x T nh ti n theo vector (­xị ị ế ế c,­yc) đ  d ch chuy n tâm quay v  g c t a  ) đ  d ch chuy n tâm quay v  g c t a ể ị ể ị ể ể ề ố ọ ề ố ọ

đ : P’ = T(­xộ

đ : P’ = T(­xộ c, ­yc) . P – Quay quanh g c t a đ  m t góc  Quay quanh g c t a đ  m t góc ố ọ ố ọ ộ ộ ộ ộ : Q’ = T( ) . P’

– T nh ti n theo vector (x T nh ti n theo vector (xị ị ế ế c,yc) đ  đ a tâm quay v  v  trí ban đ u: Q =  ) đ  đ a tâm quay v  v  trí ban đ u: Q = ể ư ể ư ề ị ề ị ầ ầ

0

) cos 1

(  

sin cos

sin

  sin )

cos 1

( sin

cos ,

) , ( ,

c c

c c

c c c

y

x y

x T T y x T y

x

T

Phép  bi n đ i t  l  ­ Scaling ế ổ ỉ ệ

Phép  bi n đ i t  l  ­ Scaling ế ổ ỉ ệ

y s y

x s x

y

x

'

'

• Co giản đối tượng

• sx và sy được gọi là hệ số co giản theo trục x và trục y

1 0 0

0 0

0

0 )

,

x y

s s

s T

• Khi sy = 1 thì đ i t  = 1 thì đ i tố ượ ố ượng co gi n theo tr c x ng co gi n theo tr c xả ả ụ ụ

• Khi sx = 1 thì đ i t  = 1 thì đ i tố ượ ố ượng co gi n theo tr c y ng co gi n theo tr c yả ả ụ ụ

Phép  bi n đ i t  l  (cont.) ế ổ ỉ ệ

Phép  bi n đ i t  l  (cont.) ế ổ ỉ ệ

• Khi sy = sy thì ta g i đây là phép bi n đ i đ ng d ng – uniform scaling,   thì ta g i đây là phép bi n đ i đ ng d ng – uniform scaling, ọ ọ ế ế ổ ồ ổ ồ ạ ạ

b o toàn tính cân x ng c a đ i tả ứ ủ ố ượng. 

b o toàn tính cân x ng c a đ i tả ứ ủ ố ượng. 

• N u s N u sế ế x = sy < 1 thì đây là phép thu nh , ng  < 1 thì đây là phép thu nh , ngỏ ỏ ượ ạ ượ ạc l i thì đây là phép phóng to  c l i thì đây là phép phóng to 

Phép  bi n đ i t  l  (cont.) ế ổ ỉ ệ

Phép  bi n đ i t  l  (cont.) ế ổ ỉ ệ

Thu nhỏ

Phóng to

• Đ i x ng qua tr c hoành:  Đ i x ng qua tr c hoành: ố ứ ố ứ ụ ụ

Phép  bi n đ i t  l  (cont.) ế ổ ỉ ệ

Phép  bi n đ i t  l  (cont.) ế ổ ỉ ệ

Phép đ i x ng tr c ố ứ ụ

Phép đ i x ng tr c ố ứ ụ

1

1 '

'

y

x s

s y

y

x x

• Đ i x ng qua tr c tung:  Đ i x ng qua tr c tung: ố ứ ố ứ ụ ụ

1 0

0

0 1

0

0 0

1

1 0 0

0 1 0

0 0 1

• Thay đ i hình d ng c a đ i t Thay đ i hình d ng c a đ i tổ ổ ạ ạ ủ ủ ố ượ ố ượng ng

• Phép bi n d ng theo tr c x Phép bi n d ng theo tr c xế ế ạ ạ ụ ụ  làm thay đ i hoành đ  còn tung đ  gi    làm thay đ i hoành đ  còn tung đ  gi  ổ ổ ộ ộ ộ ữ ộ ữ

0

0 1

0

0

1 0

,  

'

x x

sh sh

T y

y

y sh x

x

1 0 0

0 1

0 0

1 ,

0 sh

  '

'

sh sh

T y

x y

x x

• Phép bi n d ng t ng quát Phép bi n d ng t ng quátế ế ạ ạ ổ ổ

Phép  bi n d ng ­ Shearing ế ạ

Phép  bi n d ng ­ Shearing ế ạ

1 0

0

0 1

0

1 ,

  '

'

y

x y

x y

sh sh

sh T y

x sh y

y sh x

x

Bài t p ậ

Bài t p ậ

Bi n đ i đ i t ế ổ ố ượ ng 2D

• Mô t  tính ch t hình h c c a đ i t Mô t  tính ch t hình h c c a đ i tả ả ấ ấ ọ ủ ọ ủ ố ượ ố ượng ng

– Tâm, có t a đ  so v i h  t a đ  th c :  Tâm, có t a đ  so v i h  t a đ  th c : ọ ọ ộ ộ ớ ệ ọ ớ ệ ọ ộ ự ộ ự center

– D ng hình h c, có d ng đa giác đ i x ng qua tâm :  D ng hình h c, có d ng đa giác đ i x ng qua tâm : ạ ạ ọ ọ ạ ạ ố ứ ố ứ points

– Màu s c :  Màu s c : ắ ắ color

center

points color

H  t a đ  th cệ ọ ộ ự

H  t a đ  th cệ ọ ộ ự

H  t a đ  đ i tệ ọ ộ ố ượng

H  t a đ  đ i tệ ọ ộ ố ượng

Bài t p ậ

Bài t p ậ

Bi n đ i đ i t ế ổ ố ượ ng 2D (cont.)

• Áp d ng các phép bi n đ i trên đ i t Áp d ng các phép bi n đ i trên đ i tụ ụ ế ế ổ ổ ố ượ ố ượng ng

– T nh ti n đ i t T nh ti n đ i tị ị ế ế ố ượ ố ượng b ng vect   ng b ng vect  ằ ằ ơ tr ơtr , th c ch t là t nh ti n tâm c a đ i t , th c ch t là t nh ti n tâm c a đ i tự ự ấ ấ ị ị ế ế ủ ủ ố ượ ố ượng ng

– Quay đ i t Quay đ i tố ượ ố ượng theo góc  ng theo góc  angle , th c ch t là quay các đ nh c a đa giác , th c ch t là quay các đ nh c a đa giácự ự ấ ấ ỉ ỉ ủ ủ

H  t a đ  th cệ ọ ộ ự

H  t a đ  th cệ ọ ộ ự

tr

Bài t p ậ

Bài t p ậ

Bi n đ i đ i t ế ổ ố ượ ng 2D (cont.)

• C u trúc d  li u C u trúc d  li uấ ấ ữ ệ ữ ệ

Point2D pointspoints[MAXNUMPOINTS];

int 

int numOfPointsnumOfPoints;int 

int colorcolor;Point2D tr tr;double 

double angleangle;// …

};

Bài t p ậ

Bài t p ậ

Bi n đ i đ i t ế ổ ố ượ ng 2D (cont.)

• V  đ i tV  đ i tẽ ố ượ ẽ ố ượng đ i tng đ i tố ượ ố ượng: ng: void drawObject(Object &o);

– V  đa giác xác đ nh b i points, l u ý các đi m points[i] có t a đ  th c  V  đa giác xác đ nh b i points, l u ý các đi m points[i] có t a đ  th c ẽ ẽ ị ị ở ở ư ư ể ể ọ ọ ộ ự ộ ự

là: 

là: points[i] + center points[i] + center

– Đ i t Đ i tố ượ ố ượng đ ng đượ ược v  b ng màu  c v  b ng màu ẽ ằ ẽ ằ color

• T nh ti n đ i tT nh ti n đ i tị ị ế ế ố ượ ố ượng: ng: void translateObject(Object &o);

– T nh ti n tâm c a đ i t T nh ti n tâm c a đ i tị ị ế ế ủ ủ ố ượ ố ượng theo vect  t nh ti n :  ng theo vect  t nh ti n : ơ ị ơ ị ế ế center = center + tr – L u ý tr L u ý trư ư ườ ường h p đ i t ng h p đ i tợ ợ ố ượ ố ượng v ng vượ ượt kh i khung nhìn: t kh i khung nhìn:ỏ ỏ

• Tính l i tâm c a đ i t Tính l i tâm c a đ i tạ ạ ủ ủ ố ượ ố ượng ng

• Tính l i vect  t nh ti n Tính l i vect  t nh ti nạ ạ ơ ị ơ ị ế ế

tr

Bài t p ậ

Bài t p ậ

Bi n đ i đ i t ế ổ ố ượ ng 2D (cont.)

• Quay đ i tQuay đ i tố ượ ố ượng: ng: void roatateObject(Object &o);

– Quay các đ nh c a đa giác c a đ i t Quay các đ nh c a đa giác c a đ i tỉ ỉ ủ ủ ủ ủ ố ượ ố ượng theo theo góc  ng theo theo góc  angle :  rotatePoints(o.points[i], o.angle);