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

QQ

y

x

y

x

• Memindahkan titik/objek dalamarah x, y dan atau z.

• Ini berarti bahwa nilainyaditambah atau dikurangidengan nilai tertentu.

11001001

1PP

dPdP

QQ

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

QQ

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

QQ

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

QQ

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

QQ

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

QQ

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

QQ

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