BUKU AJAR WORKSHOP GRAFIKA KOMPUTER Penyusun: Nana Ramadijanti,S.Kom.,M.Kom. NIP. 19711109.1998.02.2.001 Drs. Achmad Basuki,M.Kom.,Ph.D. NIP. 19690112.1994.03.1.002 Fadilah Fahrul Hardiansyah,S.ST. NIP. 2000000061 Program Studi D3 Teknik Informatika Departemen Teknik Informatika dan Komputer Politeknik Elektronika Negeri Surabaya 2013
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Alhamdulillah, Segala puji hanya untuk Allah SWT, Tuhan Yang Maha Berilmu.
atas petunjukNya-lah kami dapat menyelesaikan buku ajar mahasiswa D3 Teknik
Informatika untuk matakuliah Workshop Grafika Komputer. Diharapkan dengan adanya
buku ini, mahasiswa mendapatkan panduan dalam mengikuti perkuliahan Workshop
Grafika Komputer.
Materi yang disusun pada buku ini sesuai dengan silabus matakuliah Workshop
Grafika Komputer di program studi D3 Teknik Informatika. Jumlah modul praktikum 10
(sepuluh) percobaan dan 2 tugas:proyek 1 dan proyek 2 yang harus dikerjakan siswa di
tengah semester dan akhir semester,pengganti UTS dan UAS. Isi buku setiap judul
praktikum disusun mulai dari dasar teori, tugas pendahuluan,percobaan,tugas dan laporan
resmi yang harus dikerjakan siswa saat mengikuti workshop grafika komputer.
Pengerjaan percobaan dilakukan dengan bahasa pemrograman c++ dengan library
OpenGL. Dengan mengacu pada buku ini,mahasiswa diharapkan dapat mengerti dan
membuat obyek grafik 2D dan 3D. Ucapan terima kasih tak lupa kami sampaikan kepada
beberapa pihak yang telah memberikan kontribusi dalam penyelesaian buku Workshop
Grafika Komputer ini, yaitu:
Dr. Zainal Arief,ST.,MT.,selaku Direktur PENS
Ir. Anang Budikarso,MT.,selaku Pembantu Direktur II PENS
Eko Henfri Binugroho, SST, MSc,selaku Ketua Unit Penelitian PENS
Arna Fariza,S.Kom.,M.Kom.,selaku Ketua Departemen Teknik Informatika dan
Komputer PENS
Arif Basofi,S.Kom.,M.T.,selaku Ketua Program Studi D3 Teknik Informatika
PENS
Isbat Uzzin Nadhori,S.Kom.,M.T.,selaku Ketua Program Studi D4 Teknik
Informatika PENS
Dosen-dosen dan karyawan PENS,khususnya rekan-rakan di program studi D3
dan D4 Teknik Informatika PENS
Sekalipun buku ini telah selesai dengan proses yang cukup panjang, akan tetapi
masih tidak menutup adanya kekurangan padanya. Segala masukan, kritik dan review
sangat kami harapkan untuk semakin menyempurnakannya pada kesempatan mendatang.
Surabaya, Nopember 2013
PENYUSUN
ii
DAFTAR ISI
KATA PENGANTAR ...................................................................................................................................... i
DAFTAR ISI ................................................................................................................................................... ii
DAFTAR GAMBAR ..................................................................................................................................... vii
DAFTAR TABEL ........................................................................................................................................ viii
Pengantar Workshop Grafika Komputer ......................................................................................................... 1
A. TUJUAN ................................................................................................................................................. 1
B. DASAR TEORI ...................................................................................................................................... 1
B.1. Pengenalan Grafika Komputer .................................................................................................... 1
B.2. Pengenalan Pemrograman Grafik ................................................................................................ 3
B.3.1. Instalasi di Visual C++6.0 ..................................................................................................... 4
B.3.2. Instalasi di Visual C++ .Net .................................................................................................. 4
B.3.3. Instalasi Instalasi di Xcode (Mac OS X 10.5 Leopard) ......................................................... 5
C. TUGAS PENDAHULUAN .................................................................................................................... 8
D. PERCOBAAN ........................................................................................................................................ 8
E. LAPORAN RESMI ................................................................................................................................. 8
Menggambar dengan Fungsi Primitif Open GL .............................................................................................. 9
A. TUJUAN ................................................................................................................................................. 9
B. DASAR TEORI ...................................................................................................................................... 9
B.1. Sistem Koordinat ......................................................................................................................... 9
B. 2. Program Dasar Dengan OpenGL .............................................................................................. 10
B.3. Menggambar dengan Fungsi Primitif openGL ........................................................................... 11
B.4. Menggambar Titik ..................................................................................................................... 13
B.5. Mengubah Ukuran Titik ............................................................................................................. 13
B.6. Menggambar Garis ..................................................................................................................... 14
B.7. Menggambar Banyak Garis (Polyline) ....................................................................................... 14
B.8. Menggambar Banyak Garis (Polyline Kurva Tertutup) ............................................................. 14
B.10. Menggambar Segi Empat (Quad) ............................................................................................. 15
B.11. Menggambar N Segi Empat (Quad Strip) ................................................................................ 15
B.12. Menggambar Segi Tiga (Triangeles)........................................................................................ 16
B.13. Menggambar N Segi Tiga (Triangele Strip) ............................................................................ 16
B.14. Menggambar N Segi Tiga dengan 1 Titip Pusat (Triangele Fan)............................................. 17
B.15. Mengatur Warna ...................................................................................................................... 17
C. TUGAS PENDAHULUAN .................................................................................................................. 18
D. PERCOBAAN ...................................................................................................................................... 18
iii
E. TUGAS ................................................................................................................................................. 28
F. LAPORAN RESMI ............................................................................................................................... 28
A. TUJUAN ............................................................................................................................................... 30
B. DASAR TEORI .................................................................................................................................... 30
B.1. Obyek Grafik 2 Dimensi ............................................................................................................ 30
B.4. Membuat Polygon Berwarna...................................................................................................... 32
B.5. Membuat Polygon Bergradiasi ................................................................................................... 33
C. TUGAS PENDAHULUAN .................................................................................................................. 34
D. PERCOBAAN ...................................................................................................................................... 34
E. TUGAS ................................................................................................................................................. 35
F. LAPORAN RESMI ............................................................................................................................... 36
A. TUJUAN ............................................................................................................................................... 37
B. DASAR TEORI .................................................................................................................................... 37
B.1. Membuat Lingkaran ................................................................................................................... 37
B.2 Membuat Ellipse ......................................................................................................................... 38
B.3. Membuat Obyek Polar ............................................................................................................... 38
C. TUGAS PENDAHULUAN .................................................................................................................. 40
D. PERCOBAAN ...................................................................................................................................... 41
E. TUGAS ................................................................................................................................................. 46
F. LAPORAN RESMI ............................................................................................................................... 47
Melakukan Pengesetan Perseptive View dan ................................................................................................ 48
View Port Fungsi Transformasi ..................................................................................................................... 48
A. TUJUAN ............................................................................................................................................... 48
B. DASAR TEORI .................................................................................................................................... 48
B.1. Sistem Koordinat Layar ............................................................................................................. 48
C. TUGAS PENDAHULUAN .................................................................................................................. 57
D. PERCOBAAN ...................................................................................................................................... 58
E. TUGAS ................................................................................................................................................. 62
F. LAPORAN RESMI ............................................................................................................................... 63
Fungsi keyboard dan mouse .......................................................................................................................... 64
A. TUJUAN ............................................................................................................................................... 64
B. DASAR TEORI .................................................................................................................................... 64
B. 1. Event Handling di OpenGL ...................................................................................................... 64
B. 2. Mendefinisikan Event Keyboard ............................................................................................... 65
B. 3. Mendefinisikan Event Mouse ................................................................................................... 67
C. TUGAS PENDAHULUAN .................................................................................................................. 68
D. PERCOBAAN ...................................................................................................................................... 68
E. TUGAS ................................................................................................................................................. 80
F. LAPORAN RESMI ............................................................................................................................... 81
TEXT DAN FONT ........................................................................................................................................ 82
A. TUJUAN ............................................................................................................................................... 82
B. DASAR TEORI .................................................................................................................................... 82
B. 1. Karakter Bitmap ............................................................................................................................ 82
B. 2. Stroke Teks Karakter .................................................................................................................... 83
B. 3. Menempatkan Teks ....................................................................................................................... 83
C. TUGAS PENDAHULUAN .................................................................................................................. 83
D. PERCOBAAN ...................................................................................................................................... 83
E. TUGAS ................................................................................................................................................. 87
F. LAPORAN RESMI ............................................................................................................................... 88
A. TUJUAN ............................................................................................................................................... 89
B. DASAR TEORI .................................................................................................................................... 89
B.1. Membuat Latar Belakang .............................................................................................................. 89
B.2. Pembuatan Obyek Pesawat ............................................................................................................ 90
B.3. Sistem Kendali ............................................................................................................................... 90
C. TUGAS PENDAHULUAN .................................................................................................................. 91
D. PERCOBAAN ...................................................................................................................................... 91
E. LAPORAN RESMI............................................................................................................................... 91
Vertex Array – Creating 3D Object ............................................................................................................... 92
A. TUJUAN ............................................................................................................................................... 92
v
B. DASAR TEORI .................................................................................................................................... 92
C. TUGAS PENDAHULUAN .................................................................................................................. 98
D. PERCOBAAN ...................................................................................................................................... 98
E. TUGAS ............................................................................................................................................... 105
F. LAPORAN RESMI............................................................................................................................. 105
Transformation and Projection ....................................................................... Error! Bookmark not defined.
A. TUJUAN ............................................................................................................................................. 106
B. DASAR TEORI .................................................................................................................................. 106
B.10. Matrix Warna (GL_COLOR) ..................................................................................................... 112
C. TUGAS PENDAHULUAN ................................................................................................................ 113
D. PERCOBAAN .................................................................................................................................... 113
E. TUGAS ............................................................................................................................................... 116
F. LAPORAN RESMI............................................................................................................................. 116
Lighting dan Shading .................................................................................................................................. 117
A. TUJUAN ............................................................................................................................................. 117
B. DASAR TEORI .................................................................................................................................. 117
B.1. Lighting Model ............................................................................................................................ 117
B.5. Phong Model ................................................................................................................................ 121
B.6. Flat dan Smooth Shading ............................................................................................................. 122
C. TUGAS PENDAHULUAN ................................................................................................................ 122
D. PERCOBAAN .................................................................................................................................... 123
E. TUGAS ............................................................................................................................................... 127
F. LAPORAN RESMI ............................................................................................................................. 127
A. TUJUAN ............................................................................................................................................. 128
B. DASAR TEORI .................................................................................................................................. 129
vi
B.1. Membuat Obyek ...................................................................................................................... 129
B.2. Pembuatan Kendali Camera View ........................................................................................... 129
C. TUGAS PENDAHULUAN ................................................................................................................ 130
D. PERCOBAAN .................................................................................................................................... 130
E. LAPORAN RESMI ............................................................................................................................. 130
Daftar Pustaka ............................................................................................................................................. 131
vii
DAFTAR GAMBAR
viii
DAFTAR TABEL
ix
1
PRAKTIKUM 1
PENGANTAR WORKSHOP GRAFIKA KOMPUTER
A. TUJUAN
Setelah mempelajari dan mempraktekkan materi dalam praktikum ini mahasiswa
diharapkan mampu:
1. Mengetahui definisi dan manfaat grafika komputer
2. Mengenal pemrograman grafis
3. Mengenal dan mempersiapkan library grafis Open GL
B. DASAR TEORI
B.1. Pengenalan Grafika Komputer
Grafika computer (Computer Graphics) adalah suatu bidang yang mempelajari
bagaimana menghasilkan suatu gambar menggunakan komputer. Sehingga di dalam
grafika komputer akan dibahas teknik-teknik menggambar. Grafika komputer
menghasilkan software-software disain grafis yang saat ini sudah sangat canggih. Grafika
komputer menghasilkan software dengan GUI (Graphics User Interface) yang
memudahkan dan menyenangkan.
Kebutuhan akan pembuatan grafika komputer saat ini tidak bisa dihindarkan dengan
perkembangan teknologi komputer yang semakin cepat. Hampir semua bidang
menggunakan grafika komputer, tetapi kebutuhan grafika komputer lebih dirasakan
dalam bidang-bidang berikut:
(1) Visualisasi proses
a) b)
Gambar 1. 1.a ) Contoh simulasi grafis b) Contoh visualisasi proses
2
(2) Entertainment:
a) b)
Gambar 1.2. a) grafik 3D pada Final Fantasy b) grafik 3D pada game Euro 2004
(3) Design
Gambar 1.3. Contoh beberapa game 3 dimensi
(4) Game development
Gambar 1.4. Contoh simulasi pejalan kaki
Gambar 1.5. Contoh simulasi lalu lintas
Nany
3
Gambar 1.6. Peta 3D pada sistem informasi geografis
B.2. Pengenalan Pemrograman Grafik
• Sebuah teknik pemrograman yang berorientasi pada manipulasi grafis atau
menghasilkan gambar sesuai dengan kebutuhan.
• Banyak dipakai untuk simulasi, animasi, game, geospatial information, dan
visualisasi.
• Menggunakan library grafis seperti OpenG, DirectX atau Unity.
Pada workshop grafika komputer dipakai library grafis OpenGL glut. Library ini
lebih ringan dari DirectX dan dapat bekerja di semua sistem operasi, meskipun dalam
buku ini hanya dibahas untuk Windows. Selain itu library ini sangat sederhana, sehingga
memudahkan para pemula dalam mempelajari pemrograman grafik.
Di samping itu, dalam pemrograman grafik terdapat komponen dasar yang disebut
dengan obyek grafik. Obyek garfik ini merupakan obyek dasar dalam pembuatan grafik di
komputer antara lain:
Titik dan Garis,
Polyline dan Polygon
Raster,
Warna,
Text,
Paint.
4
Gambar 1.7. Elemen Dasar pada Grafika Komputer
B.3. Instalasi OpenGL
B.3.1. Instalasi di Visual C++6.0
• Ada 3 File penting
– glut.h
– glut32.lib
– glut32.dll
• Instalasi: Copy dan letakkan file-file di atas pada folder-folder yang sesuai
– Copy-kan file glut.h di folder c:\\Program Files\Microsoft Visual
Studio\VC98\Include\GLUT
– Copy-kan file glut32.lib di folder c:\\Program Files\Microsoft Visual
Studio\VC98\lib
– Copy-kan file glut32.dll di folder c:\\Windows\System32
B.3.2. Instalasi di Visual C++ .Net
Kebutuhan file Open GL untuk instalasi di Visual C++.Net sama dengan di Visual
C++ 6.0 perbedaan pada tempat file-file tersebut sbb :
Copy-kan file glut.h di folder c:\\Program Files\Microsoft Visual Studio
2010\VC\Include\GLUT
Copy-kan file glut32.lib di folder c:\\Program Files\Microsoft Visual
Studio 2010\VC\lib
Copy-kan file glut32.dll di folder c:\\Windows\System dan di folder
c:\\Windows\System32
5
B.3.3. Instalasi Instalasi di Xcode (Mac OS X 10.5 Leopard)
• Double Click icon. Icon Xcode dapat dicari di dock, atau dipilih dari Machintosh
HD -> Developer -> Applications -> Double click icon Xcode
Gambar 1.8. Icon XCode di Mac OS X 10.5 Leopard
• Xcode yang telah aktif akan menampilkan menubar
Gambar 1.9. Jendela aplikasi XCode aktif
• Program grafika akan dibuat pada bahasa C++, dengan memilih File->New
Project->Dialog New Project->Command Line Utility->C++ Tool->Choose
Gambar 1.10. Jendela Dialog XCode New Project C++ Tool
• Isikan nama project, misalnya : coba, dan click Save
6
Gambar 1.11. Jendela Dialog Nama Project
• Tampilan awal project coba sbb :
Gambar 1.12. Jendela Project Coba
• Pada menu bar->Project->Edit Project Setting
Gambar 1.13. Pemilihan Sub Menu Edit Project Settings
7
• Pada dialog project coba info yang tampil, pilih header search path, dan isikan
value dengan : /Developer/SDKs/MacOSX10.5.sdk/usr/x11/include
Gambar 1.14. Dialog Header Search Paths
• Cari dan tambahkan OpenGL.Framework, dan tekan tombol [Add]
• Click kanan di project, pilih “Add file to [nama_project]”
• Cari dan tambahkan GLUT.Framework, dan tekan tombol [Add]
• Setelah program diketik, untuk menjalankan click icon
• Untuk menutup aplikasi, click icon
• Pada Dialog Framework, pilih Glut.framework dan OpenGL.framework, click
Add 2x
Gambar 1.15. Menambahkan GLUT dan OpenGL Framework
8
C. TUGAS PENDAHULUAN
Mengumpulkan artikel tentang trend pemanfaatan grafika komputer terkini di bidang :
Desain Grafis
Publishing
Arsitektur/Teknik Sipil/Interior
Game
Animasi dan Movie
Pemetaan 3D
Simulasi dan Visualisasi
Sertakan sumber informasi dari artikel.
D. PERCOBAAN
1. Lakukan instalasi Open GL di Windows (laptop masing-masing) mengikuti langkah
pada B.3.
2. Lakukan instalasi Open GL di Mac Os (di laboratorium computer vision) mengikuti
langkah pada B.3.
E. LAPORAN RESMI
Tidak ada laporan resmi pada Workshop Grafika Komputer I, selain laptop dan atau
komputer Windows/Mac Os sudah terinstal OpenGL dan siap dipakai membuat program
grafika pada Workshop Grafika Komputer pertemuan II.
9
PRAKTIKUM 2
MENGGAMBAR DENGAN FUNGSI PRIMITIF OPEN GL
A. TUJUAN
Setelah mempelajari dan mempraktekkan materi dalam praktikum ini mahasiswa
diharapkan mampu:
1. Mengerti dan dapat Melakukan Inisialisasi Window Grafis
2. Mengerti dan dapat Membuat Gambar dengan Fungsi Primitif Open GL
3. Mengerti dan dapat Membuat Gambar 2D
B. DASAR TEORI
B.1. Sistem Koordinat
Meletakkan suatu gambar pada layar diperlukan pengetahuan mengenai sistem
koordinat Kartesian, karena OpenGL menggunakan sistem koordinat ini untuk
meletakkan suatu obyek gambar, berbeda dengan library grafis pada umumnya yang
menggunakan sistem koordinat layar. Perbedaan sistem koordinat Kartesian dan sistem
koordinat layar dapat dilihat pada gambar 2.1 dan gambar 2.2.
Gambar 2.1. Sistem koordinat Kartesian dan layar
Sistem koordinat Kartesian mempunyai ciri arah positif pada sumbu X adalah ke
kanan dan arah positif pada sumbu Y adalah ke atas.
Berbeda dengan sistem koordinat Kartesian, sistem koordinat layar mempunyai ciri
arah positif pada sumbu X adalah ke kanan dan arah positif pada sumbu Y adalah ke
bawah. Library grafik yang baik adalah library grafik yang mendukung sistem koordinat
Kartesian, karena para pengguna lebih familiar dengan sistem koordinat ini.
X
Y P(x,y)
x
y
x
y
X
Y
10
B. 2. Program Dasar Dengan OpenGL
Beberapa pernyataan penting untuk pemrograman grafis terutama untuk menginisialisasi
layar grafis, antara lain:
#include <GL/glut.h>
Pernyataan ini digunakan untuk mengaktifkan fungsi-fungsi grafik yang telah
disediakan oleh OpenGL. Untuk komputer Mac OS, penulisan library openGL
sebagai berikut : #include <GLUT/glut.h>
glutInitDisplayMode ( GLUT_DOUBLE | GLUT_RGB );
Menginisialisasi layar grafis menggunakan OpenGL. Dari perintah ini terlihat
bahwa struktur data gambar dinyatakan dalam bilangan dengan format double,
dan penyajian warna dalam RGB (Red Green Blue). Untuk mengurangi beban
memory, format diubah menjadi GLUT_SINGLE. Untuk menghasilkan obyek
yang transparan penyajian warna dapat diubah menjadi RGBA (Red Green Blue
Alpha).
glutInitWindowPosition(100,100);
Pernyataan ini digunakan untuk menginisialisasi posisi kiri-atas kanvas/window
tempat untuk mengambar. Pada contoh perintah di atas posisi kiri-atas di titik
(100,100). Pengubahan posisi window ini tidak terlalu bermanfaat karena
windows pada OpenGL dapat digeser dengan drag & drop, bahkan dapat di-
maximaze tanpa mengubah hasil gambar karena terjadi proses auto-resize.
glutInitWindowSize(640,480);
Pernyataan ini digunakan untuk mengatur ukuran kanvas, pada contoh di atas
ukuran diatur 640X480 pixel. Pengubahan ukuran window ini tidak terlalu
bermanfaat karena windows pada OpenGL dapat diubah dengan drag & drop,
bahkan dapat di-maximaze tanpa mengubah hasil gambar karena terjadi auto-
resize.
glutCreateWindow("My first drawing");
Pernyataan ini digunakan untuk memberikan judul pada kanvas. Pada contoh ini
judul pada kanvas adalah “My first drawing”.
glClearColor(0.0, 0.0, 0.0, 0.0);
11
Pernyataan ini digunakan untuk memberi warna latar belakang pada kanvas, pada
contoh di atas warna latar belakang kanvas adalah hitam (0,0,0,0), untuk
mengganti menjadi warna putih diubah menjadi (1,1,1,0). Konsep warna yang
digunakan adalah RGBA dengan struktur (red,green,blue,alpha) yang menyatakan
komponen (merah, hijau, biru, tranparansi), tetapi warna-warna yang akan banyak
disajikan dalam buku ini menggunakan konsep RGB dan Alpha tidak digunakan.
gluOrtho2D(-100., 100., -100.0, 100.0);
Pernyataan ini digunakan untuk menyatakan ukuran sistem koordinat dengan
struktur (xmin, xmax, ymin, ymax). Pada contoh di atas, sistem koordinat yang
digunakan mempunyai batas koordinat sumbu X dari -100 ke 100, dan sumbu Y
dari -100 ke 100. Ukuran sistem koordinat ini tidak berhubungan dengan ukuran
kanvas.
glutIdleFunc(display);
Pernyataan ini digunakan untuk refresh setiap proses menggambar selesai dan
biasanya digunakan untuk membuat animasi. Untuk gambar yang tidak bergerak,
pernyataan ini tidak digunakan.
glutDisplayFunc(display);
Pernyataan ini digunakan untuk menampilkan semua perintah grafis yang ada di
fungsi userdraw().
Untuk selanjutnya semua perintah (program) untuk menggambar obyek baik 2D atau 3D
diletakkan pada fungsi userdraw(), ini berlaku untuk semua perintah yang dijelaskan
dalam buku workshop grafika ini.
B.3. Menggambar dengan Fungsi Primitif openGL
Struktur dasar perintah untuk menggambar fungsi primitif di openGL adalah sebagai
berikut :
glBegin(GL_POLA);
glVertex2f(koordinat titik 1);
glVertex2f(koordinat titik 2);
.........
glVertex2f(koordinat titik n);
glEnd();
12
Sepuluh macam GL_POLA yang ada di openGL sebagai berikut :
Macam-macam hasil menggambar dengan GL_POLA di openGL dapat dilihat pada
gambar 2.2
GL_POINTS Menggambar titik
GL_LINES Menggambar garis
GL_LINE_STRIP Menggambar polyline
GL_LINE_LOOP Menggambar rangka Polygon
GL_POLYGON Menggambar polygon
GL_QUADSMenggambar segi 4
GL_QUAD_STRIPMenggambar N segi 4
GL_TRIANGLES Menggambar segi 3
GL_TRIANGLE_STRIP Menggambar N segi 3
GL_TRIANGLE_FAN Menggambar N segi 3 dengan 1 pusat
13
Gambar 2.2. Sepuluh macam GL_POLA di Fungsi Primitif openGL
B.4. Menggambar Titik
Perintah untuk menggambar obyek menggunakan openGL menggunakan struktur
sebagai berikut:
gl Statement Structure (properti)
contoh: glVertex2f(100,100)
Untuk menggambar titik menggunakan library OpenGL dapat dilakukan menggunakan
perintah:
glVertex2f(x,y) untuk tipe data titik yang bersifat float (pecahan). Pada buku ini
model ini yang banyak digunakan.
glVertex2d(x,y) untuk tipe data titik yang bersifat integer (bilangan bulat).
Dengan sebelumnya diberi inisialisasi glBegin(GL_POINTS).
B.5. Mengubah Ukuran Titik
Pada contoh-contoh sebelumnya terlihat ukutan titiknya sangat kecil. Untuk
mengubah ukuran titik dapat menggunakan perintah
glPointSize(ukuranTitik);
14
Bila ditulis glPointSize(4) maka besar titiknya adalah 4x4 pixel. Bila tidak digunakan
maka ukuran titiknya adalah 1 pixel.
B.6. Menggambar Garis
Perintah untuk mengambar garis dari posisi (x1,y1) ke (x2,y2) dalam bahasa C
menggunakan library OpenGL adalah:
glBegin(GL_LINES);
glVertex2f(x1,y1);
glVertex2f(x2,y2);
glEnd();
Perintah ini bisa digunakan untuk menggambar banyak garis, dengan catatan titiknya
harus berpasangan dan berurutan.
B.7. Menggambar Banyak Garis (Polyline)
Perintah untuk mengambar kurva terbuka, dengan garis dari posisi (x1,y1) ke
(x2,y2) ... ke (xn, yn), dalam bahasa C menggunakan library OpenGL adalah:
glBegin(GL_LINE_STRIP);
glVertex2f(pos_x_1,pos_y_1);
glVertex2f(pos_x_2,pos_y_2);
..........
glVertex2f(pos_x_n, pos_y_n);
glEnd();
B.8. Menggambar Banyak Garis (Polyline Kurva Tertutup)
Perintah untuk mengambar kurva tertutup dari posisi (x1,y1) ke (x2,y2) ... ke (xn,
yn) dalam bahasa C menggunakan library OpenGL adalah:
glBegin(GL_LINE_LOOP);
glVertex2f(pos_x_1,pos_y_1);
glVertex2f(pos_x_2,pos_y_2);
..........
glVertex2f(pos_x_n, pos_y_n);
glEnd();
15
B.9. Menggambar Polygon
Polygon adalah gabungan garis-garis yang tertutup yang membentuk satu obyek dan
bisa diblok dengan warna. Perintah untuk mengambar polygon dari posisi (x1,y1) ke
(x2,y2) ... ke (xn, yn) menghasilkan kurva tertutup dengan warna dalam bahasa C
menggunakan library OpenGL adalah:
glBegin(GL_POLYGON);
glVertex2f(pos_x_1,pos_y_1);
glVertex2f(pos_x_2,pos_y_2);
..........
glVertex2f(pos_x_n, pos_y_n);
glEnd();
B.10. Menggambar Segi Empat (Quad)
Quad adalah mirip dengan polygon, tetapi membatasi jumlah titik sampai dengan
4. Perintah ini bisa digunakan untuk menggambar banyak Quad, dengan catatan setiap 4
titik harus berpasangan dan berurutan. Bisa diblok dengan warna.
glBegin(GL_QUADS);
glVertex2f(pos_x_1,pos_y_1);
glVertex2f(pos_x_2,pos_y_2);
glVertex2f(pos_x_3, pos_y_3);
glVertex2f(pos_x_4, pos_y_4);
…
glVertex2f(pos_x_n, pos_y_n);
glEnd();
B.11. Menggambar N Segi Empat (Quad Strip)
Quad Strip menghasilkan N buah bentuk Quad, dimana setiap Quad mempunyai 2
titik yang sama dengan Quad sebelum dan atau sesudahnya. Bisa diblok dengan warna.
glBegin(GL_QUAD_STRIP);
glVertex2f(pos_x_1,pos_y_1);
glVertex2f(pos_x_2,pos_y_2);
Quad I
Quad N (setiap 4
titik berikutnya)
Quad I
Quad N (setiap 4
titik berikutnya)
Quad I
16
glVertex2f(pos_x_3,pos_y_3);
glVertex2f(pos_x_4,pos_y_4);
glVertex2f(pos_x_3,pos_y_3);
glVertex2f(pos_x_4,pos_y_4);
glVertex2f(pos_x_5,pos_y_5);
glVertex2f(pos_x_6,pos_y_6);
...
glEnd();
B.12. Menggambar Segi Tiga (Triangeles)
Triangles adalah mirip dengan quad, tetapi dengan jumlah titik 3. Perintah ini bisa
digunakan untuk menggambar banyak Triangles, dengan catatan setiap 3 titik harus
berpasangan dan berurutan. Bisa diblok dengan warna.
glBegin(GL_TRIANGLES);
glVertex2f(pos_x_1,pos_y_1);
glVertex2f(pos_x_2,pos_y_2);
glVertex2f(pos_x_3, pos_y_3);
glVertex2f(pos_x_4, pos_y_4);
glVertex2f(pos_x_5, pos_y_6);
glVertex2f(pos_x_7, pos_y_8);
glEnd();
B.13. Menggambar N Segi Tiga (Triangele Strip)
Triangle Strip adalah mirip dengan quad strip, tetapi dengan jumlah titik 3.
Perintah ini bisa digunakan untuk menggambar banyak Triangles, dengan catatan 2 dari 3
titik dipakai bersama dengan segitiga sebelum dan sesudahnya. Bisa diblok dengan
warna.
glBegin(GL_TRIANGLE_STRIP);
glVertex2f(pos_x_1,pos_y_1);
glVertex2f(pos_x_2,pos_y_2);
glVertex2f(pos_x_3, pos_y_3);
glVertex2f(pos_x_1, pos_y_1);
glVertex2f(pos_x_2, pos_y_2);
glVertex2f(pos_x_4, pos_y_4);
Quad II
Quad I Triangles I
Triangles II
Quad I Triangles I
Triangles II
17
glEnd();
B.14. Menggambar N Segi Tiga dengan 1 Titip Pusat (Triangele Fan)
Triangle Fan adalah Menggambar kipas segitiga memiliki 1 titik pusat. Sangat
berguna untuk menggambar lingkaran penuh. Bisa diblok dengan warna.
glBegin(GL_TRIANGLE_FAN);
glVertex2f(pos_x_1,pos_y_1);
glVertex2f(pos_x_2,pos_y_2);
glVertex2f(pos_x_3, pos_y_3);
glVertex2f(pos_x_1, pos_y_1);
glVertex2f(pos_x_4, pos_y_4);
glVertex2f(pos_x_5, pos_y_6);
glEnd();
B.15. Mengatur Warna
Perintah untuk mengatur warna dalam bahasa C menggunakan library OpenGL
adalah:
glColor3f(red, green, blue);
Pasangan nilai RGB akan menghasilkan komposisi warna tertentu. Tabel 2.1. berikut
menyatakan warna dan komposisi nilai RGB-nya. Dimana nilai R,G dan B masing-
masing antara 0 sampai dengan 1, dimana 0 menyatakan komponen ini menjadi gelap
(tidak dipakai), dan nilai 1 menyatakan komponen ini digunakan secara maksimal.
Tabel 2.1. Komposisi RGB
Warna R G B
Merah 1 0 0
Hijau 0 1 0
Biru 0 0 1
Kuning 1 1 0
Magenta 1 0 1
Cyan 0 1 1
Putih 1 1 1
Hitam 0 0 0
Abu-abu 0.5 0.5 0.5
Quad I Triangles I
Triangles II
18
C. TUGAS PENDAHULUAN
1. Tulislah kembali fungsi-fungsi untuk setting window I open GL dan kegunaannya
2. Buatlah desain gambar rumah 2D dengan memasukkan 10 pola fungsi
primitifopenGL
D. PERCOBAAN
1. Membuat window I: program dasar untuk menggunakan library OpenGL dalam
bahasa C++
#include <GL/glut.h>
void userdraw(void) {
// Disini tempat untuk menggambar
}
void display(void) {
glClear( GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}
int main(int argc, char **argv)
{
glutInit(&argc,argv);
glutInitDisplayMode ( GLUT_DOUBLE | GLUT_RGB );
glutInitWindowPosition(100,100);
glutInitWindowSize(640,480);
glutCreateWindow("My first drawing");
glClearColor(1.0, 1.0, 1.0, 0.0);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(-100., 100., -100.0, 100.0);
glutIdleFunc(display); // idle event call back
glutDisplayFunc(display);
glutMainLoop();
return 0;
}
19
Contoh hasil dari contoh program di atas adalah:
Gambar 2.3. Contoh hasil program dasar OpenGL
2. Pada bagian userdraw() ketikkan program berikut untuk mengambar titik di posisi
(50,10) .
glBegin(GL_POINTS);
glVertex2f(50,10);
glEnd();
3. Pada bagian userdraw() ketikkan program berikut untuk mengambar titik di posisi
(25,10), (10,10) dan (10,25).
void userdraw(void){
glBegin(GL_POINTS);
glVertex2f(25,10);
glVertex2f(10,10);
glVertex2f(10,25);
glEnd();
}
4. Program berikut menghasilkan titik-titik acak baik posisi dan besarnya.
Sebelumnya pada header ditambahkan header file #include <stdlib.h> untuk
fungsi-fungsi yang berhubungan dengan pembangkitan bilangan acak.
#include <GL/glut.h>
20
#include <stdlib.h>
void userdraw(void) {
int s; // ukuran titik
float x,y; // posisi titik
for(int i=0;i<1000;i++){
s=rand()%4+1;
glPointSize(s);
glBegin(GL_POINTS);
x=-100+200*(float)rand()/RAND_MAX;
y=-100+200*(float)rand()/RAND_MAX;
glVertex2f(x,y);
glEnd();
}
}
void display(void) {
glClear( GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}
int main(int argc, char **argv) {
glutInit(&argc,argv);
glutInitDisplayMode ( GLUT_DOUBLE | GLUT_RGB );
glutInitWindowPosition(100,100);
glutInitWindowSize(640,480);
glutCreateWindow("My first drawing");
glClearColor(0.0, 0.0, 0.0, 0.0);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(-100., 100., -100.0, 100.0);
glutIdleFunc(display); // idle event call back
glutDisplayFunc(display);
glutMainLoop();
return 0;
}
Hasilnya adalah sebagai berikut:
21
Gambar 2.4. Titik-titik acak
Bila ini dijalankan akan seperti gambar TV rusak karena program berjalan secara terus-
menerus. Untuk menghentikan proses tutup satu baris perintah di bagian main() yaitu:
glutIdleFunc(display);
5. Menggambar efek bintang berkelip, efeknya hampir sama dengan menggambar titik-
titik acak, tetapi posisi titik tetap sehingga diperlukan sebuah kondisi untuk mengacak
posisi titik-titik yang hanya sekali saja (penggunaan variabel static tick yang terus-
menerus ditambah satu dan kondisi tick=0), dan untuk kemudian hanya diacak titik
mana yang akan diubah ukurannya. Programnya hampir sama dengan contoh 2.3,
tetapi fungsi userdrawnya diganti menjadi:
void userdraw(void) {
static int tick=0; // variable yang berjalan terus
static point2D_t bintang[100];
int i;
// mengacak posisi bintang saat tick=0 atau sekali saja
if(tick==0){
for(i=0;i<100;i++){
bintang[i].x=rand()%400;
bintang[i].y=rand()%300;
22
}
}
// menggambar bintang
setColor(1,1,1);
glPointSize(2);
for(i=0;i<100;i++){
glBegin(GL_POINTS);
glVertex2f(bintang[i].x,bintang[i].y);
glEnd();
}
// mengacak bintang yang berkelip
int k=rand()%100;
glPointSize(4);
glBegin(GL_POINTS);
glVertex2f(bintang[k].x,bintang[k].y);
glEnd();
}
6. Program berikut membuat garis dari (5,10) ke (40,0):
void userdraw(void){
glBegin(GL_LINES);
glVertex2f(5,10);
glVertex2f(40,0);
glEnd();
}
Gambar 2.5. Contoh Garis
7. Program di bawah ini menggambar segitiga dari gabungan garis-garis dengan
posisi dari atas berputar searah jarum jam (0,50), (20,0) dan (-20,0).
(5,10)
(40,0)
23
void userdraw(void){
glBegin(GL_LINES);
glVertex2f(0,50);
glVertex2f(20,0);
glEnd();
glBegin(GL_LINES);
glVertex2f(20,0);
glVertex2f(-20,0);
glEnd();
glBegin(GL_LINES);
glVertex2f(-20,0);
glVertex2f(0,50);
glEnd();
}
Pernyataan glBegin(GL_LINES) tidak perlu diulang untuk lebih menyingkat program
sehingga menjadi:
void userdraw(void){
glBegin(GL_LINES);
glVertex2f(0,50);
glVertex2f(20,0);
glVertex2f(20,0);
glVertex2f(-20,0);
glVertex2f(-20,0);
glVertex2f(0,50);
glEnd();
}
Pada program ini terlihat bahwa glBegin(GL_LINES) selalu membutuhkan pasangan dari
2 titik untuk menghasilkan sebuah garis, sehingga untuk membuat segitiga (tiga buah
garis) dibutuhkan 6 buah peritah glVertex. Hasilnya adalah sebagai berikut:
24
Gambar 2.6. Segitiga
8. Program berikut tidak akan menghasilkan segitiga, karena tidak ada pasangan titik
yang pas.
void userdraw(void){
glBegin(GL_LINES);
glVertex2f(0,50);
glVertex2f(20,0);
glVertex2f(-20,0);
glEnd();
}
9. Program ini hanya menghasilkan garis dari titik (0,50) sampai titik (20,0).
Sedangkan titik (-20,0) tidak digambar karena tidak mempunyai pasangan.
Cara lain untuk membuat segitiga dapat menggunakan perintah
glBegin(GL_LINE_STRIP) dengan menuliskan kembali titik yang pertama
seperti proram di bawah ini, lebih jauh lagi akan dibahas di bab selanjutnya.
void userdraw(void){
glBegin(GL_LINE_STRIP);
glVertex2f(0,50);
glVertex2f(20,0);
glVertex2f(-20,0);
glVertex2f(0,50);
glEnd();
}
25
10. Menggambar efek hujan, sama seperti menggambar bintang dengan titik acak,
tetapi yang obyeknya berupa garis diagonal. Program untuk menggambar efek
hujan ini adalah:
void userdraw(void){
float xp,yp;
for(int i=0;i<300;i++){
xp=640*(float)rand()/RAND_MAX;
yp=480*(float)rand()/RAND_MAX;
glColor3f(1,1,1);
glBegin(GL_LINES);
glVertex2f(xp,yp);
glVertex2f(xp+8,yp-8);
glEnd();
}
}
Hasilnya adalah:
Gambar 2.7. Efek Hujan
Derasnya hujan dapat diatur dengan memperbanyak jumlah garis yang digambar atau
membuat garisnya lebih panjang. Sedangkan arah gerakan air hujan dapat diatur dengan
26
operasi penjumlahan atau pengurangan dari masing-masing nilai x dan nilai y pada setiap
garis. Permainan sudut akan menjadi lebih baik karena bisa mengubah arah hujan menjadi
lebih realistik dengan memberikan afek angin.
11. Membuat segitiga pada contoh 2.6 di atas berwarna merah dengan latar belakang
putih dapat dilakukan dengan menambahkan glColor3f(1,0,0); sebelum membuat
segitiga sebagai berikut. Sebelumnya ubah perintah glClearColor(0.0, 0.0, 0.0, 0.0);
pada bagian main() menjadi glClearColor(1.0, 1.0, 1.0, 0.0);
void userdraw(void){
glColor3f(1,0,0);
glBegin(GL_LINE_STRIP);
glVertex2f(0,50);
glVertex2f(20,0);
glVertex2f(-20,0);
glVertex2f(0,50);
glEnd();
}
Contoh hasilnya adalah seperti gambar 2.8.
12. Membuat segitiga pada contoh 2.6 di atas berwarna coklat dapat dilakukan dengan
mengganti perintah glColor3f(1.0.0); menjadi glColor3f(0.7,0.4,0.1); sebelum
membuat segitiga.
27
Gambar 2.8. Segitiga berwarna merah
13. Membuat grid dengan warna biru (0,0,1) dan sumbu koordinat.dengan warna biru
muda (0,1,1). Jarak antar grid adalah 10 satuan dengan batas sumbu koordinat (-
100,100) untuk sumbu X dan (-100,100) untuk sumbu Y seperti gambar berikut:
(Sebelumnya ubah latar belakang menjadi hitam dengan glClearColor(0.0, 0.0,
0.0, 0.0); pada bagian main().
Gambar 2.9. Grid dan sumbu koordinat
Listing program pada userdraw() adalah sebagai berikut:
void userdraw(){
28
glColor3f(0,0,1);
for(float x=-100;x<=100;x+=10){
glBegin(GL_LINES);
glVertex2f(x,-100);
glVertex2f(x,100);
glEnd();
glBegin(GL_LINES);
glVertex2f(-100,x);
glVertex2f(100,x);
glEnd();
}
glColor3f(0,1,1);
glBegin(GL_LINES);
glVertex2f(-100,0);
glVertex2f(100,0);
glEnd();
glBegin(GL_LINES);
glVertex2f(0,-100);
glVertex2f(0,100);
glEnd();
}
E. TUGAS
Membuat rumah 2D tampak depan ( yang telah didesain di tugas pendahuluan) dengan
menggunakan 10 pola pada fungsi primitive openGL, contoh pada gambar.
Gambar 2.10. Tugas Rumah 2D dengan Fungsi Primitif openGL
F. LAPORAN RESMI
29
1. Buatlah kesimpulan dari masing-masing percobaan program grafika yang sudah
dilakukan !
2. Demo dan kumpulkan listing program beserta penjelasan tugas workshop
menggambar dengan fungsi primitif.
30
PRAKTIKUM 3
OBYEK 2D
A. TUJUAN
Setelah mempelajari dan mempraktekkan materi dalam praktikum ini mahasiswa
diharapkan mampu:
1. Mendefinisikan obyek 2D
2. Mendefinisikan warna obyek 2D
3. Membuat fungsi menggambar obyek 2D
4. Membuat gambar obyek 2D lebih baik
B. DASAR TEORI
B.1. Obyek Grafik 2 Dimensi
Obyek grafik 2 dimensi sebenarya adalah titik, mengingat bahwa grafik 2 dimensi
adalah kumpulan dari titik-titik yang dihubungkan sehingga membentuk obyek gambar.
Berdasarkan sistem koordinat kartesian, titik dinyatakan dengan properti lokasi x dan y,
yang dituliskan dengan P(x,y). Sehingga tipe data titik dituliskan dengan:
typedef struct {
float x,y;
} point2D_t;
Untuk mendefinisikan variable titik dapat dilakukan dengan menuliskan:
point2D_t p;
Gambar dalam 2D adalah kumpulan titik-titik 2D yang dihubungkan menggubanak garis
atau polygon sesuai dengan urutan titik-titik tersebut seperti terlihat pada gambar 3.1
berikut:
Gambar 3.1. Definisi obyek grafik 2D
P1
P2
P3
P4 P5
P6
P7
P8 P9
P10
31
Untuk menyatakan sebuah obyek gambar yang terdiri dari sekumpulan titik dapat
dituliskan dalam bentuk array sebagai berikut:
point2D_t gambar[100];
Dari pernyataan di atas, gambar terdiri dari maksimum 100 titik. Jumlah titik seharusnya
didefinisikan dulu.
B.2. Menggambar Polyline
Polyline adalah sebuah bentuk gambar yang terdiri dari kumpulan garis yang
dihubungkan satu dengan yang lain secara berurutan, dengan tidak menyambungkan
kembali ke titik awalnya, seperti gambar 3.2 di bawah ini.
Gambar 3.2. Contoh polyline
Fungsi untuk membuat polyline menggunakan OpenGL dapat dituliskan dengan:
void drawPolyline(point2D_t p[],int n){
glBegin(GL_LINE_STRIP);
for(int i=0;i<n;i++){
glVertex2f(p[i].x,p[i].y);
}
glEnd();
}
Dan untuk menggambar Polyline dari 3 titik (0,50), (30,0) dan (-30,0) adalah sebagai
berikut:
point2D_t p[3]={{0,50},{30,0},{-30,0}};
drawPolyline(p,3);
B.3. Menggambar Polygon
Seperti halnya Polyline, Polygon juga menggambar obyek dari kumpulan garis yang
menghubungkan titik-titik secara terurut dengan dihubungkan kembali dengan titik
awalnya.
32
Gambar 3.3. Polygon
Fungsi membuat polygon sama seperti fungsi polyline dengan menambahkan titik awal di
akhirnya sebagai berikut:
void drawPolygon(point2D_t p[],int n){
glBegin(GL_LINE_STRIP);
for(int i=0;i<n;i++){
glVertex2f(p[i].x,p[i].y);
}
glVertex2f(p[0].x, p[0].y);
glEnd();
}
Contoh :
Untuk membuat segitiga dari (0,50), (30,0) dan (-30,0) pada userdraw dapat dilakukan
dengan:
point2D_t p[3]={{0,50},{30,0},{-30,0}};
drawPolygon(p,3);
B.4. Membuat Polygon Berwarna
Pada pembahasan sebelumnya semua grafik yang dihasilkan berapa garis,
pembahasan berikut adalah bagaimana membuat gambar yang di-blok dengan warna. Hal
ini merupakan salah satu dasar dari grafika komputer untuk memberi warna pada setiap
obyek gambar yang dihasilkan. Karena warna adalah satu elemen grafik yang dapat
menarik perhatian pengguna. Grafik yang dihasilkan dengan warna-warna yang indah
akan menambah daya tarik pengguna untuk menikmatinya. Pemilihan warna tentu
menjadi salah satu syarat baik tidaknya sebuah obyek grafik yang ditampilkan.
Untuk membuat blok warna pada polygon, sebelumnya perlu didefinisikan struktur
data untuk warna dengan format RGB sebagai berikut:
typedef struct {
float r, g, b;
} color_t;
33
Kemudian buatlah fungsi untuk mengubah/melakukan setting warna sebagai berikut:
(1) Fungsi dengan lanngsung memasukkan nilai r,g,b
void setColor(float r, float g, float b){
glColor3f(r,g,b);
}
(2) Fungsi dengan tipe data color_t
void setColor(color_t col){
glColor3f(col.r, col.g, col.b);
}
Kemudian membuat fungsi untuk memberi warna pada bagian dalam polygon dengan