laporan modul iv grafika.docx

LAPORAN MODUL IV

PRAKTIKUM GRAFIKA KOMPUTER

INTERAKSI DENGAN KEYBOARD DAN MOUSE

Disusun untuk Memenuhi Matakuliah Praktikum Grafika Komputer

Yang Dibimbing oleh Bapak Heru Wahyu Herwanto, S.T., M.Kom

.

OLEH:

Putri Rizky Rahmania

130533608286

S1 PTI 2013 OFF A

UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK

JURUSAN TEKNIK ELEKTRO

S1 PENDIDIKAN TEKNIK INFORMATIKA

Maret , 2015

Modul 4

Interaksi dengan Keyboard dan Mouse

A. TUJUAN

1. Memahami prinsip-prinsip deteksi input berupa interaksi dari keyboard.

2. Membuat objek 2D yang dikendalikan dengan keyboard.

3. Memahami prinsip-prinsip pembuatan interaksi objek 2D menggunakan mouse.

4. Membuat interaksi objek 2D menggunakan mouse.

B. DASAR TEORI

INTERAKSI KEYBOARD

1. Fungsi dasar pembuatan animasi dengan menggunakan KeyboardFunction

GLUTAPI void APIENTRY glutKeyboardFunc(void (GLUTCALLBACK

*func)(unsigned char key, int x, int y));

Dalam penggunaan glutKeyboardFunc dimungkinkan untuk mendeteksi

input dari keyboard. Fungsi ini diletakkan pada fungsi main dari program, dan

parameternya adalah callback function yang telah didefinisikan berupa fungsi

dengan 3 parameter, seperti contoh di bawah ini.

void myKeyboard(unsigned char key, int x, int y){

if(key == 'a') glTranslatef(4,0,0); //seleksi tombol yang

ditekan

}

void mySpecialKeyboard(int key, int x, int y){ switch(key){

case GLUT_KEY_??? : …; break; }

}

Agar fungsi keyboard ini dapat dideteksi terus maka fungsi untuk

animasi (update) harus telah disertakan.

Untuk fungsi callback yang memanggil tombol keyboard normal/biasa adalah

glutKeyboardFunc(myKeyboard); //hanya memanggil fungsi

myKeyboard

Sedangkan untuk mendeteksi tombol-tombol keyboard yang bersifat

spesial seperti tombol F1, arah panah, Home, Enter, dsb dapat menggunakan

callback function

glutSpecialFunc(mySpecialKeyboard); //hanya memanggil fungsi

mySpecialKeyboard

Untuk tombol - tombol spesialnya adalah sebagai berikut

INTERAKSI MOUSE

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)

drawDot2(x,480-y);

if(button==GLUT_MIDDLE_BUTTON && state==GLUT_DOWN)

drawDot3(x,480-y);

}

void motion(int x,int y){

}

GLUT_LEFT_BUTTON untuk inisialisasi button mouse kiri.

GLUT_RIGHT_BUTTON untuk inisialisasi button mouse kanan.

GLUT_MIDDLE_BUTTON untuk inisialisasi button mouse tengah.

Fungsi dari GLUT_DOWN adalah untuk inisialisasi ketika tombol mouse

ditekan. Fungsi dari GLUT_UP adalah untuk inisialisasi ketika tombol mouse

dilepaskan.

Kemudian pada main program perlu menambahkan fungsi untuk callback

fungsi MouseFunction.

glutMouseFunc(mouse);

glutMotionFunc(motion);

C. LATIHAN PRAKTIKUM

INTERAKSI KEYBOARD

Berikut adalah script dasar untuk kegiatan praktikum interaksi keyboard

dan

glutTimerFunc(50,timer,0);

glutDisplayFunc(display);

glutKeyboardFunc(myKeyboard);

glutSpecialFunc(mySpecialKeyboard);

1. Buatlah project baru pada Visual Studio dengan nama prak4-keyboard1. Berikut

adalah fungsi-fungsi yang harus ditambahkan. Sediakan fungsi drawQuad(); untuk

menggambar sebuah kotak. Fungsi myKeyboard adalah callback function yang

akan dipanggil oleh glutKeyboardFunc(myKeyboard); dan fungsi

tersebut berada di dalam fungsi main.

#include <stdlib.h>#include <glut.h>

int x , y;void drawQuad(){

glBegin(GL_QUADS);glVertex2f(0,0);glVertex2f(0,100);glVertex2f(100,100);glVertex2f(100,0);glEnd();glFlush();

}

void renderScene(){glClear(GL_COLOR_BUFFER_BIT);

drawQuad();}

