LAPORAN PRAKTIKUM GRAFIKA KOMPUTER DAN MUTIMEDIA

PRAKTIKUM 1
GRAFIK PRIMITIF

OLEH :

Y.NIMROD LEORI
2A / 42516006
D4 TEKNIK KOMPUTER & JARINGAN

POLITEKNIK NEGERI UJUNG PANDANG

2018
 Nama : Y.Nimrod Leori

NIM : 42516006

Prodi : D4 Teknik Komputer dan Jaringan

LAPORAN PRAKTIKUM 1

A. TUJUAN PRAKTIKUM

1. Mengenal Grafik Primitif Dasar dan menggambarkannya menggunakan OpenGL

2. Membandingkan pembuatan grafik primitif dasar dengan Visual C++

B. TEORI DASAR
Grafik Sederhana

Sekarang kita akan belajar menggambar objek dasar dalam OpenGL. Objek dasar
yaitu titik, garis, dan lengkungan. Buat proyek baru dengan nama Objek Dasar, langkah-
langkahnya persis seperti di latihan sebelumnya.

Berikut ini adalah contoh program sederhana menggunakan OpenGl. Program berikut
hanya akan memunculkan satu layar biru kosong, bila program berikut ini dapat berjalan
dengan baik maka kita sudah siap memulai membuat grafik dengan OpenGL.
#include <gl/glut.h>
void Jendela(void)
{
glClear(GL_COLOR_BUFFER_BIT); //membersihkan layar dan men-set dalam
format warna
glFlush(); //memastikan seluruh perintah tereksekusi
}
int main(int argc, char* argv[])
{
glutInit(&argc, argv);
glutInitWindowSize(640,480);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA);
glutCreateWindow("biru");
glutDisplayFunc(Jendela);
glClearColor (0.0f, 0.0f, 1.0f, 1.0f);
glutMainLoop();
return 0;
}
 Pada prinsipnya openGL mempunyai prinsip pembuatan warna sama seperti RGB
pada warna-warna yang disediakan oleh berbagai macam pemrograman. namun
perbedaannya adalah :

           * kode warna RGB pada pemrograman lain mempunyai nilai default (255,255,255).
    * sedangkan openGL memiliki kode warna default (1,1,1) 

jadi intinya kode warna pada openGL mempunyai rentang antara 0 sampai dengan 1.
berikut ini adalah sedikit kode warna yang penulis kumpulkan dari beberapa percobaan.

1. Warna Merah = glColor3f (1.0,0.0,0.0) 2. Warna Hijau = glColor3f (0.0,1.0,0.0)

3. Warna Biru   = glColor3f(0.0,0.0,1.0) 4. Warna Kuning   = glColor3f(1.0,1.0,0.0)

5. Warna Cyan    = glColor3f(0.0,1.0,1.0) 6. Warna Magenta   = glColor3f(1.0,0.0,1.0)

7. Warna putih   = glColor3f(1.0,1.0,1.0) 8. Warna Hitam     = glColor3f(0.0,0.0,0.0)

I. Membuat Titik

Untuk membuat titik, anda harus menggunakan prosedur (GL_POINTS)

#include <gl/glut.h>
void point(void)
{
glClear(GL_COLOR_BUFFER_BIT);
glPointSize(5.0f);
glBegin(GL_POINTS);
glColor3f(1.0f, 0.0f, 0.0f);
glVertex3f(0.25, 0.25, 0.0);
glEnd();
glFlush();
}
int main(int argc, char* argv[])
{
glutInit(&argc, argv);
glutInitWindowSize(640,480);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA);
glutCreateWindow("Titik");
glutDisplayFunc(point);
glClearColor(0.0f, 0.0f, 1.0f, 1.0f);
glutMainLoop();
return 0;
}

glPointSize(5.0f) digunakan untuk mengatur besar titik yang akan digambar. Di sini, kita
akan menggambar titik dengan ukuran 5.0. glBegin(GL_POINTS) digunakan untuk
menggambar titik. Posisi titik yang akan digambar harus ditulis antara glBegin(GL_POINTS)
dan glEnd(). glColor3f(1.0f, 0.0f, 0.0f) adalah warna dari titk yang akan digambar. Format
yang digunakan adalah format RGB, jadi warna titik adalah merah. glVertex3f( -10.0f, 5.0f, -
20.0f) berarti posisi titik adalah 10 satuan ke kiri, 5 satuan ke atas, dan 20 satuan menjauh
dari layar. Untuk koordinat, posisi tengah (posisi 0,0,0) berada tepat di tengah-tengah layar.
Sumbu X negatif berarti ke kiri, positif berarti ke kanan. Sumbu Y positif berarti ke atas,
negatif ke bawah. Sedangkan untuk sumbu Z, tanda positif berarti di depan layar (di luar
layar), jadi tidak terlihat di layar. Jadi sumbu Z harus menggunakan tanda negatif agar objek
dapat dilihat.

