TUGAS PRAKTIKUM 2

GRAFIKA DAN KOMPUTASI VISUAL

Nama : Natasha Putri

NIM : 24060119130073
LAB : GKV A2

Pertanyaan :

1. Apakah fungsi glutReshapeFunc dan glutPostRedisplay? Jelaskan!

2. Apa tugas prosedur Idle pada kode untuk kubus bergerak
3. Jelaskan secara sederhana yang dimaksud dengan proyeksi, proyeksi projection dan modelview!

Jawab:

1. glutReshapeFunc befungsi untuk mengubah layar sesuai dengan spesifikasi yang didefinisikan di
dalam prosedur yang sudah ditentukan sebelumnya. Pada Source Code modul, glutReshapeFunc
ini berfungsi untuk membentuk layar seolah-olah menampilkan benda (hasil compile) dalam
perspektif 3 dimensi. glutPostRedisplay sendiri berfungsi untuk mengaktifkan display secara
berkala (mirip seperti refresh yang di looping). Pada implementasi main nya, perlu ditambahkan
suatu fungsi timer.
2. Prosedur Idle berfungsi untuk memberikan nilai yang berbeda (bertambah di x dan y serta
berkurang di z) sebagai sudut rotasi dan kemudian memanggil fungsi display agar terjadi loop tak
hingga (fungsi ini perlu dihentikan sendiri oleh user).
3. Proyeksi adalah cara menampilkan (men-transformasi) obyek ke layar.
- Proyeksi adalah cara menampilkan (men-transformasi) obyek ke layar.
- Proyeksi projection adalah bagaimana mentransformasikan objek dan membuat seolah-
seolah objek tersebut 3 dimensi.
- Modelview adalah suatu cara memproyeksikan objek ke layar tanpa mengubah ukurannya.

Tugas:

1. Jelaskan Bagaimana cara kerja Kode Lengan diatas!

2. Tambahkanlah telapak tangan beserya jari-jari dari lengan di atas. Telapak tangan dan jari-jari
tersebut bisa digerakkan menggunakan keyboard
3. Simulasikan menggunakan sumbu x, y,z bagaimana operasi yang dilakukan ketika keyboard
diketik (dalam bentuk screenshot dan milimeter blok)

Jawaban Tugas:

1. Source Code Lengan Bergerak

#include <GL/glut.h>
static int shoulder = 0, elbow = 0;

void init(void) {
glClearColor (0.0, 0.0, 0.0, 0.0);
glShadeModel (GL_FLAT);
}

void display(void) {
glClear (GL_COLOR_BUFFER_BIT);
glPushMatrix();
glTranslatef (-1.0, 0.0, 0.0);
glRotatef ((GLfloat) shoulder, 0.0, 0.0, 1.0);
glTranslatef (1.0, 0.0, 0.0); glPushMatrix();
glScalef (2.0, 0.4, 1.0);
glutWireCube (1.0); glPopMatrix();
glTranslatef (1.0, 0.0, 0.0);
glRotatef ((GLfloat) elbow, 0.0, 0.0, 1.0);
glTranslatef (1.0, 0.0, 0.0); glPushMatrix();
glScalef (2.0, 0.4, 1.0);
glutWireCube (1.0);
glPopMatrix(); glPopMatrix();
glutSwapBuffers();
}

void reshape (int w, int h) {

glViewport (0, 0, (GLsizei) w, (GLsizei) h);
glMatrixMode (GL_PROJECTION); glLoadIdentity
();
gluPerspective(65.0, (GLfloat) w/(GLfloat) h, 1.0, 20.0);
glMatrixMode(GL_MODELVIEW); glLoadIdentity();
glTranslatef (0.0, 0.0, -5.0);
}

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

switch (key) { case 's': shoulder = (shoulder + 5) % 360;
glutPostRedisplay(); break;
case 'S': shoulder = (shoulder - 5) % 360;
glutPostRedisplay(); break;
case 'e': elbow = (elbow + 5) % 360;
glutPostRedisplay(); break;
case 'E': elbow = (elbow - 5) % 360;
glutPostRedisplay(); break;
case 27: exit(0); break;
default: break;

1
 }
}

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

