Laporan Modul Iv Grafika

LAPORAN MODUL IV
PRAKTIKUM GRAFIKA KOMPUTER

INTERAKSI DENGAN KEYBOARD DAN MOUSE
Disusun untuk Memenuhi Matakuliah Praktikum Grafika Komputer
Yang Dibimbing oleh Bapak Heru Wahyu Herwanto, S.T., M.Kom
.
OLEH:
Putri Rizky Rahmania
130533608286
S1 PTI 2013 OFF A
UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK
JURUSAN TEKNIK ELEKTRO
S1 PENDIDIKAN TEKNIK INFORMATIKA
Maret , 2015
Modul 4
Interaksi dengan Keyboard dan Mouse

A. TUJUAN
1. Memahami prinsip-prinsip deteksi input berupa interaksi dari keyboard.
2. Membuat objek 2D yang dikendalikan dengan keyboard.
3. Memahami prinsip-prinsip pembuatan interaksi objek 2D menggunakan mouse.
4. 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
mySpecialKeyboard
Untuk tombol - tombol spesialnya adalah sebagai berikut
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,480y);
if(button==GLUT_RIGHT_BUTTON
&&
state==GLUT_DOWN)
&&
state==GLUT_DOWN)
drawDot2(x,480-y);
if(button==GLUT_MIDDLE_BUTTON
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. LATIHAN PRAKTIKUM
INTERAKSI KEYBOARD
Berikut adalah script dasar untuk kegiatan praktikum interaksi keyboard
dan
glutTimerFunc(50,timer,0);
glutDisplayFunc(display);
1. Buatlah project baru pada Visual Studio dengan nama prak4-keyboard1. Berikut
adalah fungsi-fungsi yang harus ditambahkan. Sediakan fungsi drawQuad(); untuk
menggambar sebuah kotak. Fungsi myKeyboard adalah callback function yang
akan dipanggil oleh glutKeyboardFunc(myKeyboard);
tersebut berada di dalam fungsi main.
#include <stdlib.h>
#include <glut.h>
int x , y;
void drawQuad(){
glBegin(GL_QUADS);
glVertex2f(0,0);
glVertex2f(0,100);
glVertex2f(100,100);
glVertex2f(100,0);
glEnd();
glFlush();
}
void renderScene(){
glClear(GL_COLOR_BUFFER_BIT);
drawQuad();
}
if(key == 'a') glTranslatef(-4,0,0);
else if(key == 'd') glTranslatef(4,0,0);
}
void update(int value){
glutPostRedisplay();
glutTimerFunc(50,update,0);
}
void display() {
glColor3f(1,0,1);
glPushMatrix();
glTranslatef(x,0,0);
drawQuad();
dan fungsi
glPopMatrix();
glFlush();
}
void main (int argc, char **argv){
glutCreateWindow("Putri Rizky Rahmania");
glutInitWindowPosition(100,100);
glutInitWindowSize(640,480);
gluOrtho2D(-320.,320.,-320.,320.);
glutDisplayFunc(renderScene);
glutMainLoop();
}
Output Program :
Penjelasan :
Terdapat fungsi
void drawQuad()
objek berbentuk segi empat. Fungsi
yang digunakan untuk membuat
void myKeyboard
digunakan untuk
pendeklarasian tombol pada keyboard yang dapat mengubah posisi objek segi
empat tersebut. Terdapat 2 macam tombol yang digunakan untuk mengubah
posisi objek, yaitu a untuk mengubah posisi segi empat geser ke kiri dengan
koordinat
glTranslatef(-4,0,0);.
Dan d untuk mengubah posisi segi empat geser
ke kanan dengan koordinat glTranslatef(4,0,0); .
2. Modifikasi program pada latihan 1 dan tambahkan program pada fungsi