II. Membentuk Garis

#include <gl/glut.h>
void Garis(void)
{
glClear(GL_COLOR_BUFFER_BIT);
glLineWidth(2.0f);
glBegin(GL_LINES);
glColor3f(1.0f, 1.0f, 1.0f);
glVertex3f( 0.00, 0.20, 0.0);
glVertex3f( 0.00, -0.20, 0.0);
glEnd();
glFlush();
}
int main(int argc, char* argv[])
{
 glutInit(&argc, argv);
glutInitWindowSize(640,480);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA);
glutCreateWindow("Membuat Garis");
glutDisplayFunc(Garis);
glClearColor(0.0f, 0.0f, 1.0f, 1.0f);
glutMainLoop();
return 0;
}

Setelah bisa menggambar titik, kita akan belajar menggambar garis. Garis terdiri dati dua
titik, caranya mirip dengan cara menggambar titik. Tinggal mengganti glBegin(GL_POINTS)
menjadi glBegin(GL_LINES) seperti pada program bagian garis pertama. Ingat, garis terdiri
dari dua titik. Jadi glVertex3f(...) harus dituliskan dua kali, masing-masing untuk sebuat titik.

glLineWidth(2.0f) digunakan untuk menentukan lebar garis yang akan digambar. Di sini,kita
akan menggambar garis dengan lebar 2. Garis bisa memiliki warna degradasi. Ingat bahwa
garsi terdiri dari dua titik. Bila titik pertama berwarna hijau dan titik kedua berwarna biru,
warna garis akan berdegradasi dari hijau ke biru. Lihat bagian garis kedua untuk melihat
warna degradasi.

III. Menggambar Segitiga

#include <gl/glut.h>
void Segitiga(void)
{
glClear(GL_COLOR_BUFFER_BIT);
glBegin(GL_TRIANGLES);
glColor3f(1.0f, 0.0f, 0.0f); glVertex3f( -0.10,-0.10, 0.00);
glColor3f(0.0f, 1.0f, 0.0f); glVertex3f( 0.10,-0.10, 0.00);
glColor3f(0.0f, 0.0f, 1.0f); glVertex3f( 0.00, 0.10, 0.00);
glEnd();
glFlush();
}
int main(int argc, char* argv[])
{
glutInit(&argc, argv);
glutInitWindowSize(640,480);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA);
glutCreateWindow("Membuat Segitiga");
glutDisplayFunc(Segitiga);
glClearColor(0.0f, 0.0f, 1.0f, 1.0f);
glutMainLoop();
return 0;
}

Sekarang kita masuk ke bagian menggambar segitiga. Segitiga digambar dengan perintah
glBegin(GL_TRIANGLES). Perhatikan bahwa segitiga juga bisa memiliki warna degradasi.

Untuk menggambar beberapa segitiga, lakukan dengan looping seperti cara biasa. Bila ingin
menggambar beberapa segitiga yang terhubung, gunakan glBegin(GL_TRIANGLE_STRIP).
Di sini, titik pertama, kedua, dan ketiga akan membentuk segitiga pertama. Titik kedua,
ketiga, dan keempat akan membentuk segitiga kedua, dan seterusnya. Perhatikan contoh pada
segitiga kedua. Coba juga glBegin(GL_TRIANGLE_FAN) untuk cara lain.

//Segitiga Terhubung
glBegin(GL_TRIANGLE_STRIP);
glColor3f(1.0f, 0.0f, 0.0f); glVertex3f( -0.10,-0.10, 0.00);
glColor3f(0.0f, 1.0f, 0.0f); glVertex3f( 0.10,-0.10, 0.00);
glColor3f(0.0f, 0.0f, 1.0f); glVertex3f( 0.00, 0.10, 0.00);
glColor3f(1.0f, 1.0f, 0.0f); glVertex3f( 0.15, 0.05, 0.00);
glEnd();

IV. D. Menggambar Segiempat Penuh

Sekarang kita masuk ke bagian menggambar segiempat. Segiempat digambar dengan

perintah “glRectf(titik 1, titik 2, titik 3, titik 4)”.