void myKeyboard(unsigned char key, int x, int y){if(key == 'a') glTranslatef(-4,0,0);else if(key == 'd') glTranslatef(4,0,0);

}

void update(int value){glutPostRedisplay();

glutTimerFunc(50,update,0);}

void display() {glClear(GL_COLOR_BUFFER_BIT);glColor3f(1,0,1);glPushMatrix();glTranslatef(x,0,0);drawQuad();glPopMatrix();glFlush();

}

void main (int argc, char **argv){glutCreateWindow("Putri Rizky Rahmania");glutInitWindowPosition(100,100);glutInitWindowSize(640,480);gluOrtho2D(-320.,320.,-320.,320.);glutDisplayFunc(renderScene);glutTimerFunc(50,update,0);glutKeyboardFunc(myKeyboard);glutMainLoop();

}

Output Program :

Penjelasan :

Terdapat fungsi void drawQuad() yang digunakan untuk membuat

objek berbentuk segi empat. Fungsi void myKeyboard digunakan untuk

pendeklarasian tombol pada keyboard yang dapat mengubah posisi objek segi

empat tersebut. Terdapat 2 macam tombol yang digunakan untuk mengubah

posisi objek, yaitu a untuk mengubah posisi segi empat geser ke kiri dengan

koordinat glTranslatef(-4,0,0);. Dan d untuk mengubah posisi segi empat

geser ke kanan dengan koordinat glTranslatef(4,0,0); .

2. Modifikasi program pada latihan 1 dan tambahkan program pada fungsi

myKeyboard sehingga dapat menggerakkan objek ke atas, ke bawah, ke kanan,

dan ke kiri .


int x,y;void drawQuad() {

glBegin(GL_QUADS);glVertex2f(0.,0.);glVertex2f(0.,100.);glVertex2f(100.,100.);glVertex2f(100.,0.);

glEnd();}

void myKeyboard(unsigned char key, int x, int y){if(key == 'l') glTranslatef(-4,0,0);else if(key == 'r') glTranslatef(4,0,0);else if(key == 'u') glTranslatef(0,4,0);else if(key == 'd') glTranslatef(0,-4,0);

}void update(int value){

glutPostRedisplay();glutTimerFunc(50,update,0);

}void display() {

glClear(GL_COLOR_BUFFER_BIT);glColor3f(1,1,1);glPushMatrix();glTranslatef(x,0,0);drawQuad();glPopMatrix();glFlush();

}void main (int argc, char **argv) {

glutInit(&argc, argv);glutInitWindowPosition(100,100);glutInitWindowSize(240,240);glutCreateWindow("Putri Rizky R");gluOrtho2D(-320.,320.,-320.,320.);glutDisplayFunc(display);glutKeyboardFunc(myKeyboard);glutTimerFunc(50, update, 0);glutMainLoop();

}

Output :

Penjelasan :

Pada praktikum di atas merupakan penyempurnaan dari praktikum sebelumnya

dengan keyboard ‘l’ arah kiri, ‘r’ arah kanan, lalu dengan menambahkan arah

perpindahan atau translasi ke atas dan kebawah menggunakan tombol keyboard u

dan d.

3. Buatlah project baru pada Visual Studio dengan nama prak4-keyboard2. Berikut

adalah cara untuk mendeteksi tombol-tombol keyboard yang memiliki fungsi

spesial.


int a,d,w,x;void renderScene(void){

glClear(GL_COLOR_BUFFER_BIT);glBegin(GL_QUADS);

glVertex2f (0, 0); glVertex2f (0,200 ); glVertex2f (200, 200); glVertex2f (200, 0);

glEnd();glFlush();}

void myKeyboard(unsigned char key, int x, int y){ /*Fungsi myKeyboard untuk memberikan fungsi pada keyboard untuk menjalankan objek*/

if(key=='a') glTranslatef(-4,0,0); /*Fungsi untuk Translasi objek menggunakan kondisi if (kiri)*/

else if (key=='d') glTranslatef(4,0,0);/*kanan*/else if (key=='w') glTranslatef(0,4,0);/*atas*/else if (key=='x') glTranslatef(0,-4,0);/*bawah*/

}void mySpecialKeyboard(int key, int x, int y){/*Deklarasi method myspecialKeyboard beserta variable -variabel*/

switch(key){ /*Menggunakan operator kondisi switch case . Case dideklarasikan dengan tombol kiri, jika tombol arah kiri pada keyboard di tekan maka akan berotasi berlawanan dengan arah jarum jam*/

case GLUT_KEY_LEFT:glRotatef(4,0,0,1);break;}}

void update (int value){glutPostRedisplay();glutTimerFunc(50, update, 0);

}