myKeyboard sehingga dapat menggerakkan objek ke atas, ke bawah, ke kanan,
dan ke kiri .
#include <stdlib.h>
#include <glut.h>
int x,y;
void drawQuad() {
glBegin(GL_QUADS);
glVertex2f(0.,0.);
glVertex2f(0.,100.);
glEnd();
}

if(key == 'l') glTranslatef(-4,0,0);
else if(key == 'r') glTranslatef(4,0,0);
else if(key == 'u') glTranslatef(0,4,0);
else if(key == 'd') glTranslatef(0,-4,0);
}
}
void display() {
glColor3f(1,1,1);
glPushMatrix();
drawQuad();
glPopMatrix();
glFlush();
}
void main (int argc, char **argv) {
glutInit(&argc, argv);
glutCreateWindow("Putri Rizky R");
gluOrtho2D(-320.,320.,-320.,320.);
glutTimerFunc(50, update, 0);
glutMainLoop();
}
Output :
Penjelasan :
Pada praktikum di atas merupakan penyempurnaan dari praktikum sebelumnya
dengan keyboard l arah kiri, r arah kanan, lalu dengan menambahkan arah
perpindahan atau translasi ke atas dan kebawah menggunakan tombol keyboard u
dan d.
3. Buatlah project baru pada Visual Studio dengan nama prak4-keyboard2. Berikut
adalah cara untuk mendeteksi tombol-tombol keyboard yang memiliki fungsi
spesial.
#include <stdlib.h>
#include <glut.h>
int a,d,w,x;
void renderScene(void){
glBegin(GL_QUADS);
glVertex2f (0, 0);
glVertex2f (0,200 );
glVertex2f (200, 200);
glEnd();
glFlush();
}
void myKeyboard(unsigned char key, int x, int y){ /*Fungsi myKeyboard untuk memberikan
fungsi pada keyboard untuk menjalankan objek*/
if(key=='a') glTranslatef(-4,0,0); /*Fungsi untuk Translasi objek menggunakan kondisi if
(kiri)*/
else if (key=='d') glTranslatef(4,0,0);/*kanan*/
else if (key=='w') glTranslatef(0,4,0);/*atas*/
else if (key=='x') glTranslatef(0,-4,0);/*bawah*/
}
void mySpecialKeyboard(int key, int x, int y){/*Deklarasi method myspecialKeyboard beserta
variable -variabel*/
switch(key){ /*Menggunakan operator kondisi switch case . Case dideklarasikan
dengan tombol kiri, jika tombol arah kiri pada keyboard di tekan maka akan berotasi
berlawanan dengan arah jarum jam*/
case GLUT_KEY_LEFT:
glRotatef(4,0,0,1);
break;}}
void update (int value){
}
void main(int argc, char **argv){
glutCreateWindow("PUTRI RR");
gluOrtho2D(-320.,320.,-320.,320.);
glutMainLoop();
}
Output :
Penjelasan :
Program di atas menjalankan fungsi keyboard a,d,w,x yaitu objek akan bergeser
dan untuk
case GLUT_KEY_LEFT:
menjalankan objek untuk berputar berlawanan
dengan arah jarum jam jika ditekan tombol panah kiri.

4. Modifikasi kode progam pada latihan 3 dan tambahkan program pada fungsi
mySpecialKeyboard sehingga dapat memutar objek kebalikan putaran dengan
menekan tombol panah kanan dan memutar object ke atas ke bawah dengan
tombol panah atas bawah .
#include <stdlib.h>
#include <glut.h>
int x,y;
void drawQuad(){
glBegin(GL_QUADS);
glVertex2f(0,0);
glVertex2f(0,100);
glVertex2f(100,0);
glEnd();
glFlush();
}
if(key == 'l') glTranslatef(-4,0,0);

