Esther Wibowo

Esther Wibowo ‐ esther.visual@gmail.com.

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

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

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



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

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



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

Rotation Pemutaran x = r cos (φ) y = r sin (φ) x’ = r cos (φ + θ) y’ = r sin (φ + θ). (x’, y’). θφ. r. (x, y). Distribusi trigonometri x’ = r cos(φ) cos(θ) – r sin(φ) sin(θ) y’ = r sin(φ) sin(θ) + r cos(φ) cos(θ) Substitusi x’ = x cos(θ) ‐ y sin(θ) y’ = x sin(θ) + y cos(θ).

Rangkuman Rumus Transformasi y Translasi: y x’ = x + Tx y y’ = y + Ty y Skala / Perubahan ukuran: y x’ = x * Sx y y’ = y * Sy y Shear: y x’ = x + Hx*y y y’ = y + Hy*x y Rotasi / Pemutaran: y x’ = x*cos Ѳ ‐ y*sin Ѳ y y’ = x*sin Ѳ + y*cos Ѳ. Poros selalu di (0,0) !.

Matriks Transformasi y Merepresentasikan dan menghitung transformasi dalam. bentuk matriks y Kegunaan :  memudahkan perhitungkan beberapa transformasi yang berurutan (multiple transformations) y Transformasi yang berurutan dapat dihitung sekaligus dengan mengalikan matriks‐matriks transformasi.. ⎡ x'⎤ = ⎡a ⎢⎣ y '⎥⎦ ⎢⎣ c. b⎤⎡e d ⎥⎦ ⎢⎣ g. f ⎤⎡ i h ⎥⎦ ⎢⎣ k. j⎤⎡ x ⎤ l ⎥⎦ ⎢⎣ y ⎥⎦.

Representasi Matriks y Representasi transformasi ke dalam matriks. ⎡a ⎢⎣ c. b⎤ d ⎥⎦. y Penghitungan transformasi dalam matriks. ⎡ x '⎤ = ⎡ a ⎢⎣ y '⎥⎦ ⎢⎣ c. b ⎤⎡ x⎤ d ⎥⎦ ⎢⎣ y ⎥⎦. x ' = ax + by y ' = cx + dy.

Transformasi dalam Matriks (1) y Matriks indetitas. Bila dikalikan (x,y) tidak akan mengubah nilai (x,y).. x' = x y' = y. ⎡ x'⎤ = ⎡1 0 ⎤ ⎡ x ⎤ ⎢⎣ y '⎥⎦ ⎢⎣0 1 ⎥⎦ ⎢⎣ y ⎥⎦. y Pengubahan ukuran. x'= s x * x y' = s y * y. ⎡ x '⎤ ⎡ s x ⎢ y '⎥ = ⎢ 0 ⎣ ⎦ ⎣. 0 ⎤⎡ x⎤ s y ⎥⎦ ⎢⎣ y ⎥⎦.

Transformasi dalam Matriks (2) y Shear. x ' = x + sh x * y y ' = sh y * x + y. ⎡ x '⎤ ⎡ 1 ⎢ y '⎥ = ⎢ sh ⎣ ⎦ ⎣ y. sh x ⎤ ⎡ x ⎤ ⎥ 1 ⎦ ⎢⎣ y ⎥⎦. y Rotasi. x' = cos θ * x − sin θ * y y ' = sin θ * x + cos θ * y. ⎡ x'⎤ ⎡cos θ ⎢ y '⎥ = ⎢ sin θ ⎣ ⎦ ⎣. − sin θ ⎤ ⎡ x ⎤ cos θ ⎥⎦ ⎢⎣ y ⎥⎦.

Transformasi Tambahan (1) y Refleksi (Mirroring) terhadap sumbu Y. x' = − x y'= y. ⎡ x '⎤ = ⎡ − 1 ⎢⎣ y '⎥⎦ ⎢⎣ 0. 0⎤ ⎡ x ⎤ 1 ⎥⎦ ⎢⎣ y ⎥⎦. y Refleksi terhadap sumbu X. x' = x y' = − y. ⎡ x'⎤ ⎡1 0 ⎤ ⎡ x ⎤ ⎢ y '⎥ = ⎢0 − 1⎥ ⎢ y ⎥ ⎣ ⎦ ⎣ ⎦⎣ ⎦.

Transformasi Tambahan (2) y Refleksi terhadap sumbu Y. y Refleksi terhadap sumbu X.

Transformasi Tambahan (3) y Refleksi terhadap titik asal.

