MODUL 7

INTERAKSI OBJEK 2D

(MOUSE FUNCTION)

A. KOMPETENSI DASAR

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

Membuat interaksi objek 2D menggunakan mouse.

B. ALOKASI WAKTU

4 JS (4x50 menit)

C. PETUNJUK

D. DASAR TEORI 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.

Awali setiap aktivitas dengan do’a, semoga berkah dan mendapat kemudahan.

Pahami Tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar.

Kerjakan tugas-tugas dengan baik, sabar, dan jujur.

Tanyakan kepada asisten/dosen apabila ada hal-hal yang kurang jelas.

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

E. AKTIVITAS KELAS PRAKTIKUM

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 prak7-mouseMotion. Fungsi myDisplay

callback function yang di dalamnya menggunakan fungsi Points untuk memindah posisi objek

sesuai pointer mouse.

float x=0,y=0,z=0;

void myDisplay(void)

{

glClear(GL_COLOR_BUFFER_BIT);

glPushMatrix();

glTranslatef(x,y,z);

drawQuad(5,5);

glPopMatrix();

glFlush();

}

Fungsi mouse untuk inisialisasi mouse event.

Screenshot Normal Screenshot klik kiri

#include <stdio.h> #include <glut.h> int w=480,h=480; float x=0,y=0,z=0; void drawKoordinat(){ glBegin(GL_LINES); glColor3f(0,0,0); glVertex2f(-240.,0.); glVertex2f(240.,0.); glVertex2f(0.,-240.); glVertex2f(0.,240.); glEnd(); } void drawQuad(int t, int l){ glBegin(GL_QUADS); glColor3f(1.,0.0,0.4); glVertex2i(l-3*t,t-3*l); glVertex2i(l-3*t,2*t); glVertex2f(2*l,2*t); glVertex2f(2*l,t-3*l); glEnd(); } void myDisplay() { glClear(GL_COLOR_BUFFER_BIT); drawKoordinat(); glPushMatrix(); glTranslatef(x,y,z); drawQuad(2,2); 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(1,timer,0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitWindowPosition(200,200); glutInitWindowSize(w,h); glutCreateWindow("prakt-mouseMotion"); gluOrtho2D(-w/2,w/2,-h/2,h/2); glClearColor(1, 1, 1, 0); glutDisplayFunc(myDisplay); glutTimerFunc(0,timer,0); glutMouseFunc(mouse); glutMainLoop(); }

2. Sempurnakan program di atas sehingga tombol tengah ditekan akan menyebabkan objek

memiliki skala yang membesar (1.1) dan tombol kanan ditekan akan menyebabkan skala

mengecil (0.9). Berikan source code program.

Screenshot Normal Screenshot klik kiri

Seperti biasanya callback fungsi glutTimerFunc() harus dimasukkan di dalam fungsi main. Fungsi ini akan selalu dipakai untuk setiap obyek yang menghasilkan animasi (perubahan).

Callback fungsi glutMouseFunc(mouse) digunakan untuk mentriger fungsi void mouse(). Fungsi void mouse() pada latihan 1 berguna untuk menjalankan kondisi if(button == GLUT_LEFT_BUTTON && state == GLUT_DOWN), maksutnya disini adalah kondisi penggunaan klik kiri ketika ditekan yang nantinya akan menjalankan baris

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

2 baris diatas nantinya akan menggantikan dari variabel X dan Y telah dideklarasikan sebelumnya sbg variabel umum. Nilai X dan Y inilah yang akan dipakai sebagai nilai pada

parameter glTranslatef() sehingga terjadi perubahan posisi objek.

Nilai x adalah berdasarkan perhitungan xmouse-(w/2), nantinya akan menghasilkan koordinat sesuai model koordinat x pada gluortho.

Nilai x adalah berdasarkan perhitungan (h/2) – ymouse, nantinya akan menghasilkan koordinat sesuai model koordinat y pada gluortho.