Daftar Alat dan Bahan

 1. Personal Komputer 1 Unit
2. Software C++ (Dev C++)

Keselamatan Kerja

1. Sebelum melakukan langkah percobaan, pastikan kabel power terhubung ke Power

Supply.

2. Matikan komputer setelah praktikum selesai.

C. PROSEDUR PERCOBAAN

1. Buatlah empat buah titik yang terletak pada koordinat-koordinat (25,25) , (25,75) ,
(75,25) dan (75,75) .

2. Buatlah empat buah garis yang masing-masing berbeda warna sehingga membentuk
gradasi warna.

3. Buatlah Segitiga menggunakan fungsi (GL_TRIANGLE_FAN) dan bandingkan

hasilnya dengan (GL_TRIANGLE_STRIP).

4. Buatlah Sebuah Bentuk gabungan dari semua grafik primitif yang sudah dipelajari.
D. HASIL DAN ANALISA PERCOBAAN

1. Berikut merupakan script dan tampilan dari empat buah titik yang terletak pada
koordinat-koordinat yang telah ditentukan :
#include <gl/glut.h>
void point(void)
{
glClear(GL_COLOR_BUFFER_BIT);
glPointSize(5.0f);
glBegin(GL_POINTS);
glColor3f(1.0f, 0.0f, 0.0f);
glVertex3f(0.25, 0.25, 0);
glVertex3f(0.25, 0.75, 0);
glVertex3f(0.75, 0.25, 0);
glVertex3f(0.75, 0.75, 0);
glEnd();
glFlush();
}
int main(int argc, char* argv[])
{
glutInit(&argc, argv);
glutInitWindowSize(640,480);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA);
glutCreateWindow("Titik");
glutDisplayFunc(point);
glClearColor(0.0f, 0.0f, 1.0f, 1.0f);
glutMainLoop();
return 0;
}

Dari script yang telah penulis gunakan,terdapat berapa titik yang telah
dimasukkan. Namun pada penerapannya, penulis menurunkan letak titik pada semua
koordinat. Yaitu dengan menambahkan 0, . Hal ini dikarenakan tampilan dari script
hanya sebatas 1.0f ,sehingga jika memasukkan seperto 25.0f , maka akan keluar dari
tampilan.

2. Berikut merupakan script dan tampilan empat buah garis yang masing-masing berbeda
warna sehingga membentuk gradasi warna :
#include <gl/glut.h>
void Garis(void)
{
glClear(GL_COLOR_BUFFER_BIT);
glLineWidth(8.0f);
glBegin(GL_LINES);
glColor3f(0.0f, 0.0f, 1.0f);
glVertex3f( -0.40, 0.20, 0.0);
glColor3f(1.0f, 0.0f, 0.0f);
glVertex3f( -0.40, -0.20, 0.0);

glColor3f(0.0f, 0.0f, 0.0f);

glVertex3f( -0.20, 0.20, 0.0);
glColor3f(0.0f, 0.0f, 1.0f);
glVertex3f( -0.20, -0.20, 0.0);

glColor3f(1.0f, 1.0f, 0.0f);

glVertex3f( 0.20, 0.20, 0.0);
glColor3f(0.0f, 1.0f, 1.0f);
glVertex3f( 0.20, -0.20, 0.0);

glColor3f(1.0f, 0.0f, 1.0f);

glVertex3f( 0.40, 0.20, 0.0);
glColor3f(0.0f, 0.0f, 0.0f);
glVertex3f( 0.40, -0.20, 0.0);
glEnd();
glFlush();
}
int main(int argc, char* argv[])
{
glutInit(&argc, argv);
glutInitWindowSize(640,480);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA);
glutCreateWindow("Membuat Garis");
glutDisplayFunc(Garis);
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glutMainLoop();
return 0;
}

Hasil dari script diatas telah menampilkan 4 buah garis dengan gradasi warna
yang berbeda tiap garisnya. Pada pemilihan warna,penulis menggunakan beberapa
kombinasi dari warna yang ada pada dasar teori,yaitu RGB dan CMYK serta warna
putih. Selain itu, penulis menempatkan sesuai koordinat yang telah penulis
tentukan,serta ketebalan sebanyak 8.0f . Dari hasil script diatas pula penulis
menggunakan latar putih yang diatur pada baris glClearColor, sehingga terdapat
perbedaan warna latar dari soal sebelumnya. Hal ini penulis lakukan agar gradasi
warna yang terbentuk dari garis yang telah dibuat tidak merusak pandangan penglihat
dan dapat melihatnya dengan jelas.