void main(int argc, char **argv){glutCreateWindow("PUTRI RR");glutInitWindowPosition(100,100);glutInitWindowSize(480,480);gluOrtho2D(-320.,320.,-320.,320.);glutDisplayFunc(renderScene);glutTimerFunc(50,update,0);

glutKeyboardFunc(myKeyboard);glutSpecialFunc(mySpecialKeyboard);glutMainLoop();

}

Output :

Penjelasan :

Program di atas menjalankan fungsi keyboard a,d,w,x yaitu objek akan bergeser

dan untuk case GLUT_KEY_LEFT: menjalankan objek untuk berputar berlawanan

dengan arah jarum jam jika ditekan tombol panah kiri.

4. Modifikasi kode progam pada latihan 3 dan tambahkan program pada fungsi

mySpecialKeyboard sehingga dapat memutar objek kebalikan putaran dengan

menekan tombol panah kanan dan memutar object ke atas ke bawah dengan

tombol panah atas bawah .


int x,y;void drawQuad(){

glBegin(GL_QUADS);glVertex2f(0,0);glVertex2f(0,100);glVertex2f(100,100);glVertex2f(100,0);glEnd();glFlush();

}

void myKeyboard(unsigned char key, int x, int y){if(key == 'l') glTranslatef(-4,0,0);else if(key == 'r') glTranslatef(4,0,0);else if(key == 'u') glTranslatef(0,4,0);else if(key == 'd') glTranslatef(0,-4,0);

}

void mySpecialKeyboard(int key, int x, int y){switch (key){case GLUT_KEY_LEFT:

glRotatef(4,0,0,1);break;

case GLUT_KEY_RIGHT:glRotatef(-4,0,0,1);break;

case GLUT_KEY_UP:glRotatef(4,0,0,1);break;

case GLUT_KEY_DOWN:glRotatef(-4,0,0,1);break;break;

}}

void update(int value){glutPostRedisplay();glutTimerFunc(50,update,0);

}

void display() {glClear(GL_COLOR_BUFFER_BIT);glColor3f(1,1,1);glPushMatrix();glTranslatef(x,0,0);drawQuad();glPopMatrix();glFlush();

}

void main (int argc, char **argv){

glutInitWindowPosition(100,100);

glutInitWindowSize(240,240);glutCreateWindow("Putri Rizky Rahmania");gluOrtho2D(-320.,320.,-320.,320.);glutDisplayFunc(display);glutKeyboardFunc(myKeyboard);glutSpecialFunc(mySpecialKeyboard);glutTimerFunc(50,update,0);glutMainLoop();

}

Output :

Penjelasan :

Program di atas sama dengan program sebelumnya, disini menambahkan fungsi