Posisi koordinat xmouse dan ymouse dihitung (0,0) dari kiri atas dan terus bertambah ke kanan bawah seperti perhitungan koordinat pada window.

Screenshot klik tengah Screenshot klik kanan

#include <stdio.h> #include <glut.h> int w=480,h=480; float x=0,y=0,z=0; float s1=1,s2=1,s3=1; void drawKoordinat(){ glBegin(GL_LINES); glColor3f(0,0,0); glVertex2f(-240.,0.); glVertex2f(240.,0.); glVertex2f(0.,-240.); glVertex2f(0.,240.); glEnd(); } void drawQuad(int l, int t){ glBegin(GL_QUADS); glColor3f(1.,0.0,0.4); glVertex2i(l-3*t,t-3*l); glVertex2i(l-3*t,2*t); glVertex2f(2*l,2*t); glVertex2f(2*l,t-3*l); glEnd(); } void myDisplay() { glClear(GL_COLOR_BUFFER_BIT); drawKoordinat(); glPushMatrix(); glTranslatef(x,y,z); glScalef(s1,s2,s3); drawQuad(5,5); 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; } if(button==GLUT_MIDDLE_BUTTON && state==GLUT_DOWN){ s1*=1.1; s2*=1.1; s3*=1.1; } if(button==GLUT_RIGHT_BUTTON && state==GLUT_DOWN){ s1*=0.9; s2*=0.9; s3*=0.9;} } void timer (int value) { glutPostRedisplay(); glutTimerFunc(1,timer,0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitWindowPosition(200,200); glutInitWindowSize(w,h); glutCreateWindow("prakt-mouseMotion"); gluOrtho2D(-w/2,w/2,-h/2,h/2); glClearColor(1, 1, 1, 0); glutDisplayFunc(myDisplay); glutTimerFunc(0,timer,0); glutMouseFunc(mouse); glutMainLoop(); }

3. Ubahlah program sehingga tombol kanan ditekan skala membesar (2.0) dan ketika tombol kanan

dilepaskan (UP) skala mengecil (0.5). Berikan source code program.

Screenshot normal Screenshot klik kanan (tekan)

Sama seperti modul latihan sebelumnya namun terdapat tambahan pada jenis button yang dipakai. Disini terdapat 2 tambahan penggunaan button GLUT_MIDDLE_BUTTON dan GLUT_RIGHT_BUTTON yang kesemuanya akan menjalankan masing-masing kondisinya ketika ditekanan(klik)

Ketika if(button==GLUT_MIDDLE_BUTTON && state==GLUT_DOWN) dijalankan maka akan dieksekusi 3 baris berikut

s1*=1.1; s2*=1.1; s3*=1.1;

Ketiga baris diatas akan dikirim sebagai nilai variabel umum yang akan digunakan dalam melakukan perubahan skala.Perubahan terjadi karena nilai dipakai untuk parameter glScalef(). Keadaan riil; objek akan mengalami pembesaran sebesar 1.1 kali dari ukuran sebelumnya ketika diklik button mouse tengah.

Ketika if(button==GLUT_RIGHT_BUTTON && state==GLUT_DOWN) dijalankan maka akan dieksekusi 3 baris berikut

s1*=0.9; s2*=0.9; s3*=0.9;

Proses yang terjadi sama seperti sebelumnya bedanya, objek akan mengalami perkecilan sebesar 0.9 kali dari ukuran sebelumnya ketika diklik button mouse kanan.

Screenshot lepas klik kanan

