Transformasi

Esther Wibowo ‐ esther.visual@gmail.comErick Kurniawan – erick.kurniawan@gmail.comkurniawan@gmail com

Topik Hari Ini• Dasar Transformasi• Translation ‐ Pemindahan, Penggeseran• Scaling ‐ Perubahan Ukuran• Shear ‐ Distorsi?• Rotation ‐ Pemutaran• Representasi Matriks• Transformasi Gabungan

Mengapa perlu transformasi?• Memposisikan objek ‐ menggeser atau me• Pebisnis merubah ukuran grafik• Pembuat peta merubah ukuran (skala) bagan• Arsitek merubah sudut pandang• Animasi

Translation Pemindahan• Bila kita ingin memindahkan objek• Misal:• Dari kiri ke kanan (searah dengan sumbu X)• Dari bawah ke atas (searah dengan sumbu Y)• Rumus:• x’ = x + Tx• y’ = y + Ty

Scaling Pengubahan Ukuran• Mengalikan tiap komponen dengan suatu nilai skalar.• Uniform scaling (pengubahan ukuran yang seragam) : nilaiskalar pengali tiap komponen adalah sama.× 2

Non‐Uniform Scaling• Skalar pengali berbeda untuk tiap komponen.X × 2Y × 0.5• Rumus:• x’ = x * Sx• y’ = y * Sy

Shear• Pemindahan posisi yang hanya melibatkan sebagian sisidari bentuk bangun (ada titik sumbu yang tidak berubah).• Menyebabkan distorsi bentuk bangun.• Rumus:• x’ = x + Hx*y• y’ = y + Hy*x

