Download - TRANSFORMASI 2 DIMENSI

Transcript
Page 1: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.1Grafika Komputer

TRANSFORMASI 2 DIMENSI

• Dasar

• Representasi Titik dan Transformasi

• Transformasi Titik

• Transformasi Garis

• Rotasi

• Refleksi

• Skala

• Transformasi Kombinasi

Page 2: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.2Grafika Komputer

• Why do we need geometric transformations in CG?– As a viewing aid– As a modeling tool– As an image manipulation tool

Motivasi

Page 3: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.3Grafika Komputer

REPRESENTASI TITIK DAN TRANSFORMASI

• Sebuah titik direpresentasikan secara dua dimensi melalui koordinatnya

• Transformasi dan Matriks

( , )x y dituliskan x y

atau x

y

A T B Matriks A ditransformasikan dengan matriks transformasi T menghasilkan matriks B

Page 4: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.4Grafika Komputer

TRANSFORMASI TITIK

* *( ) ( )a b

X T x y ax cy bx dy x yc d

Sebuah titik X ditransformasikan dengan matriks T diformulasikan sebagai berikut

Evaluasi nilai a, b, c, d

a. Jika a=d=1 dan c=b=0 Matriks Identitasb. Jika d=1, b=c=0 Skala pada komponen xc. Jika b=c=0 Skala pada komponen x dan yd. Jika a=d > 1 Enlargmente. Jika 0<a=d<1 Compressionf. Jika a=1, d=-1, b=c=0 Refleksi pada sumbu xg. Jika a=-1, b=c=0, d=1 Refleksi pada sumbu yh. Jika a=d=1, c=0 Shear

Page 5: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.5Grafika Komputer

TRANSFORMASI GARIS

• Transformasi garis lurus– Sebuah garis yang melalui titik A(0,1) dan titik B(2,3) yang

ditransformasikan dengan matriks

– Menghasilkan

– Dapat ditulis

1 2

3 1T

*

*

1 20 1 3 1

3 1

1 22 3 11 7

3 1

A T A

B T B

*0 1 1 2 3 1

2 3 3 1 11 7L T L

Page 6: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.6Grafika Komputer

ROTASI

• Sumbu rotasi pada sumbu origin yaitu titik (0,0)

• Rotasi dengan sudut istimewa 90°, 180°, 270°, 360°

• 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).

90 180

270 360

0 1 1 0

1 0 0 1

0 1 1 0

1 0 0 1

T T

T T

Page 7: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.7Grafika Komputer

ROTASI DENGAN SUDUT TERTENTU

• Pusat rotasi tetap pada origin

• Menggunakan cara polar

' ' '

'

'

' '

cos sin

cos sin

cos( ) sin( )

(cos cos sin sin ) (sin cos cos sin )

cos sin ) sin cos sin )

cos sin cos sin

cos sin

cos sin

cos sin

si

cos

P x y r r

P x y r r

r r

x

y

x y

r r r r

x y y x

x y

y

x y

x

n cos

Rotasi sebesar θ˚ CCW

Page 8: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.8Grafika Komputer

ILUSTRASI REFLEKSI

x

y 1

32

1’

3’2’x

y1

32

1’

3’ 2

x

y

3

1’

3’ 2

1

2

x

y

Page 9: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.9Grafika Komputer

REFLEKSI

• Pencerminan pada sumbu utama (absis dan ordinat)

• 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.

1 0

0 1T

Refleksi pada sumbu x atau 0y

1 0

0 1T

Refleksi pada sumbu y atau 0x

0 1

1 0T

Refleksi pada sumbu y x

0 1

1 0T

Refleksi pada sumbu y x

Page 10: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.10Grafika Komputer

ILUSTRASI REFLEKSI

x

y 1

32

1’

3’2’x

y1

32

1’

3’ 2

x

y

3

1’

3’ 2

1

2

x

y

Page 11: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.11Grafika Komputer

SKALA DAN TRANSFORMASI KOMBINASI

• 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

1 2 2 1

1 2 1 2