3. Berikut merupakan script dan tampilan dari Segitiga menggunakan fungsi

(GL_TRIANGLE_FAN) dan bandingkan hasilnya dengan (GL_TRIANGLE_STRIP).

FAN
 Perbandingan antara
STRIP (GL_TRIANGLE_STRIP) dan (GL_TRIANGLE_FAN)
yaitu pada algoritma yang digunakan kedua fungsi tersebut. Letak perbedaan bisa
dilihat pada gambar. Strip menggambar segitiga mulai dari titik 1,2 dan 3. Dan setelah
itu berlanjut membuat segitiga mulai dari titik 2,3,4. Begitu seterusnya. Jadi dapat
ditarik sebuah opini bahwa dengan menggunakan fungsi Strip,maka pembentukannya
bertahap dari 3 titik pertama dan 3 titik setelah titik pertama dan berhenti jika
penggambaran segitiga selanjutnya hanya sisa 2 titik. Sedangkan fungsi Fan memulai
penggambaran segitiga di titik 1,2,3 dan melanjutkan ke 1,3,4 . Dapat ditarik sebuah
opini bahwa fungsi Fan menitik beratkan sebuah titik sebagai pusat dari awal
terbentuknya segitiga yaitu titik pertama dan membentuk segitiga secara
berurutan,sesuai dengan script yang dituliskan. Dengan kata lain, titik pertama akan
menuju ke titik 2 dan 3, lalu titik pertama menuju ke titik 3 dan 4 . Begitu
seterusnya,namun jika tidak cukup 3 titik,maka akan terhenti.

4. Berikut script yang menampilkan berbagai Bentuk gabungan dari semua grafik
primitif yang sudah dipelajari.
#include <gl/glut.h>
void GABUNGAN(void)
{
glClear(GL_COLOR_BUFFER_BIT);
glColor3f(0.0f, 1.0f, 1.0f);
glRectf(-0.18, 0.18, 0.18, -0.18);

glBegin(GL_TRIANGLES);
glColor3f(1.0f, 0.0f, 0.0f); glVertex3f( -0.18,0.18, 0.00);
glColor3f(0.0f, 1.0f, 0.0f); glVertex3f( 0.18,0.18, 0.00);
glColor3f(0.0f, 0.0f, 1.0f); glVertex3f( 0.00, 0.40, 0.00);
glEnd();

glLineWidth(3.0f);
glBegin(GL_LINES);
glColor3f(0.0f, 0.0f, 1.0f);
glVertex3f( 0.00, 0.40, 0.0);
glColor3f(1.0f, 0.0f, 0.0f);
glVertex3f( 0.70, 0.40, 0.0);

glColor3f(1.0f, 1.0f, 0.0f);

glVertex3f( 0.18, -0.18, 0.0);
glColor3f(0.0f, 1.0f, 1.0f);
glVertex3f( 0.70, -0.18, 0.0);

glColor3f(1.0f, 0.0f, 1.0f);

glVertex3f( 0.70, 0.40, 0.0);
glColor3f(0.0f, 0.0f, 0.0f);
glVertex3f( 0.70, -0.18, 0.0);

glColor3f(0.0f, 0.0f, 0.0f);

glVertex3f( 0.18, 0.18, 0.0);
glColor3f(0.0f, 0.0f, 1.0f);
 glVertex3f( 0.70, 0.18, 0.0);

glColor3f(1.0f, 1.0f, 1.0f);

glVertex3f( -0.395, 0.30, 0.0);
glColor3f(0.0f, 0.0f, 0.0f);
glVertex3f( -0.395, -0.18, 0.0);

glColor3f(0.0f, 0.0f, 0.0f);

glVertex3f( 0.70, 0.70, 0.0);
glColor3f(0.0f, 0.0f, 0.0f);
glVertex3f( 0.55, 0.55, 0.0);

glEnd();

glBegin(GL_TRIANGLE_STRIP);
glColor3f(1.0f, 0.0f, 0.0f); glVertex3f( 0.70, 0.70, 0.00);
glColor3f(1.0f, 0.0f, 0.0f); glVertex3f( 0.90, 0.70, 0.00);
glColor3f(1.0f, 0.0f, 0-.0f); glVertex3f( 0.80, 0.90, 0.00);
glColor3f(1.0f, 1.0f, 1.0f); glVertex3f( 0.95, 0.85, 0.00);
glEnd();

glBegin(GL_TRIANGLE_FAN);
glColor3f(1.0f, 0.0f, 0.0f); glVertex3f( -0.40,0.30, 0.00);
glColor3f(0.0f, 1.0f, 0.0f); glVertex3f( -0.20,0.30, 0.00);
glColor3f(0.0f, 0.0f, 1.0f); glVertex3f( -0.40, 0.50, 0.00);
glColor3f(1.0f, 1.0f, 0.0f); glVertex3f( -0.20, 0.45, 0.00);

glEnd();
glPointSize(5.0f);
glBegin(GL_POINTS);
glColor3f(0.0f, 0.0f, 0.0f);
glVertex3f(0.0, -0.10, 0.0);
glVertex3f(0.30, 0.0, 0.0);
glVertex3f(0.50, 0.0, 0.0);
glEnd();
glFlush();
}
int main(int argc, char* argv[])
{
glutInit(&argc, argv);
glutInitWindowSize(640,480);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA);
glutCreateWindow("GABUNGAN");
glutDisplayFunc(GABUNGAN);
glClearColor(1.0f, 0.0f, 1.0f, 0.0f);
glutMainLoop();
return 0;
}
 Untuk membuat tampilan diatas, menulis membaginya menjadi 3 wujud objek
