TRANSFORMASI 2 DIMENSI

• Dasar • Representasi Titik dan Transformasi • Transformasi Titik • Transformasi Garis • Rotasi • Refleksi • Skala • Transformasi Kombinasi Grafika Komputer 3.1

Setiawan Hadi  UNPAD

Motivasi

• Why do we need geometric transformations in CG?

– As a viewing aid – As a modeling tool – As an image manipulation tool Grafika Komputer 3.2

Setiawan Hadi  UNPAD

REPRESENTASI TITIK DAN TRANSFORMASI

• Sebuah titik direpresentasikan secara dua dimensi melalui koordinatnya dituliskan 

x y

 atau

x y

• Transformasi dan Matriks

    

Matriks

A

ditransformasikan dengan matriks transformasi

T

menghasilkan matriks

B

Setiawan Hadi  UNPAD Grafika Komputer 3.3

TRANSFORMASI TITIK

Sebuah titik X ditransformasikan dengan matriks T diformulasikan sebagai berikut

x y



 

a c b d

  



( ) (

bx



dy

)





x

*

y

* Evaluasi nilai

a, b, c, d

a.

b.

c.

d.

e.

f.

g.

h.

Jika a=d=1 dan c=b=0 Jika d=1, b=c=0 Jika b=c=0 Jika a=d > 1 Jika 0

Matriks Identitas Skala pada komponen x Skala pada komponen x dan y Enlargment Compression Refleksi pada sumbu x Refleksi pada sumbu y Shear

Setiawan Hadi  UNPAD Grafika Komputer 3.4

TRANSFORMASI GARIS

•

Transformasi garis lurus

– Sebuah garis yang melalui titik A(0,1) dan titik B(2,3) yang ditransformasikan dengan matriks   1 2 3 1   – Menghasilkan 2 0 1



   1 2 3 1    



3 1



 3



  1 2   3 1   



11 7





A

*

B

* – Dapat ditulis

  

  0 1  2 3     1 2 3 1 Grafika Komputer 3 1 11 7

L

* 3.5

Setiawan Hadi  UNPAD

ROTASI