keyboard void mySpecialKeyboard(int key, int x, int y){

Dimana terdapat 4 case yaitu salah satunya

case GLUT_KEY_LEFT:

glRotatef(4,0,0,1);

Fungsi di atas bidang akan berotasi/berputar berlawanan dengan arah jarum jam

yang sama dengan case GLUT_KEY_UP: selanjutnya case GLUT_KEY_RIGHT: dan

case GLUT_KEY_DOWN: akan berputar searah jarum jam.

5. Tambahkan pada fungsi myKeyboard, untuk merubah warna obyek sebanyak 4

pilihan warna kecuali hitam dan putih (deteksi 4 tombol keyboard (normal) lain)!


int x,y;void drawQuad(){ /*Fungsi untuk membuat kotak*/

glBegin(GL_QUADS);glVertex2f(0,0);glVertex2f(0,100);glVertex2f(100,100);glVertex2f(100,0);glEnd();

glFlush();}

void myKeyboard(unsigned char key, int x, int y){if(key == 'l') glTranslatef(-4,0,0); /*Fungsi tombol keyboard

untuk menjalankan kotak - bergerak ke arah kiri*/else if(key == 'r') glTranslatef(4,0,0);/*arah kanan*/else if(key == 'u') glTranslatef(0,4,0);/*arah atas*/else if(key == 'd') glTranslatef(0,-4,0);/*arah bawah*/else if (key=='1') glColor3f(0.25,1,0.5);/*Mengganti warna

kotak sesuai dengan angka yang dideklrarasikan-hijau muda*/else if (key=='2') glColor3f(1.5,0.5,0);/*warna oranye*/else if (key=='3') glColor3f(0.15,0.25,1);/*warna biru*/else if (key=='4') glColor3f(1,1,0);/*warna kuning*/else if (key=='5') glColor3f(0,1,1);/*warna tosca*/

}

void mySpecialKeyboard(int key, int x, int y){switch (key){case GLUT_KEY_LEFT:

glRotatef(4,0,0,1);break;

case GLUT_KEY_RIGHT:glRotatef(-4,0,0,1);break;

case GLUT_KEY_UP:glRotatef(4,0,0,1);break;

case GLUT_KEY_DOWN:glRotatef(-4,0,0,1);break;break;

}}

void update(int value){glutPostRedisplay();glutTimerFunc(50,update,0);

}

void display() {glClear(GL_COLOR_BUFFER_BIT);glPushMatrix();glTranslatef(x,0,0);drawQuad();glPopMatrix();glFlush();

}

void main (int argc, char **argv){

glutInitWindowPosition(100,100);glutInitWindowSize(240,240);glutCreateWindow("Putri Rizky Rahmania");gluOrtho2D(-320.,320.,-320.,320.);glutDisplayFunc(display);glutKeyboardFunc(myKeyboard);

glutSpecialFunc(mySpecialKeyboard);glutTimerFunc(50,update,0);glutMainLoop();

}

Output :

Penjelasan :

Pada program di atas hanya menambhakan fungsi mengganti warna bidang yang

sesuai dengan keyboard yang dideklarasikan yaitu angka 1, 2, 3, 4,dan 5. Salah

satunya yaitu else if (key=='1') glColor3f(0.25,1,0.5);/*Mengganti warna

kotak sesuai dengan angka yang dideklrarasikan-hijau muda*/

INTERAKSI MOUSE

Berikut adalah script dasar untuk kegiatan praktikum interaksi mouse.

int w = 480, h = 480; //variabel global

glutInitWindowSize(w,h);

gluOrtho2D(-w/2,w/2,-h/2,h/2);

1. Buatlah project baru pada Visual Studio dengan nama prak4-mouseMotion.

Fungsi myDisplay callback function yang di dalamnya menggunakan fungsi

Points untuk memindah posisi objek sesuai pointer mouse.


int w = 480;int h = 480;

void drawQuad(void) {glBegin(GL_QUADS);glVertex2f(0.,0.);glVertex2f(0.,100.);glVertex2f(100.,100.);glVertex2f(100.,0.);glEnd();glFlush();

}

float x = 0, y = 0, z = 0;void myDisplay(void){

glClear(GL_COLOR_BUFFER_BIT);glPushMatrix();glTranslatef(x, y, z);drawQuad();glPopMatrix();glFlush();

}

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;

}}

void update(int value){glutPostRedisplay();glutTimerFunc(50, update, 0);

}

void main(int argc,char **argv){glutInit(&argc,argv);glutInitWindowPosition(240,200);glutInitWindowSize(w,h);glutCreateWindow("PUTRI RIZKY R");gluOrtho2D(-w/2, w/2, -h/2, h/2);glutTimerFunc(50, update, 0);glutDisplayFunc(myDisplay);glutMouseFunc(mouse);glutMainLoop();

}

Output :

Penjelasan :

Program di atas menunjukkan fungsi mouse yang dapat mengubah posisi

kotak sesuai perpindahan mouse. int w = 480, h = 480; Mendeklarasikan

variable global w dan h bertipe data integer. float x=0,y=0,z=0;

Mendeklarasikan variable x,y,dan z bertipe data float dengan nilai 0. Untuk

menyimpan nilai matrik dengan glPushMatrix();.Untuk meload yaitu

kembali ke koordinat sebelum di push dengan glPopMatrix();.

Mendeklarasikan perpindahan atau translasi pada sumbu x, y, dan z dengan

glTranslatef(x, y, z);. glutMouseFunc(mouse);

Memanggil fungsi-fungsi yang ada pada method mouse. Untuk deklarasi

interaksi mouse.Yaitu variabel xmouse dan ymouse :

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}}

2. Sempurnakan program di atas sehingga tombol kanan ditekan akan

menyebabkan objek memiliki skala yang membesar (2.0) dan tombol kiri

ditekan akan menyebabkan skala mengecil (0.5).


int w = 240, h = 240; //variabel globalvoid drawQuad(void){

glClear(GL_COLOR_BUFFER_BIT);glBegin(GL_QUADS);

glVertex2f (0, 0); glVertex2f (0,100 ); glVertex2f (100, 100); glVertex2f (100, 0);

glEnd();glFlush();}

float x=0,y=0,z=0;void myDisplay(void){

glClear(GL_COLOR_BUFFER_BIT);glPushMatrix();glTranslatef(x, y, z);drawQuad();

glPopMatrix();glFlush();

}