#include <stdio.h> #include <glut.h> int w=480,h=480; float x=0,y=0,z=0; float s1=1,s2=1,s3=1; void drawKoordinat(){ glBegin(GL_LINES); glColor3f(0,0,0); glVertex2f(-240.,0.); glVertex2f(240.,0.); glVertex2f(0.,-240.); glVertex2f(0.,240.); glEnd(); } void drawQuad(int l, int t){ glBegin(GL_QUADS); glColor3f(1.,0.0,0.4); glVertex2i(l-3*t,t-3*l); glVertex2i(l-3*t,2*t); glVertex2f(2*l,2*t); glVertex2f(2*l,t-3*l); glEnd(); } void myDisplay() { glClear(GL_COLOR_BUFFER_BIT); drawKoordinat(); glPushMatrix(); glTranslatef(x,y,z); glScalef(s1,s2,s3); drawQuad(5,5); 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; } if(button==GLUT_RIGHT_BUTTON && state==GLUT_DOWN){ s1=2.; s2=2.; s3=2.;} if(button==GLUT_RIGHT_BUTTON && state==GLUT_UP){ s1=0.5; s2=0.5; s3=0.5;} } void timer (int value){ glutPostRedisplay(); glutTimerFunc(1,timer,0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitWindowPosition(200,200); glutInitWindowSize(w,h); glutCreateWindow("prakt-mouseMotion"); gluOrtho2D(-w/2,w/2,-h/2,h/2); glClearColor(1, 1, 1, 0); glutDisplayFunc(myDisplay); glutTimerFunc(0,timer,0); glutMouseFunc(mouse); glutMainLoop(); }

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 gunakan oleh mouse pointer.

Screenshot normal Screenshot klik kiri (kacau)

Pada latihan ini intinya adalah penggunaan satu jenis button yang menghasilkan dua kondisi.

Ketika if(button==GLUT_MIDDLE_BUTTON && state==GLUT_DOWN) dijalankan maka akan dieksekusi 3 baris berikut

s1=2.; s2=2.; s3=2.;

Ketiga baris diatas akan dikirim sebagai nilai variabel umum yang akan digunakan dalam melakukan perubahan skala.Perubahan terjadi karena nilai dipakai untuk parameter glScalef(). Keadaan riil; objek akan mengalami pembesaran sebesar 2 kali dari ukuran sebelumnya ketika keadaan mouse masih dalam keadaan klik button mouse kanan (menekan).

Ketika if(button==GLUT_MIDDLE_BUTTON && state==GLUT_UP) dijalankan maka akan dieksekusi 3 baris berikut

s1=0.5; s2=0.5; s3=0.5;

Ketiga baris diatas akan dikirim sebagai nilai variabel umum yang akan digunakan dalam melakukan perubahan skala.Perubahan terjadi karena nilai dipakai untuk parameter glScalef(). Keadaan riil; objek akan mengalami pembesaran sebesar 1/2 kali dari ukuran awal ketika klik mouse button kanan dilepaskan.

Yang terjadi dari penggantian gluOrtho2D(-100,100,-100,100) adalah kekacauan dalam penghitungan koordinat x dan y pada window aplication. Kerancuan terjadi karena ukuran window tidak sesuai dengan cara penghitungan koordinat yang masih memilki acuan pada ukuran w=480 dan h=480. Koordinat xmouse dan ymouse berdasarkan model koordinat window bukan gluortho sehingga dalam pencarian x dan y perlu rumus yang sesuai. Koordniat pointer dimulai dari kiri atas (0,0).

#include <stdio.h> #include <glut.h> int w=480,h=480; float x=0,y=0,z=0; float s1=1,s2=1,s3=1; void drawKoordinat(){ glBegin(GL_LINES); glColor3f(0,0,0); glVertex2f(-240.,0.); glVertex2f(240.,0.); glVertex2f(0.,-240.); glVertex2f(0.,240.); glEnd(); } void drawQuad(int l, int t){ glBegin(GL_QUADS); glColor3f(1.,0.0,0.4); glVertex2i(l-3*t,t-3*l); glVertex2i(l-3*t,2*t); glVertex2f(2*l,2*t); glVertex2f(2*l,t-3*l); glEnd(); } void myDisplay() { glClear(GL_COLOR_BUFFER_BIT); drawKoordinat(); glPushMatrix(); glTranslatef(x,y,z); glScalef(s1,s2,s3); drawQuad(5,5); 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; s1=1.; s2=1.; s3=1.; } if(button==GLUT_RIGHT_BUTTON && state==GLUT_DOWN){ s1=2.; s2=2.; s3=2.;} if(button==GLUT_RIGHT_BUTTON && state==GLUT_UP){ s1=0.5; s2=0.5; s3=0.5;} } void timer (int value){ glutPostRedisplay(); glutTimerFunc(1,timer,0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitWindowPosition(200,200); glutInitWindowSize(w,h); glutCreateWindow("prakt-mouseMotion"); gluOrtho2D(-100,100,-100,100); glClearColor(1, 1, 1, 0); glutDisplayFunc(myDisplay); glutTimerFunc(0,timer,0); glutMouseFunc(mouse); glutMainLoop(); }