glutInit(&argc, argv);
glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);
glutInitWindowSize (700, 600);
glutInitWindowPosition (100, 100);
glutCreateWindow (argv[0]); init();
glutDisplayFunc(display);
glutReshapeFunc(reshape);
glutKeyboardFunc(keyboard);
glutMainLoop(); return 0;
}

Output

Kode diatas menggambarkan sebuah lengan yang dibuat dengan dua bangun ruang
berupa balok. Masing-masing dari dua balok tersebut mampu berputar 360° dengan 2 arah putar.
Putaran pada balok sebelah kiri akan secara otomatis mempengaruhi balok sebelah kanan
sedangkan balok sebelah kanan berdiri sendiri dan tidak dappat mempengaruhi balok sebelah kiri.
Layaknya sebuah lengan, balok sebelah kiri berperan sebagai bahu, dan balok sebelah kanan
berperan sebagai siku.
Adapun, “lengan” diatas digerakkan dengan input melalui keyboard yang sudah ditentukan.
Berikut adalah keterangannya:
➔ Shoulder

2
 - S (kapital) akan membuat bahu bergerak ke atas (+) sebanyak 5 satuan pada satu kali
tekan. Tidak ada batasan pada pergerakan ini (360°).
- s akan membuat bahu bergerak ke bawah (-) sebanyak 5 satuan pada satu kali tekan.
Tidak ada batasan pada pergerakan ini (360°).
➔ Elbow
- E (kapital) akan membuat siku bergerak ke bawah (-) sebanyak 5 satuan pada satu kali
tekan. Tidak ada batasan pada pergerakan ini (360°).
- e akan membuat siku bergerak ke atas (+) sebanyak 5 satuan pada satu kali tekan. Tidak
ada batasan pada pergerakan ini (360°).

2. Source Code Lengan + Telapak

#include <GL/glut.h>
static int thumb1 = 0, thumb2 = 0, thumb11 = 0;
static int telunjuk1 = 0, telunjuk2 = 0, telunjuk3 = 0;
static int jTengah1 = 0, jTengah2 = 0, jTengah3 = 0;
static int jManis1 = 0, jManis2 = 0, jManis3 = 0;
static int kelingking1 = 0, kelingking2 = 0, kelingking3 = 0;
static int telapak1 = 0, telapak2 = 0;
static int lenganA1 = 0, lenganA2 = 0,lenganB = 0;

void init(void)
{
glClearColor(0,0,0,0);
glShadeModel(GL_FLAT);
}