else if(key == 'r') glTranslatef(4,0,0);
else if(key == 'u') glTranslatef(0,4,0);
else if(key == 'd') glTranslatef(0,-4,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(4,0,0,1);
break;
case GLUT_KEY_DOWN:
break;
break;
}

}
void display() {
glColor3f(1,1,1);
glPushMatrix();
drawQuad();
glPopMatrix();
glFlush();
}
gluOrtho2D(-320.,320.,-320.,320.);
glutMainLoop();
Output :
Penjelasan :
Program di atas sama dengan program sebelumnya, disini menambahkan fungsi
keyboard void mySpecialKeyboard(int key, int x, int y){
Dimana terdapat 4 case yaitu salah satunya
case GLUT_KEY_LEFT:
glRotatef(4,0,0,1);
Fungsi di atas bidang akan berotasi/berputar berlawanan dengan arah jarum jam
yang sama dengan
case GLUT_KEY_UP:
case GLUT_KEY_DOWN:
selanjutnya
case GLUT_KEY_RIGHT: dan
akan berputar searah jarum jam.
5. Tambahkan pada fungsi myKeyboard, untuk merubah warna obyek sebanyak 4

pilihan warna kecuali hitam dan putih (deteksi 4 tombol keyboard (normal) lain)!
#include <stdlib.h>
#include <glut.h>
int x,y;
void drawQuad(){ /*Fungsi untuk membuat kotak*/
glBegin(GL_QUADS);
glVertex2f(0,0);
glVertex2f(0,100);
glVertex2f(100,0);
glEnd();
glFlush();
}
if(key == 'l') glTranslatef(-4,0,0); /*Fungsi tombol keyboard untuk
menjalankan kotak - bergerak ke arah kiri*/
else if(key == 'r') glTranslatef(4,0,0);/*arah kanan*/
else if(key == 'u') glTranslatef(0,4,0);/*arah atas*/
else if(key == 'd') glTranslatef(0,-4,0);/*arah bawah*/
else if (key=='1') glColor3f(0.25,1,0.5);/*Mengganti warna kotak sesuai
dengan angka yang dideklrarasikan-hijau muda*/
else if (key=='2') glColor3f(1.5,0.5,0);/*warna oranye*/
else if (key=='3') glColor3f(0.15,0.25,1);/*warna biru*/
else if (key=='4') glColor3f(1,1,0);/*warna kuning*/
else if (key=='5') glColor3f(0,1,1);/*warna tosca*/
}
void mySpecialKeyboard(int key, int x, int y){
switch (key){
case GLUT_KEY_LEFT:
glRotatef(4,0,0,1);
break;
case GLUT_KEY_RIGHT:
break;
case GLUT_KEY_UP:
glRotatef(4,0,0,1);
break;
case GLUT_KEY_DOWN:
break;
break;
}
}
void display() {
glPushMatrix();
drawQuad();
glPopMatrix();
glFlush();
}
Output :
gluOrtho2D(-320.,320.,-320.,320.);
glutMainLoop();
Penjelasan :
Pada program di atas hanya menambhakan fungsi mengganti warna bidang yang
sesuai dengan keyboard yang dideklarasikan yaitu angka 1, 2, 3, 4,dan 5. Salah
satunya yaitu
else if (key=='1') glColor3f(0.25,1,0.5);/*Mengganti warna kotak sesuai
dengan angka yang dideklrarasikan-hijau muda*/
INTERAKSI MOUSE
Berikut adalah script dasar untuk kegiatan praktikum interaksi mouse.
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 prak4-mouseMotion.

