Interaksi Dengan Keyboard Dan Mouse

Interakasi dengan Keyboard dan Mouse March 4, 2015

Interaksi dengan Keyboard dan Mouse A. Tujuan -

Mahasiswa mampu memahami prinsip-prinsip deteksi input berupa interaksi dari keyboard.

-

Mahasiswa mampu membuat objek 2D yang dikendalikan dengan keyboard.

-

Mahasiswa mampu memahami prinsip-prinsip pembuatan objek 2D menggunakan mouse.

-

Mahasiswa mampu membuat interaksi objek 2D menggunakan mouse.

B. Jobsheet Praktikum 1. Interakasi Keyboard -

Latihan 1 Source code: #include #include void drawQuad(){//segi4 glBegin(GL_QUADS); glVertex2i(-60,-60); glVertex2i(-60,60); glVertex2i(60,60); glVertex2i(60,-60); glEnd(); } void drawQuads(int pos_x, int pos_y) { glBegin(GL_QUADS); glColor3f(1,0,0); glVertex2i(pos_x, pos_y); glVertex2i(2*pos_x, pos_y); glVertex2i(2*pos_x, 2*pos_x); glVertex2i(pos_x, 2*pos_x); glEnd(); } void renderScene(){ glClear(GL_COLOR_BUFFER_BIT); drawQuads(30,10); glFlush(); } void myKeyboard(unsigned char key, int x, int y){ if(key=='d') glTranslatef(-4,0,0); else if (key == 'b') glTranslatef(4,0,0); } void update(int value){ glutPostRedisplay(); glutTimerFunc(50,update,0);

1

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015 } void main(int argc, char **argv){ glutInit (&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA ); glutInitWindowPosition(100,100); glutInitWindowSize(640,480); glutCreateWindow("Modul 4"); gluOrtho2D(-320.,320.,-320.,320.); glutDisplayFunc(renderScene); glutKeyboardFunc(myKeyboard); glutTimerFunc(50,update,0); glutMainLoop(); }

Output program:

Penjelasan: Untuk membuat objek bergerak dengan menggunakan keyboard menggunakan fungsi void myKeyboard,kemudian deklarasikan keyboard yang akan digunakan untuk berinteraksi dengan objek,kemudian beri nilai perpindahan setiap keyboard ditekan. Pada objek latihan 1 ini jika menekan keyboard ‘d’ maka objek akab bergeser -4 terhadap sumbu x dan jika keyboard ‘b’ ditekan maka akan bergeser 4 terhadap sumbu x. -

Latihan 2 Source code: #include #include void drawQuads(int pos_x, int pos_y) { glBegin(GL_QUADS); glColor3f(1,0,0); glVertex2i(pos_x, pos_y); glVertex2i(2*pos_x, pos_y); glVertex2i(2*pos_x, 2*pos_x); glVertex2i(pos_x, 2*pos_x); glEnd(); } void renderScene(){ glClear(GL_COLOR_BUFFER_BIT); drawQuads(50,50); glFlush(); } void myKeyboard(unsigned char key, int x, int y){

2

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015 if(key=='a') else if (key else if (key else if (key }

glTranslatef(-4,0,0); == 'd') glTranslatef(4,0,0); == 'w') glTranslatef(0,4,0); == 's') glTranslatef(0,-4,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(640,480); glutCreateWindow("Modul 4 - latihan2"); gluOrtho2D(-320.,320.,-320.,320.); glutDisplayFunc(renderScene); glutKeyboardFunc(myKeyboard); glutTimerFunc(50,update,0); glutMainLoop(); }

Output program:

Penjelasan: Pada program ini interakasi yang digunakan hampir sama dengan program sebelumnya namun ditambah interaksi untuk merubah objek ke atas dan ke bawah. Oleh karena itu pada void myKeyboard diberi tambahan fungsi untuk ineraksi mengubah posisi objek. Jika tombol ‘w’ ditekan maka objek akan

3

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015 berpindah posisi 4 pada sumbu y,jika tombol ‘s’ ditekan maka objek berpindah -4 pada sumbu y,jika tombol ‘a’ ditekan maka objek akan bergeser ke kiri -4 pada sumbu x,dan jika tombol ‘d’ ditekan maka objek bergeser ke kanan 4 pada sumbu x. -