Rotation Pemutaran(’ (x’, y’)r(x, y)x = r cos (φ)y = r sin (φ)x’ = r cos (φ + θ)y’ = r sin (φ + θ)Distribusi trigonometrix’ = r cos(φ) cos(θ) –r sin(φ) sin(θ)y’ = r sin(φ) sin(θ) + r cos(φ) cos(θ)θ φSubstitusix’ = x cos(θ) ‐ y sin(θ)y’ = x sin(θ) + y cos(θ)

Rangkuman Rumus Transformasi• Translasi:• x’ = x + T x• y’ = y + T y• Skala / Perubahan ukuran:• x’ = x * S xPoros selalu• y’ = y * S ydi (0,0) !• Shear:• x’ = x + H x *y• y’ = y + H y*x• Rotasi / Pemutaran:• x’ = x*cos Ѳ‐y*sin Ѳ• y’ = x*sin Ѳ + y*cos Ѳ

Representasi Matriks• Representasi transformasi ke dalam matriks⎡ab⎤⎢⎣ c d ⎥⎦• Penghitungan transformasi dalam matriks⎡⎢⎣x ' ⎤y ' ⎥⎦=⎡a⎢⎣ cbd⎤ ⎡⎥⎦ ⎢⎣xy⎤⎥⎦x' =y'=axcx++bydy

Transformasi dalam Matriks (1)• Matriks indetitasBila dikalikan (x,y) tidak akan mengubah nilai (x,y).x'=y'=xy⎡x'⎤ = ⎤⎡⎤⎡ x110⎢⎣ y'⎥⎦ ⎢⎣ 0⎥⎦⎢⎣y⎥⎦• Pengubahan ukuranx'= s x * x ⎡ x'⎤ ⎡sx0 ⎤⎡x⎤= ⎢ ⎥y'= s⎢ ⎥⎢ ⎥y* y⎣y'⎦⎣0sy⎦⎣y⎦

Transformasi dalam Matriks (2)• Shearx'= x + sh *y'= sh *yxx +yy⎡ x'⎤⎢ ⎥⎣ y'⎦=⎡ 1⎢⎣shysh1x⎤⎡ x⎥ ⎢⎦ ⎣ y⎤⎥ ⎦• Rotasix'=y'=cosθ* x − sinθ* y ⎡x'⎤ ⎡cosθ− sinθ⎤⎡x⎤= sinθ *x+ cosθ *y⎢ ⎥ ⎢⎣ ⎥⎢⎥⎣y'⎦ ⎣sinθcosθ⎦⎣y⎦

Transformasi Tambahan (1)• Refleksi (Mirroring) terhadap sumbu Yx ' = − xy'= y⎡ x'⎤=⎡−10⎤⎡⎢⎣ y'⎥⎦ ⎢⎣ 0 1⎥⎦⎢⎣xy⎤⎥⎦• Refleksi terhadap sumbu Xx'y'== −−xy⎡⎢⎣x'⎤=⎡−1 0 ⎤ ⎡y'⎥⎦⎢⎣0 −1⎥⎦ ⎢⎣xy⎤⎥⎦

Transformasi Tambahan (2)• Refleksi terhadap sumbu Y• Refleksi terhadap sumbu X

Transformasi Tambahan (3)• Refleksi terhadap titik asal

• Refleksi terhadap garis y=x• Refleksi terhadap garis y=‐x

Shear• Shear Y• Shear X

Masalah!• Bagaimana dengan translation?x ' = x +y ' = y +t xty⎡x'⎤⎢⎥⎣y'⎦=⎡ x + t⎢⎣ y + txy⎤⎥⎦• Bukan merupakan transformasi linear.• Ciri transformasi linear :• Garis paralel tetap paralel• Rasio tidak berubah• Titik asal tidak berubah setelah dipetakan

Koordinat Homogen (1)• Mengatasi masalah ketidak‐konsistenan representasitransformasi dalam matriks.• Menambahkan koordinat ke‐3 dalam matriks.⎡⎢⎣xy⎤⎥⎦⎡ x⎤⎢ ⎥⎯⎯koordinat⎯⎯homogen⎯⎯→y⎢⎥⎢⎣w⎥⎦

Koordinat Homogen (2)• (x,y,w) merepresentasikan suatu titik• Untuk mengembalikan ke matriks dimensi 2, masingmasingkomponen dibagi w (/ (x/w, y/w, 1)⎡ x⎤⎡x / w⎤⎡3⎤⎡6⎤⎡9⎤⎢⎢⎥⎢⎥⎢⎥=⎢⎥⎢y⎥ ⎥ =⎢y / w⎥=⎢2⎥=⎢4⎥ ⎢6⎥⎢⎣w⎥⎦ ⎢⎣ 1 ⎥⎦ ⎢⎣1⎥⎦ ⎢⎣2⎥⎦ ⎢⎣3⎥⎦• (x,y,0) merupakan suatu titik di tak terhingga.• (000)tidak (0,0,0) ada.

Matriks untuk Translation• Kembali ke masalah representasi matriks untuk translasi,bagaimana merepresentasikan :x'=y'=xy++ttxy⎡x'⎤⎢ ⎥⎣y'⎦=⎡x⎢ ⎣y+ t+ txy⎤⎥⎦• Menggunakan kolom paling kanan :Matrikstranslasi⎡10 t ⎤x⎢ ⎥0 1 t⎥⎢ ⎢ y⎥⎣00 1 ⎦

Contoh Translation dengan Matriks⎡x'⎤ ⎡10 t ⎤x ⎡x⎤⎡x+ t⎢ ⎥ ⎢ ⎥y'=⎢ ⎥=⎢0 1 t+y y t⎥⎥⎢⎢ ⎢ ⎢ ⎢ y⎥⎢ ⎢ ⎥ ⎥ ⎣ 1 ⎦⎥⎣00 1 ⎦⎣1⎦⎣⎢1xy⎤⎥⎥⎥⎦t x = 2t y = 1 y

Transformasi Matriks 3 Dimensi• Translation⎡ x ' ⎤ ⎡10 tx ⎤⎡x ⎤⎥⎢⎥⎢⎥⎢ ⎢ y'⎥=⎢0 1 ty⎥ ⎥ ⎥⎢ ⎥ ⎢ ⎢⎢⎢ y⎣ 1 ⎦ ⎣00 1 ⎦ ⎣ 1 ⎥⎦• Rotation⎡x'⎤ ⎡cosθ− sinθ0⎤⎡x⎤⎢⎥⎢⎥⎢y'⎥=⎢ ⎢ sinθcosθ0⎥ ⎥ ⎢y⎥⎣⎢1 ⎦⎥⎢⎣0 0 1⎥⎦⎣ ⎢1⎥⎦• Scaling• Shear⎡ x ' ⎤ ⎡sx0 0⎤⎡x⎤⎡ x ' ⎤ ⎡ 1 shx0⎤⎡x ⎤⎢ ⎥=⎢ ⎥⎢⎥⎢y'⎥ ⎢0 s 0⎥⎢y⎢ ⎥ ⎢⎥⎢⎥y⎥⎢y'⎥=⎢shy1 0⎥⎢y⎥⎢⎣ 1 ⎥⎦⎢⎣001⎥⎦ ⎢ ⎣1⎥⎦⎢⎣ 1⎥⎦⎢⎣001⎥⎦ ⎢ ⎣1⎥ ⎦

Kombinasi Transformasi• Setelah menggunakan koordinat homogen, matrikstransformasi sudah konsisten.• Kita bisa menggabungkan perhitungan transformasi lineardengan translasi.• Titik asal bisa berubah.⎡⎢⎢⎣x'y'⎤⎥⎥⎥⎦=⎡⎢⎢⎢⎣adbecfw 001⎤⎥⎡⎢⎥ ⎢⎥ ⎢⎦ ⎣xyw⎤⎥⎥⎦

Komposisi Matriks• Transformasi yang berurutan dapat dihitung denganpengalian matriks.⎡ x'⎤ ⎛ ⎡10 tx⎤⎡cosθ− sinθ0⎤⎡sx0 0⎤⎞⎡x⎤⎢⎥⎜⎥⎢⎥⎢⎥⎟⎢⎥⎢y'⎥=⎜⎢ ⎢ 0 1 ty⎥⎢sinθcosθ0⎥ ⎥⎟⎢ ⎥⎥ ⎜⎟⎢ ⎥⎢⎥⎢⎢⎢ 0 sy 0 y⎣⎢w'⎦ ⎝ ⎣00 1 ⎦ ⎣ 0 0 1⎦⎣0 0 1⎥⎦⎠⎣⎢w⎥⎦p’ = T(t x ,t y ) R(Ѳ) S(s x ,s y ) p

Urutan Perkalian Matriks• Perkalian matriks tidak komunikatif (urutan tidakbisa diubah), kecuali untuk translasi sejenis.p’ = (T * (R * (S*p) ) )p’ = (T*R*S) * pp’ = T * R * S * p p’ = T R S p• Dalam perhitungan matriks, urutan translasidibaca dari kanan ke kiri. Jadi dari rumus di atasurutan translasinya : shear → rotation →translation.ti

Contoh Komposisi Matriks• Ingin melakukan rotasi dan translasi• Putar segmen garis di bawah ini dengan sumbu ujung a dikoordinat (3,0).• Perhatikan bahwa segmen garis tidak memiliki titik awaldi (0,0) 0) ‐ sumbu rotation bukan di (0,0) 0) !aa3 63

