transformasi titik

Report
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
x
 
 y
• Transformasi dan Matriks
 A  T    B 
Grafika Komputer
Matriks A ditransformasikan dengan matriks
transformasi T menghasilkan matriks B
3.3
Setiawan Hadi UNPAD
TRANSFORMASI TITIK
Sebuah titik X ditransformasikan dengan matriks T
diformulasikan sebagai berikut
 X T    x
a
y
c
b
   ( ax  cy )
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<a=d<1
Jika a=1, d=-1, b=c=0
Jika a=-1, b=c=0, d=1
Jika a=d=1, c=0
Grafika Komputer
Matriks Identitas
Skala pada komponen x
Skala pada komponen x dan y
Enlargment
Compression
Refleksi pada sumbu x
Refleksi pada sumbu y
Shear
3.4
Setiawan Hadi UNPAD
TRANSFORMASI GARIS
• Transformasi garis lurus
– Sebuah garis yang melalui titik A(0,1) dan titik B(2,3) yang
ditransformasikan dengan matriks
1
T

  
3
– Menghasilkan
 A  T    0
1
1 
3
2
  3
1
 B  T    2
1
3 
3
2
  11
1
2

1
*
1    A 
*
7    B 
– Dapat ditulis
0
L
T

   
2
Grafika Komputer
1  1

3 3
2  3

1  11
1
*


L
  
7
3.5
Setiawan Hadi UNPAD
ROTASI
• Sumbu rotasi pada sumbu origin
yaitu titik (0,0)
• Rotasi dengan sudut istimewa
90°, 180°, 270°, 360°
0
 T90   
1
1

0
1
 T180   
0
0
 T270   
1
 1

0 
1
 T360   
0
0 

 1
0

1
• 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
Setiawan Hadi UNPAD
ROTASI DENGAN SUDUT TERTENTU
• Pusat rotasi tetap pada origin
• Menggunakan cara polar
P  x
'
'
P   x
y    r cos 
r sin  
'
y    r cos(   )
r sin(   ) 
  r (cos  cos   sin  sin  )
  r cos  cos   r sin  sin  )
  x cos   y sin 
r (sin  cos   cos  sin  ) 
r sin  cos   r cos  sin  ) 
y cos   x sin  
x  x cos   y sin 
'
y  y cos   x sin 
'
 x'

'
y    x
 cos 
y
  si n 
sin  

cos  
Rotasi sebesar θ˚ CCW
Grafika Komputer
3.7
Setiawan Hadi UNPAD
ILUSTRASI REFLEKSI
y
1
1
2
3
2
2’
3’
y
3
y
1’
3’
x
2
x
1’
3’
3
1
2
x
2
1’
y
x
Grafika Komputer
3.8
Setiawan Hadi UNPAD
REFLEKSI
• Pencerminan pada sumbu utama (absis dan ordinat)
1 0 
T   

0

1


1 0 
T   

0
1


0
T   
1
0
T   
1
• Latihan
1

0
 1

0 
Refleksi pada sumbu x atau
y0
Refleksi pada sumbu y atau
x0
Refleksi pada sumbu y  x
Refleksi pada sumbu y   x
– 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.
Grafika Komputer
3.9
Setiawan Hadi UNPAD
ILUSTRASI REFLEKSI
y
1
1
2
3
2
2’
3’
y
3
y
1’
3’
x
2
x
1’
3’
3
1
2
x
2
1’
y
x
Grafika Komputer
3.10
Setiawan Hadi UNPAD
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
 X  T  T    X T T 
1
2
1
2
2
1
•Transformasi Kombinasi  X T T    X  T T  
Grafika Komputer
3.11
1
2
Setiawan Hadi UNPAD
SHEAR
y
y
(0,1)
(0,0)
y
y
(1,1)
(1,0)
(2,1)
x
(0,0) (1,0)
(0,1)
(3,1)
y
(1,1)
(1,1)
(2,1)
(1/2,0)
(0,0)
x
(1,0)
x
(3/2,0)x
(0,-1)
(0,3/2) (1,2)
y
(1,1)
(0,1/2) (1,1)
(1,0)
Grafika Komputer
x
(-1,0)
x
3.12
Setiawan Hadi UNPAD
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)`
a
 T    c
 m
Grafika Komputer
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
 1

T

   0
  m
 x*

Grafika Komputer
y
*
0
1
n
1    x
0

0

1 
 co s 

 sin 

 0
y
1  T
3.15
sin 
co s 
0
0

0

1 
1

0

 m
0
1
n
0

0

1 

Setiawan Hadi UNPAD
ILUSTRASI
 1

0

  m
Grafika Komputer
0
1
n
 co s 

 sin 

 0
0

0

1 
3.16
sin 
co s 
0
0

0

1 
1

0

 m
0
1
n
0

0

1 
Setiawan Hadi UNPAD
Ilustrasi Lainnya
(xr,y
r)
Translate
Grafika Komputer
(xr,y
r)
(xr,y
r)
Rotate
3.17
(xr,y
r)
Translate
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:
 T    Tr  R ot  R   R ot
Grafika Komputer
3.18
1
 Tr

1


Setiawan Hadi UNPAD
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.
2.
3.
4.
Gambarkan objek asli
Tentukan MTU
Tentukan Koordinat Objek Baru
Gambarkan objek hasil transformasi
Grafika Komputer
3.19
Setiawan Hadi UNPAD
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
Grafika Komputer
3.22
Setiawan Hadi UNPAD
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
3.25
Setiawan Hadi UNPAD
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+
 Visual Studio .NET/C#
– WPF, Silverlight
– Flash
– 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:
–
–
–
–
Grafika Komputer
Teori dasar
Algoritma Penggambaran Garis
Algoritma Penggambaran Lingkaran
Transformasi 2 dimensi (NON HOMOGEN)
3.32
Setiawan Hadi UNPAD

similar documents