Fungsi myDisplay callback function yang di dalamnya menggunakan fungsi
Points untuk memindah posisi objek sesuai pointer mouse.
#include <stdlib.h>
#include <glut.h>
int w = 480;
int h = 480;
void drawQuad(void) {
glBegin(GL_QUADS);
glVertex2f(0.,0.);
glEnd();
glFlush();
}
float x = 0, y = 0, z = 0;
void myDisplay(void){
glPushMatrix();
glTranslatef(x, y, z);
drawQuad();
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 main(int argc,char **argv){
glutInit(&argc,argv);
glutCreateWindow("PUTRI RIZKY R");
gluOrtho2D(-w/2, w/2, -h/2, h/2);
glutDisplayFunc(myDisplay);
glutMainLoop();
}
Output :
Penjelasan :
Program di atas menunjukkan fungsi mouse yang dapat mengubah posisi
kotak sesuai perpindahan mouse.
variable global
int w = 480, h = 480;
w dan h bertipe data integer.
Mendeklarasikan
float
x=0,y=0,z=0;
Mendeklarasikan variable x,y,dan z bertipe data float dengan nilai 0. Untuk

menyimpan nilai matrik dengan
glPushMatrix();.Untuk
ke koordinat sebelum di push dengan
meload yaitu kembali
glPopMatrix();.
perpindahan atau translasi pada sumbu x, y, dan z dengan
Mendeklarasikan
glTranslatef(x, y, z);.
Memanggil fungsi-fungsi yang ada pada method mouse. Untuk deklarasi

interaksi mouse.Yaitu variabel xmouse dan ymouse :

x = xmouse-(w/2);
y = (h/2)-ymouse}}
2. Sempurnakan program di atas sehingga tombol kanan ditekan akan

menyebabkan objek memiliki skala yang membesar (2.0) dan tombol kiri
ditekan akan menyebabkan skala mengecil (0.5).
#include <stdlib.h>
#include <glut.h>
void drawQuad(void){
glBegin(GL_QUADS);
glVertex2f (0, 0);
glEnd();
glFlush();
}
float x=0,y=0,z=0;
glPushMatrix();
drawQuad();
glPopMatrix();
glFlush();
}
x = xmouse-(w/2);
y = (h/2)-ymouse;
glScalef(0.5, 0.5, 0.5);
}
if(button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN){
x = xmouse-(w/2);
y = (h/2)-ymouse;
glScalef(2,2,2);
}
}
}

glutCreateWindow("Putri RR");
gluOrtho2D(-w/2, w/2, -h/2, h/2);
glutMainLoop();
}
Output :
Penejelasan :
Pada program di atas untuk menjalankan kotak agar saat klik kanan maka kotak
ukurannya akan memperbesar kotak, dan klik kiri memperkecil ukuran.
x = xmouse-(w/2);
y = (h/2)-ymouse;
glScalef(0.5, 0.5, 0.5);}
(Objek akan di perkecil dengan menggunakan glScale
yang dideklarasikan dengan ukuran skala (0.5, 0.5, 0.5);
3. Ubahlah program sehingga tombol kiri ditekan skala membesar (2) dan ketika
tombol kanan dilepaskan (UP) skala mengecil (0.5))
#include <stdlib.h>
#include <glut.h>
glBegin(GL_QUADS);
glVertex2f (0, 0);
glEnd();
glFlush();
}
float x=0,y=0,z=0;
glPushMatrix();
drawQuad();
glPopMatrix();
glFlush();
}
x = xmouse-(w/2);
y = (h/2)-ymouse;
glScalef(0.5, 0.5, 0.5);
}
x = xmouse-(w/2);
y = (h/2)-ymouse;
glScalef(2,2,2);
}
}
}
gluOrtho2D(-w/2, w/2, -h/2, h/2);
glutMainLoop();
}
Output :
Penjelasan :
Pada program ini sama dengan sebelumnya hanya saja klik kiri digunakan untuk
memperbesar objek dengan skala 2 dan tombol kanan mouse digunakan untuk
memperkecil objek dengan skala 0.5.
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 digunakan
oleh mouse pointer.
#include <stdlib.h>
#include <glut.h>
glBegin(GL_QUADS);
glVertex2f (0, 0);
glEnd();
glFlush();
}
float x=0,y=0,z=0;
glPushMatrix();
drawQuad();
glPopMatrix();
glFlush();
}
x = xmouse-(w/2);
y = (h/2)-ymouse;
glScalef(0.5, 0.5, 0.5);
}
x = xmouse-(w/2);
y = (h/2)-ymouse;
glScalef(2,2,2);
}
}
}
gluOrtho2D(-100,100,-100,100);
glutMainLoop();
}
Output :
Penjelasan :
Mengubah parameter pada fungsi gludOrtho2D dari yang sebelumnya
dideklarasikan dengan variable menjadi (-100,100,-100,100). Sehingga output
yang ditampilkan pada saat awal eksekusi terlihat agak besar.
5. Buatlah project baru pada Visual Studio dengan nama prak4-mouseMotion1.