Cara Yang Salah• Mengaplikasikan rotasi kepada kedua titik ujung segmengaris menghasilkan posisi yang salah.• Bisa saja memutar kedua titik sebesar 45 o kemudianmengembalikan titik a ke posisi semula tapi kita tidaktahu berapa nilai translasi yang diperlukan.aaaSalahR(45)Hasil yang benar

Urutan Perhitungan• Hilangkan dulu efek rotasi pada titik a.a• Translasikan segmen garis sehingga titika di (0,0) → T(‐3,0)a• Rotasikan segmen garis → R(45 o )a• Kembalikan segmen garis ke titik awalsemula → T(3,0)a

Mana representasi yang benar?⎡ 0 − 3⎤⎡cos(45)− sin(45) 0⎤⎡10 3⎤⎡ax⎤ ⎡a'⎢ ⎥⎢⎥⎢⎥⎢⎥=⎢0⎢⎢⎢⎥'⎢ ⎢ 1 0⎥ ⎥ sin(45) cos(45) 0⎥ ⎥ 0 1 0⎢ ⎥ ⎥ a y⎢ ⎥ ⎢ ⎢ a⎣00 1 ⎦ ⎢⎢ ⎣ 0 0 1⎦⎣00 1⎦⎣1 ⎦ ⎣ 11x0yatau⎡103⎤⎡ cos(45)−sin(45)0⎤⎡ 10−3⎤⎡ax⎤⎡a'⎢ ⎥⎢⎥⎢⎥⎢⎥=⎢⎢0 1 0⎥⎢sin(45) cos(45) 0⎥⎢0 1 0⎥⎢ay⎥ ⎢a'⎢⎣ 001⎥⎦ ⎢ ⎣001⎥⎦ ⎢ ⎣001⎥⎦ ⎢ ⎣1⎥⎦⎢⎣1⎤⎥⎥⎥⎦xy⎤⎥⎥⎥⎦

