LAPORAN GRAFIKA KOMPUTER INTERAKSI MOU

LAPORAN PRAKTIKUM

GRAFIKA KOMPUTER

MODUL 4

“Interaksi dengan Keyboard dan Mouse”

dibimbing oleh Bapak Heru Wahyu Herwanto, S.T, M.KOM

PENYUSUN :

Ananda Putri Syaviri

( 130533608243 )

S1 PTI – B 2013

UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK

JURUSAN TEKNIK ELEKTRO

PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA 2013 B

MARET 2015

A. TUJUAN



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.



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

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. JOBSHEET PRAKTIKUM

(INTERAKSI KEYBOARD)

LATIHAN 1



Syntax Program

#include<stdlib.h> #include<glut.h> void Persegi() {

glBegin(GL_QUADS); glVertex2d(0,0); glVertex2d(0,50); glVertex2d(80,50); glVertex2d(80,0); glEnd(); }

void Display() { glClear (GL_COLOR_BUFFER_BIT); glColor3f(0,0,1); Persegi(); glFlush(); }

void myKeyboard(unsignedchar key, int x, int y) {

if (key == 'a')

glTranslatef (-4, 0, 0);

elseif (key == 'd')

glTranslatef (4, 0, 0); }

void timer (int value) {

glutPostRedisplay(); glutTimerFunc(10,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 (640,480);

glutCreateWindow ("LATIHAN INTERAKSI KEYBOARD"); gluOrtho2D(-250., 250., -250., 250.);

glutDisplayFunc(Display); glutTimerFunc(1000,timer,0); glutKeyboardFunc(myKeyboard);

//glutSpecialFunc(mySpecialKeyboard);

glutMainLoop(); }



Screen Shoot Hasil Program

 tampilan awal

tekan keyboard a

 tekan keyboard d



Penjelasan

-

Program diatas merupakan program interaksi keyboard yang diterapkan dalam

objek persegi, dengan alur kerjanya , jika menekan keyboard a maka objek akan

bergeser kearah kiri, dan jika menekan keyboard d maka objek akan bergeser kea

rah kanan. Menggunakan fungsi display untuk menampilkan objek dengan warna

biru ( kode 001). Kemudian menggunakan fungsi myKeyboard yang digunakan

untuk penedeklarasian fungsi keyboard a dan d , dengan perkondisian if. Jika key

== a maka menggunakan fungsi translate dengan parameter -4,0,0 yang artinya

bergerak ke arah x= -4 , y=0 dan z=0. Jika key ==d maka di translate dengan

parameter 4,0,0 yang artinya bergerak kea rah x=4, y=0, dan z=0. Untuk

memanggil fungsi keybard menggunakan “glutKeyboardFunc(myKeyboard)”.

LATIHAN 2



Syntax Program

#include<stdlib.h> #include<glut.h> void Persegi() {

glBegin(GL_QUADS); glVertex2d(0,0); glVertex2d(0,30); glVertex2d(80,30); glVertex2d(80,0); glEnd(); }

void Display() { glClear (GL_COLOR_BUFFER_BIT); glColor3f(0,0,1); Persegi(); glFlush(); }

void myKeyboard(unsignedchar key, int x, int y) {

if (key == 'a')

glTranslatef (-4, 0, 0);

elseif (key == 'd')

glTranslatef (4, 0, 0);

elseif (key == 's')

glTranslatef (0,-4,0); }

void timer (int value) {

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

void update (int value) {

glutPostRedisplay();

glutTimerFunc(50, update,0); }

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

glutInit (&argc, argv);

glutInitWindowPosition(100,100); glutInitWindowSize (640,480);

glutCreateWindow ("LATIHAN INTERAKSI KEYBOARD"); gluOrtho2D(-250., 250., -250., 250.);

glutDisplayFunc(Display); glutTimerFunc(1000,timer,0); glutKeyboardFunc(myKeyboard);

//glutSpecialFunc(mySpecialKeyboard);

glutMainLoop(); }



Screen Shoot Hasil Program



tampilan awal

tekan keyboard s



Penjelasan

-

Program diatas sama seperti program sebelumnya, hanya saja ada tambahan

fungsi jika menekan keyboard s, maka objek akan bergeser kearah bawah ( dengan

parameter 0, -4, 0 yang artinya bergerak kea rah x=0 , y=-4, z=0). Sama seperti