dari gabungan grafik primitif yang telah dipelajari. Pertama penulis membuat sebuah
rumah dengan menggabungkan grafik segi empat, segitiga, garis, dan titik-titik
sebagai jendela kecil pada rumah tersebut. Kedua terdapat tiang bendera dimana
tiangnya berasal dari garis dan bendera dari segitiga Fan yang penulis adakan sedikit
modifikasi terhadap bentuknya. Dan yang ketiga ada layangan berupa gabungan dari
garis sebagai ekor dan segitiga Strip sebagai layang-layangnya . Penulis memberikan
beberapa gradasi warna pada setiap objek tersebut. Penulis berusaha menyampaikan
pesan pemandangan yang indah terhadap sebuah rumah sederhana dengan berbagai
objek disekitarnya kepada para penikmat gambar.

ANALISIS

Pada praktikum ini, selain beberapa analisis yang telah tertera pada hasil, perlu
diketahui, bahwa penulis dalam melakukan langkah kerja, meneliti script yang
terdapat pada dasar teori dan mengadakan modifikasi terhadap script itu, sehingga
muncullah setiap gambar grafik yang diinginkan. Namun dalam penerapannya,
penulis belajar bahwa dalam membuat grafik yang sesederhana ini, perlu mempelajari
titik koordinat setiap titiknya, sehingga dapat membentuk sebuah objek yang
diinginkan.

Untuk menjalankan beberapa script diatas, ada beberapa yang perlu

diperhatikan. Salah satunya yaitu pendefinisian nama tipe data void yang harus sama
pada baris glutCreateWindow dan glutDisplayFunc haruslah sama, karena aplikasi
akan mendeteksi jika terdapat ketidak cocokan. Untuk mengubah warna latar
belakang setelah script di compile dan dijalankan, kita pula harus memperhatikan
baris glClearColor dengan memasukkan beberapa pilihan warna yang tertera pada
dasar teori. Dalam menggabungkan beberapa objek dalam satu script, perlu
memperhatikan batas script untuk setiap titik pada setiap objek, haruslah
mengakhirinya dengan baris glEnd().
E. KESIMPULAN

Berdasarkan hasil praktikum ini, dapat disimpulkan bahwa untuk membuat

suatu objek diperlukan fungsi tertentu seperti untuk membuat segitiga menggunakan
fungsi gl_Triangles, untuk membuat garis menggunakan gl_Lines, untuk membuat
titik gl_points, untuk membuat persegi menggunakan glRectf. Fungsi-fungsi ini
bertujuan untuk membentuk suatu objek berdasarkan titik koordinat yang ditentukan
dan dihubungkan sehingga dapat menjadi suatu objek.

Pada praktikum ini pula dikenal istilah OpenGl, dimana terdapat beberapa
fungsi yang digunakan dalam pembuatan objek. Grafis yang dihasilkan pada
praktikum ii bersifat primitif atau sederhana, karena belum dapat membuat bentuk-
bentuk objek yang kompleks. Dengan adanya OpenGl ini, pembaca diharapkan dapat
memahami bahwa teknik penggambaran objek menggunakan OpenGl masih dalam
kategori mudah dipamahi, kita hanya tinggal belajar mengenai titik koordinat untuk
meletakkan setiap titik dalam pembuatan objek.