Interaksi Dengan Keyboard Dan Mouse

(1)

1

Praktikum Grafika Komputer

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 <stdlib.h> #include <glut.h>

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();

(2)

2

Praktikum Grafika Komputer

}

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:

glBegin(GL_QUADS);

glColor3f(1,0,0);

(3)

3

Praktikum Grafika Komputer

if(key=='a') glTranslatef(-4,0,0);

else if (key == 'd') glTranslatef(4,0,0);

else if (key == 'w') glTranslatef(0,4,0);

else if (key == 's') glTranslatef(0,-4,0);

}

glutTimerFunc(50,update,0); }

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

(4)

4

Praktikum Grafika Komputer

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:

glBegin(GL_QUADS);

glColor3f(1,0,0);

}

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

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

glutCreateWindow("Modul 4 - Latihan3"); gluOrtho2D(-320.,320.,-320.,320.); glutDisplayFunc(renderScene); glutKeyboardFunc(myKeyboard); glutSpecialFunc(mySpecialKeyboard); glutTimerFunc(50,update,0); glutMainLoop();

(5)

5

Praktikum Grafika Komputer

}

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:

glBegin(GL_QUADS);

glColor3f(1,0,0);

(6)

6

Praktikum Grafika Komputer

}

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

glutCreateWindow("Modul 4 - Latihan4"); gluOrtho2D(-320.,320.,-320.,320.); glutDisplayFunc(renderScene); glutKeyboardFunc(myKeyboard); glutSpecialFunc(mySpecialKeyboard); glutTimerFunc(50,update,0); glutMainLoop(); }

Output program:

(7)

7

Praktikum Grafika Komputer

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:

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(); }

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

}

glutTimerFunc(50, update, 0); }

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);

(8)

8

Praktikum Grafika Komputer

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 <conio.h> #include "glut.h" float x = 0, y = 0, z = 0; int w = 640, h = 480;

glBegin(GL_QUADS);

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;

(9)

9

Praktikum Grafika Komputer

}

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){

glutTimerFunc(50, timer, 0); }

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:

(10)

10

Praktikum Grafika Komputer

glBegin(GL_QUADS);

glEnd(); }

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(); }

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.

(11)

11

Praktikum Grafika Komputer

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:

glBegin(GL_QUADS);

glEnd(); }

}

if (button == GLUT_RIGHT_BUTTON && state == GLUT_UP){ glScalef(0.5, 0.5, 0);

} }

glutCreateWindow("Pemrograman GLUT"); gluOrtho2D(-w / 2, w / 2, -h / 2, h / 2); glutDisplayFunc(renderScene); glutMouseFunc(mouse); glutTimerFunc(50, timer, 0); glutMainLoop(); }

(12)

12

Praktikum Grafika Komputer

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:

glBegin(GL_QUADS);

glEnd(); }

}

if (button == GLUT_RIGHT_BUTTON && state == GLUT_UP){ glScalef(0.5, 0.5, 0);

} }

(13)

13

Praktikum Grafika Komputer

glutTimerFunc(50, timer, 0);

}

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:

glBegin(GL_QUADS);

glEnd(); }

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);

(14)

14

Praktikum Grafika Komputer

}

glClear(GL_COLOR_BUFFER_BIT); glColor3f(1, 0, 0); glPushMatrix(); glTranslatef(x, y, z); drawQuad(20, 20); glPopMatrix(); glFlush(); }

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:

(15)

15

Praktikum Grafika Komputer

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 main(int argc, char **argv) {

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:

(16)

16

Praktikum Grafika Komputer

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 <stdlib.h> #include <glut.h> 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);

(17)

17

Praktikum Grafika Komputer

break; case GLUT_KEY_UP: glTranslatef(7, 3, 0); break; case GLUT_KEY_DOWN: glTranslatef(-7, -3, 0); break; } }

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

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:

(18)

18

Praktikum Grafika Komputer

#include <stdlib.h> #include <glut.h> #include <stdio.h> 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){

glutTimerFunc(50, Timer, 0); }

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:

(19)

19

Praktikum Grafika Komputer

Penjelasan:

- Tugas Asistensi 4

Source code:

#include "stdlib.h" #include "stdio.h" #include <conio.h> #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(); }

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) {

(20)

20

Praktikum Grafika Komputer

x = 1; y = 1; flg = 0; } } } } }

glClear(GL_COLOR_BUFFER_BIT); glClearColor(1, 1, 1, 0); glPushMatrix(); glScalef(x, y, z); drawQuad(); glPopMatrix(); glFlush(); }

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(); }