y Refleksi terhadap garis y=x. y Refleksi terhadap garis y=‐x.

Shear y Shear Y. y Shear X.

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

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

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



Matriks untuk Translation y Kembali ke masalah representasi matriks untuk translasi, . bagaimana merepresentasikan :. x' = x + tx y'= y + t y. ⎡ x'⎤ ⎡ x + t x ⎤ ⎢ y '⎥ = ⎢ y + t ⎥ y⎦ ⎣ ⎦ ⎣. y Menggunakan kolom paling kanan :. Matriks translasi. ⎡1 0 t x ⎤ ⎥ ⎢ ⎢0 1 t y ⎥ ⎢0 0 1 ⎥ ⎦ ⎣.

Contoh Translation dengan Matriks ⎡ x '⎤ ⎡1 0 t x ⎤ ⎡ x ⎤ ⎡ x + t x ⎤ ⎢ y '⎥ = ⎢0 1 t ⎥ ⎢ y ⎥ = ⎢ y + t ⎥ y ⎥⎢ ⎥ y⎥ ⎢ ⎥ ⎢ ⎢ ⎢⎣ 1 ⎥⎦ ⎢⎣0 0 1 ⎥⎦ ⎢⎣ 1 ⎥⎦ ⎢⎣ 1 ⎥⎦. tx = 2 ty = 1.

Transformasi Matriks 3 Dimensi y Translation ⎡ x '⎤ ⎡ 1 ⎢ y '⎥ = ⎢ 0 ⎢ ⎥ ⎢ ⎢⎣ 1 ⎥⎦ ⎢⎣ 0. y Rotation tx ⎤⎡ x⎤ t y ⎥⎥ ⎢⎢ y ⎥⎥ 1 ⎥⎦ ⎢⎣ 1 ⎥⎦. 0 1 0. y Scaling ⎡ x '⎤ ⎡ s x ⎢ y '⎥ = ⎢ 0 ⎢ ⎥ ⎢ ⎢⎣ 1 ⎥⎦ ⎢⎣ 0. ⎡ x'⎤ ⎡cos θ ⎢ y '⎥ = ⎢ sin θ ⎢ ⎥ ⎢ ⎢⎣ 1 ⎥⎦ ⎢⎣ 0. − sin θ cos θ 0. 0⎤ ⎡ x ⎤ 0⎥⎥ ⎢⎢ y ⎥⎥ 1⎥⎦ ⎢⎣ 1 ⎥⎦. y Shear 0 sy 0. 0⎤ ⎡ x ⎤ 0⎥ ⎢ y ⎥ ⎥⎢ ⎥ 1 ⎥⎦ ⎢⎣ 1 ⎥⎦. ⎡ x '⎤ ⎡ 1 ⎢ y ' ⎥ = ⎢ sh ⎢ ⎥ ⎢ y ⎢⎣ 1 ⎥⎦ ⎢⎣ 0. sh x 1 0. 0⎤⎡ x ⎤ 0 ⎥⎥ ⎢⎢ y ⎥⎥ 1 ⎥⎦ ⎢⎣ 1 ⎥⎦.

Kombinasi Transformasi y Setelah menggunakan koordinat homogen, matriks. transformasi sudah konsisten. y Kita bisa menggabungkan perhitungan transformasi linear  dengan translasi. y Titik asal bisa berubah.. ⎡ x '⎤ ⎡ a ⎢ y '⎥ = ⎢ d ⎢ w⎥ ⎢0 ⎣ ⎦ ⎣. b e 0. c ⎤⎡ x ⎤ f ⎥⎢ y⎥ 1 ⎥⎦ ⎢⎣ w ⎥⎦.

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

Urutan Perkalian Matriks y Perkalian matriks tidak komunikatif (urutan tidak. bisa diubah), kecuali untuk translasi sejenis. p’ = (T * (R * (S*p) ) ) p’ = (T*R*S) * p p’ = T * R * S * p p’ = T R S p y Dalam perhitungan matriks, urutan translasi dibaca dari kanan ke kiri. Jadi dari rumus di atas urutan translasinya : shear → rotation → translation..



Contoh Komposisi Matriks y Ingin melakukan rotasi dan translasi y Putar segmen garis di bawah ini dengan sumbu ujung a di. koordinat (3,0). y Perhatikan bahwa segmen garis tidak memiliki titik awal di (0,0) ‐ sumbu rotation bukan di (0,0) !. a. 3. a. 6. 3.