void tampilan(void)
{ glClear(GL_COLOR_BUFFER_BIT);
glPushMatrix();

//Pembuatan lengan atas

glTranslatef(-1.8,0,0);
glRotatef((GLfloat) lenganA1,0,0,1);
glRotatef((GLfloat) lenganA2,0,1,0);
glTranslatef(1.8,0,0);
glPushMatrix();
glTranslatef(-1.4,0,0);
glScalef(0.8,0.2,0.56);
glutWireCube(1);
glPopMatrix();

//Pembuatan lengan bawah

glTranslatef(-1,0,0);
glRotatef((GLfloat) lenganB,0,0,1);
glTranslatef(1,0,0);
glPushMatrix();
glTranslatef(-0.6,0,0);
glScalef(0.8,0.2,0.56);

3
glutWireCube(1);
glPopMatrix();

//pembuatan telapak
glRotatef((GLfloat) telapak1, 1,0,0);
glRotatef((GLfloat) telapak2, 0,0,1);
glPushMatrix();
glScalef (0.4, 0.2, 0.56);
glutWireCube (1.0);
glPopMatrix();

//pembuatan ibu jari

glPushMatrix();
glTranslatef(0,0,0.38);
glRotatef((GLfloat) -thumb11,1,0,0);
glRotatef((GLfloat) thumb1,0,1,0);
glPushMatrix();
glScalef(0.1,0.1,0.2);
glutWireCube(1.0);
glPopMatrix();
glTranslatef(0,0,0.2);
glRotatef((GLfloat) -thumb2,1,0,0);
glPushMatrix();
glScalef(0.1,0.1,0.25);
glutWireCube(1.0);
glPopMatrix();

//pembuatan jari telunjuk

glPopMatrix();
glPushMatrix();
glTranslatef(0.3,0,0.22);
glRotatef((GLfloat) telunjuk1,0,0,1);
glPushMatrix();
glScalef(0.2,0.1,0.13);
glutWireCube(1.0);
glPopMatrix();
glTranslatef(0.2,0,0);
glRotatef((GLfloat) telunjuk2,0,0,1);
glPushMatrix();
glScalef(0.22,0.1,0.13);
glutWireCube(1.0);
glPopMatrix();
glTranslatef(0.22,0,0);
glRotatef((GLfloat) telunjuk3,0,0,1);
glPushMatrix();
glScalef(0.21,0.1,0.13);
glutWireCube(1.0);
glPopMatrix();
glPopMatrix();

//pembuatan jari tengah

glPushMatrix();
glTranslatef(0.3,0,0.05);
glRotatef((GLfloat) jTengah1,0,0,1);
glPushMatrix();
glScalef(0.25,0.1,0.14);

4
glutWireCube(1.0);
glPopMatrix();
glTranslatef(0.25,0,0);
glRotatef((GLfloat) jTengah2,0,0,1);
glPushMatrix();
glScalef(0.27,0.1,0.14);
glutWireCube(1.0);
glPopMatrix();
glTranslatef(0.27,0,0);
glRotatef((GLfloat) jTengah3,0,0,1);
glPushMatrix();
glScalef(0.21,0.1,0.14);
glutWireCube(1.0);
glPopMatrix();
glPopMatrix();

//pembuatan jari manis

glPushMatrix();
glTranslatef(0.3,0,-0.1);
glRotatef((GLfloat) jManis1,0,0,1);
glPushMatrix();
glScalef(0.2,0.1,0.11);
glutWireCube(1.0);
glPopMatrix();
glTranslatef(0.2,0,0);
glRotatef((GLfloat) jManis2,0,0,1);
glPushMatrix();
glScalef(0.21,0.1,0.11);
glutWireCube(1.0);
glPopMatrix();
glTranslatef(0.21,0,0);
glRotatef((GLfloat) jManis3,0,0,1);glPushMatrix();
glScalef(0.2,0.1,0.11);
glutWireCube(1.0);
glPopMatrix();
glPopMatrix();

//pembuatan jari kelingking

glPushMatrix();
glTranslatef(0.3,0,-0.21);
glRotatef((GLfloat) kelingking1,0,0,1);
glPushMatrix();
glScalef(0.18,0.1,0.1);
glutWireCube(1.0);
glPopMatrix();
glTranslatef(0.18,0,0);
glRotatef((GLfloat) kelingking2,0,0,1);
glPushMatrix();
glScalef(0.17,0.1,0.1);
glutWireCube(1.0);
glPopMatrix();
glTranslatef(0.17,0,0);
glRotatef((GLfloat) kelingking3,0,0,1);
glPushMatrix();
glScalef(0.19,0.1,0.1);
glutWireCube(1.0);
glPopMatrix();

5
glPopMatrix();
glPopMatrix();
glutSwapBuffers();
}

void reshape (int w, int h)

{
glViewport (0, 0, (GLsizei) w, (GLsizei) h);
glMatrixMode (GL_PROJECTION);
glLoadIdentity ();
gluPerspective(65.0, (GLfloat) w/(GLfloat) h, 1.0, 20.0);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef (0.0, 0.0, -5.0);
}

void keyboard(unsigned char key, int x, int y)