5. Buatlah project baru pada Visual Studio dengan nama prak7-mouseMotion1. Gunakan fungsi

yang sama dengan no 1 dan lengkapi dengan fungsi Motion. Buatlah fungsi untuk deteksi

motion. Berikan kesimpulan!

Screenshot Normal Screenshot drag ke kanan atas

Callback fungsi glutMotionFunc(motion) digunakan untuk mentriger fungsi void motion().

Pada fungsi void motion() terdapat kondisi dimana akan menetukan letak posisi x dan y untuk nilai parameter glTranslatef.

Bedanya dengan fugsi void mouse() adalah, pada fungsi motion() memanfaatkan klik tahan dan tarik (drag).

Objek akan di-Translasikan posisinya ketika terjadi drag dan perubahan posisi mouse.

F. TUGAS

1. 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 <stdio.h> #include <glut.h> int w=480,h=480; float x=0,y=0,z=0; void drawKoordinat(){ glBegin(GL_LINES); glColor3f(0,0,0); glVertex2f(-240.,0.); glVertex2f(240.,0.); glVertex2f(0.,-240.); glVertex2f(0.,240.); glEnd(); } void drawQuad(int l, int t){ glBegin(GL_QUADS); glColor3f(1.,0.0,0.4); glVertex2i(l-3*t,t-3*l); glVertex2i(l-3*t,2*t); glVertex2f(2*l,2*t); glVertex2f(2*l,t-3*l); glEnd(); } void myDisplay() { glClear(GL_COLOR_BUFFER_BIT); drawKoordinat(); glPushMatrix(); glTranslatef(x,y,z); drawQuad(5,5); 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){

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(1,timer,0); } void main(int argc, char **argv) { glutInit(&argc, argv); glutInitWindowPosition(200,200); glutInitWindowSize(w,h); glutCreateWindow("prakt-mouseMotion"); gluOrtho2D(-w/2,w/2,-h/2,h/2); glClearColor(1, 1, 1, 0); glutDisplayFunc(myDisplay); glutTimerFunc(0,timer,0); glutMouseFunc(mouse); glutMotionFunc(motion); glutMainLoop(); }

Screenshot normal Screenshot klik kanan

Screenshot drag menjauh Screenshot drag mendekati

2. 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. Buatlah Kesimpulan dan Algoritmanya.

#include <stdio.h> #include <glut.h> int w=480,h=480; float x=0,y=0,z=0; int l=5, t=5; int s1=0, s2=0; void drawKoordinat(){ glBegin(GL_LINES); glColor3f(0,0,0); glVertex2f(-240.,0.); glVertex2f(240.,0.); glVertex2f(0.,-240.); glVertex2f(0.,240.); glEnd(); } void drawQuad(){ glBegin(GL_QUADS); glColor3f(1.,0.0,0.4); glVertex2i(x+l-3*t-s1,y+t-3*l-s1); glVertex2i(x+l-3*t-s1,y+2*t+s1); glVertex2f(x+2*l+s1,y+2*t+s1); glVertex2f(x+2*l+s1,y+t-3*l-s1);