program latiahan 1 menggunakan keyboard a dan d , jika menekan keyboard a

maka objek akan bergeser kearah kiri, dan jika menekan keyboard d maka objek

akan bergeser kea rah kanan. Menggunakan fungsi display untuk menampilkan

objek dengan warna biru ( kode 001). Kemudian menggunakan fungsi

myKeyboard yang digunakan untuk penedeklarasian fungsi keyboard a dan d ,

dengan perkondisian if. Jika key == a maka menggunakan fungsi translate dengan

parameter -4,0,0 yang artinya bergerak ke arah x= -4 , y=0 dan z=0. Jika key ==d

maka di translate dengan parameter 4,0,0 yang artinya bergerak kea rah x=4, y=0,

dan z=0. Untuk memanggil fungsi keybard menggunakan

“glutKeyboardFunc(myKeyboard)”.

LATIHAN 3



Syntax Program

#include<stdlib.h> #include<glut.h> void Persegi() {

glBegin(GL_QUADS); glVertex2d(0,0); glVertex2d(0,50); glVertex2d(80,50); glVertex2d(80,0); glEnd(); }

void Display() { glClear (GL_COLOR_BUFFER_BIT); glColor3f(0,0,1); Persegi(); glFlush(); }

void myKeyboard(unsignedchar key, int x, int y) {

if (key == 'a')

glTranslatef (-4, 0, 0);

elseif (key == 'd')

glTranslatef (4, 0, 0); }

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

switch(key) {

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

break; }

}

void timer (int value) {

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

void update (int value) {

glutPostRedisplay();

glutTimerFunc(50, update,0); }

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

glutInitDisplayMode (GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100);

glutInitWindowSize (640,480);

glutCreateWindow ("LATIHAN INTERAKSI KEYBOARD"); gluOrtho2D(-250., 250., -250., 250.);

glutDisplayFunc(Display); glutTimerFunc(1000,timer,0); glutKeyboardFunc(myKeyboard); glutSpecialFunc(mySpecialKeyboard);

glutMainLoop(); }



Screen Shoot Hasil Program

 tampilan awal

 tekan keyboar navigasi kiri.



Penjelasan

-

Program diatas sama dengan latihan 1, hanya menambahkan fungsi

specialKeyboard menggunakan keyboard navigasi kiri untuk memutar objek

kearah kiri dengan menggunakan fungsi rotate berparameter (4,0,01) dan jika

menekan keyboard a maka objek akan bergeser kearah kiri, dan jika menekan

keyboard d maka objek akan bergeser kea rah kanan. Menggunakan fungsi display

untuk menampilkan objek dengan warna biru ( kode 001). Kemudian

menggunakan fungsi myKeyboard yang digunakan untuk pendeklarasian fungsi

keyboard a dan d , dengan perkondisian if. Jika key == a maka menggunakan

fungsi translate dengan parameter -4,0,0 yang artinya bergerak ke arah x= -4 , y=0

dan z=0. Jika key ==d maka di translate dengan parameter 4,0,0 yang artinya

bergerak kea rah x=4, y=0, dan z=0. Untuk memanggil fungsi keybard

menggunakan “glutKeyboardFunc(myKeyboard);”. Untuk memanggil fungsi

special Keyboard dengan menggunakan “glutSpecialFunc(mySpecialKeyboard)”.

LATIHAN 4



Syntax Program

#include<stdlib.h> #include<glut.h> void Persegi() {

glBegin(GL_QUADS); glVertex2d(0,0); glVertex2d(0,50); glVertex2d(80,50); glVertex2d(80,0); glEnd(); }

void Display() { glClear (GL_COLOR_BUFFER_BIT); glColor3f(0,0,1); Persegi(); glFlush(); }

void myKeyboard(unsignedchar key, int x, int y) {

if (key == 'a')

glTranslatef (-4, 0, 0);

elseif (key == 'd')

glTranslatef (4, 0, 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,1,0);

break; }

}