x = xmouse-(w/2);y = (h/2)-ymouse;glScalef(0.5, 0.5, 0.5);

}if(button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN){

x = xmouse-(w/2);y = (h/2)-ymouse;glScalef(2,2,2);

}}


}

void main(int argc, char **argv){glutInit(&argc,argv);glutInitWindowPosition(240,240);glutInitWindowSize(w,h);glutCreateWindow("Putri RR");gluOrtho2D(-w/2, w/2, -h/2, h/2);glutTimerFunc(50, update, 0);glutDisplayFunc(myDisplay);glutMouseFunc(mouse);glutMainLoop();

}

Output :

Penejelasan :

Pada program di atas untuk menjalankan kotak agar saat klik kanan maka kotak

ukurannya akan memperbesar kotak, dan klik kiri memperkecil ukuran.

if(button == GLUT_LEFT_BUTTON && state == GLUT_DOWN){

x = xmouse-(w/2);

y = (h/2)-ymouse;

glScalef(0.5, 0.5, 0.5);} (Objek akan di perkecil dengan menggunakan

glScale yang dideklarasikan dengan ukuran skala (0.5, 0.5, 0.5);

3. Ubahlah program sehingga tombol kiri ditekan skala membesar (2) dan ketika

tombol kanan dilepaskan (UP) skala mengecil (0.5))



glClear(GL_COLOR_BUFFER_BIT);glBegin(GL_QUADS);glVertex2f (0, 0);glVertex2f (0,100 );glVertex2f (100, 100);glVertex2f (100, 0);

glEnd();glFlush();}



}

void mouse(int button, int state, int xmouse, int ymouse){if(button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN){


}if(button == GLUT_LEFT_BUTTON && state == GLUT_DOWN){


}}


}

void main(int argc, char **argv){glutInit(&argc,argv);glutInitWindowPosition(240,240);glutInitWindowSize(w,h);glutCreateWindow("Putri RR");gluOrtho2D(-w/2, w/2, -h/2, h/2);

glutTimerFunc(50, update, 0);glutDisplayFunc(myDisplay);glutMouseFunc(mouse);glutMainLoop();

}

Output :

Penjelasan :

Pada program ini sama dengan sebelumnya hanya saja klik kiri digunakan untuk

memperbesar objek dengan skala 2 dan tombol kanan mouse digunakan untuk

memperkecil objek dengan skala 0.5.

4. Buatlah nilai parameter yang ada pada fungsi

gluOrtho2D(-100,100,-100,100);

Jelaskan apa yang terjadi dan beri kesimpulan (gambar sistem koordinat)

hubungan antara sistem koordinat openGL dan sistem koordinat yang digunakan

oleh mouse pointer.



glClear(GL_COLOR_BUFFER_BIT);glBegin(GL_QUADS);glVertex2f (0, 0);glVertex2f (0,100 );glVertex2f (100, 100);glVertex2f (100, 0);

glEnd();glFlush();}



}



}if(button == GLUT_LEFT_BUTTON && state == GLUT_DOWN){


}}


}

void main(int argc, char **argv){glutInit(&argc,argv);glutInitWindowPosition(240,240);glutInitWindowSize(w,h);glutCreateWindow("Putri RR");gluOrtho2D(-100,100,-100,100);glutTimerFunc(50, update, 0);glutDisplayFunc(myDisplay);glutMouseFunc(mouse);glutMainLoop();

}

Output :

Penjelasan :

Mengubah parameter pada fungsi gludOrtho2D dari yang sebelumnya

dideklarasikan dengan variable menjadi (-100,100,-100,100). Sehingga output

yang ditampilkan pada saat awal eksekusi terlihat agak besar.

5. Buatlah project baru pada Visual Studio dengan nama prak4-mouseMotion1.

Gunakan fungsi yang sama dengan no 1 dan lengkapi dengan fungsi Motion.

Buatlah fungsi untuk deteksi motion.


int w = 240;int h = 240;

void drawQuad(void) {glBegin(GL_QUADS);glColor3f(1,1,1);glVertex2f(0.,0.);glVertex2f(0.,100.);glVertex2f(100.,100.);glVertex2f(100.,0.);glEnd();glFlush();

}

float x = 0, y = 0, z = 0;void myDisplay(void){


}


x = xmouse-(w/2);y = (h/2)-ymouse;

}}

void motion(int xmouse, int ymouse){x = xmouse-(w/2);y = (h/2)-ymouse;

}void update(int value){

glutPostRedisplay();glutTimerFunc(50, update, 0);

}void main(int argc,char **argv){

glutInit(&argc,argv);glutInitWindowPosition(240,200);glutInitWindowSize(w,h);glutCreateWindow("PUTRI RR");gluOrtho2D(-w/2, w/2, -h/2, h/2);glutTimerFunc(50, update, 0);glutDisplayFunc(myDisplay);glutMouseFunc(mouse);glutMotionFunc(motion);glutMainLoop();

}