Latihan 3 Source code: #include #include void drawQuads(int pos_x, int pos_y) { glBegin(GL_QUADS); glColor3f(1,0,0); glVertex2i(pos_x, pos_y); glVertex2i(2*pos_x, pos_y); glVertex2i(2*pos_x, 2*pos_x); glVertex2i(pos_x, 2*pos_x); glEnd(); } void renderScene(){ glClear(GL_COLOR_BUFFER_BIT); drawQuads(90,90); glFlush(); } void myKeyboard(unsigned char key, int x, int y){ if(key=='a') glTranslatef(-20,0,0); else if (key == 'd') glTranslatef(20,0,0); else if (key == 'w') glTranslatef(0,20,0); else if (key == 's') glTranslatef(0,-20,0); } void mySpecialKeyboard(int key, int x, int y){ switch(key){ 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){ glutInit (&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA ); glutInitWindowPosition(100,100); glutInitWindowSize(640,480); glutCreateWindow("Modul 4 - Latihan3"); gluOrtho2D(-320.,320.,-320.,320.); glutDisplayFunc(renderScene); glutKeyboardFunc(myKeyboard); glutSpecialFunc(mySpecialKeyboard); glutTimerFunc(50,update,0); glutMainLoop();

4

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015 }

Output program:

Penjelasan: Objek pada program ini hampir sama dengan program sebelumnya,dapat di geser ke atas,bawah,kiri,dan kanan,namun pada program ini objek dapat diputar ke kiri dengan menekan tombol kiri. Dengan menggunakan fungsi GLUT_KEY_LEFT objek akan berputar berlawanan arah jarum jam. -

Latihan 4 Source code: #include #include void drawQuads(int pos_x, int pos_y) { glBegin(GL_QUADS); glColor3f(1,0,0); glVertex2i(pos_x, pos_y); glVertex2i(2*pos_x, pos_y); glVertex2i(2*pos_x, 2*pos_x); glVertex2i(pos_x, 2*pos_x); glEnd(); } void renderScene(){ glClear(GL_COLOR_BUFFER_BIT); drawQuads(90,90); glFlush(); } void myKeyboard(unsigned char key, int x, int y){

5

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015 if(key=='a') else if (key else if (key else if (key }

glTranslatef(-20,0,0); == 'd') glTranslatef(20,0,0); == 'w') glTranslatef(0,20,0); == 's') glTranslatef(0,-20,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(8,0,0,1); break; case GLUT_KEY_DOWN: glRotatef(-8,0,0,1); 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(640,480); glutCreateWindow("Modul 4 - Latihan4"); gluOrtho2D(-320.,320.,-320.,320.); glutDisplayFunc(renderScene); glutKeyboardFunc(myKeyboard); glutSpecialFunc(mySpecialKeyboard); glutTimerFunc(50,update,0); glutMainLoop(); }

Output program:

6

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015

Penjelasan: Program ini hampir sama dengan program sebelumnya namun diberi tambahan funsgi pada tombol panah kiri,atas dan bawah pada fungsi void mySpecialKeyboard. Sehingg jika kita menekan tombol panah maka obek akan berotasi. -

Latihan 5 Source code: #include #include void drawQuad(int pos_x, int pos_y) { glBegin(GL_QUADS); glVertex2i(pos_x, pos_y); //kiri bawah glVertex2i(4 * pos_x, pos_y); //kanan bawah glVertex2i(4 * pos_x, 4 * pos_y); //kanan atas glVertex2i(pos_x, 4 * pos_y); //kiri atas glEnd(); } void display(){ glClear(GL_COLOR_BUFFER_BIT); drawQuad(50, 50); glFlush(); } void myKeyboard(unsigned char key, int x, int y){ if (key == 'a') { glColor3f(1, 0, 0); } else if (key == 'd') { glColor3f(0, 1, 0); } else if (key == 'w') { glColor3f(0, 0, 1); } else if (key == 's') { glColor3f(1, 1, 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(680, 480); glutCreateWindow("Pemrograman GLUT"); glColor3f(1, 1, 0); gluOrtho2D(-240., 240., -240., 240.); glutDisplayFunc(display); glutKeyboardFunc(myKeyboard);

7

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015 glutTimerFunc(50, update, 0); glutMainLoop(); }

Output program:

Penjelasan: Untuk mengubah objek 2D yag kita buat agar berubah warna maka fungsi glColor pada void myKeyboard. Untuk membuat warna berbeda jika menekan keyboard tertentu maka menggunakan kondisi else if. 2. Interaksi Mouse -

Latihan 1 Source code: #include "stdlib.h" #include "stdio.h" #include #include "glut.h" float x = 0, y = 0, z = 0; int w = 640, h = 480; void drawQuad(int pos_x, int pos_y) { glBegin(GL_QUADS); glVertex2i(pos_x, pos_y); //kiri bawah glVertex2i(4 * pos_x, pos_y); //kanan bawah glVertex2i(4 * pos_x, 4 * pos_y); //kanan atas glVertex2i(pos_x, 4 * pos_y); //kiri atas glEnd(); } 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; }

8

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015 } void myDisplay(void){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(1, 0, 0); glPushMatrix(); glTranslatef(x, y, z); drawQuad(20, 20); glPopMatrix(); glFlush(); } void timer(int value){ glutPostRedisplay(); glutTimerFunc(50, timer, 0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitWindowPosition(100, 100); glutInitWindowSize(w, h); glutCreateWindow("Pemrograman GLUT"); gluOrtho2D(-w / 2, w / 2, -h / 2, h / 2); glutDisplayFunc(myDisplay); glutMouseFunc(mouse); glutTimerFunc(50, timer, 0); glutMainLoop(); }

Output program:

Penjelasan: Fungsi yang digunakan pada interaksi mouse ini adalah void mouse. Objek dapat berpindah posisi sesuai dengan koordinat yang di klik oleh mouse. Untuk membuat objek berpindah posisi ketika mouse di klik menggunakan perintah GLUT_LEFT_BUTTON dan GLUT_DOWN yang artinya objek akan berpindah ketika mouse diklik dan dilepas di koordinat tertentu. -

Latihan 2 Source code: #include "stdlib.h" #include "stdio.h" #include #include "glut.h" float x = 0, y = 0, z = 0; int w = 640, h = 480;

9

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015 void drawQuad(int pos_x, int pos_y) { glBegin(GL_QUADS); glVertex2i(pos_x, pos_y); //kiri bawah glVertex2i(4 * pos_x, pos_y); //kanan bawah glVertex2i(4 * pos_x, 4 * pos_y); //kanan atas glVertex2i(pos_x, 4 * pos_y); //kiri atas glEnd(); } void mouse(int button, int state, int xmouse, int ymouse){ if (button == GLUT_LEFT_BUTTON && state == GLUT_DOWN){ glScalef(0.5, 0.5, 0); } if (button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN){ glScalef(2.0, 2.0, 0); } } void renderScene(void){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(1, 0, 0); glPushMatrix(); drawQuad(20, 20); glPopMatrix(); glFlush(); } void timer(int value){ glutPostRedisplay(); glutTimerFunc(50, timer, 0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitWindowPosition(100, 100); glutInitWindowSize(w, h); glutCreateWindow("Pemrograman GLUT"); gluOrtho2D(-w / 2, w / 2, -h / 2, h / 2); glutDisplayFunc(renderScene); glutMouseFunc(mouse); glutTimerFunc(50, timer, 0); glutMainLoop(); }

Output program:

Penjelasan: Program menampilkan objek persegi yang dapat berubah ukurannya jika kita klik menggunakan mouse. Objek akan mengecil jika kita klik kiri dan akan membesar jika kita klik kanan pada mouse. Fungsi untuk merubah ukuran objek terseubut menggunakan void mouse dengan kondisi if. GLUT_LEFT_BUTTON berarti tombol kiri mouse jika di klik maka objek

10

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015 akan mengecil 0,5. Dan GLUT_RIGHT_BUTTON berarti klik kanan pada mouse akan membuat objek berubah 2,0 dari ukuran semula. -

Latihan 3 Source code: #include "stdlib.h" #include "stdio.h" #include #include "glut.h" float x = 0, y = 0, z = 0; int w = 640, h = 480; void drawQuad(int pos_x, int pos_y) { glBegin(GL_QUADS); glVertex2i(pos_x, pos_y); //kiri bawah glVertex2i(4 * pos_x, pos_y); //kanan bawah glVertex2i(4 * pos_x, 4 * pos_y); //kanan atas glVertex2i(pos_x, 4 * pos_y); //kiri atas glEnd(); } void mouse(int button, int state, int xmouse, int ymouse){ if (button == GLUT_LEFT_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 renderScene(void){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(1, 0, 0); glPushMatrix(); drawQuad(20, 20); glPopMatrix(); glFlush(); } void timer(int value){ glutPostRedisplay(); glutTimerFunc(50, timer, 0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitWindowPosition(100, 100); glutInitWindowSize(w, h); glutCreateWindow("Pemrograman GLUT"); gluOrtho2D(-w / 2, w / 2, -h / 2, h / 2); glutDisplayFunc(renderScene); glutMouseFunc(mouse); glutTimerFunc(50, timer, 0); glutMainLoop(); }

11

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015 Output program:

Penjelasan: Pada program ini merupakan kebalikan dari program sebelumnya,dimana jika kita klik kanan pada mouse maka objek persegi akan mengecil dan jika kita klik kiri maka objek akan membesar. Jika mouse di klik kiri maka objek akan membesar 2.0 menggunakan fungsi GLUT_LEFT_BUTTON sedangkan jika kita klik kanan objek akan mengecil 0.5 menggunakan GLUT_RIGHT_BUTTON. -

Latihan 4 Source code: #include "stdlib.h" #include "stdio.h" #include #include "glut.h" float x = 0, y = 0, z = 0; int w = 640, h = 480; void drawQuad(int pos_x, int pos_y) { glBegin(GL_QUADS); glVertex2i(pos_x, pos_y); //kiri bawah glVertex2i(4 * pos_x, pos_y); //kanan bawah glVertex2i(4 * pos_x, 4 * pos_y); //kanan atas glVertex2i(pos_x, 4 * pos_y); //kiri atas glEnd(); } void mouse(int button, int state, int xmouse, int ymouse){ if (button == GLUT_LEFT_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 renderScene(void){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(1, 0, 0); glPushMatrix(); drawQuad(20, 20); glPopMatrix(); glFlush(); } void timer(int value){ glutPostRedisplay();

12

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015 glutTimerFunc(50, timer, 0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitWindowPosition(100, 100); glutInitWindowSize(w, h); glutCreateWindow("Pemrograman GLUT"); gluOrtho2D(-100, 100, -100, 100); glutDisplayFunc(renderScene); glutMouseFunc(mouse); glutTimerFunc(50, timer, 0); glutMainLoop(); }

Output program:

Penjelasan: glutOrtho2D berfungsi untuk mengatur posisi objek dengan menentukan letak koordinat. Urutan dari glutOrtho2D adalah kiri,kanan,atas,dan bawah. Sehingga pada tampilan awalm program ini berbeda dengan program sebelumnya karena kita telah menentukan koordinat dari objek tersebut. -

Latihan 5 Source code: #include "stdlib.h" #include "stdio.h" #include #include "glut.h" float x = 0, y = 0, z = 0; int w = 640, h = 480; void drawQuad(int pos_x, int pos_y) { glBegin(GL_QUADS); glVertex2i(pos_x, pos_y); //kiri bawah glVertex2i(4 * pos_x, pos_y); //kanan bawah glVertex2i(4 * pos_x, 4 * pos_y); //kanan atas glVertex2i(pos_x, 4 * pos_y); //kiri atas glEnd(); } 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 motion(int xmouse, int ymouse){ x = xmouse - (w / 2); y = (h / 2) - ymouse;

13

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015 } void renderScene(void){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(1, 0, 0); glPushMatrix(); glTranslatef(x, y, z); drawQuad(20, 20); glPopMatrix(); glFlush(); } void timer(int value){ glutPostRedisplay(); glutTimerFunc(50, timer, 0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitWindowPosition(100, 100); glutInitWindowSize(w, h); glutCreateWindow("Pemrograman GLUT"); gluOrtho2D(-w / 2, w / 2, -h / 2, h / 2); glutDisplayFunc(renderScene); glutMouseFunc(mouse); glutMotionFunc(motion); glutTimerFunc(50, timer, 0); glutMainLoop(); }

Output program:

Penjelasan: Pada program ini hampir sama dengan program no 1 pada interaksi mouse namun diberi tambahan fungsi motion. Fungsi motion berfungsi untuk merubah posisi benda degan cara mengklik di sembarang koordinat namun ketika objek di drag akan tetap bergerak mengikuti pointer dari mouse berbeda dengan program sebelumnya yang hanya berpindah jika kita klik di koordinat tertentu.

C. Tugas Asistensi -

Tugas Asistensi 1 Source code: #include #include

14

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015 void drawQuad(void){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLES); glColor3f(1, 0, 0); glVertex2f(0., 150.); glVertex2f(60., 0.); glVertex2f(-60., 0.); glColor3f(1, 1, 1); glVertex2f(0., -150.); glVertex2f(60., 0.); glVertex2f(-60., 0.); glEnd(); glFlush(); } void renderScene(){ glClear(GL_COLOR_BUFFER_BIT); drawQuad(); glFlush(); } void myKeyboard(unsigned char key, int x, int y) { if (key == 'k') glRotatef(4, 0, 0, 1); else if (key == 'l') glRotatef(-4, 0, 0, 1); } 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(640, 480); glutCreateWindow("Modul 4"); gluOrtho2D(-320., 320., -320., 320.0); glutDisplayFunc(renderScene); glutKeyboardFunc(myKeyboard); //glutSpecialFunc(mySpecialKeyboard); glutTimerFunc(50, update, 0); glutMainLoop(); }

Output program:

15

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015 Penjelasan: Untuk membuat objek kompas maka kita menggunakan 2 segitiga yang saling bertolak belakang,untuk membuatnya sisi bawah memiliki koordinat yang sama dan ujung segitiga saling berlawanan. Objek kompas dapat berputar sesuai dengan arah jarum jam jika menekan keyboard ‘l’ dan berlawan arah jarum jam jika menekan keyboard ‘k’ yang telah dideklarasikan pada fungsi void myKeyboard dimana objek akan berotasi pada koordinat 4 dan -4 terhadap sumbu x. -

Tugas Asistensi 2 Source code: #include #include void drawQuad(){ glBegin(GL_QUADS); glColor3f(1, 0, 0); glVertex2f(0., 0.); glVertex2f(0., 100.); glVertex2f(50., 100.); glVertex2f(50., 0.); glEnd(); glFlush(); } void draw(){ glBegin(GL_TRIANGLES); glColor3f(1, 1, 1); glVertex2f(20., -100.); glVertex2f(70., 10.); glVertex2f(-25., 10.); glEnd(); glFlush(); } void renderScene(){ glClear(GL_COLOR_BUFFER_BIT); drawQuad(); draw(); glFlush(); } void myKeyboard(unsigned char key, int x, int y) { if (key == 'a') glTranslatef(-7, 0, 0); else if (key == 'd') glTranslatef(7, 0, 0); else if (key == 'w') glTranslatef(0, 7, 0); else if (key == 's') glTranslatef(0, -7, 0); else if (key == 's') glTranslatef(-7, 0, 0); } void mySpecialKeyboard(int key, int x, int y) { switch (key){ case GLUT_KEY_LEFT: glTranslatef(-7, 3, 0); break; case GLUT_KEY_RIGHT: glTranslatef(7, -3, 0);

16

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015 break; case GLUT_KEY_UP: glTranslatef(7, 3, 0); break; case GLUT_KEY_DOWN: glTranslatef(-7, -3, 0); 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(640, 480); glutCreateWindow("Modul 4"); gluOrtho2D(-320., 320., -320., 320.0); glutDisplayFunc(renderScene); glutKeyboardFunc(myKeyboard); glutSpecialFunc(mySpecialKeyboard); glutTimerFunc(50, update, 0); glutMainLoop(); }