Gunakan fungsi yang sama dengan no 1 dan lengkapi dengan fungsi Motion.
Buatlah fungsi untuk deteksi motion.
#include <stdlib.h>
#include <glut.h>
int w = 240;
int h = 240;
void drawQuad(void) {
glBegin(GL_QUADS);
glColor3f(1,1,1);
glVertex2f(0.,0.);
glEnd();
glFlush();
}
float x = 0, y = 0, z = 0;
glPushMatrix();
drawQuad();
glPopMatrix();
glFlush();
}
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){
gluOrtho2D(-w/2, w/2, -h/2, h/2);
glutMainLoop();
}
Output :
Penjelasan :
Pada program ini perpindahan objek dengan menggunakan motion,jadi dengan
klik tahan dan menggerakkan mouse maka objek akan berpindah mengikutinya.
Didalam fungsi motion terdapat rumus yang dapat memindahkan posisi objek,
yaitu x = xmouse-(w/2); dan y = (h/2)-ymouse;.
TUGAS ASISTENSI
1. Buatlah sebuah kompas yang bisa perputar secara clockwise dan unclockwise yang
pusatnya berada pada pusat koordinat. Dengan kontrol dari tombol k dan l.
#include<stdlib.h>
#include<glut.h>
float x =0 ;
int k;
int l;
void Triangle (){
glBegin(GL_TRIANGLES);
glColor3f(1,0,0);
glVertex2f(-50,0.0);
glVertex2f(0.0,100.0);
glColor3f(1,1,1);
glVertex2f(0.0,-100.0);
glEnd();
}
void display (){
Triangle();
glFlush();
}
if(key=='l')
else if(key=='k')
glRotatef(10,0,0,1);
}
void timer(int value){
glutTimerFunc(50, timer,0);
}
void update (int value){
glutTimerFunc(50, update,0);
}
void main(int argc,char **argv)
{
glutInitDisplayMode(GLUT_DEPTH|GLUT_SINGLE|GLUT_RGBA);
gluOrtho2D(-320.,320.,-320.,320.);
glutMainLoop();
}
Output :
Penjelasan :
Program di atas menampilkan 2 buah segitiga yang letak koordinatnya di atur dengan:
Memberikan fungsi untu melakukan rotasi dengan menekan tombol key board yang
dideklarasikan yaitu :
if(key=='l')
else if(key=='k')
glRotatef(10,0,0,1);}
Menekan huruf k maka objek akan berputar berlawanan arah jarum jam sedangkan
l objek berputar searah jarum jam
2. Buatlah 2 benda (kotak dan segitiga) yang dapat dikendalikan secara individual,
dengan memanfaatkan tombol untuk tangan kanan dan tombol untuk tangan kiri. (a,
s, d, w untuk kotak dan tombol panah atas, bawah, kiri, kanan untuk segitiga)
#include <stdlib.h>
#include <glut.h>
int
int
int
int
int
a=0;
b=0;
c=0;
d=0;
w, x;
void Quads() {
glBegin(GL_QUADS);/*Membuat kotak*/
glColor3f(1,1,0);
glColor3f(1,1,1);
glColor3f(1,1,1);
glColor3f(1,1,1);
glEnd();
}
void Triangle() {
glBegin(GL_TRIANGLES); /*Segitiga*/
glVertex2i(-100,-50);
glVertex2i(-50, -50);
glColor3f(0.1,1,0.5);
glVertex2i(-75, -100);
glEnd();
}
void renderScene(){
glPushMatrix();
glTranslatef(b,c,0); /*Deklarasi translasi untuk objek persegi*/
Quads();
glPopMatrix(); /*Untuk meload yaitu kembali ke koordinat sebelum di push.*/
glPushMatrix(); /*Menyimpan nilai matrik*/
glTranslatef(a,d,0); /*Deklarasi translasi untuk objek segitiga*/
Triangle();
glPopMatrix();
glFlush();
}
void myKeyboard (unsigned char key, int x, int y) {
if(key == 'a') { /*persegi bergerak ke kiri*/
b+=-10;
c+=0;
}
else if(key == 'd') { /*persegi bergerak ke kanan*/

b+=10;
c+=0;
}
else if(key == 'w') { /*persegi bergerak ke atas*/
b+=0;
c+=10;
}
else if(key == 'x') { /*persegi bergerak ke bawah*/
b+=0;
c+=-10;
}
}
void mySpecialKey(int key, int x, int y) {
switch(key) {
case GLUT_KEY_LEFT : /*Menajalankan segitiga bergerak ke kiri dengan menggunakan
tombol arah panah kiri*/
a+=-10;
d+=0;
break;
case GLUT_KEY_RIGHT : /*Menajalankan segitiga bergerak ke kanan dengan
menggunakan tombol arah panah kanan*/
a+=10;
d+=0;
break;
case GLUT_KEY_UP : /*Menajalankan segitiga bergerak ke atas dengan menggunakan
tombol arah panah atas*/
a+=0;
d+=10;
break;
case GLUT_KEY_DOWN : /*Menajalankan segitiga bergerak ke bawah dengan
menggunakan tombol arah panah bawah*/
a+=0;
d+=-10;
break;
}
}
void update(int value) {
}
void main (int argc, char **argv) {
glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA);
glutCreateWindow("PUTRI RR_ASISTENSI 2");
gluOrtho2D(-320.,320.,-320.,320.);
glutSpecialFunc(mySpecialKey);
glutMainLoop();
}
Output :
Penjelasan :
Program di atas menampilkan dua buah bangun yaitu persegi dan segitiga. Kedua
bangun tersebut diberi perlakuan yaitu dengan berpindah yang dipanggil dengan
fungsi : glTranslatef(b,c,0); /*Deklarasi translasi untuk objek persegi*/
Quads();
glTranslatef(a,d,0); /*Deklarasi translasi untuk objek segitiga*/
Triangle();
Dengan pendeklarasian secara khusus untuk persegi menggerakkannya dengan huruf

