Grafika Komputer Evangs Mailoa
Translasi Skala Rotasi/Putar
• Konsep yang terpenting dalam grafika komputer adalah Transformasi Affine. • Pada dasarnya, transformasi ini adalah memindahkan objek tanpa merusak bentuk.
• Satu contoh transformasi adalah transformasi dari jendela (window) ke viewport. • Disini kita telah melihat citra dalam jendela dunia di-skala dan dipindahkan ke jendela viewport. • Kita akan membuat transformasi sejenis untuk memindahkan 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 sudut pandang yang berbeda
4. Animasi komputer dengan beberapa objek untuk berpindah dari satu tempat ke tempat lain.
• OpenGL membuat transformasi mudah. • Tetapi ini bukan alasan untuk tidak mempelajari transformasi secara rinci.
Transformasi secara sederhana dapat dikatakan sebagai mengambil titik dan memetakannya 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
Q P
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 ??
Q Q 1
x y
1 0 2 P 0 1 3 P 0 0 1 1
x y
• Memindahkan titik/objek dalam arah x, y dan atau z.
• Ini berarti bahwa nilainya ditambah atau dikurangi dengan nilai tertentu. dPx
Q Q 1
x y
1 0 dP P 0 1 dP P 0 0 1 1
Q
P
dPy
x
x
y
y
Contoh: Tentukan matriks translasi untuk memindahkan titik P=(4,6) ke Q=(10,3) ?
Berubah dalam X
10 3 1
1 0 0 1 0 0
6 4 3 6 1 1
P Q
Berubah dalam Y
Contoh: Tentukan matriks translasi untuk memindahkan titik P=(4,6,2) ke Q=(10,3,5) ?
Berubah dalam X
10 3
1 0 0 0 1 0
6 4 3 6
5
0 0 1
3
2
1
0 0 0
1
1
Berubah dalam Y
P
Berubah dalam Z Q
Nilai koordinat x, y, dan atau z dikalikan dengan bilangan skalar.
Q Q 1 P
x y
sP 0 0 P 0 sP 0 P 0 0 1 1 x
y
x y
Contoh: Tentukan matriks skala untuk menskala titik P = (6,2) ke Q = (3,4)
P
3 4 1
1
0 0 6 0 2 0 2 0 0 1 1 2
Contoh: Tentukan matriks skala untuk menskala titik P = (6,2,9) ke Q = (3,4,3) 3
P
1
0 6 0 2
0
0
0 1 0 9 3 0 1 1
4
2 0 2
3
0
0
1
0
0
• Koordinat x,y dan atau z diputar ke sekeliling titik referensi.
Q
P Ө
P
Ф
Bagaimana kita menghitung rotasi titik P ke titik 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(Ф) y = R sin (Ф)
x = R sin (Ф)
sin(Ө +Ф) = sin(Ө)cos(Ф) + cos(Ө)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:
Q Q 1
x y
cos( ) sin( ) 0 P sin( ) cos( ) 0 P 0 0 1 1
x y
• Ada 3 jenis rotasi • Rotasi pada sumbu x, y dan z
• Putaran Z sama dengan perputaran dalam 2D sebagai objek putar antara sumbu x dan y Q Q Q 1
x y z
cos( )
sin( ) 0 0
sin( ) 0
cos( ) 0
0 0 1 0
0
0
0 1
P P P 1
x y z
Sudut rotasi positif dengan aturan tangan kanan.
• Putaran X adalah rotasi antara sumbu y dan z.
Q Q Q 1
x y z
1
0
0 cos( ) 0 sin( ) 0
0
0
0
sin( ) 0 cos( ) 0 0
1
P P P 1
x y z
Putaran Y adalah rotasi antara sumbu x dan z .
Q Q Q 1
x y z
cos( )
0 sin( )
0
0 1 0 0 sin( ) 0 cos( ) 0 0
0
0
1
P P P 1
x y z
• Shearing – Shearing berarti bahwa sebuah titik ditarik ke arah tertentu.
• Shearing terjadi sepanjang garis. • Dalam contoh ini, shear terjadi sepanjang sumbu x. • Atau: – Qx = Px + hPy; Q x – Qy = P y ;
Q 1
y
1 h 0 P 0 1 0 P 0 0 1 1
x y
Kombinasi Transformasi • Rotasi, skala, translasi dan Shearing dapat dikombinasikan ke dalam satu matriks. • Contoh: jika kita ingin untuk mentranslasi sebuah objek, memutarnya dan kemudian menskala, maka matriks transformasi T: sP 0 0 cos( ) sin( ) 0 1 0 dP 0 sP 0 sin( ) cos( ) 0 0 1 dP 0 0 1 0 0 1 0 0 1 x
y
x y
• Transformasi Affine mempertahankan garis dan bidang. – Mempertahankan keliniearan dan kedatarannya • Garis tetap sebagai garis • Bidang tetap datar
• Transformasi Affine mempertahankan garis dan bidang. – Jika 2 garis paralel dikenakan transformasi yang sama maka hasil setelah transformasi tetap juga paralel. – Demikian juga untuk bidang
Pemrograman 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 Sekarang akan ditranslasikan glTranslated( x, y, z) dan warnanya 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); dan warnanya 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 diganti dengan 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 (); }
Pemrograman Atau kombinasi ketiganya void 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 transformasi dengan urutan terbalik demikian juga dengan OpenGL. • Contoh untuk melakukan transformasi dari segiempat dengan ditranslasi, diskala dan kemudian 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);
Saat mau memulainya nampak kompleks, tetapi sebenarnya cukup mudah.
Saluran OpenGL : matriks pandangan model, matriks proyeksi, dan matriks viewport.
• Matriks Proyeksi – set dengan glOrtho(left, right, bottom, top, near, far) far
near
top
bottom left
right
• 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..?