Post on 13-Mar-2019
Grafika Komputer
Evangs Mailoa
Translasi
Skala
Rotasi/Putar
• Konsep yang terpenting dalam grafikakomputer adalah Transformasi Affine.
• Pada dasarnya, transformasi iniadalah memindahkan objek tanpamerusak bentuk.
• Satu contoh transformasi adalah transformasidari jendela (window) ke viewport.
• Disini kita telah melihat citra dalam jendeladunia di-skala dan dipindahkan ke jendelaviewport.
• Kita akan membuat transformasi sejenis untukmemindahkan objek ke lokasi yang kompleks.
Transformasi 2D dan 3D terdiri dari:
–Rotation
–Skala
–Translasi
–Shearing
Transformasi memperkenankan untuk:
1. Komposisi pemandangan
2. Memudahkan membuat objek yang simetris
3. Melihat objek dari sudutpandang yang berbeda
4. Animasi komputer denganbeberapa objek untukberpindah dari satutempat ke tempat lain.
• OpenGL membuat transformasi mudah.
• Tetapi ini bukan alasan untuk tidak mempelajari
transformasi secara rinci.
Transformasi secara sederhana dapatdikatakan sebagai mengambil titik danmemetakannya ke lokasi lain.
Dalam kasus 2D, ini berarti:
– Untuk P = (Px, Py, 1)T dan Q = (Qx, Qy, 1)T
– P adalah pada lokasi P = Pxi+Pyj + ξ (sama untuk Q)
maka, Q = M (Px, Py, 1)T atau Q = M(P)
Dengan M adalah matrik pemetaan
P
Q
Latihan:
– Jika P = (3,4) dan Q = (5, 7) berapakah M ?
– (5,7,1)T = M (3,4,1)T
– Kita ingin menaikkan Px dengan 2 dan Py dengan 3. Berapakah M ??
1100310201
1PP
y
x
y
x
• Memindahkan titik/objek dalamarah x, y dan atau z.
• Ini berarti bahwa nilainyaditambah atau dikurangidengan nilai tertentu.
11001001
1PP
dPdP
y
x
y
x
y
x
P
Q
dPx
dPy
Contoh: Tentukanmatriks translasi untukmemindahkan titikP=(4,6) ke Q=(10,3) ?
164
100310
601
13
10
P
Q
Berubah dalam X
Berubah dalam Y
Contoh: Tentukanmatriks translasi untukmemindahkan titikP=(4,6,2) ke Q=(10,3,5) ?
1
2
6
4
1000
3100
3010
6001
1
5
3
10
P
Q
Berubah dalam X
Berubah dalam Y
Berubah dalam Z
Nilai koordinat x, y, danatau z dikalikan denganbilangan skalar.
11000000
1PP
sPsP
y
x
y
x
y
x
P
Contoh: Tentukan matriks skala untukmenskala titik P = (6,2) ke Q = (3,4)
126
10002000
143 2
1
P
Contoh: Tentukan matriks skala untukmenskala titik P = (6,2,9) ke Q = (3,4,3)
1
9
2
6
1000
03
100
0020
0002
1
1
3
4
3
P
• Koordinat x,y dan atau z diputar ke sekeliling titikreferensi.
PBagaimana kita menghitung rotasi titik
P ke titik Q?
P
Q
ФӨ
Gunakan right-angles dan trigonometri.
Kita tahu bahwa
P(x,y) = (R cos(Ф), R sin(Ф) )
dan
Q(x,y) = (R cos(Ө+Ф), R sin(Ө +Ф) )
Dari trigonometri:
cos(Ө+Ф) = cos(Ө)cos(Ф) –sin(Ө)sin(Ф)
sin(Ө +Ф) = sin(Ө)cos(Ф) + cos(Ө)sin(Ф)y = R sin
(Ф)
x = R sin (Ф)
Gunakan right-angles dan trigonometri.
Qx = R cos(Ө+Ф) = R cos(Ө)cos(Ф) – R sin(Ө)sin(Ф)
Qy = R sin(Ө +Ф) ) = R sin(Ө)cos(Ф) + R cos(Ө)sin(Ф)
Menggunakan P(x,y) = (R cos(Ф), R sin(Ф) )
didapatkan
Qx = Pxcos(Ө) – Pysin(Ө)
Qy = Pxsin(Ө) + Pycos(Ө)
• Matriks rotasi:
11000)cos()sin(0)sin()cos(
1PP
y
x
y
x
• Ada 3 jenis rotasi
• Rotasi pada sumbu x, y dan z
• Putaran Z sama denganperputaran dalam 2D sebagai objek putarantara sumbu x dan y
11 1000
0100
00)cos()sin(
00)sin()cos(
PPP
Q
z
y
x
z
y
x
Sudut rotasi positif dengan aturan tangan kanan.
• Putaran X adalah rotasi antara sumbu y dan z.
11 1000
0)cos()sin(0
0)sin()cos(0
0001
PPP
Q
z
y
x
z
y
x
Putaran Y adalah rotasi antara sumbu x dan z .
11 1000
0)cos(0)sin(
0010
0)sin(0)cos(
PPP
Q
z
y
x
z
y
x
• Shearing
– Shearing berarti bahwa sebuah titik ditarik kearah tertentu.
• Shearing terjadi sepanjanggaris.
• Dalam contoh ini, shear terjadi sepanjang sumbu x.
• Atau:
– Qx = Px + hPy;
– Qy = Py;
110001001
1PPh
y
x
y
x
Kombinasi Transformasi• Rotasi, skala, translasi dan Shearing dapat
dikombinasikan ke dalam satu matriks.
• Contoh: jika kita ingin untuk mentranslasisebuah objek, memutarnya dan kemudianmenskala, maka matriks transformasi T:
1001001
1000)cos()sin(0)sin()cos(
1000000
dPdP
sPsP
y
x
y
x
• Transformasi Affine mempertahankangaris dan bidang.
–Mempertahankan keliniearan dankedatarannya
• Garis tetap sebagai garis
• Bidang tetap datar
• Transformasi Affine mempertahankan garisdan bidang.
– Jika 2 garis paralel dikenakan transformasiyang sama maka hasil setelah transformasitetap juga paralel.
– Demikian juga untuk bidang
OpenGL bekerja dengan matriks 4 dimensi.
OpenGL akan mengerjakan transformasi affine untuk kita.
Akan menghasilkan segiempat warna hijau:
glColor3f (0.0, 1.0, 0.0);
glRectf (300.0, 200.0, 400.0, 300.0);
Pemrograman
PemrogramanSekarang akan ditranslasikan glTranslated( x, y, z) danwarnanya diganti dengan warna biru
void display(void){
glColor3f (0.0, 1.0, 0.0);glRectf (300.0, 200.0, 400.0, 300.0);
glColor3f (0.0, 0.0, 1.0);glPushMatrix();
glTranslated(150,150,0);glRectf (300.0, 200.0, 400.0, 300.0);
glPopMatrix();
glFlush ();}
Pemrograman
Atau diputar glRotate(degrees, x, y, z); danwarnanya diganti dengan merah.
void display(void){
glColor3f (0.0, 1.0, 0.0);glRectf (300.0, 200.0, 400.0, 300.0);
glColor3f (1.0, 0.0, 0.0);glPushMatrix();
glRotatef(30.0f, 0.0f, 0.0f, 1.0f); glRectf (300.0, 200.0, 400.0, 300.0);
glPopMatrix();
glFlush ();}
Pemrograman
Atau diskala glScaled(x, y, z); dan warnanya digantidengan kuning
void display(void){
glColor3f (0.0, 1.0, 0.0);glRectf (300.0, 200.0, 400.0, 300.0);
glColor3f (1.0, 1.0, 0.0);glPushMatrix();
glScalef(0.5f, 0.5f, 1.0f); glRectf (300.0, 200.0, 400.0, 300.0);
glPopMatrix();
glFlush ();}
Atau kombinasi ketiganyavoid display(void){
glColor3f (0.0, 1.0, 0.0);glRectf (300.0, 200.0, 400.0, 300.0);
glColor3f (0.0, 1.0, 1.0);glPushMatrix();
glRotatef(30.0f, 0.0f, 0.0f, 1.0f); glScalef(0.5f, 0.5f, 1.0f); glTranslated(150,150,0);glRectf (300.0, 200.0, 400.0, 300.0);
glPopMatrix();
glFlush ();}
Pemrograman
• Dan kita harus mengalikan matriks transformasidengan urutan terbalik demikian juga denganOpenGL.
• Contoh untuk melakukan transformasi darisegiempat dengan ditranslasi, diskala dankemudian dirotasi maka kodenya adalah :
glRotatef(30.0f, 0.0f, 0.0f, 1.0f); glScalef(0.5f, 0.5f, 1.0f); glTranslated(150,150,0);glRectf (300.0, 200.0, 400.0, 300.0);
Pemrograman
Saat mau memulainya nampakkompleks, tetapi sebenarnyacukup mudah.
Saluran OpenGL : matriks pandangan model, matriksproyeksi, dan matriks viewport.
• Matriks Proyeksi
– set dengan glOrtho(left, right, bottom, top, near, far)
left right
top
bottom
near
far
• Matriks Pandangan model
– Disamping dengan glTranslated, glScaled and glRotated…, juga digunakan
– gluLookAt(eye.x, eye.y, eye.z, lookat.x, lookat.y, lookat.z, up.x, up.y, up.z);
Posisi mata
(x, y, z)
Arah ke atas
Mau bertanya..?