void timer (int value) {

glutPostRedisplay(); glutTimerFunc(10,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 (640,480);

glutCreateWindow ("LATIHAN INTERAKSI KEYBOARD"); gluOrtho2D(-250., 250., -250., 250.);

glutDisplayFunc(Display); glutTimerFunc(1000,timer,0); glutKeyboardFunc(myKeyboard); glutSpecialFunc(mySpecialKeyboard);

glutMainLoop(); }



Screen Shoot Hasil Program

tampilan awal

 tekan keyboard navigasi kiri

 tekan keyboard navigasi kanan

-

Program diatas sama seperti program latihan 3 , hanya saja menambahkan fungsi

pada keyboard navigasi kanan yang fungsinya mempersempit objek kearah kiri

dengan parameter (-4,0,1,0). Fungsi ini ditambahakan pada fungsi

specialKeyboard.

LATIHAN 5



Syntax Program

#include<stdlib.h> #include<glut.h> void Persegi() {

glBegin(GL_QUADS); glVertex2d(0,0); glVertex2d(0,50); glVertex2d(80,50); glVertex2d(80,0); glEnd(); }

void Display() {

glClear (GL_COLOR_BUFFER_BIT); Persegi();

glFlush(); }

void myKeyboard(unsignedchar key, int x, int y) {

if (key == 'a')

glTranslatef (-4, 0, 0);

elseif (key == 'd')

glTranslatef (4, 0, 0);

elseif (key == 'w')

glTranslatef (0,4,0);

elseif (key == 's')

glTranslatef (0,-4,0);

elseif (key == 'z') glColor3f (1,0,0);

elseif (key == 'x') glColor3f (0,1,0);

elseif (key == 'c') glColor3f (0,0,1);

elseif (key == 'v') glColor3f (0,1,1); }

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,1,0);

break; }

}

void timer (int value) {

glutPostRedisplay(); glutTimerFunc(10,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 (640,480);

glutCreateWindow ("LATIHAN INTERAKSI KEYBOARD"); gluOrtho2D(-250., 250., -250., 250.);

glutDisplayFunc(Display); glutTimerFunc(1000,timer,0); glutKeyboardFunc(myKeyboard); glutSpecialFunc(mySpecialKeyboard);

glutMainLoop(); }



Screen Shoot Hasil Program

 tekan keyboard w

 tekan keyboard z

 tekan keyboard x

 tekan keyboard v



Penjelasan

-

Program diatas sama seperti pada program 1 dan 2 , hanya saja menambahkan

fungsi color3f jika menekan keyboard z,x,c,v utnuk merubah warna objek. Jika

menekan keyboard z= merah, x=hijau, c=biru, v=cyan. Untuk merubah warna

objek dapat ditambahkan fungsi glColor3f pada fungsi myKeyboard.

Menggunakan fungsi keyboard a untuk geser kiri, d geser kanan, s geser kebawah

dan w geser keatas.

(INTERAKSI MOUSE)

LATIHAN 1



Syntax Program

#include<stdlib.h> #include<glut.h> int w = 480;

int h = 480;

float x = 0;

float y = 0;

float z = 0;

void Persegi() {

glBegin(GL_QUADS); glColor3f(0,0,1); glVertex2d(0,0); glVertex2d(0,50); glVertex2d(80,50); glVertex2d(80,0); glEnd();

}

void Display() {

glClear (GL_COLOR_BUFFER_BIT); glPushMatrix();

glTranslatef(x,y,z); Persegi();

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 timer (int value) {

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

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

glutInit (&argc, argv);

glutInitDisplayMode (GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100);

glutInitWindowSize (w,h);

glutCreateWindow ("LATIHAN INTERAKSI MOUSE"); gluOrtho2D(-w/2, w/2, -h/2, h/2);

glutDisplayFunc(Display); glutTimerFunc(1000,timer,0); glutMouseFunc(mouse);

//glutSpecialFunc(mySpecialKeyboard);

glutMainLoop(); }



Screen Shoot Hasil Program



Memindahkan objek jika mouse klik.



Penjelasan

-

Program diatas adalah penerapan interaksi pada kouse. Menggunakan fungsi

mouse untuk pengaturan interaksi apa yang terjadi jika mengklik atau kursor

mouse digunakan. Pada program ini menunjukkan jika mengklik mouse pada

posisi sembarang maka objke tersebut akan berpindah sesuai dimana mouse diklik

dengan pengaturan

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

yang artinya jika x

berfungsi mengatur posisi sumbu x dari objek ketika mouse di klik dan Y

berfungsi mengatur posisi sumbu y dari objek ketika mouse di klik.

LATIHAN 2



Syntax Program

#include<stdlib.h> #include<glut.h> int w = 480;

int h = 480;

float x = 0;

float y = 0;

float z = 0;

void Persegi() {

glBegin(GL_QUADS); glColor3f(0,0,1); glVertex2d(0,0); glVertex2d(0,50); glVertex2d(80,50); glVertex2d(80,0); glEnd();

}

void Display() {

glClear (GL_COLOR_BUFFER_BIT); glPushMatrix();

Persegi(); glPopMatrix(); glFlush(); }

void mouse(int button, int state, int xmouse, int ymouse) {

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

glScalef(2,2,1); }

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

glScalef(0.5,0.5,1); }

}