glEnd(); } void myDisplay() { glClear(GL_COLOR_BUFFER_BIT); drawKoordinat(); glPushMatrix(); 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; } } void motion(int xmouse, int ymouse) { s1 =x- (xmouse-(w/2)); s2=y-((h/2) - ymouse); } void timer (int value){ glutPostRedisplay(); glutTimerFunc(1,timer,0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitWindowPosition(200,200); glutInitWindowSize(w,h); glutCreateWindow("prakt-mouseMotion"); gluOrtho2D(-w/2,w/2,-h/2,h/2); glClearColor(1, 1, 1, 0); glutDisplayFunc(myDisplay); glutTimerFunc(0,timer,0); glutMouseFunc(mouse); glutMotionFunc(motion); glutMainLoop(); }

Double Klik Pertama Double klik kedua

#include<stdlib.h> #include<gl/glut.h> int w = 480, h = 480; float x = 0, y = 0, z = 0; float sx = 1, sy = 1, sz = 1; bool normal = true; int time = REGULER; #define DELAY 50 #define TIME_LIMIT 500 #define REGULER -1 void drawKoordinat(){ glBegin(GL_LINES); glColor3f(0,0,0); glVertex2f(-240.,0.); glVertex2f(240.,0.); glVertex2f(0.,-240.); glVertex2f(0.,240.); glEnd(); } void drawQuad(float p, float l){ glBegin(GL_QUADS); glVertex2f(-p/2, -l/2); glVertex2f(p/2, -l/2); glVertex2f(p/2, l/2); glVertex2f(-p/2, l/2); glEnd(); } void doubleClick(){ if(normal){ sx = sy = 1.5; normal = false;} else{ sx = sy = 1; normal = true; } }

void mouse(int button, int state, int xmouse, int ymouse){ if(button == GLUT_LEFT_BUTTON && state == GLUT_UP){ x = xmouse - (w / 2); y = (h / 2) - ymouse; if(time == REGULER) time += 1; else if(time <= TIME_LIMIT) doubleClick();}} void myDisplay(void){ glClear(GL_COLOR_BUFFER_BIT); drawKoordinat(); glPushMatrix(); glTranslatef(x, y, z); glScalef(sx, sy, sz); glColor3f(1, 0, 0.5); drawQuad(30, 30); glPopMatrix(); glFlush();} void update(int value){ if(time != REGULER){ time += DELAY; if(time > TIME_LIMIT) time = REGULER;} glutPostRedisplay(); glutTimerFunc(DELAY, update, 0);} void main(int argc, char **argv){ glutInit(&argc, argv); glutInitWindowPosition(100, 100); glutInitWindowSize(w, h); glutCreateWindow("Interaksi Mouse"); gluOrtho2D(-w/2, w/2, -h/2, h/2); glClearColor(1, 1, 1, 0); glutDisplayFunc(myDisplay); glutTimerFunc(0, update, 0); glutMouseFunc(mouse); glutMainLoop(); }

Kesimpulan :

Pada penggunaan double klik memanfaatkan pengaturan waktu,

Dalam hal ini delay yang terlalu cepat akan berakibat

gagalnya proses double klik

Sedangkan untuk regular klik bisa diatur ke delay normal.

ALGORITMA PROGRAM

Lakukan pendedfinisian waktu DELAY untuk melakukan

update

Definisikan batas waktu (TIME_LIMIT) antara klik pertama

dengan klik kedua sehingga kedua klik tersebut dianggap

sebagai double klik

Definisikan nilai REGULER untuk klik biasa.

Set nilai time sama dengan REGULER.

Jika button mouse kiri di-release dan time sama dengan

REGULER, set nilai time sama dengan time + 1

Jika time tidak sama dengan REGULER, increment nilai

time dengan menggunakan nilai DELAY

Jika time lebih besar dari TIME_LIMIT, kembalikan nilai

time ke REGULER

Jika time kurang dari atau sama dengan TIME_LIMIT, maka

dianggap double klik dan jalankan fungsi doubleClick

Jika kondisi objek normal, set faktor skala sx dan sy

dengan 1.5 dan set normal = false.

Jika kondisi objek tidak normal, set faktor skala sx dan

sy dengan 1 dan set normal = true