Grafika Komputer Pertemuan Ke-7
BAB-7 TRANSFORMASI 2D Kita dapat melakukan transformasi terhadap objek, pada materi ini akan dibahas transformasi 2D yaitu translasi, skala, rotasi. By: I Gusti Ngurah Suryantara, S.Kom., M.Kom
7.1. PENDAHULUAN Transformasi merupakan suatu metode untuk mengubah lokasi suatu titik pembentuk objek, sehingga objek tersebut mengalami perubahan. Perubahan objek dengan mengubah koordinat dan ukuran suatu objek disebut dengan transformasi geometri. Pada materi kali ini kita akan membahas transformasi dasar, matriks transformasi, transformasi lain.
7.2. TRANSFORMASI DASAR Dalam transformasi dasar pada 2D yang akan kita bahas adalah: translasi, skala, dan rotasi. 7.2.1. Translasi Translasi berarti memindahkan objek sepanjang garis lurus dari suatu lokasi koordinat tertentu kelokasi yang lain tanpa mengubah bentuk objek. Bila suatu objek terbentuk dari beberapa titik maka bila melakukan translasi akan dikenakan terhadap setiap titik pembentuk objek tersebut. Untuk melakukan translasi dapat menggunakan rumus: x’ = x + tx y’ = y + ty atau dapat juga dilakukan dengan transofrmasi affine yang menggunakan matrik identitas yaitu: 1
0
0
1
M=
Menjadi: (Qx, Qy) = (Px + trx, Py + try) Setiap titik akan digeser sejauh trx dalam sumbu x dan try dalam sumbu y. Contoh: Diketahui titik-titik pembentuk objek segitiga yaiu A(10,10), B(30,10), C(10,30) dengan transformasi vector (10,20) lakukan trnslasi terhadap objek segitiga tersebut:
89
Grafika Komputer Pertemuan Ke-7 Titik A x’A = xA + tx = 10 + 10 = 20
y’A = yA + ty = 10 + 20 = 30
A’(20,30) Titik B x’B = xB + tx = 30 + 10 = 40
y’B
= yB + ty = 10 + 10 = 20
y’C
= yC + ty = 30 + 20 = 50
B’(40,20) Titik C x’C = xC + tx = 10 + 10 = 20 C’(20,50)
Gambar 7.1. Translasi sebuah segitiga dari suatu posis ke posisi yang lain
7.2.2.Skala Skala digunakan untuk mengubah ukuran suatu objek, bila pada translasi operasi yang digunakan adalah penjumlahan sedangkan pada skala operasi yang digunakan adalah perkalian. Untuk melakukan skala dapat menggunakan rumus: x’ = x * tx y’ = y * ty
90
Grafika Komputer Pertemuan Ke-7 sx dan sy merupakan nilai dari scaling factor terhadap sumbu x dan sumbu y. Bila menggunakan transformasi affin matriknya adalah: Sx
0
0
Sy
M= Menjadi: (Qx, Qy) = (Px * Sx, Py * Sy) Contoh: Diketahui objek segitiga dengan titik A(10,10), B(30,10), C(10,30) di skala dengan scaling factor (3,2). Titik A x’A = xA * tx = 10 * 3 = 30 A’(30,20) Titik B x’B = xB * tx = 30 * 3 = 90 B’(90,20) Titik C x’C = xC * tx = 10 * 3 = 30 C’(30,60) Gambar Asal
y’A = yA * ty = 10 * 2 = 20
y’B
= yB * ty = 10 * 2 = 20
y’C
= yC * ty = 30 * 2 = 60 Gambar Hasil..... ?
Gambar 7.2. Skala pada objek segitiga
91
Grafika Komputer Pertemuan Ke-7 7.2.3.Rotasi Rotasi merupakan pemutaran terhadap suatu objek, rotasi dapat dinyatakan dalam bentuk matriks. Nilai matriks untuk melakukan rotasi adalah: Cosө
-Sinө
Sinө
Cosө
R=
Rotasi suatu titik terhadap pivot point (xp, yp) menggunakan bentuk trigonometri, secara umum dapat ditulis sebagi berikut: X’ = Xp + (X – Xp) Cosө - (Y- Yp) Sinө Y’ = Yp + (Y – Yp) Sinө + (Y – Yp) Cosө Contoh: Diketahui titik-titik pembentuk objek segitiga yaiu A(10,10), B(30,10), C(10,30) dengan sudut rotasi 300 terhadap titik pusat koordinat cartesian (10,10). Jawab Titik A X’A = Xp + (XA – Xp)Cos 300 – (YA- YP)Sin 300 = 10 + (10 -10) * 0.9 – (10-10) * 0.5 = 10 Y’A = YP + (XA – XP)Sin 300 + (YA – YP)Cos 300 = 10 + (10 – 10) * 0.5 + (10 – 10) * 0.9 = 10 A’(10,10) Titik B
X’B = Xp + (XA – Xp)Cos 300 – (YA- YP)Sin 300 = 10 + (30 -10) * 0.9 – (10-10) * 0.5 = 28 Y’B = YP + (XA – XP)Sin 300 + (YA – YP)Cos 300 = 10 + (30 – 10) * 0.5 + (10 – 10) * 0.9 = 20 B’(28,20)
Titik C X’C = Xp + (XA – Xp)Cos 300 – (YA- YP)Sin 300 = 10 + (10 -10) * 0.9 – (30-10) * 0.5 =0 Y’C = YP + (XA – XP)Sin 300 + (YA – YP)Cos 300 = 10 + (10 – 10) * 0.5 + (30 – 10) * 0.9 = 28 C’(0,28)
92
Grafika Komputer Pertemuan Ke-7 Gambar Asal
Gambar Hasil ....?
Gambar 7.3. Rotasi objek segitiga dengan sudut rotasi 300
7.3. MATRIK TRANSFORMASI Dalam matrik transformasi ini kita akan membahas jenis transformasi homogenius dan komposit transformasi. 7.3.1. Transformasi Homogenius Transforamsi juga dapat dilakukan dengan menggunakan matrik transformasi yang menggabungkan translasi, skala dan rotasi kedalam satu model matrik yang disebut dengan transformasi homogenius. Keuntungan yang didapat dari transformasi homogenius adalah kita tidak perlu membuat prosedur yang khusus terhadap jenis transforamsi akan tetapi cukup dengan malakukan perkalian matrik. Matrik transformasi homogenius seperti berikut: Translasi: 1 0 Trx M= 0 1 Try 0 0 1 Skala: M=
Sx 0 0
0 Sy 0
0 0 1
Rotasi: M=
Cosө Sinө 0
-Sinө Cosө 0
0 0 1
Transformasi dilakukan dengan cara: [X’ Y’ 1] = [X Y 1] * M
93
Grafika Komputer Pertemuan Ke-7 7.3.2. Komposit Transformasi Matrik Setiap sekuen dari transformasi dapat dibuat sebagai composite transformastion matrix dengan menghitung produk matrik transformasi masing-masing. Kolom menggambarkan posisi koordinat, composite transformation diperoleh dengan melakukan perkalian matrik dari kanan ke kiri. Translasi Bila dua transformasi vektor (tx1, ty1) dan (tx2, ty2) digunakan pada koordinat posisi P, maka lokasi trasformasi akhir P’ dapat diditung: P’ = T( tx2, ty2 ) . | T( tx1, ty1 ). P | = | T (tx2, ty2 ). T( tx1, ty1 ) | . P Dimana P dan P’ merupakan koordinat homogen vektor kolom, maka perhitungan perkalian kedua matrik dapat diperoleh. Composit transformation matrix untuk translasi adalah:
1 0 0
0 1 0
tx1 ty1 1
1 0 0
.
0 1 0
tx2 ty2 1
=
1 0 0
0 1 0
tx1 + tx2 ty1 + ty2 1
Atau T(tx2, ty2) . T(tx1, ty1) = T(tx1 + tx2, ty1 + ty2)
Skala Bila dua faktor skala (Sx1, Sy1) dan (Sx2, Sy2) digunakan pada suatu objek, maka composite transformation matrix menjadi:
Sx1 0 0
0 Sy2 0
0 0 1
.
Sx1 0 0
0 Sy1 0
0 0 1
=
Sx1.Sx2 0 0
Atau S(Sx2, Sy2) . S(Sx1, Sy1) = T(Sx1 + Sx2, Sy1 + Sy2)
94
0 Sy1.Sy2 0
0 0 1
Grafika Komputer Pertemuan Ke-7 Rotasi Bila rotasi terhadap titik P dilakukan dua kali dengan sudut ө1 dan ө2, maka koordinat titik P dapat diperoleh dengan: P’ = R(ө2) . | R(ө1) . P | = | R(ө2) . R(ө1) | .P Dengan melakukan kedua perkalian matrik rotasi, maka diperoleh bentuk tambahan: R(ө2). R(ө1) = R(ө1 + ө2) Sehingga koordinat rotasi terakhir diperoleh dengan: P’ = R(ө1+ ө2) . P
Skala Menurut Arah Tertentu Parameter Sx dan Sy digunakan untuk skala menurut arah sumbu x dan y. Skala dapat dilakukan menurut sumbu yang diputar yaitu S1 dan S2 seperti pada Gambar 4.4 dapat dilakukan dengan matrik. S1Cos2ө + S2Sin2ө (S2 – S1)Cosө Sinө 0
(S2 – S1)Cosө Sinө S1Sin2ө + S2Cos2ө 0
0 0 1
Contoh: Sebuah objek segiempat dengan titik A(0,0), B(2,0), C(2,2) dan D(0,2) diskala dengan parameter ө = 450, S1=1 dan S2=2.
X’ Y’ 1
=
S1Cos2ө + S2Sin2ө (S2 – S1)Cosө Sinө 0
(S2 – S1)Cosө Sinө S1Sin2ө + S2 Cos2ө 0
=
1. ½ + 2. ½ (2-1) . ½ 0
(2-1) . ½ 1. ½ +2 . ½ 0
=
1½ ½ 0
½ 1½ 0
0 0 1
X’ = 1,5 * X + ½ * Y Y’ = ½ * X + 1,5 * Y
95
0 0 1
.
0 0 1
.
X Y 1
.
X Y 1
X Y 1
Grafika Komputer Pertemuan Ke-7 Titik A X’A = 1,5 * 0 + 0,5 * 0 = 0 Y’A = 0,5 * 0 + 1,5 * 0 = 0 A’(0,0) Titik B X’B = 1,5 * 0 + 0,5 * 0 = 3 Y’B = 0,5 * 2 + 1,5 * 0 = 1 B’(3,1) Titik C X’C = 1,5 * 2 + 0,5 * 2 = 4 Y’C = 0,5 * 2 + 1,5 * 2 = 4 C’(4,4) Titik D X’D = 1,5 * 0 + 0,5 * 2 = 1 Y’D = 0,5 * 0 + 1,5 * 2 = 3 D’(1,3)
Gambar 7.4. Objek segiempat yang dikenaka sekala menurut arah tertentu
96
Grafika Komputer Pertemuan Ke-7
7.4. TRANSFORMASI LAIN Selain transforamsi dasar yang sudah kita bahas, bentuk tansformasi lain adalah refleksi (pencerminan) dan Shear. 7.4.1. Refleksi Refleks adalah transformasi yang membuat mirror dari suatu objek. Sumbu refleksi dapat dipilih pada bidang xy. Refleksi terhadap garis y=0, yaitu sumbu x dapat dinyatakan dengan matrik. 1 0 0
0 -1 0
0 0 1
Gambar 7.5 memperlihatkan refleksi terhadap sumbu x. Y C Objek asli A
B
0
X A’
B’ Setelah direfleksi
C’ Gambar 7.5 Refleksi terhadap sumbu x
Refleksi terhadap sumbu y membalikkan koordinat dengan nilai y tetap. Matrik transformasi dapat dinyatakan dengan: -1 0 0
0 1 0
0 0 1
Gambar 7.6 menunjukkan suatu objek yang direfleksi terhadap sumbu y atau garis x=0. Y
C’
C
Setelah direfleksi B’
Objek asli A’
A
B X
0 Gambar 7.6 Refleksi terhadap sumbu y
97
Grafika Komputer Pertemuan Ke-7 Refleksi terhadap sumbu x dan y sekaligus dilakukan dengan pertama-tama direfleksi terhadap sumbu x. Hasilnya kemudian direfleksi terhadap sumbu y, hal ini sama dengan memutar objek 1800. Transformasi ini dapat dinyatakan dalam bentuk matrik: -1 0 0
0 -1 0
0 0 1
Y C Objek asli B
A
X 0 A’
B’ Objek setelah direfleksi
C’
Gambar 7.7 Refleksi terhadap axis x dan y
Refleksi suatu objek terhadap garis y = x seperti pada Gambar 7.8 dapat dilakukan dalam bentuk matriks sebagai berikut: 0 1 0
1 0 0
0 0 1
Y B’
A’
Y=X Objek setelah direfleksi C’ C A
Objek asli B X
0 Gambar 7.8 Refleksiterhadap garis y = x
98
Grafika Komputer Pertemuan Ke-7 Refleksi suatu objek terhadap garis y = -x seperti pada gambar 4.9 dapat dinyatakan dalam bentuk matriks sebagai berikut: 0 -1 0
-1 0 0
0 0 1 Y
Y = -X
C Objek asli A
B’ Objek setelah direfleksi
B
A’ C’ X
0 Gambar 7.9 Refleksiterhadap garis y = x
7.4.2. Shear Shear merupakan bentuk transformasi yang membuat distorsi dari bentuk suatu objek. Seperti menggeser sisi tertentu. Dua shear yang umum adalah shear menurut sumbu x, dan shear terhadap sumbu y. Matriks transformasi shear terhadap sumbu x: 1 0 0
shx 1 0
0 0 1
Dengan koordinat transformasi X’ = X + shx .Y , Y’ = Y Y
D(0,1)
Y
C(1,1)
D’(2,1)
C’(3,1 )
X A(0,0)
B(1,0)
X A’(0,0)
B’(1,0)
Gambar 7.10 Shear terhadap sumbu x dengan nilai shx=2
99
Grafika Komputer Pertemuan Ke-7 Paramter shx dapat dinyatakan dengan sembarang nilai, posisi koordinat digeser menurut arah horisontal. Pada Gambar 7.10 nilai shx adalah 2. Shear juga dapat dilakukan menurut garis tertentu yang sejajar dengan sumbu x dengan bentuk matrik: 1 0 0
shx 1 0
-shx . yref 0 1
Dengan posisi koordinat transformasi X’ = x + shx(y – yref), Y’ = Y Gambar 8.11 merupakan contoh shear dengan paramter shear shx = ½ dan yref = -1. Y
Y D(0,1)
C(1,1)
A(0,0)
B(1,0)
D’(1,1)
X
Yref = -1__
A’(½ ,0)
C’(2,1)
B’(3/2,0)
X
Yref = -1 __ Gambar 7.11 Shear dengan shx = ½ dan yref = -1
Shear suatu objek yang dilakukan terhadap sumbu y menggunakan matrik trasnformasi: 1 Shy 0
0 1 0
0 0 1
Dengan koordinat transformasi X’ = X , Y’ = shy.X + Y Parameter shy dapat dinyatakan dengan sembarang bilangan. Posisi koordinat kemudian digeser menurut arah vertikal. Contoh pada Gambar 7.12 menunjukkan shear dengan memberikan nilai shy dengan 2.
100
Grafika Komputer Pertemuan Ke-7
Y
Y
C’(1,3)
B’(1,2) D(0,1)
C(1,1)
D’(0,1)
X A(0,0)
B(1,0)
X
A’(0,0) Gambar 7.12 Shear menurut arah sumbu y
Shear juga dapat dilakukan terhadap garis tertentu yang sejajar dengan sumbu y dengan bentuk martrik sebagai berikut: 1 Shy 0
0 1 0
0 -shy . xref 1
Dengan posisi koordinat transformasi X’ = X, Y’ = shy(X – Xref) + Y Gambar 8.13 memperlihatkan shear dengan paramter shear ½ terhadap garis Xref = -1 Y
Y D’(0,3/2)
C’(1,2)
D(0,1) C(1,1) B’(1,1) A’(0, ½) | Xref = -1
| 0 A(0,0) B(1,0) X
Xref = -1
0
Gambar 7.13 Shear mnurut garis x=-1
101
X
Grafika Komputer Pertemuan Ke-7
7.6. LATIHAN 1. Diketahui objek segiempat dengan titik A(10,10), B(10,20), C(20,20) dan D(20,10) lakukan tranaslasi terhadap obje tersebut, bila nilai translation factor (20,45). 2. Deiketahui objek segiempat dengan titik A(10,10), B(10,20), C(20,20) dan D(20,10) dilakukan skala dengan scaling factor (2,3). 3. Diketahui objek segiempat dengan titik A(10,10), B(10,20), C(20,20) dan D(20,10) dirotasi dengan sudut rotasi 450 terhadap titik pusat koordinat cartesian (10,10).
7.7. MATERI PRAKTIKUM 1. Butalah program untuk melakukan transformasi dasar (translasi, skala, rotasi) pada suatu objek. 2. Buatlah program untuk pencerminan. 3. Buatlah program untuk shear.
102