void timer (int value) {

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

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

glutInit (&argc, argv);

glutInitDisplayMode (GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100);

glutInitWindowSize (w,h);

glutCreateWindow ("LATIHAN INTERAKSI MOUSE"); gluOrtho2D(-w/2, w/2, -h/2, h/2);

glutDisplayFunc(Display); glutTimerFunc(1000,timer,0); glutMouseFunc(mouse);

//glutSpecialFunc(mySpecialKeyboard);

glutMainLoop(); }



Screen Shoot Hasil Program

 jika menekan tombol mouse kanan

 menekan tombol mouse kiri



Penjelasan

-

Program diatas berfungsi untuk merubah ukuran objke dengan menggunakan

fungsi Scalef dengan parameter, jika ingin merubah objek menjadi semakin besar

(2,2,1) jika ingin mengecilkan ukuran objek dengan parameter (0.5,0.5,1).

Fungsi yang digunakan dengan perkondisian if yang nantinya akan merubah objek

(x,y) menjadi 2kali lebih besar dari ukuran awal (tomol kanan):

if (button == GLUT_RIGHT_BUTTON && state==GLUT_DOWN){ x= xmouse-(w/2);

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

digunakan untuk mengatur tombol klik kiri maka ukuran x dan y yang ukurannya

2x lebih kecil dari ukuran awal.

elseif (button == GLUT_LEFT_BUTTON && state==GLUT_UP){ x= xmouse-(w/2);

y=(h/2)-ymouse; glScalef(0.5,0.5,1);

LATIHAN 3



Syntax Program

#include<stdlib.h> #include<glut.h> int w = 480;

int h = 480;

float x = 0;

float y = 0;

float z = 0;

void Persegi() {

glBegin(GL_QUADS); glColor3f(0,0,1); glVertex2d(0,0); glVertex2d(0,50); glVertex2d(80,50); glVertex2d(80,0); glEnd(); }

void Display() { glClear (GL_COLOR_BUFFER_BIT); glPushMatrix(); glTranslatef(x,y,z); Persegi(); glPopMatrix(); glFlush(); }

void mouse(int button, int state, int xmouse, int ymouse) {

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

glScalef(2,2,1); }

elseif (button == GLUT_RIGHT_BUTTON && state == GLUT_UP) {

glScalef(0.5,0.5,1); }

}

void timer (int value) {

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

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

glutInit (&argc, argv);

glutInitDisplayMode (GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100);

glutInitWindowSize (w,h);

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

glutTimerFunc(1000,timer,0); glutMouseFunc(mouse);

//glutSpecialFunc(mySpecialKeyboard);

glutMainLoop(); }



Screen Shoot Hasil Program

 tampilan awal

 jika menekan tombol mouse kiri



Penjelasan

-

Program diatas sama seperti program latihan 2 namun kebalikannya. Berfungsi

untuk merubah ukuran objek dengan menggunakan fungsi Scalef dengan

parameter, jika ingin merubah objek menjadi semakin besar (2,2,1) jika ingin

mengecilkan ukuran objek dengan parameter (0.5,0.5,1).

Fungsi yang digunakan dengan perkondisian if yang nantinya akan merubah objek

(x,y) menjadi 2kali lebih besar dari ukuran awal (tomol kiri):

if (button == GLUT_LEFT_BUTTON && state==GLUT_DOWN){ x= xmouse-(w/2);

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

digunakan untuk mengatur tombol klik kanan maka ukuran x dan y yang

ukurannya 2x lebih kecil dari ukuran awal.

elseif (button == GLUT_RIGHT_BUTTON && state==GLUT_UP){ x= xmouse-(w/2);

y=(h/2)-ymouse; glScalef(0.5,0.5,1);

LATIHAN 4



Syntax Program

# include<glut.h> #include<stdio.h> float x=0, y=0, z=0;

int w=480;

int h=480;

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

}

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_RIGHT_BUTTON && state==GLUT_DOWN){ x= xmouse-(w/2);

y=(h/2)-ymouse; glScalef(2,2,2); }

elseif (button == GLUT_RIGHT_BUTTON && state==GLUT_UP){ x= xmouse-(w/2);

y=(h/2)-ymouse; glScalef(0.5,0.5,0.5); }

}

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(w,h);

