Esther Wibowo ‐ esther.visual@gmail.com

Topik Hari IniDasar 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 PemindahanBila 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 UkuranMengalikan tiap komponen dengan suatu nilai skalar.

Uniform scaling (pengubahan ukuran yang seragam) : nilaiskalar pengali tiap komponen adalah sama.

× 2

Non‐Uniform ScalingSkalar pengali berbeda untuk tiap komponen.

Rumus:x’ = x * Sx

y’ = y * Sy

X × 2Y × 0.5

ShearPemindahan 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 = 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(θ)

θ

(x, y)

(x’, y’)

φ

r

Rangkuman Rumus TransformasiTranslasi:

x’ = x + Txy’ = y + Ty

Skala / Perubahan ukuran:x’ = x * Sxy’ = y * Sy

Shear:x’ = x + Hx*yy’ = y + Hy*x

Rotasi / Pemutaran:x’ = x*cos Ѳ ‐ y*sin Ѳy’ = x*sin Ѳ + y*cos Ѳ

Poros selaludi (0,0) !

Matriks TransformasiMerepresentasikan dan menghitung transformasi dalambentuk matriks

Kegunaan :  memudahkan perhitungkan beberapatransformasi yang berurutan (multiple transformations)

Transformasi yang berurutan dapat dihitung sekaligusdengan mengalikan matriks‐matriks transformasi.

⎥⎦⎤

⎢⎣⎡⎥⎦⎤

⎢⎣⎡⎥⎦⎤

⎢⎣⎡⎥⎦⎤

⎢⎣⎡=⎥⎦

⎤⎢⎣⎡

yx

lkji

hgfe

dcba

yx

''

Representasi MatriksRepresentasi transformasi ke dalam matriks

Penghitungan transformasi dalam matriks

⎥⎦⎤

⎢⎣⎡

dcba

⎥⎦⎤

⎢⎣⎡⎥⎦⎤

⎢⎣⎡=⎥⎦

⎤⎢⎣⎡

yx

dcba

yx

''

dycxybyaxx

+=+=

''

Transformasi dalam Matriks (1)Matriks indetitas

Bila dikalikan (x,y) tidak akan mengubah nilai (x,y).

Pengubahan ukuran

ysy

xsx

y

x

*'

*'

=

=⎥⎦

⎤⎢⎣

⎡⎥⎦

⎤⎢⎣

⎡=⎥

⎦

⎤⎢⎣

⎡yx

ss

yx

y

x

00

''

⎥⎦⎤

⎢⎣⎡⎥⎦⎤

⎢⎣⎡=⎥⎦

⎤⎢⎣⎡

yx

yx

1001

''

yyxx

==''

Transformasi dalam Matriks (2)Shear

Rotasi

yxshyyshxx

y

x

+=

+=

*'*'

⎥⎦

⎤⎢⎣

⎡⎥⎦

⎤⎢⎣

⎡=⎥

⎦

⎤⎢⎣

⎡yx

shsh

yx

y

x

11

''

yxyyxx

*cos*sin'*sin*cos'

θθθθ

+=−=

⎥⎦

⎤⎢⎣

⎡⎥⎦

⎤⎢⎣

⎡ −=⎥

⎦

⎤⎢⎣

⎡yx

yx

θθθθ

cossinsincos

''

Transformasi Tambahan (1)Refleksi (Mirroring) terhadap sumbu Y

Refleksi terhadap sumbu X

yyxx

=−=

''

⎥⎦⎤

⎢⎣⎡⎥⎦⎤

⎢⎣⎡−=⎥⎦

⎤⎢⎣⎡

yx

yx

1001

''

yyxx−=

=''

⎥⎦

⎤⎢⎣

⎡⎥⎦

⎤⎢⎣

⎡−

=⎥⎦

⎤⎢⎣

⎡yx

yx

1001

''

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

ShearShear Y Shear X

Masalah!Bagaimana dengan translation?

Bukan merupakan transformasi linear.

Ciri transformasi linear :Garis paralel tetap paralel

Rasio tidak berubah

Titik asal tidak berubah setelah dipetakan

y

x

tyytxx

+=

+=

''

⎥⎦

⎤⎢⎣

⎡++

=⎥⎦

⎤⎢⎣

⎡

y

x

tytx

yx''

Koordinat Homogen (1)Mengatasi masalah ketidak‐konsistenan representasitransformasi dalam matriks.

Menambahkan koordinat ke‐3 dalam matriks.

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡⎯⎯⎯⎯⎯ →⎯⎥

⎦

⎤⎢⎣

⎡

wyx

yx homogenkoordinat

Koordinat Homogen (2)(x,y,w) merepresentasikan suatu titik

Untuk mengembalikan ke matriks dimensi 2, masing‐masing komponen dibagi w   (x/w, y/w, 1)

(x,y,0) merupakan suatu titik di tak terhingga.

(0,0,0) tidak ada.

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡=

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡=

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡=

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡=

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

369

246

123

1//wywx

wyx

Matriks untuk TranslationKembali ke masalah representasi matriks untuk translasi, bagaimana merepresentasikan :

Menggunakan kolom paling kanan :

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

1001001

y

x

tt

y

x

tyytxx

+=

+=

''

⎥⎦

⎤⎢⎣

⎡++

=⎥⎦

⎤⎢⎣

⎡

y

x

tytx

yx''

Matrikstranslasi

Contoh Translation dengan Matriks

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡++

=⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

=⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

111001001

1''

y

x

y

x

tytx

yx

tt

yx

tx = 2ty = 1

Transformasi Matriks 3 DimensiTranslation

Scaling

Rotation

Shear

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡=

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

11001001

1''

yx

tt

yx

y

x

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡=

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

11000000

1''

yx

ss

yx

y

x

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡ −=

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

11000cossin0sincos

1''

yx

yx

θθθθ

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡=

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

11000101

1''

yx

shsh

yx

y

x

Kombinasi TransformasiSetelah menggunakan koordinat homogen, matrikstransformasi sudah konsisten.

Kita bisa menggabungkan perhitungan transformasi linear dengan translasi.

Titik asal bisa berubah.

⎥⎥⎦

⎤

⎢⎢⎣

⎡

⎥⎥⎦

⎤

⎢⎢⎣

⎡=

⎥⎥⎦

⎤

⎢⎢⎣

⎡

wyx

fedcba

wyx

100''

Komposisi MatriksTransformasi yang berurutan dapat dihitung denganpengalian matriks.

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡ −

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡=

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

wyx

sysx

tytx

wyx

1000000

1000cossin0sincos

1001001

'''

θθθθ

p’ = T(tx,ty) R(Ѳ) S(sx,sy) p

Urutan Perkalian MatriksPerkalian 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.

Contoh Komposisi MatriksIngin 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) ‐ sumbu rotation bukan di (0,0) !

a a

3 36

Cara Yang SalahMengaplikasikan rotasi kepada kedua titik ujung segmengaris menghasilkan posisi yang salah.

Bisa saja memutar kedua titik sebesar 45o kemudianmengembalikan titik a ke posisi semula tapi kita tidaktahu berapa nilai translasi yang diperlukan.

SalahR(45)

Hasil yang benar

aa

a

Urutan PerhitunganHilangkan dulu efek rotasi pada titik a.

Translasikan segmen garis sehingga titika di (0,0) → T(‐3,0)

Rotasikan segmen garis→ R(45o)

Kembalikan segmen garis ke titik awalsemula→ T(3,0)

a

a

a

a

Mana representasi yang benar?

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡=

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡ −

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡ −

1''

1100010301

1000)45cos()45sin(0)45sin()45cos(

100010301

y

x

y

x

aa

aa

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡=

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡ −

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡ −

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

1''

1100010301

1000)45cos()45sin(0)45sin()45cos(

100010301

y

x

y

x

aa

aa

atau

Komposisi MatriksInilah representasi yang benar dari komposisi matriksbeberapa transformasi tadi :

Untuk menghitung secara cepat beberapa titik pada suatubentuk bangun dengan urutan transformasi yang sama, hitung dulu matriks transformasi‐nya, baru dikalikandengan masing‐masing titik pada bentuk bangun. 

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡=

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡ −

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡ −

⎥⎥⎥

⎦

⎤

⎢⎢⎢

⎣

⎡

1''

1100010301

1000)45cos()45sin(0)45sin()45cos(

100010301

y

x

y

x

aa

aa

AnimasiTransformasi geometrik sesuai untuk dipakai dalamanimasi, misal animasi jarum jam yang berputar 30o tiapjam atau 6o tiap menit.

Gerakan kontinyu harus dipecah dalam gerakan‐gerakankecil yang dapat dideskripsikan dengan transformasi.

Perubahan gerakan harus :Cukup kecil

Cukup cepat

hingga tidak terdeteksi oleh penonton.

Contoh AnimasiSebuah jam dengan 1 jarum jam :

Bergerak dari kiri bawah ke kanan atas dengan jarak tiapgerakan 2 unit ke kanan dan 1 unit ke atas→ T(2,1)

Jarum jam bergerak 45o per gerakan→ R(45o)

Metode Solusi 1Melacak pergerakan dan mendeteksi koordinat sumbu jarumjam saat ini.Menghitung rotasi jarum berdasar koordinat sumbu jarum jam saat 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 2Koordinat jam ditahan pada koordinat (0,0)

Menghitung kumpulan transformasi sebelum animasi mulaidijalankan.

Menghitung posisi dan rotasi jam beserta jarumnya dengankumpulan translasi tersebut dengan variabel dari posisi (0,0).

InterpolasiSalah satu model animasi

Initial state → final desired state

initial final

Soal Animasi JamDalam contoh jam tadi, ada translasi T(2,1). Semisaldiinginkan ada 100 gerakan.Nyatakan posisi awal p0 = (0,0)T dan posisi akhir p1 = (200,100)T

Titik pα adalah titik yang menghubungkan p0 dan p1

α = 0  → posisi awalα = 1  → posisi akhirTeknik ini disebut Convex Combination (KombinasiCembung) 

Interpolasi MatriksInterpolasi juga dapat diterapkan pada matriks homogen.

Matriks‐matriks ini memetakan objek dari posisi awalhingga posisi akhir.

Kombinasi Cembung dapat pula digunakan untuk matrikstransformasi yang memiliki initial state berbeda denganfinal state. Misalnya initial state : rotation, final state : shearing.   

Interpolasi TitikDua 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 CS= Huruf D , S’ = Huruf C

Masing‐masing memiliki titik 1 dan 2 sebagai titik awaldan dan akhir.

Titik 3 sebagai titik kontrol.

Hasil akhir memiliki titik 2 dan 4 sebagai ujung dan titik 5 sebagai titik kontrol.

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