Output :

Penjelasan :

Pada program ini perpindahan objek dengan menggunakan motion,jadi dengan

klik tahan dan menggerakkan mouse maka objek akan berpindah mengikutinya.

Didalam fungsi motion terdapat rumus yang dapat memindahkan posisi objek,

yaitu x = xmouse-(w/2); dan y = (h/2)-ymouse;.

TUGAS ASISTENSI

1. Buatlah sebuah kompas yang bisa perputar secara clockwise dan unclockwise yang

pusatnya berada pada pusat koordinat. Dengan kontrol dari tombol ‘k’ dan ‘l’.

#include<stdlib.h>#include<glut.h>float x =0 ;

int k;int l;void Triangle (){

glBegin(GL_TRIANGLES);glColor3f(1,0,0);glVertex2f(-50,0.0);glVertex2f(0.0,100.0);glVertex2f(50.0,0.0);glColor3f(1,1,1);glVertex2f(-50,0.0);glVertex2f(0.0,-100.0);glVertex2f(50.0,0.0);

glEnd();

}

void display (){glClear(GL_COLOR_BUFFER_BIT);

Triangle();glFlush();

}void myKeyboard(unsigned char key, int x, int y){

if(key=='l')glRotatef(-10,0,0,1);

else if(key=='k')glRotatef(10,0,0,1);

}

void timer(int value){glutPostRedisplay();glutTimerFunc(50, timer,0);

}

void update (int value){glutPostRedisplay();glutTimerFunc(50, update,0);

}

void main(int argc,char **argv){

glutInit(&argc,argv);glutInitDisplayMode(GLUT_DEPTH|GLUT_SINGLE|GLUT_RGBA);glutInitWindowPosition(100,100);glutInitWindowSize(240,240);glutCreateWindow("PUTRI RR");gluOrtho2D(-320.,320.,-320.,320.);glutTimerFunc(50,timer,0);glutDisplayFunc(display);glutKeyboardFunc(myKeyboard);glutMainLoop();

}

Output :

Penjelasan :

Program di atas menampilkan 2 buah segitiga yang letak koordinatnya di atur dengan:

glVertex2f(-50,0.0);glVertex2f(0.0,100.0);glVertex2f(50.0,0.0);

Memberikan fungsi untu melakukan rotasi dengan menekan tombol key board yang dideklarasikan yaitu :void myKeyboard(unsigned char key, int x, int y){if(key=='l')

glRotatef(-10,0,0,1);else if(key=='k')

glRotatef(10,0,0,1);}Menekan huruf ‘ k ‘ maka objek akan berputar berlawanan arah jarum jam sedangkan ‘ l ‘ objek berputar searah jarum jam

2. Buatlah 2 benda (kotak dan segitiga) yang dapat dikendalikan secara individual,

dengan memanfaatkan tombol untuk tangan kanan dan tombol untuk tangan kiri. (‘a’,

’s’, ’d’, ’w’ untuk kotak dan ‘tombol panah atas, bawah, kiri, kanan’ untuk segitiga)


int a=0;int b=0;int c=0;int d=0;int w, x;

void Quads() {glBegin(GL_QUADS);/*Membuat kotak*/glColor3f(1,1,0);glVertex2f(100,100);glColor3f(1,1,1);glVertex2f(150,100);glColor3f(1,1,1);glVertex2f(150,150);glColor3f(1,1,1);glVertex2f(100,150);glEnd();

}

void Triangle() {glBegin(GL_TRIANGLES); /*Segitiga*/glVertex2i(-100,-50);glVertex2i(-50, -50);glColor3f(0.1,1,0.5);glVertex2i(-75, -100);glEnd();

}

void renderScene(){glClear(GL_COLOR_BUFFER_BIT);glPushMatrix();glTranslatef(b,c,0); /*Deklarasi translasi untuk objek persegi*/Quads();glPopMatrix(); /*Untuk meload yaitu kembali ke koordinat sebelum di push.*/glPushMatrix(); /*Menyimpan nilai matrik*/glTranslatef(a,d,0); /*Deklarasi translasi untuk objek segitiga*/Triangle();glPopMatrix();glFlush();}