glutCreateWindow("Gesta Wahyu sasongko"); gluOrtho2D(-100,100,-100,100);

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



Screen Shoot Hasil Program



Jika menekan tombl mouse kiri maka akan merubah objek menjadi kecil,

tombol mouse kanan untuk merubah objek menjadi besar, namun perubahan

skalanya kearah pointer mouse.



Penjelasan

 mouse

 OPEN GL

Untuk open GL, objek akan terletak pada koordinat 0,0 terletak (tengah window),

sedangkan untuk mouse koordinat 0,0 terletak pada dimana posisi pointer mouse

diletakkan, sehingga tidak secara otomatis berada pad tengah window yang

digunakan seperti pada open GL.

LATIHAN 5

#include<stdlib.h> #include<glut.h> int w = 480;

int h = 480;

float x = 0;

float y = 0;

float z = 0;

void Persegi() {

glBegin(GL_QUADS); glColor3f(0,0,1); glVertex2d(0,0); glVertex2d(0,50); glVertex2d(80,50); glVertex2d(80,0); glEnd(); }

void Display() { glClear (GL_COLOR_BUFFER_BIT); glPushMatrix(); glTranslatef(x,y,z); Persegi(); 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 motion (int xmouse, int ymouse) {

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

void timer (int value) {

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

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

glutInit (&argc, argv);

glutInitDisplayMode (GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100);

glutInitWindowSize (w,h);

glutCreateWindow ("LATIHAN INTERAKSI MOUSE"); gluOrtho2D(-w/2, w/2, -h/2, h/2);

glutDisplayFunc(Display); glutTimerFunc(1000,timer,0);

glutMouseFunc(mouse);

//glutSpecialFunc(mySpecialKeyboard);

glutMotionFunc(motion); glutMainLoop();

}



Screen Shoot Hasil Program



Penjelasan

-

Program diatas menggunakan fungsi motion yang berfungsi mengatur letak objek

berdasarkan posisi mosue diletakkan/diklik. Sama seperti pada latihan 1, bedanya

hanya ketika objek diklik dan ditahan maka objek akan ikut berpindah dengan

pergerakan pointer mouse.

D. TUGAS ASISTENSI

TUGAS ASISTENSI 1



Syntax Program

#include<stdlib.h> #include<glut.h> void drawQuad(void){

glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLES);

glColor3f(1,0,0); glVertex2f(0.,100.); glVertex2f(80.,0.); glVertex2f(-80.,0.); glColor3f(1,1,1); glVertex2f(0.,-100.); glVertex2f(80.,0.); glVertex2f(-80.,0.); glEnd();

glFlush(); }

void renderScene(){

glClear(GL_COLOR_BUFFER_BIT); drawQuad();

glFlush(); }

void myKeyboard(unsignedchar key, int x, int y) {

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

elseif (key == 'l') glRotatef (-4,0,0,1); }

void update(int value){ glutPostRedisplay();

glutTimerFunc(60,update,0); }

void main(int argc, char **argv) { glutInit (&argc, argv);

glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA) ; glutInitWindowPosition(100,100);

glutInitWindowSize(480,480);

glutCreateWindow("ASISTENSI 1 SYAVIRI"); gluOrtho2D(-320.,320.,-320.,320.0); glutDisplayFunc(renderScene); glutKeyboardFunc(myKeyboard); glutTimerFunc(60, update, 0); glutMainLoop();

}



Screen Shoot Hasil Program

 tekan keyboard k

 tekan keyboard l



Penjelasan

-

Pada program diatas menggunakan fungsi triangle untuk membuat dua buah objek

berwarna merah dan putih , yang dideklarasikan pada fungsi drawQuad.

Kemudian untuk mengubah posisi objek menggunakan fungsi myKeyboard yang