{
switch (key){

//lengan atas
case 'q': lenganA1 = (lenganA1 + 5) % 360;
if(lenganA1 > 110) lenganA1 = 110;
glutPostRedisplay();
break;

case 'Q': lenganA1 = (lenganA1 - 5) % 360;

if(lenganA1 < -110) lenganA1 = -110;
glutPostRedisplay();
break;

case 'w': lenganA2 = (lenganA2 + 5) % 360;

if (lenganA2 > 90) lenganA2 = 90;
glutPostRedisplay();
break;

case 'W': lenganA2 = (lenganA2 - 5) % 360;

if (lenganA2 < -90) lenganA2 = -90;
glutPostRedisplay();
break;

//lengan bawah
case 'a': lenganB = (lenganB + 5) % 360;
if(lenganB > 120) lenganB = 120;
glutPostRedisplay();
break;

case 'A': lenganB = (lenganB - 5) % 360;

if(lenganB < 0) lenganB = 0;
glutPostRedisplay();
break;

//telapak tangan
case 'z': telapak1 = (telapak1 + 5) % 360;
if(telapak1 > 90) telapak1 =90;
glutPostRedisplay();
break;

6
case 'Z': telapak1 = (telapak1 - 5) % 360;
if(telapak1 < -90) telapak1 =-90;
glutPostRedisplay();
break;

case 'x': telapak2 = (telapak2 + 5) % 360;

if (telapak2 > 90) telapak2 = 90;
glutPostRedisplay();
break;

case 'X': telapak2 = (telapak2 - 5) % 360;

if (telapak2 < 0) telapak2 = 0;
glutPostRedisplay();
break;

//ibu jari
case 'C': thumb11 = (thumb11 - 5) % 360;
if (thumb11 < 0) thumb11 = 0;
glutPostRedisplay();
break;

case 'c': thumb11 = (thumb11 + 5) % 360;

if (thumb11 > 90) thumb11 = 90;
glutPostRedisplay();
break;

case 'D': thumb1 = (thumb1 - 5) % 360;

if (thumb1 < 0) thumb1 = 0;
glutPostRedisplay();
break;

case 'd': thumb1 = (thumb1 + 5) % 360;

if (thumb1 > 90) thumb1 = 90;
glutPostRedisplay();
break;

case 'E': thumb2 = (thumb2 - 5) % 360;

if (thumb2 < 0) thumb2 = 0;
glutPostRedisplay();
break;

case 'e': thumb2 = (thumb2 + 5) % 360;

if (thumb2 > 90) thumb2 = 90;
glutPostRedisplay();
break;

//telunjuk
case 'V': telunjuk1 = (telunjuk1 - 5) % 360;
if (telunjuk1 < 0) telunjuk1 = 0;
glutPostRedisplay();
break;

case 'v': telunjuk1 = (telunjuk1 + 5) % 360;

if (telunjuk1 > 90) telunjuk1 = 90;
glutPostRedisplay();
break;

7
case 'F': telunjuk2 = (telunjuk2 - 5) % 360;
if (telunjuk2 < 0) telunjuk2 = 0;
glutPostRedisplay();
break;

case 'f': telunjuk2 = (telunjuk2 + 5) % 360;

if (telunjuk2 > 90) telunjuk2 = 90;
glutPostRedisplay();
break;

case 'R': telunjuk3 = (telunjuk3 - 5) % 360;

if (telunjuk3 < 0) telunjuk3 = 0;
glutPostRedisplay();
break;

case 'r': telunjuk3 = (telunjuk3 + 5) % 360;

if (telunjuk3 > 90) telunjuk3 = 90;
glutPostRedisplay();
break;

//jari tengah
case 'B': jTengah1 = (jTengah1 - 5) % 360;
if (jTengah1 < 0) jTengah1 = 0;
glutPostRedisplay();
break;

case 'b': jTengah1 = (jTengah1 + 5) % 360;

if (jTengah1 > 90) jTengah1 = 90;
glutPostRedisplay();
break;

case 'G': jTengah2 = (jTengah2 - 5) % 360;

if (jTengah2 < 0) jTengah2 = 0;
glutPostRedisplay();
break;

case 'g': jTengah2 = (jTengah2 + 5) % 360;

if (jTengah2 > 90) jTengah2 = 90;
glutPostRedisplay();
break;

case 'T': jTengah3 = (jTengah3 - 5) % 360;

if (jTengah3 < 0) jTengah3 = 0;
glutPostRedisplay();
break;

case 't': jTengah3 = (jTengah3 + 5) % 360;

if (jTengah3 > 90) jTengah3 = 90;
glutPostRedisplay();
break;

//jari manis
case 'N': jManis1 = (jManis1 - 5) % 360;
if (jManis1 < 0) jManis1 = 0;
glutPostRedisplay();
break;

8
case 'n': jManis1 = (jManis1 + 5) % 360;
if (jManis1 > 90) jManis1 = 90;
glutPostRedisplay();
break;

case 'H': jManis2 = (jManis2 - 5) % 360;

if (jManis2 < 0) jManis2 = 0;
glutPostRedisplay();
break;

case 'h': jManis2 = (jManis2 + 5) % 360;

if (jManis2 > 90) jManis2 = 90;
glutPostRedisplay();
break;

case 'Y': jManis3 = (jManis3 - 5) % 360;

if (jManis3 < 0) jManis3 = 0;
glutPostRedisplay();
break;

case 'y': jManis3 = (jManis3 + 5) % 360;

if (jManis3 > 90) jManis3 = 90;
glutPostRedisplay();
break;

//kelingking
case 'M': kelingking1 = (kelingking1 - 5) % 360;
if (kelingking1 < 0) kelingking1 = 0;
glutPostRedisplay();
break;

case 'm': kelingking1 = (kelingking1 + 5) % 360;

if (kelingking1 > 90) kelingking1 = 90;
glutPostRedisplay();
break;

case 'J': kelingking2 = (kelingking2 - 5) % 360;

if (kelingking2 < 0) kelingking2 = 0;
glutPostRedisplay();
break;

case 'j': kelingking2 = (kelingking2 + 5) % 360;

if (kelingking2 > 90) kelingking2 = 90;
glutPostRedisplay();
break;

case 'U': kelingking3 = (kelingking3 - 5) % 360;

if (kelingking3 < 0) kelingking3 = 0;
glutPostRedisplay();
break;

case 'u': kelingking3 = (kelingking3 + 5) % 360;

if (kelingking3 > 90) kelingking3 = 90;
glutPostRedisplay();
break;
case 27: exit(10);

9
 //gunakan tombol tab untuk reset
case 9 : kelingking1 = kelingking2 = kelingking3 =
lenganA1 = lenganA2 = lenganB = jManis1 = jManis2 = jManis3 =
jTengah1
= jTengah2 = jTengah3 = telunjuk1 = telunjuk2 = telunjuk3 =
thumb1 =
thumb11 = thumb2 = telapak1 = telapak2 = 0;
glutPostRedisplay();
break;
default:break;
}
}