Output program:

Penjelasan: Objek pada program ini terdiri dari segitiga dan persegi. Untuk menggeser objek secara vertikal dan horizontal menggunakan tombol ‘a’,’s’,’d’,’w’ dan tombol panah atas,bawah,kiri,dan kana untuj menggeser objek secara diagonal. Untuk menggeser objek secara diagonal maka pada fungsi mySpecialKeyboar beri nilai pada x dan y sehingga objek akan bergeser pada sumbu x dan y secara bersamaan dan memuat objek akan bergeser diagonal. -

Tugas Asistensi 3 Source code:

17

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015 #include #include #include void Triangles(){ glBegin(GL_TRIANGLES); glColor3f(1, 0, 0); glVertex2i(0, 0); glVertex2i(100, -30); glVertex2i(100, 30); glEnd(); } void mymouse(int button, int state, int x, int y){ if (button == GLUT_LEFT_BUTTON){ printf("tombol KIRI (%d,%d)\n", x, y); } else if (button == GLUT_MIDDLE_BUTTON){ printf("tombol TENGAH (%d,%d)\n", x, y); } else{ printf("tombol KANAN (%d,%d)\n", x, y); } if (state == GLUT_DOWN){ printf("tombol DITEKAN\n"); } else{ printf("tombol DILEPAS\n"); } } void motion(int x, int y){ printf("posisi printer mouse (%d,%d)\n", x, y); } void display(){ glClear(GL_COLOR_BUFFER_BIT); glRotatef(90, 0., 0., 1.); Triangles(); glFlush(); } void Timer(int value){ glutPostRedisplay(); glutTimerFunc(50, Timer, 0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100, 100); glutInitWindowSize(640, 480); glutCreateWindow("Modul 4"); glutDisplayFunc(display); gluOrtho2D(-320.0, 320.0, -320.0, 320.0); glutTimerFunc(50, Timer, 0); glutMouseFunc(mymouse); glutMotionFunc(motion); glutMainLoop(); }