void myKeyboard (unsigned char key, int x, int y) {if(key == 'a') { /*persegi bergerak ke kiri*/

b+=-10;c+=0;

}else if(key == 'd') { /*persegi bergerak ke kanan*/

b+=10;c+=0;

}else if(key == 'w') { /*persegi bergerak ke atas*/

b+=0;

c+=10;}else if(key == 'x') { /*persegi bergerak ke bawah*/

b+=0;c+=-10;

}}

void mySpecialKey(int key, int x, int y) {switch(key) {case GLUT_KEY_LEFT : /*Menajalankan segitiga bergerak ke kiri

dengan menggunakan tombol arah panah kiri*/a+=-10;d+=0;break;

case GLUT_KEY_RIGHT : /*Menajalankan segitiga bergerak ke kanan dengan menggunakan tombol arah panah kanan*/

a+=10;d+=0;break;

case GLUT_KEY_UP : /*Menajalankan segitiga bergerak ke atas dengan menggunakan tombol arah panah atas*/

a+=0;d+=10;break;

case GLUT_KEY_DOWN : /*Menajalankan segitiga bergerak ke bawah dengan menggunakan tombol arah panah bawah*/

a+=0;d+=-10;break;

}}

void update(int value) {glutPostRedisplay();glutTimerFunc(50,update,0);

}

void main (int argc, char **argv) {glutInit(&argc, argv);glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA);glutInitWindowPosition(100,100);glutInitWindowSize(240,240);glutCreateWindow("PUTRI RR_ASISTENSI 2");gluOrtho2D(-320.,320.,-320.,320.);glutDisplayFunc(renderScene);glutTimerFunc(1,update,0);glutKeyboardFunc(myKeyboard);glutSpecialFunc(mySpecialKey);glutMainLoop();

}

Output :

Penjelasan :

Program di atas menampilkan dua buah bangun yaitu persegi dan segitiga. Kedua

bangun tersebut diberi perlakuan yaitu dengan berpindah yang dipanggil dengan

fungsi : glTranslatef(b,c,0); /*Deklarasi translasi untuk objek persegi*/

Quads();glTranslatef(a,d,0); /*Deklarasi translasi untuk objek segitiga*/Triangle();Dengan pendeklarasian secara khusus untuk persegi menggerakkannya dengan huruf

a,d,w,x sedangkan segitigan dengan tombol panah. Mendeklarasikan tombol a,d,w,x

dengan menggunakan operator kondisi if else if. Mendeklarasikan tombola rah panah

kiri dengan menggunakan operator kondisi switch case.

3. Buatlah program yang dapat mengubah skala objek secara interaktif menggunakan

interaksi drag. Ketika tombol kanan ditekan maka posisi x dan y disimpan dalam

variabel global, jika drag dilakukan maka jarak pointer terhadap posisi yang disimpan

sebelumnya akan menyebabkan perubahan skala secara interaktif (menjauh =

membesar, mendekat = mengecil).

#include<stdlib.h>#include<stdio.h>#include<glut.h>

float x=0, y=0, z=0, a=1, b=1, k, l;int w = 480, h = 480;

void drawQuad(int a, int b){glBegin(GL_QUADS);glColor3f(1,0.5,0);glVertex2i(a, b);glVertex2i(a, -b);glVertex2i(-a, -b);glVertex2i(-a, b);glEnd();

}

void motion(int xmouse, int ymouse){ /*untuk menunjukkan posisi pointer

mouse berada*/x=xmouse-(w/2);y=(h/2)-ymouse;a=x/k;b=y/l;printf("posisi pointer mouse (%d, %d)\n", x, y); /*Untuk mengubah

skala secara interaktif pada fungsi motion perintah untuk menampilkan hasil */}


x = xmouse-(w/2);y = (h/2)-ymouse;k=x;l=y;printf("koordinat %d, %d\n", xmouse-(xmouse/2), ymouse-

(ymouse/2)); /*Menunjukkan hasil dari klik kanan dan pergerakan mouse*/

}}

void mydisplay(void){glClear(GL_COLOR_BUFFER_BIT);glColor3f(0.5, 0, 1);glPushMatrix();glScalef(a, b, 1);drawQuad(6,6);glPopMatrix();glFlush();

}

void timerku(int value){glutPostRedisplay();glutTimerFunc(10, timerku, 0);

}

void main(int argc, char **argv){glutInit(&argc, argv);glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA);glutInitWindowPosition(100,100);glutInitWindowSize(480, 480);glutCreateWindow("PUTRI RR");gluOrtho2D(-60,60,-60,60);glutDisplayFunc(mydisplay);glutTimerFunc(10, timerku, 0);glutMouseFunc(mouse);glutMotionFunc(motion);glutMainLoop();

}

Output :

Penjelasan :