Cara Yang Salah y Mengaplikasikan rotasi kepada kedua titik ujung segmen. garis menghasilkan posisi yang salah. y Bisa saja memutar kedua titik sebesar 45o kemudian mengembalikan titik a ke posisi semula tapi kita tidak tahu berapa nilai translasi yang diperlukan.. a a. a Salah R(45). Hasil yang benar.

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

Mana representasi yang benar? ⎡1 0 − 3⎤ ⎡cos(45) − sin( 45) 0⎤ ⎡1 0 3⎤ ⎡ a x ⎤ ⎡ a ' x ⎤ ⎢0 1 0 ⎥ ⎢ sin( 45) cos(45) 0⎥ ⎢0 1 0⎥ ⎢a ⎥ = ⎢a ' ⎥ ⎥⎢ y ⎥ ⎢ y ⎥ ⎥⎢ ⎥⎢ ⎢ ⎢⎣0 0 1 ⎥⎦ ⎢⎣ 0 0 1⎥⎦ ⎢⎣0 0 1⎥⎦ ⎢⎣ 1 ⎥⎦ ⎢⎣ 1 ⎥⎦. atau ⎡1 0 3⎤ ⎡cos(45) − sin( 45) 0⎤ ⎡1 0 − 3⎤ ⎡ a x ⎤ ⎡ a' x ⎤ ⎢0 1 0⎥ ⎢ sin( 45) cos(45) 0⎥ ⎢0 1 0 ⎥ ⎢a ⎥ = ⎢a' ⎥ ⎢ ⎥⎢ ⎥⎢ ⎥⎢ y ⎥ ⎢ y ⎥ ⎢⎣0 0 1⎥⎦ ⎢⎣ 0 0 1⎥⎦ ⎢⎣0 0 1 ⎥⎦ ⎢⎣ 1 ⎥⎦ ⎢⎣ 1 ⎥⎦.

Komposisi Matriks y Inilah representasi yang benar dari komposisi matriks. beberapa transformasi tadi : ⎡1 0 3⎤ ⎡cos(45) − sin( 45) 0⎤ ⎡1 0 − 3⎤ ⎡ a x ⎤ ⎡ a' x ⎤ ⎢0 1 0⎥ ⎢ sin( 45) cos(45) 0⎥ ⎢0 1 0 ⎥ ⎢a ⎥ = ⎢a' ⎥ ⎢ ⎥⎢ ⎥⎢ ⎥⎢ y ⎥ ⎢ y ⎥ ⎢⎣0 0 1⎥⎦ ⎢⎣ 0 0 1⎥⎦ ⎢⎣0 0 1 ⎥⎦ ⎢⎣ 1 ⎥⎦ ⎢⎣ 1 ⎥⎦. y Untuk menghitung secara cepat beberapa titik pada suatu. bentuk bangun dengan urutan transformasi yang sama,  hitung dulu matriks transformasi‐nya, baru dikalikan dengan masing‐masing titik pada bentuk bangun. .

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

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

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

Metode Solusi 2 y Koordinat jam ditahan pada koordinat (0,0) y Menghitung kumpulan transformasi sebelum animasi mulai. dijalankan.. y Menghitung posisi dan rotasi jam beserta jarumnya dengan. kumpulan translasi tersebut dengan variabel dari posisi (0,0)..

Interpolasi y Salah satu model animasi y Initial state → final desired state. initial. final.

Soal Animasi Jam y Dalam contoh jam tadi, ada translasi T(2,1). Semisal. diinginkan ada 100 gerakan. y Nyatakan posisi awal p0 = (0,0)T dan posisi akhir p1 =  (200,100)T y Titik pα adalah titik yang menghubungkan p0 dan p1 y α = 0  → posisi awal y α = 1  → posisi akhir y Teknik ini disebut Convex Combination (Kombinasi. Cembung) .

Interpolasi Matriks y Interpolasi juga dapat diterapkan pada matriks homogen.. y Matriks‐matriks ini memetakan objek dari posisi awal. hingga posisi akhir. y Kombinasi Cembung dapat pula digunakan untuk matriks transformasi yang memiliki initial state berbeda dengan final state. Misalnya initial state : rotation, final state :  shearing.   .



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

Interpolasi D ke C y S= Huruf D , S’ = Huruf C y Masing‐masing memiliki titik 1 dan 2 sebagai titik awal. dan dan akhir. y Titik 3 sebagai titik kontrol. y Hasil akhir memiliki titik 2 dan 4 sebagai ujung dan titik 5  sebagai titik kontrol..

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