Laporan 7

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
Awali setiap aktivitas dengan doa, 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.
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.
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
#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.);
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()
{
drawKoordinat();
glPushMatrix();
drawQuad(2,2);
glPopMatrix();
glFlush();
}
Screenshot klik kiri
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);
glutCreateWindow("prakt-mouseMotion");
glClearColor(1, 1, 1, 0);
glutDisplayFunc(myDisplay);
glutMainLoop();
}
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.
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
Screenshot klik tengah
#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;
glBegin(GL_LINES);
glColor3f(0,0,0);
glEnd();
}
void drawQuad(int l, int t){
glBegin(GL_QUADS);
glColor3f(1.,0.0,0.4);
glEnd();
}
void myDisplay()
{
drawKoordinat();
glPushMatrix();
glScalef(s1,s2,s3);
drawQuad(5,5);
glPopMatrix();
glFlush();
}
Screenshot klik kanan

{
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)
{
}
glutMainLoop();
}
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)
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.
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)
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;
glBegin(GL_LINES);
glColor3f(0,0,0);
glEnd();
}
glBegin(GL_QUADS);
glColor3f(1.,0.0,0.4);
glEnd();
}
void myDisplay()
{
drawKoordinat();
glPushMatrix();
glScalef(s1,s2,s3);
drawQuad(5,5);
glPopMatrix();
glFlush();
}

{
x = xmouse-(w/2);
y=(h/2) - ymouse;
}
state==GLUT_DOWN){
s1=2.;
s2=2.;
s3=2.;}
state==GLUT_UP){
s1=0.5;
s2=0.5;
s3=0.5;}
}
}
glutMainLoop();
}
Pada latihan ini intinya adalah penggunaan satu jenis button yang
menghasilkan dua kondisi.
Ketika if(button==GLUT_MIDDLE_BUTTON && state==GLUT_DOWN)
s1=2.;
s2=2.;
s3=2.;
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)
s1=0.5;
s2=0.5;
s3=0.5;
Keadaan riil; objek akan mengalami pembesaran sebesar 1/2
kali dari ukuran awal ketika klik mouse button kanan
dilepaskan.
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)
#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;
glBegin(GL_LINES);
glColor3f(0,0,0);
glEnd();
}
glBegin(GL_QUADS);
glColor3f(1.,0.0,0.4);
glEnd();
}
void myDisplay()
{
drawKoordinat();
glPushMatrix();
glScalef(s1,s2,s3);
drawQuad(5,5);
glPopMatrix();
glFlush();
}

{
x = xmouse-(w/2);
y=(h/2) - ymouse;
s1=1.;
s2=1.;
s3=1.;
}
state==GLUT_DOWN){
s1=2.;
s2=2.;
s3=2.;}
state==GLUT_UP){
s1=0.5;
s2=0.5;
s3=0.5;}
}
}
gluOrtho2D(-100,100,-100,100);
glutMainLoop();
}
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).
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.
#include <stdio.h>
#include <glut.h>
int w=480,h=480;
float x=0,y=0,z=0;
glBegin(GL_LINES);
glColor3f(0,0,0);
glEnd();
}
glBegin(GL_QUADS);
glColor3f(1.,0.0,0.4);
glEnd();
}
void myDisplay()
{
drawKoordinat();
glPushMatrix();
drawQuad(5,5);
glPopMatrix();
glFlush();
}
F.

{
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 main(int argc, char **argv)
{
glutMainLoop();
}
void mouse(int button, int

state, int xmouse, int
ymouse)
{
if(button ==
TUGAS
GLUT_LEFT_BUTTON && state ==
1.GLUT_DOWN)
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
{
x = pointer terhadap posisi yang disimpan sebelumnya akan
drag dilakukan maka jarak
xmouse-(w/2);
menyebabkan perubahan skala secara interaktif (menjauh = membesar, mendekat =
y=(h/2) mengecil).
ymouse;
}}
void motion(int xmouse, int

ymouse)
{
x = xmouse(w/2);
y=(h/2) ymouse;
}
Screenshot normal
Screenshot klik kanan
Screenshot drag menjauh
Screenshot drag mendekati
#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;
glBegin(GL_LINES);
glColor3f(0,0,0);
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()
{
drawKoordinat();
glPushMatrix();
drawQuad();
glPopMatrix();
glFlush();
}

{
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);
}
}
glutMainLoop();
}
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.
Double Klik Pertama
#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
glBegin(GL_LINES);
glColor3f(0,0,0);
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;
}
}
Double klik kedua
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){
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;}
glutTimerFunc(DELAY, update, 0);}
glutInitWindowPosition(100, 100);
glutInitWindowSize(w, h);
glutCreateWindow("Interaksi Mouse");
gluOrtho2D(-w/2, w/2, -h/2, h/2);
glutTimerFunc(0, update, 0);
glutMainLoop();
}
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
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.

Laporan 7

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Laporan 7

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL 7

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

GLUT_LEFT_BUTTON untuk inisialisasi button mouse kiri.

GLUT_RIGHT_BUTTON untuk inisialisasi button mouse kanan.

E. AKTIVITAS KELAS PRAKTIKUM

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

Fungsi mouse untuk inisialisasi mouse event.

Screenshot klik kiri

void mouse(int button, int state,

Seperti biasanya callback fungsi glutTimerFunc() harus dimasukkan di

Screenshot klik tengah

Screenshot klik kanan

void mouse(int button, int state,

Sama seperti modul latihan sebelumnya namun terdapat tambahan

Screenshot lepas klik kanan

void mouse(int button, int state,

4. Buatlah nilai parameter yang ada pada fungsi

void mouse(int button, int state,

Yang terjadi dari penggantian gluOrtho2D(-100,100,-100,100) adalah

Screenshot drag ke kanan atas

Callback fungsi glutMotionFunc(motion) digunakan untuk

void mouse(int button, int state,

void mouse(int button, int

void motion(int xmouse, int

Screenshot klik kanan

Screenshot drag menjauh

Screenshot drag mendekati

void mouse(int button, int state,

Double Klik Pertama

Double klik kedua

void mouse(int button, int state, int

Anda mungkin juga menyukai