Komposisi Matriks• Inilah representasi yang benar dari komposisi matriksbeberapa transformasi tadi :⎡10 3⎤⎡cos(45)− sin(45) 0⎤⎡10 − 3⎤⎡ax⎤ ⎡a'⎢ ⎥⎢⎥⎢⎥⎢⎥=⎢⎢0 1 0⎥⎢sin(45) cos(45) 0⎥⎢0 1 0⎥⎢ay⎥ ⎢a'⎢⎣ 0 0 1⎥⎦ ⎢ ⎣ 0 0 1⎥⎦ ⎢ ⎣00 1⎥⎦ ⎢ ⎣ 1⎥⎦⎢⎣ 1• Untuk menghitung secara cepat beberapa titik pada suatubentuk bangun dengan urutan transformasi yang sama,hitung dulu matriks transformasi‐nya, baru dikalikandengan masing‐masing g titik pada bentuk bangun.xy⎤⎥⎥⎥⎦

Animasi• Transformasi geometrik sesuai untuk dipakai dalamanimasi, misal animasi jarum jam yang berputar 30 o tiapjam atau 6 o tiap menit.• Gerakan kontinyu harus dipecah dalam gerakan‐gerakankecil yang dapat dideskripsikan dengan transformasi.• Perubahan gerakan harus :• Cukup kecil• Cukup cepathingga tidak terdeteksi oleh penonton.

Contoh Animasi• Sebuah jam dengan 1 jarum jam :• Bergerak dari kiri bawah ke kanan atas dengan jarak tiapgerakan 2 unit ke kanan dan 1 unit keatas → T(2,1)• Jarum jam bergerak 45 o per gerakan → R(45 o )

Metode Solusi 1• Melacak pergerakan dan mendeteksi koordinat sumbu jarumjam saat ini.• Menghitung rotasi jarum berdasar koordinat sumbu jarum jamsaat ini.• Menghitung translasi jam dan jarum jam baru dari koordinatsaat ini.• Kembali melacak koordinat sumbu jam yang baru.• Menghitung rotasi jarum jam yang baru berdasar koordinatsumbu jam baru.• Menghitung translasi jam dan jarum jam baru dari koordinatsaat ini.• Dst….

Metode Solusi 2• Koordinat jam ditahan pada koordinat (0,0)• Menghitung kumpulan transformasi sebelum animasi mulaidijalankan.• Menghitung posisi dan rotasi jam beserta jarumnya dengankumpulan translasi tersebut dengan variabel ibldari posisi ii(0,0).0)

Interpolasi• Salah satu model animasi• Initial state → final desired stateinitialfinal

Soal Animasi Jam• Dalam contoh jam tadi, ada translasi T(2,1). Semisaldiinginkan ada 100 gerakan.• Nyatakan posisi awal p 0) T 0 = (0,0) dan posisi akhir p 1 =(200,100) T• Titik p α adalah titik yang menghubungkan p 0 dan p 1• α = 0 → posisi awal• α = 1 → posisi akhir• Teknik ini disebut Convex Combination (KombinasiCembung)

Interpolasi Matriks• Interpolasi juga dapat diterapkan pada matriks homogen.• Matriks‐matriks ini memetakan objek dari posisi awalhingga posisi iiakhir.• Kombinasi Cembung dapat pula digunakan untuk matrikstransformasi yang memiliki initial state berbeda denganfinal state. Misalnya initial state : rotation, final state :shearing.

Interpolasi Titik• Dua objek S dan S’ memiliki salah satu titik p.• P1 = (x1, y1), . . . , Pn = (xn, yn) and P1 = (x1, y1 ), . . . ,Pn = (xn, yn )

Interpolasi D ke C• S= Huruf D , S’ = Huruf C• Masing‐masing memiliki titik 1 dan 2 sebagai titik awaldan dan akhir.• Titik 3 sebagai titik kontrol.• Hasil akhirmemiliki iliki titik iik2 dan 4 sebagai ujung dan titik iik5sebagai titik kontrol.

Hasil Interpolasi D ke C• Berikut adalah hasil interpolasi saat α = 0, 0.2, 0.4, 0.6,0.8, 1