X T T X T T

X T T X T T

(a,b)

Page 12: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.12Grafika Komputer

SHEAR

x

y

x

y

(0,0) (1,0)

(1,1)(0,1)

(0,0) (1,0)

(3,1)(2,1)x

y

x

y

(0,0) (1,0)

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

(3/2,0)

(2,1)(1,1)

(0,-1)

x

y

x

y

(-1,0)(1,0)

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

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

Page 13: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.13Grafika Komputer

TRANSFORMASI KOORDINAT HOMOGEN

• Koordinat homogen

• Rotasi pada pusat rotasi sembarang

• Refleksi pada cermin yang berada pada posisi garis sumbu sembarang

Page 14: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.14Grafika Komputer

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)`

a b p

T c d q

m n s

a, b, c, d merupakan elemen untuk skala, rotasi,refleksi dan shearingm, n merupakan elemen untuk translasis adalah elemen untuk overal scalingp, q adalah elemen untuk proyeksi

Page 15: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.15Grafika Komputer

ROTASI PADA SUMBU SEMBARANG

• Jika sebuah objek dirotasikan sebesar θ° dengan pusat rotasi (m, n), maka langkah-langkah yang harus dilakukan adalah1. Translasikan pusat rotasi ke (0, 0); karena yang kita

ketahui hanyalah rumus rotasi pada origin2. Lakukan rotasi sebesar yang diinginkan3. Re-translasi pusat rotasi ke posisi semula

• MTU

* *

1 0 0 cos sin 0 1 0 0

0 1 0 sin cos 0 0 1 0

1 0 0 1 1

1 1

T

m n m n

x y x y T

Page 16: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.16Grafika Komputer

ILUSTRASI

1 0 0

0 1 0

1m n

cos sin 0

sin cos 0

0 0 1

1 0 0

0 1 0

1m n

Page 17: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.17Grafika Komputer

Ilustrasi Lainnya

Translate Rotate Translate

(xr,yr)

(xr,yr)

(xr,yr)

(xr,yr)

Page 18: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.18Grafika Komputer

REFLEKSI PADA GARIS SEMBARANG

• Langkah-langkah1. Translasikan cermin sedemikian rupa sehingga menyentuh

titik origin2. Rotasikan cermin sehingga berimpit dengan salah satu

sumbu utama3. Refleksikan objek4. Re-rotasi5. Re-translasi

• Jadi MTU terdiri dari 5 buat matriks transformasi sebagai berikut:

1 1Rr rT T Rot Rot T

Page 19: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.19Grafika Komputer

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 asli2. Tentukan MTU3. Tentukan Koordinat Objek Baru4. Gambarkan objek hasil transformasi

Page 20: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.20Grafika Komputer

Jawab 1a

Page 21: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.21Grafika Komputer

Jawab 1b

Page 22: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.22Grafika Komputer

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 asli2. Tentukan MTU3. Tentukan Koordinat Objek Baru4. Gambarkan objek baru hasil transformasi

Latihan 2

Page 23: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.23Grafika Komputer

Jawab 2a

Page 24: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.24Grafika Komputer

Jawab 2b

Page 25: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.25Grafika Komputer

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).

Soal-soal

Page 26: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.26Grafika Komputer

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)

Soal-soal

Page 27: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.27Grafika Komputer

Soal-soal

Page 28: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.28Grafika Komputer

Soal-soal

Page 29: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.29Grafika Komputer

Soal-soal

Page 30: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.30Grafika Komputer

Soal-soal

Page 31: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.31Grafika Komputer

• Demo– Transformation Tester– Cabri 2D

• Artikel– OpenGL

Visual Studio .NET/C++, C# Java (JOGL)

– GDI+ Visual Studio .NET/C#

– WPF, Silverlight– Flash– Mobile Programming Visual Studio dan Java

Lain-lain

Graphics Using C# - Shortcut.lnk

Page 32: TRANSFORMASI 2 DIMENSI

Setiawan Hadi UNPAD3.32Grafika Komputer

• 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)

QUIZ1