didalamnya dideklarasikan jika menekan tombol k dan l akan dirotatef sesuai

dengan parameter masing- masing, untuk tombol k kearah kiri , tombol l kearah

kanan.

TUGAS ASISTENSI 2



Syntax Program

#include<stdlib.h> #include<glut.h> int a, p, j, n;

void drawQuad(){ glBegin(GL_QUADS);

glColor3f(0, 0, 1); glVertex2i(0, 0); glVertex2i(0, 95); glVertex2i(-95, 95); glVertex2i(-95, 0); glEnd(); }

void myKeyboard(unsignedchar key, int x, int y){

if (key == 'A' || key == 'a') { a -= 3;

}

elseif (key == 'J' || key == 'j'){ p -= 3;

}

elseif (key == 'N' || key == 'n'){ a += 3;

}

elseif (key == 'P' || key == 'p'){ p += 3;

} }

void drawSegitiga(){ glBegin(GL_TRIANGLES); glColor3f(0, 1, 1); glVertex2f(100.,100.); glVertex2f(150.,0.); glVertex2f(50.,0.); glEnd();

}

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

switch (key){

case GLUT_KEY_LEFT: j -= 3;

break;

case GLUT_KEY_RIGHT: j += 3;

break;

case GLUT_KEY_UP: n += 3;

break;

case GLUT_KEY_DOWN: n -= 3;

break; }

}

void renderScene(){

glClear(GL_COLOR_BUFFER_BIT); glPushMatrix();

glTranslatef(a, p, 0); drawQuad();

glPopMatrix(); glPushMatrix(); glTranslatef(j, n, 0); drawSegitiga(); glPopMatrix(); glFlush(); }

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("ASISTENSI 2 SYAVIRI"); gluOrtho2D(-220.0, 220.0, -200.0, 200.0); glutTimerFunc(50, update, 1);

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

}



Screen Shoot Hasil Program

 tampilan awal

posisi kedua objek setelah menekan

keyboard a/p/j/n dan navigasi kiri-kanan-atas-bawah



Penjelasan

-

Program diatas merupakan penerapan dari kombinasi tombol keyboard biasa dan

tombol special keyboard. Untuk mengatur penggunaan tombol keyboard biasa ,

menggunakan tombol a,p,j,n dideklarasikan pada fungsi myKeyboard. Sedangkan

untuk tombol navigasi keyboard, menggunakan fungsi mySpecialKeyboard untuk

pendeklarasian fungsi-fungsinya. Menggunakan dua bua objek sebagai contoh

pembuktian hasil program , persegi dan segitiga dengan pendeklarasian warna dan

system koordinat yang digunakan pada fungsi drawQuad untuk persegi dan

drawSegitiga untuk segitiga. Menggunakan fungsi translate untuk perpindahan

objek, kemudian menggunakan fungsi popMatrix dan pushMatrix untuk

menambah modifikasi program diatas.

TUGAS ASISTENSI 3



Syntax Program

#include<stdlib.h> #include<glut.h> #include<stdio.h> int w = 480;

int h = 480;

float a=1;

float b=1;

int c=0;

int d=0;

void draw() { glBegin(GL_QUADS); glVertex2i(0,0); glVertex2i(0,100); glVertex2i(100,100); glVertex2i(100,0); glEnd(); }

void render(void) { glClear(GL_COLOR_BUFFER_BIT); glColor3f(1,1,0); glPushMatrix(); glScalef(a,1,0); glScalef(1,b,0); draw(); glPopMatrix(); glFlush(); }