Pada program di atas jika objek persegi di klik kanan dan ditahan serta digeser maka

ukuran objek akan mengikuti seberapa besar posisi yang digeser dengan mouse. Jika

digeser keluar maka objek semakin besar dan jika di geser ke dalam maka objek akan

semakin kecil. Untuk mengubah skala secara interaktif pada fungsi motion perintah

untuk menampilkan hasil diberi (%d, %d)\n untuk menunjukkan posisi pointer

mouse berada. Pada fungsi mouse juga terdapat perintah untuk menampilkan hasil

diberi koordinat %d, %d\n", xmouse-(xmouse/2), ymouse-(ymouse/2) sesuai

dengan posisi mouse berada.

4. Buatlah program untuk deteksi DOUBLE CLICK, ketika DOUBLE CLICK object

yang dipilih skalanya menjadi 1.5, sedangkan untuk DOUBLE CLICK berikutnya

Ukuran object tersebut kembali seperti semula.

#include<stdlib.h>#include<stdio.h>#include<glut.h>

int w=240, h=240, p=-1;float x=0, y=0, x1=1, y1= 1;bool kondisi=true; /*Merupakan deklarasi operasi boolean untuk kondisi bernilai benar.*/

void drawQuad(int x, int y){glBegin(GL_QUADS);glColor3f(1.5,0.25,0);

glVertex2i(x,y);glVertex2i(-x,y);glVertex2i(-x,-y);glVertex2i(x,-y);

glEnd();}

void doubleClick(){ /*Deklarasi method doubleclick*/if(kondisi){

x1 = 1.5;y1 = 1.5;kondisi = false;

}else{x1 = 1;y1 = 1;kondisi = true;

}}


if(p == -1){p += 1;

}else if(p <= 500){doubleClick();

}

}}

void timer(int value){if(p != -1) {

p += 100;}

if(p > 500){p = -1;

}glutPostRedisplay();glutTimerFunc(50, timer, 0);

}

void renderScene(void){

glClear(GL_COLOR_BUFFER_BIT);glPushMatrix();glScalef(x1, y1, 1);drawQuad(30,30);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("PUTRI RR");glutDisplayFunc(renderScene);glutTimerFunc(50,timer,0);glutMouseFunc(mouse);gluOrtho2D(-w/2, w/2, -h/2, h/2);glutMainLoop();

}

Output :

Penjelasan :

Pada program di atas jika objek diklik double maka objek akan berubah menjadi besar

dengan ukuran scala 1.5 dan jika di klik double kembali maka objek akan kembali

pada ukuran standart yaitu dengan scala 1

Pada fungsi Double Click terdapat 2 kondisi, kondisi pertama x1 = 1.5; y1 = 1.5;

kondisi = false; maksudnya skalanya akan berubah menjadi 1, 5 lebih besar dari

ukuran sebelumnya dan kondisi kedua adalah x1 = 1; y1 = 1; kondisi = true;

maksudnya skalanya akan berubah ke bentuk objek awal.

Tombol mouse yang berfungsi untuk mengubah skalanya yaitu tombol mouse bagian

kiri dengan fungsi button == GLUT_LEFT_BUTTON && state == GLUT_DOWN dengan

2 kondisi, yaitu (p == -1) p += 1; dan (p <= 500) doubleClick();

D. KESIMPULAN

Dalam praktikum kali ini kita belajar memahami prinsip-prinsip deteksi input

berupa interaksi dari keyboard, membuat objek 2D yang dikendalikan dengan

keyboard, memahami prinsip-prinsip pembuatan interaksi objek 2D menggunakan

mouse, dan membuat interaksi objek 2D menggunakan mouse. Diantaranya :

Melakukan translasi objek yaitu memindahkan objek dengan menggunakan

keyboard, dengan deklarasi “glTranslatef”. Rotasi objek yaitu merotasi objek

dengan menggunakan keyboard. Memperbesar dan Memperkecil Objek yaitu

menggunakan interaksi mouse yaitu klik kiri dan klik kanan, dengan

mendeklarasikan buah ukuran dengan skala yang berbeda yaitu menggunakan

operator kondisi. Motion dengan menggunakan interaksi mouse , maka objek akan

mengikuti pergerakan mouse. Dalam penggunaan glutKeyboardFunc

dimungkinkan untuk mendeteksi input dari keyboard. Fungsi ini diletakkan pada

fungsi main dari program, dan parameternya adalah callback function

E. DAFTAR RUJUKAN

Tim Dosen. 2015. Modul 4 Interaksi dengan Keyboard dan Mouse. Malang:

Universitas Negeri Malang.

laporan modul iv grafika.docx

Documents