Output program:

18

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015

Penjelasan: -

Tugas Asistensi 4 Source code: #include "stdlib.h" #include "stdio.h" #include #include "glut.h" float x = 1, y = 1, z = 0; int w = 640, h = 480, flag = 0, flg; void drawQuad() { glBegin(GL_POLYGON); glColor3f(1, 0, 0); glVertex2f(-20., -20.); glVertex2f(20., -20.); glVertex2f(20., 20.); glVertex2f(-20., 20.); glEnd(); } void mouse(int button, int state, int xmouse, int ymouse){ if (flg == 0) { if (state == GLUT_DOWN) { if (button == GLUT_LEFT_BUTTON) { flag++; if (flag == 2) { flg = 3; x = 3; y = 3; printf("%d", flg); } } } } if (flg == 3) { if (state == GLUT_DOWN) { if (button == GLUT_LEFT_BUTTON) { flag--; if (flag == 0) {

19

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015 x = 1; y = 1; flg = 0; } } } } } void renderScene(void){ glClear(GL_COLOR_BUFFER_BIT); glClearColor(1, 1, 1, 0); glPushMatrix(); glScalef(x, y, z); drawQuad(); glPopMatrix(); glFlush(); } void timer(int value){ glutPostRedisplay(); glutTimerFunc(50, timer, 0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitWindowPosition(100, 100); glutInitWindowSize(w, h); glutCreateWindow("Modul 4"); gluOrtho2D(-w / 2, w / 2, -h / 2, h / 2); glutDisplayFunc(renderScene); glutMouseFunc(mouse); glutTimerFunc(50, timer, 0); glutMainLoop(); }

Output program:

Penjelasan: Objek persegi pada program ini dapat membesarkan skala ukrannya dengan menggunakan double klik pada mouse dan akan kembali ke ukuran semula jika melakukan double klik lagi. Fungsi yang digunakan untuk merubah skala objek tersebut adalah void mouse dimana flag == 0 adalah ukuran semula dan akan di increament sampai nilai flag == 3 jika melakukan double klik,jika flag == 3 maka akan mengecil atau decreament jika melakukan double klik sehingga nilai flag==0.

20

Praktikum Grafika Komputer

Interakasi dengan Keyboard dan Mouse March 4, 2015

D. Kesimpulan -

Dalam penggunaan interaksi keyboard menggunakan keboardfunction yang memungkinkan untuk mendeteksi input dari keyboard.

-

Parameter penggunaan KeyboardFunction adalah callback function yang telah didefinisikan berupa fungsi.

-

Fungsi callback yang memanggil tombol keyboard adalah glutKeyboardFunc(myKeyboard);

-

Interaksi dengan menggunakan MouseFunction ,parameter func adlaah fungsi yang akan ditangani dengan event klik mouse.

-

Fungsi motion digunakan pada interaksi mouse dan obek akan mengikuti posisi dari pointer ketika di drag.

-

Kita dapat merubah warna objek menggunakan keyboard dengan memasukkan fungsi glColor pada voidMykeyboard.

E. Daftar Pustaka -

Team Asisten Universitas Negeri Malang. 2015. “Modul 3 Transformasi dan Animasi Objek 2D”. Malang : Universitas Negeri Malang.

21

Praktikum Grafika Komputer