1. Fungsi dasar pembuatan interaksi dengan menggunakan
MouseFunction
GLUTAPI void APIENTRY glutMouseFunc(void (GLUTCALLBACK *func)(int button, int state, int x, int y));
Paramater func adalah fungsi yang akan ditangani dengan event klik mouse.
GLUTAPI void APIENTRY glutMotionFunc(void *func(int x, int y));
Fungsi di atas adalah fungsi pelengkap dari fungsi interaksi mouse untuk mendeteksi gerakan mouse.
2. Inisialisasi dalam penggunaan MouseFunction void mouse(int button, int state, int x,int y){
if(button==GLUT_LEFT_BUTTON && state==GLUT_DOWN) drawDot(x,480-y);
if(button==GLUT_RIGHT_BUTTON && state==GLUT_DOWN)
if(button==GLUT_MIDDLE_BUTTON && state==GLUT_DOWN)
drawDot3(x,480-y); }
void motion(int x,int y){ }
Syntax Kegunaan
GLUT_LEFT_BUTTON untuk inisialisasi button mouse kiri.
GLUT_RIGHT_BUTTON untuk inisialisasi button mouse kanan.
GLUT_MIDDLE_BUTTON untuk inisialisasi button mouse tengah.
GLUT_DOWN untuk inisialisasi ketika
tombol mouse ditekan.
GLUT_UP untuk inisialisasi ketika
tombol mouse dilepaskan.
Pada fungsi main program perlu menambahkan fungsi untuk callback fungsi MouseFunction.
glutMouseFunc(mouse); glutMotionFunc(motion);
CONTOH PROGRAM #include<stdlib.h> #include<glut.h> #include<stdio.h> float x = 0, y = 0, z = 0; int w = 480, h = 480; void drawQuad() { glBegin(GL_QUADS); glVertex2i(0,0); glVertex2i(0,40); glVertex2i(40,40); glVertex2i(40,0); glEnd(); }
void timer(int value){ glutPostRedisplay(); glutTimerFunc(50,timer,0); }
void mouse(int button, int state, int xmouse, int ymouse){ if(button==GLUT_LEFT_BUTTON && state==GLUT_DOWN){
x = xmouse-(w/2); y = (h/2) - ymouse; }
if(button==GLUT_MIDDLE_BUTTON && state==GLUT_DOWN){ glScalef(1.1,1.1,0);
}
if(button==GLUT_RIGHT_BUTTON && state==GLUT_DOWN){ glScalef(2.0,2.0,0);
}
if(button==GLUT_RIGHT_BUTTON && state==GLUT_UP){ glScalef(0.5,0.5,0);
} }
void motionku(int x, int y) {
printf("posisi pointer mouse (%d,%d)\n", x,y); }
void renderScene(void){
glClear(GL_COLOR_BUFFER_BIT); glPushMatrix(); glTranslatef(x,y,z); drawQuad(); glPopMatrix(); glFlush(); }
void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(w,h); glutCreateWindow("indra&rachmat"); //glClearColor(1,1,1,0); gluOrtho2D(-100, 100, -100, 100); glutDisplayFunc(renderScene); glutTimerFunc(50, timer, 0); glutMouseFunc(mouse); glutMotionFunc(motionku); glutMainLoop(); } Output
KESIMPULAN
Interaksi manusia dengan komputer adalah sebuah hubungan antara manusia dan komputer yang mempunyai karakteristik tertentu untuk mencapai suatu tujuan tertentu dengan menjalankan sebuah sistem yang bertopengkan sebuah antarmuka (interface).
Mouse komputer adalah perangkat komputer yang berfungsi untuk menggerakkan pointer atau menunjuk perintah pada layar monitor.
Jenis-jenis mouse: Mouse Mekanis Mouse Optical Mouse Wireless
Paramater func adalah fungsi yang akan ditangani dengan event klik mouse. Berikut syntaxnya:
GLUTAPI void APIENTRY glutMouseFunc(void (GLUTCALLBACK *func)(int button, int state, int x, int y));
GLUTAPI void APIENTRY glutMotionFunc(void *func(int x, int y));
Fungsi di atas adalah fungsi pelengkap dari fungsi interaksi mouse untuk mendeteksi gerakan mouse.
BAB 7
ANIMASI OBJEK 2D
Animasi berasal dari kata dalam bahasa inggris yaitu animate yang artinya menghidupkan, memberi jiwa dan mengerakan benda mati. Animasi merupakan proses membuat objek yang asalnya suatu benda mati, kemudian secara berurutan disusun dalam posisi yang berbeda seolah menjadi hidup. Ditemukannya prinsip dasar animasi adalah dari karakter mata manusia yaitu : persistance of vision (pola penglihatan yang teratur). Paul Roget, Joseph Plateau dan Pierre Desvigenes, melalui peralatan optik yang mereka ciptakan, berhasil membuktikan bahwa mata manusia cenderung menangkap urutan gambar-gambar pada tenggang waktu tertentu sebagai sebuah pola.Animasi secara umum bisa didefinisikan sebagai “suatu sequence gambar yang ditampilkan pada tenggang waktu (timeline) tertentu sehingga tercipta sebuah ilusi gambar bergerak”. Pengertian animasi pada dasarnya adalah menggerakkan objek agar tampak lebih dinamis.
Ada 4 jenis animasi menurut Hofstetter (2001, p26):
1. Frame Animation : Suatu animasi yang dibuat dengan mengubah objek pada setiap frame. Objek-objek tersebut nantinya akan tampak pada lokasi-lokasi yang berbeda pada layar.
2. Vector Animation : Suatu animasi yang dibuat dengan mengubah bentuk suatu objek.
3. Computational Animation : Suatu animasi yang dibuat dengan memindahkan objek berdasarkan koordinat x dan y. Koordinat x untuk posisi horizontal dan posisi y untuk posisi vertical.
4. Morphing : Peralihan satu bentuk objek ke bentuk objek lainnya dengan memanipulasi lebih dari satu frame sehingga nantinya akan dihasilkan keseluruhan gerakan yang sangat lembut untuk menampilan perubahan satu sampai perubahan bentuk lainnya.
Animasi pada awalnya bisa dikatakan sangat sederhana, namun sekarang telah berkembang dan dibedakan menjadi 3 teknologi , yaitu:
1. Animasi dua dimensi (2D),
Sering disebut film kartun. Kartun sendiri berasal dari kata cartoon, artinya gambar yang lucu. Memang film kartun ini kebanyakan film yang lucu misalnya :
Looney Tunes
Scooby Doo
Doraemon Legenda
Raja Matahari,
The Lion King
2. Animasi tiga dimensi (3D),
Finding Nemo, inilah contoh film animasi yang disebut animasi 3D atau computer generated image (CGI). CGI menghasilkan film animasi yang gambarnya benar-benar hidup dan tiga dimensi, tak sekedar datar. Salah satu studio CGI yang terbesar adalah Pixar yang berlokasi di Emeryville, California. Selain Finding Nemo, Pixar juga memproduksi Monsters.Inc, Toy Story, Toy Story 2, dan A Bugs Life. Toy Story ini merupakan film animasi panjang pertama yang menggunakan 100 persen animasi computer.
3. Animasi clay,
Film animasi clay pertama diliris bulan Februari 1908 berjudul A Sculptor’s Welsh Rarebit Nightmare. Kalau masih susah membayangkan seperti apa animasi clay ini, tonton saja film Bob the Builder di TV, Wallace and Gromit, atau Chiken Run.Tokoh-tokoh dalam animasi clay dibuat dengan memakai rangka khusus untuk kerangka tubuhnya. Lalu, kerangka ini ditutup dengan plasticine sesuai bentuk tokoh yang ingin dibuat. Bagian-bagian tubuh kerangka ini, seperti kepala, tangan, kaki, bisa dilepas dan dipasang lagi.
Animasi Objek 2D OpenGL
Dalam animasi objek OpenGL, dikenal istilah transformasi. Transformasi merupakan suatu metode untuk mengubah lokasi suatu titik pembentukobjek, sehingga objek tersebut mengalami perubahan. Perubahan objek dengan mengubahkoordinat dan ukuran suatu objek disebut dengan transformasi geometri. Dalam Transformasi dasar yang akan dibahas meliputi translasi, skala, dan rotasi.
Pada grafika komputer, sistem koordinat suatu objek dapat di transformasi. Transformasi ini memungkinkan terjadinya perpindahan posisi suatu objek tanpa harus membuat model objek yang baru. Jenis-jenis transformasi yang sering digunakan pada grafika komputer dibagi menjadi 3 macam, yaitu translasi, rotasi, dan skalasi.
Translasi (Translation)
Translasi merupakan bentuk transformasi yang memindahkan posisi suatu objek, baik pada sumbu x, sumbu y, atau sumbu z. Fungsi yang digunakan untuk melakukan translasi adalah:
glTranslatef(Tx, Ty, Tz) glTranslated(Tx, Ty, Tz)
Tx digunakan untuk menentukan arah dan seberapa jauh suatu benda akan dipindahkan berdasarkan sumbu x. Parameter Ty digunakan untuk menentukan arah dan seberapa jauh suatu benda akan dipindahkan berdasarkan sumbu y. Sedangkan parameter Tz digunakan untuk menentukan arah dan seberapa
jauh suatu benda akan dipindahkan berdasarkan sumbu z (berlaku pada model 3D).
Contoh:
Diketahui titik-titik pembentuk objek segitiga yaiu A(10,10), B(30,10), C(10,30) dengan transformasi vector (10,20) lakukan trnslasi terhadap objek segitiga tersebut:
Titik A x’A = xA + tx y’A = yA + ty = 10 + 10 = 10 + 20 = 20 = 30 A’(20,30) Titik B x’B = xB + tx y’B = yB + ty = 30 + 10 = 10 + 10 = 40 = 20 B’(40,20) Titik C x’C = xC + tx y’C = yC + ty = 10 + 10 = 30 + 20 = 20 = 50
Rotasi (Rotation)
Rotasi merupakan bentuk transformasi yang digunakan untuk memutar posisi suatu benda. Fungsi yang digunakan untuk melakukan rotasi ialah:
glRotatef(θ, Rx, Ry, Rz) glRotated(θ, Rx, Ry, Rz)
Parameter yang dibutuhkan pada fungsi tersebut ada 4 macam, yaitu parameter θ untuk besar sudut putaran, parameter Rx untuk putaran berdasarkan sumbu x, parameter Ry untuk putaran berdasarkan sumbu y, dan parameter Rz untuk putaran berdasarkan sumbu z. Jika parameter θ bernilai postif, maka objek akan diputar berlawanan arah jarum jam. Sedangkan jika parameter θ bernilai negatif, maka objek akan diputar searah jarum jam.
Contoh :
Diketahui objek segitiga dengan titik A(10,10), B(30,10), C(10,30) di skala denganscaling factor (3,2).
Titik A x’A = xA * tx y’A = yA * ty = 10 * 3 = 10 * 2 = 30 = 20 A’(30,20) Titik B x’B = xB * tx y’B = yB * ty = 30 * 3 = 10 * 2 = 90 = 20
B’(90,20) Titik C x’C = xC * tx y’C = yC * ty = 10 * 3 = 30 * 2 = 30 = 60 C’(30,60)
Skalasi (Scaling)
Skalasi merupakan bentuk transformasi yang dapat mengubah ukuran(besar-kecil) suatu objek. Fungsi yang digunakan untuk melakukan skalasi ialah:
glScalef(Sx, Sy, Sz) glScaled(Sx, Sy, Sz)
Perubahan ukuran suatu objek diperoleh dengan mengalikan semua titik atau atau vertex pada objek dengan faktor skala pada masing-masing sumbu (parameter Sx untuk sumbu x, Sy untuk sumbu y, dan Sz untuk sumbu z).
Contoh:
Diketahui titik-titik pembentuk objek segitiga yaiu A(10,10), B(30,10), C(10,30) dengan sudut rotasi 300 terhadap titik pusat koordinat cartesian (10,10).
Titik A
X’A = Xp + (XA – Xp)Cos 300 – (YA- YP)Sin 300 = 10 + (10 -10) * 0.9 – (10-10) * 0.5
Y’A = YP + (XA – XP)Sin 300 + (YA – YP)Cos 300 = 10 + (10 – 10) * 0.5 + (10 – 10) * 0.9
= 10 A’(10,10)
Titik B
X’B = Xp + (XA – Xp)Cos 300 – (YA- YP)Sin 300 = 10 + (30 -10) * 0.9 – (10-10) * 0.5
= 28
Y’B = YP + (XA – XP)Sin 300 + (YA – YP)Cos 300 = 10 + (30 – 10) * 0.5 + (10 – 10) * 0.9
= 20 B’(28,20)
Titik C
X’C = Xp + (XA – Xp)Cos 300 – (YA- YP)Sin 300 = 10 + (10 -10) * 0.9 – (30-10) * 0.5
= 0
Y’C = YP + (XA – XP)Sin 300 + (YA – YP)Cos 300 = 10 + (10 – 10) * 0.5 + (30 – 10) * 0.9
= 28 C’(0,28)
Refleksi
Refleksi adalah transformasi yang membuat mirror
(pencerminan) dari image suatu objek. Image mirror untuk refleksi 2D dibuat relatif terhadap sumbu dari refleksi dengan
memutar 180o terhadap refleksi. Sumbu refleksi dapat dipilih pada bidang x,y. Refleksi terhadap garis y=0, yaitu sumbu x dinyatakan dengan matriks.
[1 0 0
0 −1 0]
Transformasi membuat nilai x sama tetapi membalikan nilai y berlawanan dengan posisi koordinat. Langkah:
Objek diangkat Putar 180o
terhadap sumbu x dalam 3D
Letakkan pada bidang x,y dengan posisi berlawanan Refleksi terhadap sumbu y membalikan koordinat dengan
nilai y tetap. [−1 0 0
0 1 0]
Refleksi terhadap sumbu x dan y sekaligus dilakukan dengan refleksi pada sumbu x terlebih dahulu, hasilnya kemudia direfleksi terhadap sumbu y. Transformasi ini dinyatakan dengan:
[−1 0 0
0 −1 0]
Refleksi ini sama dengan rotasi 180o pada bidang xy dengan koordinat menggunakan titik pusat koordinat sebagai pivot point. Refleksi suatu objek terhadap garis y=x dinyatakan dengan bentuk matriks
[0 1 0 1 0 0]
Matriks dapat diturunkan dengan menggabungkan suatu sekuen rotasi dari sumbu koordinat merefleksi matriks. Pertama-tama
dilakukan rotasi searah jarum jam dengan sudut 45o yang memutar garis y=x terhadap sumbu x. Kemudian objek direfleksi terhadap sumbu y, setelah itu objek dan garis y=x dirotasi kembali ke arah posisi semula berlawanan arah dengan jarum jam dengan sudut rotasi 90o. Untuk mendapatkan refleksi terhadap garis y=-x dapat dilakukan dengan tahap:
Rotasi 45o
searah jarum jam Refleksi terhadap axis y Rotasi 90o
berlawanan arah dengan jarum jam Dinyatakan dengan bentuk matriks
[ 0 −1 0
−1 0 0]
Refleksi terhadap garis y=mx+b pada bidang xy merupakan kombinasi transformasi translasi – rotasi – refleksi .
Lakukan translasi mencapai titik perpotongan koordinat Rotasi ke salah satu sumbu
Refleksi objek menurut sumbu tersebut
Shear
Shear adalah bentuk transformasi yang membuat distorsi dari bentuk suatu objek, seperti menggeser sisi tertentu. Terdapat dua macam shear yaitu shear terhadap sumbu x dan shear terhadap sumbu y.
[1 𝑠ℎ𝑥 0 0 −1 0]
Dengan koordinat transformasi x’= x + shx.y y’=y
parameter shx dinyatakan dengan sembarang bilangan. Posisi kemudian digeser menurut arah horizontal.
Shear terhadap sumbu y
[ 1 0 0
𝑠ℎ𝑦 1 0]
Dengan koordinat transformasi x’=x y’= shy.x+y parameter shy dinyatakan dengan sembaran bilangan. Posisi koordinat kemudian menurut arah vertikal.
Timer Function
Contoh Program1. Berikut merupakan contoh program yang menggunakan fungsi drawQuad, serta transformasi terhadap sumbu ynegatif. #include<stdlib.h> #include<glut.h> int y = 0; void drawQuad(){ glBegin(GL_QUADS); glColor3d(0,0.6,0.9); glVertex2f(-50,50); glColor3d(0.5,0.7,0.3); glVertex2f(-50,-50); glColor3d(0.9,0.2,0.6); glVertex2f(50,-50); glColor3d(0.5,0.8,0.8); glVertex2f(50,50);
glEnd(); }
void timer(int value){ if (y<200) { y-= 10; } glutPostRedisplay(); glutTimerFunc(200,timer,0); } void renderScene(){ glClear(GL_COLOR_BUFFER_BIT); glPushMatrix(); glColor3d(0,0,1); glTranslatef(0,y,0); drawQuad(); glPopMatrix(); glFlush(); }
void main(int argc, char **argv){ glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA);
glutInitWindowPosition(100,100); glutInitWindowSize(480,480);
glutCreateWindow("Timer Translasi Y"); glClearColor(0.2,0.2,0.2,0); gluOrtho2D(-320,320,-320,320); glutDisplayFunc(renderScene); glutTimerFunc(100,timer,0); glutMainLoop(); } Output:
2 1
2. Program baling-baling yang dapat berputar unclockwise dengan pusatnyaberada pada pusat koordinat.
#include<stdlib.h> #include<glut.h> int rotasi, x, y, z = 0; void segitiga(){ glBegin(GL_TRIANGLES); glColor3d(0,0.6,0.9); glVertex2f(0,0); glColor3d(0.5,0.7,0.3); glVertex2f(100,150); glColor3d(0.9,0.2,0.6); glVertex2f(-100,150); glEnd(); }
void timer(int value){ if(rotasi==0){
x=15;//perubahan sudut
3
if (y<200) { y-= 10; }
} rotasi-=x; glutPostRedisplay(); glutTimerFunc(100,timer,0); } void renderScene(){ glClear(GL_COLOR_BUFFER_BIT); glPushMatrix(); glRotatef(-rotasi,0,0,1);//unclockwise segitiga(); glPopMatrix(); glPushMatrix(); glRotatef(180,1,0,0);//rotasi segitiga glRotatef(rotasi,0,0,1);//clockwise segitiga(); glPopMatrix(); glFlush(); }
void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(480,480); glutCreateWindow("Baling-Baling unClockwise"); glClearColor(0.2,0.2,0.2,0); gluOrtho2D(-320,320,-320,320); glutDisplayFunc(renderScene); glutTimerFunc(50,timer,0); glutMainLoop(); }