a,d,w,x sedangkan segitigan dengan tombol panah. Mendeklarasikan tombol a,d,w,x
dengan menggunakan operator kondisi if else if. Mendeklarasikan tombola rah panah
kiri dengan menggunakan operator kondisi switch case.
3. 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<stdlib.h>
#include<stdio.h>
#include<glut.h>
float x=0, y=0, z=0, a=1, b=1, k, l;
int w = 480, h = 480;
void drawQuad(int a, int b){
glBegin(GL_QUADS);
glColor3f(1,0.5,0);
glVertex2i(a, b);
glVertex2i(a, -b);
glVertex2i(-a, -b);
glVertex2i(-a, b);
glEnd();
}
void motion(int xmouse, int ymouse){ /*untuk menunjukkan posisi pointer mouse berada*/
x=xmouse-(w/2);
y=(h/2)-ymouse;
a=x/k;
b=y/l;
printf("posisi pointer mouse (%d, %d)\n", x, y); /*Untuk mengubah skala secara
interaktif pada fungsi motion perintah untuk menampilkan hasil */
}
x = xmouse-(w/2);
y = (h/2)-ymouse;
k=x;
l=y;
printf("koordinat %d, %d\n", xmouse-(xmouse/2), ymouse-(ymouse/2));
/*Menunjukkan hasil dari klik kanan dan pergerakan mouse*/
}
}
void mydisplay(void){
glColor3f(0.5, 0, 1);
glPushMatrix();
glScalef(a, b, 1);
drawQuad(6,6);
glPopMatrix();
glFlush();
}
void timerku(int value){
glutTimerFunc(10, timerku, 0);
}
glutInitWindowSize(480, 480);
gluOrtho2D(-60,60,-60,60);
glutDisplayFunc(mydisplay);
glutTimerFunc(10, timerku, 0);
glutMainLoop();
}
Output :
Penjelasan :
Pada program di atas jika objek persegi di klik kanan dan ditahan serta digeser maka
ukuran objek akan mengikuti seberapa besar posisi yang digeser dengan mouse. Jika
digeser keluar maka objek semakin besar dan jika di geser ke dalam maka objek akan
semakin kecil. Untuk mengubah skala secara interaktif pada fungsi motion perintah
untuk menampilkan hasil diberi
(%d, %d)\n
untuk menunjukkan posisi pointer mouse
berada. Pada fungsi mouse juga terdapat perintah untuk menampilkan hasil diberi
koordinat %d, %d\n", xmouse-(xmouse/2), ymouse-(ymouse/2)
sesuai dengan posisi
mouse berada.
4. 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.
#include<stdlib.h>
#include<stdio.h>
#include<glut.h>
int w=240, h=240, p=-1;
float x=0, y=0, x1=1, y1= 1;
bool kondisi=true; /*Merupakan deklarasi operasi boolean untuk kondisi bernilai benar.*/
void drawQuad(int x, int y){
glBegin(GL_QUADS);
glColor3f(1.5,0.25,0);
glVertex2i(x,y);
glVertex2i(-x,y);
glVertex2i(-x,-y);
glVertex2i(x,-y);
glEnd();
}
void doubleClick(){ /*Deklarasi method doubleclick*/
if(kondisi){
x1 = 1.5;
y1 = 1.5;
kondisi = false;
}else{
x1 = 1;
y1 = 1;
kondisi = true;
}
}
if(p == -1){
p += 1;
}else if(p <= 500){

doubleClick();
}
}
void timer(int value){
if(p != -1)
{
p += 100;
}
if(p > 500){
p = -1;
}
glutTimerFunc(50, timer, 0);
}
void renderScene(void)
{
glPushMatrix();
glScalef(x1, y1, 1);
drawQuad(30,30);
glPopMatrix();
glFlush();
}
void main(int argc, char **argv)
{
gluOrtho2D(-w/2, w/2, -h/2, h/2);
glutMainLoop();
}
Output :
Penjelasan :
Pada program di atas jika objek diklik double maka objek akan berubah menjadi besar
dengan ukuran scala 1.5 dan jika di klik double kembali maka objek akan kembali
pada ukuran standart yaitu dengan scala 1
Pada fungsi Double Click terdapat 2 kondisi, kondisi pertama
kondisi = false;
x1 = 1.5; y1 = 1.5;
maksudnya skalanya akan berubah menjadi 1, 5 lebih besar dari
ukuran sebelumnya dan kondisi kedua adalah
x1 = 1; y1 = 1; kondisi = true;
maksudnya skalanya akan berubah ke bentuk objek awal.