int main(int argc, char** argv)

{
glutInit(&argc, argv);
glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);
glutInitWindowSize (700, 600);
glutInitWindowPosition (100, 100);
glutCreateWindow (argv[0]);
init();
glutDisplayFunc(tampilan);
glutReshapeFunc(reshape);
glutKeyboardFunc(keyboard);
glutMainLoop();
return 0;
}

OUTPUT

3. Untuk mempermudah dalam menggerakkan tangan ini, program ini sengaja dibuat menggunakan
perintah terurut pada keyboard.

10
➔ Untuk menggerakkan bahu, tekan tombol Q digunakan untuk merotasikan bahu,
gerakannya akan berubah seiring dengan arah bahu. Dalam posisi lurus (posisi semula),
Q disini akan berperan sebagai sumbu Y dari bahu.
➔ Untuk menggerakkan bahu ke arah depan belakang, tekan tombol W. Dari posisi semula,
W akan mirip dengan sumbu z.

Hasil dari Q Hasil dari W

Setelah mencapai batas maksimal dari sumbu gerakan “W”, Q akan membuat tangan
berotasi. Hasil pergerakan tangan ini akan berubah-ubah sesuai dengan arah hadap dan
posisi lengannya, baik Q ataupun W.
➔ Adapun huruf Z akan mempengaruhi telapak tangannya untuk bergerak sagaris dengan
sumbu x.
➔ Huruf A akan menggerakkan lengan bawah (siku)
➔ Huruf X akan membuka dan menutup telapak tangan

Adapun jari disini terdiri dari 3 buah balok (kecuali ibu jari) dimana masing-masing
dari balok tersebut dapat digerakkan dengan keyboard. Dengan mengikuti aturan
horizontal pada keyboard qwerty, keterangannya adalah sebagai berikut:
→ C & D akan mempengaruhi ibu jari
→ V, F, dan R akan mempengaruhi jari telunjuk
→ B, G, dan T akan mempengaruhi jari tengah
→ N, H, dan Y akan mempengaruhi jari manis
→ M, J, dan U akan mempengaruhi jari kelingking

11
 Terurut dari baris paling atas keyboard, maka kotak yang akan terpengaruh adalah
yang berada di ujung jari urut ke bawah sesuai tatanan keyboard.
Agar masing-masing dari perintah (input keyboard) diatas dapat bergerak dua arah,
maka untuk membedakannya digunakan CAPSLOCK.
Adapun perintah tambahan yaitu:
- TAB : Untuk me-reset posisi tangan
- ESC : Untuk keluar dari program

Hasil dari menekan W sebanyak 15 kali, dan x sebanyak 18 kali

12