• Sumbu rotasi pada sumbu origin yaitu titik (0,0) • Rotasi dengan sudut istimewa 90°, 180°, 270°, 360°     0 1  1 0     0 1  1 0   • Diketahui koordinat titik yang membentuk segitiga {(3, -1), (4, 1), (2, 1). Gambarkan objek tersebut kemudian gambarkan pula objek baru yang merupakan transformasi rotasi objek lama sebesar 90° CCW dengan pusat rotasi (0,0).

Grafika Komputer 3.6

    1 0   1 0  0 1   0 1   Setiawan Hadi  UNPAD

ROTASI DENGAN SUDUT TERTENTU

• Pusat rotasi tetap pada origin • Menggunakan cara polar

P

 

x y r

cos 

r

sin  

P

' 

x

'

y

'  

r

cos(   )    

r

 

r x

cos  cos  cos  

y

  

r

sin  sin

y

 cos  

r

sin(   ) 

r r

sin 

x

sin    cos   

r

cos 

x

' 

x

cos  

y

sin 

y

' 

x

'

y

cos 

y

' 

x



x

sin 

y

    cos si n   sin  cos     

Rotasi sebesar θ˚ CCW

3.7

Setiawan Hadi  UNPAD Grafika Komputer

y

ILUSTRASI REFLEKSI

y 1 2 2 ’ 3 3 ’ x 1 ’ 2 1 y 3 3 ’ 1 ’ x 2 1 2 y 3 3 ’ 1 ’ 2 x x Setiawan Hadi  UNPAD Grafika Komputer 3.8

REFLEKSI

• Pencerminan pada sumbu utama (absis dan ordinat) •     1 0      0 1    1 0 0 1   Refleksi pada sumbu

x

atau Refleksi pada sumbu

y

atau

y x

  0 0 0  1 0   1 1 0    1 0   Refleksi pada sumbu Refleksi pada sumbu

y y



x

 

x

Latihan

– Diketahui sebuah objek dengan pasangan koordinat {(4,1), (5,2), (4,3)}.   (a) Refleksikan pada cermin yang terletak pada sumbu x (b) Refleksikan pada garis y=-x. Setiawan Hadi  UNPAD Grafika Komputer 3.9

y

ILUSTRASI REFLEKSI

y 1 2 2 ’ 3 3 ’ x 1 ’ 2 1 y 3 3 ’ 1 ’ x 2 1 2 y 3 3 ’ 1 ’ 2 x x Setiawan Hadi  UNPAD Grafika Komputer 3.10

SKALA DAN TRANSFORMASI KOMBINASI

(a,b) • Skala – Ada dua jenis penskalaan yaitu uniform scaling (us) dan non-uniform scaling (ns) – us : a=d, b=c=0; – ns : a≠d, b=c=0 – kompresi : a=d<1; – ekspansi : a=d>1 • Transformasi Kombinasi

                

Setiawan Hadi  UNPAD Grafika Komputer 3.11

SHEAR

y

(0,1) (0,0) (1,1) (1,0)

x y

(2,1) (3,1) (0,0) (1,0)

x y

(0,1) (0,0) (1,1) (1,0)

y

(1,1) (2,1)

x

(1/2,0) (3/2,0)

x

(0,-1)

y

(1,1) (1,0) (0,3/2)

y

(1,2) (0,1/2) (1,1)

x

(-1,0)

x Setiawan Hadi  UNPAD Grafika Komputer 3.12

TRANSFORMASI KOORDINAT HOMOGEN

• Koordinat homogen • Rotasi pada pusat rotasi sembarang • Refleksi pada cermin yang berada pada posisi garis sumbu sembarang Grafika Komputer 3.13

Setiawan Hadi  UNPAD

KOORDINAT HOMOGEN

• Origin bersifat INVARIAN. Koordinatnya tidak akan pernah berubah. Jika ditransformasikan, akan tetap di (0,0). • Dalam kondisi nyata, origin tidak harus selalu absolut di (0,0). Untuk itu digunakan koordinat homogen • Koordinat homogen memetakan titik (0,0) ke posisi lain. Untuk itu ada elemen tambahan pada matriks transformasi • Matriks Transformasi Umum (MTU)` Grafika Komputer

    

a c m b d n p q s

   

a, b, c, d

merupakan elemen untuk skala, rotasi,refleksi dan shearing

m, n

merupakan elemen untuk translasi

s

adalah elemen untuk overal scaling

p, q

adalah elemen untuk proyeksi 3.14

Setiawan Hadi  UNPAD

ROTASI PADA SUMBU SEMBARANG

• • Jika sebuah objek dirotasikan sebesar θ° dengan pusat rotasi (m, n), maka langkah-langkah yang harus dilakukan adalah 1. Translasikan pusat rotasi ke (0, 0); karena yang kita ketahui hanyalah rumus rotasi pada origin 2. Lakukan rotasi sebesar yang diinginkan 3. Re-translasi pusat rotasi ke posisi semula

MTU

sin



cos



0 0 0 1

       

1 0

m

0 1

n

0 0 1

   

x

*     

1 0



m y

*

1



0 1



n



x

0 0 1

        

cos sin 0

 

y

1

  Setiawan Hadi  UNPAD Grafika Komputer 3.15

ILUSTRASI

Grafika Komputer     1 0 

m

0 1 

n

0 0 1          cos sin 0   sin  cos  0 0 0 1         1 0

m

0 1

n

0 0 1     3.16

Setiawan Hadi  UNPAD

(x r ,y r )

Translate

Ilustrasi Lainnya

(x r ,y r )

Rotate

(x r ,y r )

Translate

(x r ,y r )

Grafika Komputer 3.17

Setiawan Hadi  UNPAD

REFLEKSI PADA GARIS SEMBARANG

• • Langkah-langkah 1. Translasikan cermin sedemikian rupa sehingga menyentuh titik origin 2. Rotasikan cermin sehingga berimpit dengan salah satu sumbu utama 3. Refleksikan objek 4. Re-rotasi 5. Re-translasi Jadi MTU terdiri dari 5 buat matriks transformasi sebagai berikut:

Rot Rot

 1  

T r

 1 Setiawan Hadi  UNPAD Grafika Komputer 3.18

Latihan 1

Diketahui sebuah objek dengan koordinat {(0,0), (2,2), (2,1), (6,1), (6,-1), (2, -1), (-2,-2)} a. Rotasikan objek sebesar 45º CCW dengan pusat rotasi pada (9, 4) b. Rotasikan objek sebesar 30º CW dengan pusat rotasi pada (-3,5) 1. Gambarkan objek asli 2. Tentukan MTU 3. Tentukan Koordinat Objek Baru 4. Gambarkan objek hasil transformasi Setiawan Hadi  UNPAD Grafika Komputer 3.19

Jawab 1a

Grafika Komputer 3.20

Setiawan Hadi  UNPAD

Jawab 1b

Grafika Komputer 3.21

Setiawan Hadi  UNPAD

Latihan 2

Diketahui sebuah objek dengan koordinat {(0, 0), (1, -2), (3, 3), (2, 3), (1, 1), (0, 2), (-1, 1), (-2, 3) , (-3, 3), (-1, -2), (0, 0)}.

a. Refleksikan objek di atas pada cermin yang berimpit dengan garis y = –x+9.

b. Refleksikan objek di atas pada cermin yang berimpit dengan garis y = x+9.

1. Gambarkan objek asli 2. Tentukan MTU 3. Tentukan Koordinat Objek Baru 4. Gambarkan objek baru hasil transformasi Setiawan Hadi  UNPAD Grafika Komputer 3.22

Jawab 2a

Grafika Komputer 3.23

Setiawan Hadi  UNPAD

Jawab 2b

Grafika Komputer 3.24

Setiawan Hadi  UNPAD

Soal-soal

1. Tentukan titik-titik dijital untuk garis antara (-3,5) dan (8,-7) dengan algoritma DDA dan Bresenham 2. Tentukan titik-titik dijital untuk lingkaran dengan pusat 3,5 dan diameter 8 3. A. Turunkan matriks transformasi umum (MTU) untuk rotasi dengan pusat rotasi pada sebuah titik sembarang (0, 0) dan sudut rotasi sebesar  searah jarum jam (clock wise).

B. Berdasarkan hasil A. tentukan matriks transformasi umum (MTU) untuk rotasi dengan pusat rotasi pada sebuah titik sembarang (x, y) dan sudut rotasi sebesar  searah jarum jam (clock wise).

• Grafika Komputer Setiawan Hadi  UNPAD 3.25

Soal-soal

Diketahui sebuah objek sebagai berikut Tentukan koordinat objek pada viewport dan gambarkan jika diketahui koordinat windows (Xwmain, Ywmin dan Xwmax, Ywmax) adalah (0,0, 12, 14) dan koordinat viewport (Xvmin, Yvmin, Xvmax, Yvmax) adalah (2,2, 10,10) Grafika Komputer 3.26

Setiawan Hadi  UNPAD

Soal-soal

Grafika Komputer 3.27

Setiawan Hadi  UNPAD

Soal-soal

Grafika Komputer 3.28

Setiawan Hadi  UNPAD

Soal-soal

Grafika Komputer 3.29

Setiawan Hadi  UNPAD

Soal-soal

Grafika Komputer 3.30

Setiawan Hadi  UNPAD

Lain-lain

•

Demo

– Transformation Tester – Cabri 2D •

Artikel

– OpenGL –  Visual Studio .NET/C++, C#  Java (JOGL) GDI+ – WPF, Silverlight – Flash –  Visual Studio .NET/C# Mobile Programming Visual Studio dan Java Grafika Komputer 3.31

Setiawan Hadi  UNPAD

QUIZ1

• Senin 7 Maret 2011 • Membawa Kalkulator • Tidak boleh saling meminjam Kalkulator • Boleh membawa cheatsheet maksimal 1 lembar • Materi: – Teori dasar – Algoritma Penggambaran Garis – Algoritma Penggambaran Lingkaran – Transformasi 2 dimensi (NON HOMOGEN) Grafika Komputer 3.32

Setiawan Hadi  UNPAD