Tombol mouse yang berfungsi untuk mengubah skalanya yaitu tombol mouse bagian
kiri dengan fungsi button == GLUT_LEFT_BUTTON && state == GLUT_DOWN dengan 2
kondisi, yaitu (p == -1) p += 1; dan (p <= 500) doubleClick();
D. KESIMPULAN
Dalam praktikum kali ini kita belajar 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, dan membuat interaksi objek 2D menggunakan mouse. Diantaranya :
Melakukan translasi objek yaitu memindahkan objek dengan menggunakan
keyboard, dengan deklarasi glTranslatef. Rotasi objek yaitu merotasi objek
dengan menggunakan keyboard. Memperbesar dan Memperkecil Objek yaitu
menggunakan interaksi mouse yaitu klik kiri dan klik kanan, dengan
mendeklarasikan buah ukuran dengan skala yang berbeda yaitu menggunakan
operator kondisi. Motion dengan menggunakan interaksi mouse , maka objek akan
mengikuti
pergerakan
mouse.
Dalam
penggunaan
glutKeyboardFunc
dimungkinkan untuk mendeteksi input dari keyboard. Fungsi ini diletakkan pada
fungsi main dari program, dan parameternya adalah callback function
E. DAFTAR RUJUKAN
Tim Dosen. 2015. Modul 4 Interaksi dengan Keyboard dan Mouse. Malang:
Universitas Negeri Malang.