void timer(int value) {

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

void motion(int x, int y) {

c=x-240; d= -(y-240);

printf("posisi pointer mouse (%d,%d) \n", c, d); }

void mouse(int button, int state, int xmouse, int ymouse) {

if (button == GLUT_RIGHT_BUTTON && state == GLUT_UP) {

a += c/100; b += d/100; }

}

void main(int argc, char **argv){ glutInit(&argc, argv);

glutInitWindowSize(w,h);

glutCreateWindow("Gesta Wahyu Sasongko"); gluOrtho2D(-w/2,w/2,-h/2,h/2);

glutDisplayFunc(render); glutTimerFunc(100,timer,0); glutMouseFunc(mouse); glutMotionFunc(motion); glutMainLoop();

}



Penjelasan

-

Program diatas menampilkan posisi mouse pada window yang menampilkan

objek. Ketika pada window objek , mouse diklik, maka pada window lainnya yang

kosong akan muncul informasi mengenai posisi pointer mouse saat mouse diklik.

Posisi mouse akan terbaca jika mouse digerakkan dan di klik. Untuk mendeteksi

pergerakan pointer mouse menggunakan fungsi motion.

TUGAS ASISTENSI 4



Syntax Program

#include"stdlib.h" #include"stdio.h" #include<conio.h> #include"glut.h" float x=1,y=1,z=0;

int w=480, h=480, flag=0,flg;

void drawQuad() {

glBegin(GL_POLYGON); glColor3f(0,0,1); glVertex2f(-40.,-40.); glVertex2f(40.,-40.); glVertex2f(40.,40.); glVertex2f(-40.,40.); glEnd(); }

void mouse(int button, int state, int xmouse, int ymouse){

if(flg==0){

if(button==GLUT_LEFT_BUTTON && state==GLUT_DOWN){ flag++; if(flag==2){ flg=3; x=3; y=3; flag=3; } } }

if (flg==3){

if(button==GLUT_LEFT_BUTTON && state==GLUT_DOWN){ flag--; if(flag==0){ x=1; y=1; flg=0; } } } }

void renderScene(void){

glClear(GL_COLOR_BUFFER_BIT); 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("ASISTENSI 4 SYAVIRI"); gluOrtho2D(-w/2,w/2,-h/2,h/2);

glutDisplayFunc(renderScene); glutMouseFunc(mouse);

glutTimerFunc(1,timer,0); glutMainLoop();

}



Screen Shoot Hasil Program

 tampilan awal

 double klik pertama

 double klik kedua



Penjelasan

-

Program diatas menggunakan perkondisian if untuk mendeteksi event double klik.

Dideklarasikan dalam fungsi mouse untuk merubah ukuran objek, untuk double

klik pertama merubah ukuran objek menjadi lebih besar, kemudian untuk double

klik kedua merubah ukuran objke menjadi seperti semula. Jika flag ==0 , maka x

dan y ditamabh 3, jika flag==3 maka x dan y=1 yang artinya kembali pada bentuk

awal.

E. KESIMPULAN



Untuk mendeklarasikan penggunaan tombol keyboard alphabet maka

menggunakan fungsi myKeyboard, karena tombol alphabet merupakan tombol

biasa.



Untuk mendeklarasikan penggunaan tombol navigasi keyboard, menggunakan

fungsi mySpecialKeyboard , karena tombol navigasi merupakan tombol special.



Untuk penggunaan system koordinat openGL , maka posisi objek akan berada

pada dimana pointer mouse tersebut diletakkan.



Sedangkan untuk penggunaan system koorsinat menggunakan fungsi mouse,

maka posisi objek akan berada pada posisi tengah window yang digunakan.



Penggunaan fungsi motion berfungsi untuk menggerakkan objek ketika mengklik

dan menahan , sehingga hasilnya objek tersebut akan ikut bergerak mengikuti

arah pointer mouse.



Untuk merubah posisi objek dapat menggunakan fungsi translatef da

rotatef(memutar), sedangkan untuk mengubah ukuran objek dapat menggunaka

fungsi scalef.

F. DAFTAR PUSTAKA

Modul 4 Praktikum Grafika Komputer 2015. Interaksi dengan Keyboard dan Mouse..

Universitas Negeri Malang. Fakultas Teknik. Jurusan Teknik Elektro

pendeklarasian fungsi-fungsinya. Menggunakan dua bua objek sebagai contoh pembuktian hasil program , persegi dan segitiga dengan pendeklarasian warna dan system koordinat yang digunakan pada fungsi drawQuad untuk persegi dan drawSegitiga untuk segitiga. Menggunakan fungsi translate untuk perpindahan objek, kemudian menggunakan fungsi popMatrix dan pushMatrix untuk menambah modifikasi program diatas.

TUGAS ASISTENSI 3

 Syntax Program

#include<stdlib.h> #include<glut.h> #include<stdio.h> int w = 480;

int h = 480;

float a=1;

float b=1;

int c=0;

int d=0;

void draw() { glBegin(GL_QUADS); glVertex2i(0,0); glVertex2i(0,100); glVertex2i(100,100); glVertex2i(100,0); glEnd(); }

void render(void) { glClear(GL_COLOR_BUFFER_BIT); glColor3f(1,1,0); glPushMatrix(); glScalef(a,1,0); glScalef(1,b,0); draw(); glPopMatrix(); glFlush(); }

void timer(int value) {

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

void motion(int x, int y) {

c=x-240; d= -(y-240);

printf("posisi pointer mouse (%d,%d) \n", c, d); }

void mouse(int button, int state, int xmouse, int ymouse) {

if (button == GLUT_RIGHT_BUTTON && state == GLUT_UP) {

a += c/100; b += d/100; }

}

void main(int argc, char **argv){ glutInit(&argc, argv);

glutInitWindowSize(w,h);

glutCreateWindow("Gesta Wahyu Sasongko"); gluOrtho2D(-w/2,w/2,-h/2,h/2);

glutDisplayFunc(render); glutTimerFunc(100,timer,0); glutMouseFunc(mouse); glutMotionFunc(motion); glutMainLoop();

}

 Penjelasan

- Program diatas menampilkan posisi mouse pada window yang menampilkan objek. Ketika pada window objek , mouse diklik, maka pada window lainnya yang kosong akan muncul informasi mengenai posisi pointer mouse saat mouse diklik. Posisi mouse akan terbaca jika mouse digerakkan dan di klik. Untuk mendeteksi pergerakan pointer mouse menggunakan fungsi motion.

TUGAS ASISTENSI 4

 Syntax Program

#include"stdlib.h" #include"stdio.h" #include<conio.h> #include"glut.h" float x=1,y=1,z=0;

int w=480, h=480, flag=0,flg;

void drawQuad() {

glBegin(GL_POLYGON); glColor3f(0,0,1); glVertex2f(-40.,-40.); glVertex2f(40.,-40.); glVertex2f(40.,40.); glVertex2f(-40.,40.); glEnd(); }

void mouse(int button, int state, int xmouse, int ymouse){

if(flg==0){

if(button==GLUT_LEFT_BUTTON && state==GLUT_DOWN){ flag++; if(flag==2){ flg=3; x=3; y=3; flag=3; } } }

if (flg==3){

if(button==GLUT_LEFT_BUTTON && state==GLUT_DOWN){ flag--; if(flag==0){ x=1; y=1; flg=0; } } } }

void renderScene(void){

glClear(GL_COLOR_BUFFER_BIT); 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("ASISTENSI 4 SYAVIRI"); gluOrtho2D(-w/2,w/2,-h/2,h/2);

glutDisplayFunc(renderScene); glutMouseFunc(mouse);

glutTimerFunc(1,timer,0); glutMainLoop();

}

 Screen Shoot Hasil Program

 tampilan awal

 double klik pertama

 double klik kedua  Penjelasan

- Program diatas menggunakan perkondisian if untuk mendeteksi event double klik.

klik pertama merubah ukuran objek menjadi lebih besar, kemudian untuk double klik kedua merubah ukuran objke menjadi seperti semula. Jika flag ==0 , maka x dan y ditamabh 3, jika flag==3 maka x dan y=1 yang artinya kembali pada bentuk awal.

E. KESIMPULAN

 Untuk mendeklarasikan penggunaan tombol keyboard alphabet maka menggunakan fungsi myKeyboard, karena tombol alphabet merupakan tombol biasa.

 Untuk mendeklarasikan penggunaan tombol navigasi keyboard, menggunakan fungsi mySpecialKeyboard , karena tombol navigasi merupakan tombol special.

 Untuk penggunaan system koordinat openGL , maka posisi objek akan berada pada dimana pointer mouse tersebut diletakkan.

 Sedangkan untuk penggunaan system koorsinat menggunakan fungsi mouse, maka posisi objek akan berada pada posisi tengah window yang digunakan.

 Penggunaan fungsi motion berfungsi untuk menggerakkan objek ketika mengklik dan menahan , sehingga hasilnya objek tersebut akan ikut bergerak mengikuti arah pointer mouse.

 Untuk merubah posisi objek dapat menggunakan fungsi translatef da rotatef(memutar), sedangkan untuk mengubah ukuran objek dapat menggunaka fungsi scalef.

F. DAFTAR PUSTAKA

Modul 4 Praktikum Grafika Komputer 2015. Interaksi dengan Keyboard dan Mouse..