Laporan Modul Iv Grafika

Diunggah oleh

Informasi Dokumen

Judul Asli

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 Modul Iv Grafika

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN MODUL IV

PRAKTIKUM GRAFIKA KOMPUTER

UNIVERSITAS NEGERI MALANG

Interaksi dengan Keyboard dan Mouse

Dalam penggunaan glutKeyboardFunc dimungkinkan untuk mendeteksi

Sedangkan untuk mendeteksi tombol-tombol keyboard yang bersifat

Untuk tombol - tombol spesialnya adalah sebagai berikut

1. Fungsi dasar pembuatan interaksi dengan menggunakan MouseFunction

GLUT_LEFT_BUTTON untuk inisialisasi button mouse kiri.

objek berbentuk segi empat. Fungsi

yang digunakan untuk membuat

Dan d untuk mengubah posisi segi empat geser

ke kanan dengan koordinat glTranslatef(4,0,0); .

2. Modifikasi program pada latihan 1 dan tambahkan program pada fungsi

void myKeyboard(unsigned char key, int x, int y){

menjalankan objek untuk berputar berlawanan

dengan arah jarum jam jika ditekan tombol panah kiri.

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

void update(int value){

case GLUT_KEY_RIGHT: dan

akan berputar searah jarum jam.

5. Tambahkan pada fungsi myKeyboard, untuk merubah warna obyek sebanyak 4

else if (key=='1') glColor3f(0.25,1,0.5);/*Mengganti warna kotak sesuai

dengan angka yang dideklrarasikan-hijau muda*/

1. Buatlah project baru pada Visual Studio dengan nama prak4-mouseMotion.

int w = 480, h = 480;

w dan h bertipe data integer.

Mendeklarasikan variable x,y,dan z bertipe data float dengan nilai 0. Untuk

ke koordinat sebelum di push dengan

meload yaitu kembali

perpindahan atau translasi pada sumbu x, y, dan z dengan

Memanggil fungsi-fungsi yang ada pada method mouse. Untuk deklarasi

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

2. Sempurnakan program di atas sehingga tombol kanan ditekan akan

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

(Objek akan di perkecil dengan menggunakan glScale

yang dideklarasikan dengan ukuran skala (0.5, 0.5, 0.5);

4. Buatlah nilai parameter yang ada pada fungsi

5. Buatlah project baru pada Visual Studio dengan nama prak4-mouseMotion1.

else if(key == 'd') { /*persegi bergerak ke kanan*/

Dengan pendeklarasian secara khusus untuk persegi menggerakkannya dengan huruf

untuk menunjukkan posisi pointer mouse

sesuai dengan posisi

}else if(p <= 500){

maksudnya skalanya akan berubah menjadi 1, 5 lebih besar dari

ukuran sebelumnya dan kondisi kedua adalah

maksudnya skalanya akan berubah ke bentuk objek awal.

Anda mungkin juga menyukai

else if(key == 'd') { /persegi bergerak ke kanan/