Modul Workshop Grafika

141
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

description

Modul workshop grafika komputer PENS

Transcript of Modul Workshop Grafika

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

i

KATA PENGANTAR

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

Praktikum 1 ..................................................................................................................................................... 1

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. Instalasi OpenGL ......................................................................................................................... 4

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

Praktikum 2 ..................................................................................................................................................... 9

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.9. Menggambar Polygon ................................................................................................................ 15

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

Praktikum 3 ................................................................................................................................................... 30

OBYEK 2D ................................................................................................................................................... 30

A. TUJUAN ............................................................................................................................................... 30

B. DASAR TEORI .................................................................................................................................... 30

B.1. Obyek Grafik 2 Dimensi ............................................................................................................ 30

B.2. Menggambar Polyline ................................................................................................................ 31

B.3. Menggambar Polygon ................................................................................................................ 31

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

Praktikum 4 ................................................................................................................................................... 37

OBYEK PUTAR 2D ..................................................................................................................................... 37

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

Praktikum 5 ................................................................................................................................................... 48

Melakukan Pengesetan Perseptive View dan ................................................................................................ 48

View Port Fungsi Transformasi ..................................................................................................................... 48

A. TUJUAN ............................................................................................................................................... 48

B. DASAR TEORI .................................................................................................................................... 48

B.1. Sistem Koordinat Layar ............................................................................................................. 48

B.2. Menggambar Obyek 2D ............................................................................................................. 49

B.2.1. Mendefinisikan World Window .......................................................................................... 50

B.2.2. Mendefinisikan Viewport.................................................................................................... 51

B.2.3. Mapping World Window ke Vewport Window .................................................................. 51

B.2.4. Rasio Lebar R dan L ........................................................................................................... 52

B.2.5. Rasio Tinggi T dan B .......................................................................................................... 52

B.3. Transformasi di OpenGL ........................................................................................................... 53

B.3.1. Translasi .............................................................................................................................. 54

B.3.2. Scaling................................................................................................................................. 55

iv

B.3.3. Rotasi .................................................................................................................................. 56

B.3.4. Matrik Identitas ................................................................................................................... 57

C. TUGAS PENDAHULUAN .................................................................................................................. 57

D. PERCOBAAN ...................................................................................................................................... 58

E. TUGAS ................................................................................................................................................. 62

F. LAPORAN RESMI ............................................................................................................................... 63

Praktikum 6 ................................................................................................................................................... 64

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

Praktikum 7 ................................................................................................................................................... 82

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

Praktikum 8 ................................................................................................................................................... 89

PROYEK 1 .................................................................................................................................................... 89

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

Praktikum 9 ................................................................................................................................................... 92

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

Praktikum 10 ............................................................................................................................................... 106

Transformation and Projection ....................................................................... Error! Bookmark not defined.

A. TUJUAN ............................................................................................................................................. 106

B. DASAR TEORI .................................................................................................................................. 106

B.1. Koordinat Obyek .......................................................................................................................... 106

B.2. Koordinat Mata ............................................................................................................................ 106

B.3. Koordinat Klip ............................................................................................................................. 107

B.4. Koordinat Perangkat Normalisasi (Normalized Device Coordinates / NDC) .............................. 108

B.5. Koordinat Window (Koordinat Layar) ......................................................................................... 108

B.6. Matrix Transformasi OpenGL ..................................................................................................... 109

B.7. Model-View Matrix (GL_MODELVIEW) .................................................................................. 109

B.8. Matrix Proyeksi (GL_PROJECTION) ......................................................................................... 110

B.9. Matrix Tekstur (GL_TEXTURE) ................................................................................................ 112

B.10. Matrix Warna (GL_COLOR) ..................................................................................................... 112

C. TUGAS PENDAHULUAN ................................................................................................................ 113

D. PERCOBAAN .................................................................................................................................... 113

E. TUGAS ............................................................................................................................................... 116

F. LAPORAN RESMI............................................................................................................................. 116

Praktikum 11 ............................................................................................................................................... 117

Lighting dan Shading .................................................................................................................................. 117

A. TUJUAN ............................................................................................................................................. 117

B. DASAR TEORI .................................................................................................................................. 117

B.1. Lighting Model ............................................................................................................................ 117

B.2. Diffuse Scattering ........................................................................................................................ 118

B.3. Specullar Reflection ..................................................................................................................... 119

B.4. Ambient ....................................................................................................................................... 120

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

Praktikum 12 ............................................................................................................................................... 128

PROYEK 2 .................................................................................................................................................. 128

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

menambahkan fungsi berikut:

void fillPolygon(point2D_t p[],int n,color_t col){

setColor(col);

glBegin(GL_POLYGON);

for(int i=0;i<n;i++){

glVertex2f(p[i].x,p[i].y);

}

glEnd();

}

B.5. Membuat Polygon Bergradiasi

Sama halnya dengan pemberian wana pada polygon, teknik gradiasi warna sangat

dibutuhkan dalam grafika komputer untuk dapat menghasilkan gambar yang lebih nyata.

Funngsi untuk pemberian warna gradiasi pada polygon (gradatePolygon) hampir sama

dengan fillPolygon tetapi pemberian warna dilakukan pada setiap titik atau dengan kata

lain setiap titik mempunyai warna yang berbeda. Sehingga warna yang diberikan dalam

bentuk array.

void gradatePolygon(point2D_t p[], int n, color_t col[]){

glBegin(GL_POLYGON);

for(int i=0;i<n;i++){

setColor(col[i]);

34

glVertex2f(p[i].x,p[i].y);

}

glEnd(); }

C. TUGAS PENDAHULUAN

Siapkan definisi struktur data untuk obyek 2D dan color_t. Begitu pula fungsi untuk

menggambar polyline(),polygon(),fillpolygon(),dan gradatepolygon() pada program

obyek 2D yang akan dibuat.

D. PERCOBAAN

1. Membuat gambar fungsi sinus dari 0o sampai dengan 360o, dapat dilakukan dengan

terlebih dahulu mengubah sistem koordinat pada main() dengan:

gluOrtho2D(0., 360., -1.1, 1.1);

Dan tambahan header file math.h untuk mengaktifkan fungsi-fungsi trigonometri sebagai

fungsi dalam matematika.

#include <math.h>

Kemudian di userdraw dituliskan:

void userdraw(void) {

point2D_t p[360];

for(int i=0;i<360;i++){

p[i].x=(float)i;

p[i].y=(float)sin((float)i/57.3);

}

drawPolyline(p,360);

}

Hasil dari program di atas adalah seperi gambar 3.4 di bawah ini.

Gambar 3.4. Contoh Fill Polygon

35

2.Program berikut membuat segitiga berwana merah dengan titik-titk sudut (0,50), (30,0)

dan (-30,0)

point2D_t p[3]={{0,50},{30,0},{-30,0}};

color_t merah={1,0,0};

fillPolygon(p,3,merah);

Hasil dari program ini adalah seperti gambar 3.5 berikut.

gambar 3.5. Contoh Fill Polygon

3.Program berikut membuat segitiga berwana gradiasi merah, hijau dan biru dengan titik-

titik sudut (0,50), (30,0) dan (-30,0)

point2D_t p[3]={{0,50},{30,0},{-30,0}};

color_t warna[3]={{1,0,0},{0,1,0},{0,0,1}};

gradatePolygon(p,3,warna);

Hasil dari program ini seperti pada gambar 3.6 di bawah ini.

Gambar 3.6. Contoh gradatePolygon

E. TUGAS

1. Buatlah program menggambar fungsi sinus dari 0o sampai dengan 360o dengan

menambahkan fungsi grid dan sumbu koordinat, seperti pada gambar 3.7.

36

Gambar 3.7. Fungsi Sinus dengan Grid

2. Buatlah gambar langit. Atur sumbu koordinat menjadi (0,640,0,480) dengan

mengganti nilai pada gluOrtho2D. Kemudian buat kotak sebesar windowsnya, dan

definisikan warna yang bersesuaian. Output dari program seperti pada gambar 3.8.

Gambar 3.8. Menggambar langit

F. LAPORAN RESMI

1. Buatlah kesimpulan dari masing-masing percobaan program grafika yang sudah

dilakukan !

2. Demo dan kumpulkan listing program beserta penjelasan tugas workshop

menggambar obyek 2D.

putih putih

biru biru

37

PRAKTIKUM 4

OBYEK PUTAR 2D

A. TUJUAN

Setelah mempelajari dan mempraktekkan materi dalam praktikum ini mahasiswa

diharapkan mampu:

1. Mengerti dan dapat Membuat Obyek Lingkaran

2. Mengerti dan dapat Membuat Obyek Ellipse

3. Mengerti dan dapat Membuat Obyek Polar

B. DASAR TEORI

B.1. Membuat Lingkaran

Secara definisi, lingkaran adalah segi banyak. Jadi persoalannya disini adalah

bagaimana membuat sebuah bangun segi banyak, dimana setiap segi mempunyai sudut

yang sama besar. Untuk mempermudah terlebih dahulu diperhatikan sistem koordinat

sudut dimana setiap titik dituliskan dengan P(r,a), r adalah jari-jari atau jarak dengan titik

pusat dan a adalah sudut.

Gambar 4.1. Sistem koordinat sudut

P(r,a)

r

a

38

Konversi sistem koordinat sudut menjadi sistem koordinat Kartesian adalah sebagai

berikut.

)sin(.

)cos(.

ary

arx

Lingkaran adalah suatu bangun yang pada setiap sudutnya, jarak dengan titik pusat selalu

sama r.

B.2 Membuat Ellipse

Ellipse sebenarnya hampir sama dengan lingkaran, hanya saja bedanya adalah pada

jari-jari, jika pada lingkaran hanya mengenal satu jari-jari maka ellipse mempunyai dua

jari-jari a (arah horisontal) dan b (arah vertikal). Hal inilah yang membuat bentuk ellipse

menjadi lonjong.

Gambar 4.2. Ellips

Persamaan ellips dalam koordinat polar adalah:

)sin(.

)cos(.

by

ax

B.3. Membuat Obyek Polar

Obyek polar merupakan obyek benda putar dengan fungsi jari-jari terhadap sudut

r=f(). Perlu proses transformasi dari koordinat polar menjadi koordinat kartesian untuk

dapat menggambarkannya pada layar komputer sebagi berikut:

)sin(

)cos(

)(

ry

rx

fr

Beberapa bentuk obyek polar,pada tabel 4.1 berikut :

a

b

39

Tabel 4.1. Fungsi Polar dan Hasil Menggambar Obyek Polar

Fungsi Hasil

Rose 4 daun:

2sinr

Rose 3 daun:

3sinr

Kardioda:

)cos(1 r

Spiral:

r

40

Fungsi Hasil

Lingkaran:

ar

C. TUGAS PENDAHULUAN

1. Tulislah persamaan lingkaran koordinat kartesian (x,y) dari kordinat polar!

2. Tulislah persamaan ellipse koordinat kartesian (x,y) dari kordinat polar!

3. Tulislah persamaan koordinat kartesian (x,y) dari 4 (empat) obyek polar lainnya!

41

D. PERCOBAAN

1. Menggambar lingkaran pada userdraw() memanggil drawCircle(jari-jari, jumlah_titik),

misalkan bila dituliskan drawCircle(30,40) berarti membuat lingkaran dengan jari-jari

30 dan jumlah titik 40.

void drawCircle(float r, int n){

point2D_t p[360];

float a=6.28/n;

for(int i=0;i<n;i++){

p[i].x=r*(float)cos((float)i*a);

p[i].y=r*(float)sin((float)i*a);

}

drawPolygon(p,n);

}

Pada bagian userdraw tambahkan :

void userdraw(void){

setColor(1,0,0);

drawCircle(40,30);

}

Output program dapat dilihat pada gambar 4.3.

Gambar 4.3. Obyek Lingkaran

2. Membuat 2 lingkaran berwarna merah dan biru dengan latar belakang putih, jari-

jarinya masing-masing 40 dan 30, dan titik pusatnya masing-masing di (-50,0) dan

(50,0), sebelumnya ganti perintah glClearColor(0.0, 0.0, 0.0, 0.0); menjadi

glClearColor(1.0, 1.0, 1.0, 0.0); dan sumbu koordinat diganti menjadi (-320,320,-

42

340,340) agar mempunyai skala yang sama antara x dan y dengan cara mengganti

gluOrtho2D(-100.,100., -100.,100.); menjadi gluOrtho2D(-320.,320.,-240., 240.);

void drawCircle(float r, int n, float x, float y){

point2D_t p[360];

float a=6.28/n;

for(int i=0;i<n;i++){

p[i].x=x+r*(float)cos((float)i*a);

p[i].y=y+r*(float)sin((float)i*a);

}

drawPolygon(p,n);

}

Pada bagian userdraw tambahkan :

void userdraw(void){

setColor(1,0,0);

drawCircle(40,30);

}

Output program dapat dilihat pada gambar 44.

Gambar 4.4. Pengaturan posisi dan besar lingkaran

3. Membuat gambar 3 lingkaran yang mempunyai:

jari-jari masing-masing 30, 40 dan 50

titik pusatnya masing-masing di (-100,0), (0,0) dan (100,0)

warna masing-masing merah, biru dan kuning.

Setiap lingkaran dibangun oleh 40 titik.

Dengan sistem koordinatnya:gluOrtho2D(-320,320,-240,240); Fungsi untuk membuat

warna pada lingkaran yang diletakkan pada pusat koordinat.

43

void fillCircle(float r, int n, color_t col){

point2D_t p[360];

float a=6.28/n;

for(int i=0;i<n;i++){

p[i].x=r*(float)cos((float)i*a);

p[i].y=r*(float)sin((float)i*a);

}

fillPolygon(p,n,col);

}

Fungsi untuk membuat warna pada lingkaran yang diletakkan pada koordinat (x,y).

void fillCircle(float r, int n, float x, float y, color_t col){

point2D_t p[360];

float a=6.28/n;

for(int i=0;i<n;i++){

p[i].x=x+r*(float)cos((float)i*a);

p[i].y=y+r*(float)sin((float)i*a);

}

fillPolygon(p,n,col);

}

Pembanggilan fungsi di userdraw:

void userdraw(void){

color_t merah={1,0,0};

color_t biru={0,0,1};

color_t kuning={1,1,0};

fillCircle(30,40,-100,0,merah);

fillCircle(40,40,0,0,biru);

fillCircle(50,40,100,0,kuning);

}

44

Gambar 4.5. Lingkaran berwarna

4. Membuat 3 buah ellips dengan:

Jari-jari (80,100), (20,10), dan (20,10)

Diletakkan di (0,0), (100,0) dan (-100,0) mempunyai warna merah, hijau dan biru

void drawEllips(float a, float b, int n){

point2D_t p[360];

float t=6.28/n;

for(int i=0;i<n;i++){

p[i].x=a*(float)cos((float)i*t);

p[i].y=b*(float)sin((float)i*t);

}

drawPolygon(p,n);

}

Untuk membuat ellips dengan titik pusat (x,y) maka fungsi di atas diubah menjadi:

void drawEllips(float a, float b, int n, float x, float y){

point2D_t p[360];

float t=6.28/n;

for(int i=0;i<n;i++){

p[i].x=x+a*(float)cos((float)i*t);

p[i].y=y+b*(float)sin((float)i*t);

}

drawPolygon(p,n);

}

45

Untuk memberi warna pada bagian dalam ellips, diperlukan fungsi fillPolygon sebagai

penggati fungsi drawPolygon, tetapi masih membutuhkan tambahan warna pada

fungsinya dan dituliskan sebagai berikut:

void fillEllips(float a, float b, int n, float x, float y,

color_t col){

point2D_t p[360];

float t=6.28/n;

for(int i=0;i<n;i++){

p[i].x=x+a*(float)cos((float)i*t);

p[i].y=y+b*(float)sin((float)i*t);

}

fillPolygon(p,n,col);

}

Program pada userdraw adalah:

void userdraw(void)

{

color_t merah={1,0,0};

color_t hijau={0,1,0};

color_t biru={0,0,1};

fillEllips(80,100,30,0,0,merah);

fillEllips(20,10,30,100,0,hijau);

fillEllips(20,10,30,-100,0,biru);

}

Gambar 4.6. Lingkaran berwarna

46

5. Membuat kardioda sebelum menggambar diperlukan perhitungan nilai cos1r

atau r . Menggambar koordinat polar diperlukan definisi r sebagai fungsi dari sudut

atau r sebagai array. Nilai r inilah yang menghasilkan bentuk-bentuk koordinat polar.

Fungsi untuk menggambar koordinat polar adalah:

void drawPolar(float r[], int n){

point2D_t p[360];

float t=6.28/n;

for(int i=0;i<n;i++){

p[i].x=r[i]*(float)cos((float)i*t);

p[i].y=r[i]*(float)sin((float)i*t);

}

drawPolygon(p,n);

}

Program pada userdraw adalah:

void userdraw(void)

{

// create Polar Function

float r[360];

float t=6.28/360;

for(int i=0;i<360;i++){

r[i]=150*(1+cos(i*t));

}

// draw Polar Object

setColor(0,0,0);

drawPolar(r,360);

}

E. TUGAS

1. Buatlah program menggambar bintang segi-5. Gambar bintang ini mempunyai 10 titik

yang terletak pada 2 buah lingkaran r1 dan r2 secara bergantian. Sehingga dapat dituliskan

dengan: },,,,,,,,,{]10[ 2121212121 rrrrrrrrrrr Misalkan r1=50 dan r2=100 maka:

}100,50,100,50,100,50,100,50,100,50{]10[ r

47

Gambar 4.7. Sketsa gambar bintang dengan 2 lingkaran

F. LAPORAN RESMI

1. Buatlah kesimpulan dari masing-masing percobaan program grafika yang sudah

dilakukan !

2. Demo dan kumpulkan listing program beserta penjelasan tugas menggambar dengan

fungsi obyek polar!

r1

r2

48

PRAKTIKUM 5

MELAKUKAN PENGESETAN PERSEPTIVE VIEW DAN

VIEW PORT FUNGSI TRANSFORMASI

A. TUJUAN

Setelah mempelajari dan mempraktekkan materi dalam praktikum ini mahasiswa

diharapkan mampu:

1. Mengerti dan dapat Melakukan Pengesetan Persepektif View

2. Mengerti dan dapat Melakukan Pengesetan View Port

3. Mengerti dan dapat Melakukan Transformasi Sumbu Koordinat

B. DASAR TEORI

B.1. Sistem Koordinat Layar

Sistem koordinat layar berbentuk 2D kartesian, dengan pusat (0,0) pada pojok kiri

bawah (OpenGL). Piksel didefinisikan pada interseksi kolom dan baris. Didefinisikan

relatif pada display layar.

Gambar 3.1. Sistem Koordinat Layar

Sistem koordinat layar, pada kenyataannya tidak mudah digunakan karena :

1. Ukuran sistem koordinat layar beraneka ragam

49

Gambar 3.2. Contoh representasi 2 sistem koordinat layar yang berbeda

2. Orang lebih suka menggambar berdasarkan ukuran sebenarnya

Gambar 3.3. Gambar rumah dengan ukuran sebenarnya (feet)

Obyek gambar dalam sistem koordinat riil seharusnya dapat dinyatakan dalam

sistem koordinat layar yang terpisah.

B.2. Menggambar Obyek 2D

Langkah-langkah menggambar obyek 2D sebagai berikut :

1. Obyek gambar dalam sistem koordinat riil

2. Definisikan world window

3. Definisikan screen window

4. Mapping world window ke screen window

50

Gambar 3.4. Mapping World Window ke Screen Window

B.2.1. Mendefinisikan World Window

World window adalah sebuah daerah kotak di dunia yang

ditampilkan ( sistem koordinat world) , perhatikan gambar 3.5.

Gambar 3.5. World Window

Fungsi OpenGL: 2D Orthogonal Projection,

gluOrtho2D(W_L ,W_R,W_B,W_T)

51

B.2.2. Mendefinisikan Viewport

Viewport window adalah sebuah daerah kotak di layar yang ditampilkan ( sistem

koordinat layar) , perhatikan gambar 3.6.

Gambar 3.6. Mapping World Window ke Viewport

Fungsi OpenGL: 2D Orthogonal Projection,

glViewport(V_L ,V_R,V_B,V_T)

B.2.3. Mapping World Window ke Vewport Window

Mapping World Window ke Vewport Window dapat dilakukan hanya dengan

pemanggilan dua fungsi OpenGL yaitu:

gluOrtho2D(-1, 1, -1, 1);

glViewport(50, 50, 350, 250);

Perhatikan gambar 3.7.

Gambar 3.7. Mapping World Window ke Vewport Window

52

B.2.4. Rasio Lebar R dan L

Pada Mapping World Window ke Vewport Window rasio lebar R dan L harus

sama, sehingga koordinat sx didapatkan dengan formula :

(x-W_L)/(W_R-W_L)=(sx-V_L)/(V_R-V_L)

sx=(x-W_L)(V_R-V_L)/(W_R-W_L)+V_L

Perhatikan gambar 3.8. untuk menjaga kesamaan rasio lebar R dan L:

Gambar 3.8. Kesamaan Rasio Lebar R dan L

B.2.5. Rasio Tinggi T dan B

Pada Mapping World Window ke Vewport Window rasio tinggi T dan B harus

sama, sehingga koordinat sx didapatkan dengan formula :

(y-W_B)/(W_T-W_B)=(sy-V_B)/(V_T-V_B)

sy=(y-W_B)(V_T-V_B)/(W_R-W_B)+V_B

Perhatikan gambar 3.9. untuk menjaga kesamaan rasio tinggi T dan B:

Gambar 3.9. Kesamaan Rasio Tinggi T dan B

53

B.3. Transformasi di OpenGL

Transformasi vertex di OpenGL sebagai berikut gambar 3.10.:

Gambar 3.10. Tahapan Transformasi Vertex di OpenGL

Untuk menggambar sebuah vertex dengan tiga kali transformasi di OpenGL seperti

potongan program berikut:

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();// C = I

glMultMatrix(N); // C = N

glMultMatrix(M); // C = NM

glMultMatrix(L); // C = NML

glBegin(GL_POINTS);

glVertex3f(v); // N(M(Lv))

glEnd();

Pernyataan yang ditulis paling akhir akan dioperasikan pertama kali, sedangkan

pernyataan yang ditulis di awal dioperasikan terakhir.

Sedangkan matrik transformasi terdiri dari tiga operasi dasar yaitu :

1. Translasi

2. Scaling

3. Rotasi

54

B.3.1. Translasi

Translasi adalah proses perpindahan posisi dari obyek gambar. Formulasi dari

proses translasi dapat dijelaskan sebagai berikut:

Gambar 3.11. Proses translasi

Formulasi translasi adalah:

dyyy

dxxx

'

'

Bentuk matrik dari proses transformasi di atas dapat dituliskan dengan:

1100

10

01

1

'

'

y

x

dy

dx

y

x

Sehingga matrik transformasi dari proses transalasi adalah:

100

10

01

dy

dx

Untuk membuat fungsi yang menghasilkan matrik translasi ini, terlebih dahulu dibuat

fungsi untuk menghasilkan matrik identitas

100

010

001

OpenGL mempunyai fungsi translasi:

void glTranslatef(dx,dy,dz)

P(x,y)

P’(x’,y’)

dx

dy

X

Y

55

Gambar 3.12. glTranslatef(0.,2.,-2)

B.3.2. Scaling

Scaling adalah proses membesarkan/mengecilkan jarak titik sebesar m, yang

ditunjukkan oleh gambar 3.12 berikut:

Gambar 3.13. Proses scaling

Proses scaling dapat dirumuskan dengan:

ymy

xmx

y

x

'

'

Secara bentuk matrik formulasi di atas dapat dituliskan dengan:

1100

00

00

1

'

'

y

x

m

m

y

x

y

x

P(x,y)

P’(x’,y’)

X

Y

56

Dan matrik transformasi dari proses scaling adalah sebagai berikut:

100

00

00

y

x

m

m

OpenGL mempunyai fungsi scaling:

glScalef(sx,sy,sz)

Gambar 3.14. glScalef(2.0,-0.5,1.0)

Melakukan skala pada obyek sebesar x,y,z kali sesuai dengan sumbu x,y dan z masing-

masing

B.3.3. Rotasi

Rotasi adalah proses memutar titik sebesar ao dengan titik pusat putaran berada

pada titik pusat koordinat, yang ditunjukkan oleh gambar 3.13 berikut:

Gambar 3.15. Proses rotasi

Proses rotasi dapat dirumuskan dengan:

1100

0)cos()sin(

0)sin()cos(

1

'

'

y

x

aa

aa

y

x

P(x,y)

P’(x’,y’)

a

X

Y

57

Dan matrik transformasi dari proses rotasi adalah sebagai berikut:

100

0)cos()sin(

0)sin()cos(

aa

aa

OpenGL mempunyai fungsi rotasi:

void glRotatef*(sudut,x,y,z)

Gambar 3.16. glRotatef(45.,0.,0.,0.,1.)

Merotasi obyek dengan arah sudut berlawanan arah jarum jam (counterclockwise) dari

posisi awal (x,y,z) diputar sebesar sudut.

B.3.4. Matrik Identitas

Semua matrik transformasi dibentuk dari matrik indentitas, untuk membuat fungsi yang

menghasilkan matrik identitas OpenGL mempunyai fungsi yaitu:

glLoadIdentity()

C. TUGAS PENDAHULUAN

1. Tulislah kembali fungsi-fungsi untuk world window dan viewport window

2. Tulislah kembali formula rasio lebar dan tinggi dari world window dan viewport

window

3. Tulislah kembali tahapan transformasi pada OpenGL

4. Tulislah fungsi OpenGL untuk translasi, rotasi, scaling dan matrik identitas

58

D. PERCOBAAN

1. Menggambar segiempat (fungsi GL_QUAD) pada sistem koordinat world window

dan viewport window. Ketikkan program ini pada userdraw().

Amati output akhir yang ditampilkan. Buat kesimpulan tentang gluOrtho2D() dan

glViewport().

2. Lakukan modifikasi dari DrawQuad() pada percobaan no 1. Sedemikian hingga

output Quad yang ditampilkan berupa bujur sangkar 1x1. Modifikasi dilakukan

dengan dua cara:

1. Merubah kesamaan rasio lebar dan tinggi dari world window (gluOrtho2D)

2. Merubah kesamaan rasio lebar dan tinggi dari screen window (glViewport)

void DrawQuad()

{ glViewport(50,50,100,100);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluOrtho2D(-1,1,-1,1);

glBegin(GL_QUADS);

glVertex2f(-0.5,-0.5);

glVertex2f(0.5,-0.5);

glVertex2f(0.5,0.5);

glVertex2f(-0.5,0.5);

glEnd();

}

59

3. Program userdraw() untuk memindahkan obyek segiempat dengan titik-titik

(x1,y1)=(10.,10.) dan (x2,y2)=(100.,100.),untuk menggambar gunakan fungsi

glRectf(x1,y1,x2,y2) atau fungsi glBegin(GL_POLYGON). Lakukan translasi

sebesar 110 satuan ke arah sumbu X dan 110 satuan ke arah sumbu Y,gunakah

fungsi glTranslatef(110.,110.,0.). Jika diketahui gluOrtho2D(0.,400.,0.,400.).

Perhatikan potongan program pada userdraw() berikut :

void userdraw(void)

{

glColor3f(1.,1.,0.); //Rect Kuning=Rect hasil translasi

glRectf(10.,10.,100.,100.);

glColor3f(1.,0.,0.);

glTranslatef(110., 110., 0.);//Rect Merah=Rect hasil translasi

glRectf(10.,10.,100.,100.);

}

Hasil dari program di atas seperti pada gambar 3.17. berikut :

Gambar 3.17. Contoh Hasil Translasi

60

4. Program userdraw() untuk mengubah skala lebar 0.5 kali dan tinggi 0.5 kali pada

obyek segiempat dengan titik-titik (x1,y1)=(10.,10.) dan

(x2,y2)=(100.,100.),untuk menggambar gunakan fungsi glRectf(x1,y1,x2,y2) atau

fungsi glBegin(GL_POLYGON). Lakukan dengan fungsi glScalef(0.5,0.5.,0.).

Jika diketahui gluOrtho2D(0.,400.,0.,400.). Perhatikan potongan program pada

userdraw() berikut :

void userdraw {

glRectf(10.,10.,100.,100.);

glColor3f(1.,0.,0.); //R=Scale

glScalef(0.5,0.5, 0.);

glRectf(10.,10.,100.,100.);

}

Hasil dari program di atas adalah seperti gambar 3.18 a. Amati hasilnya,sumbu

koordinat x dan y akan di scale 0.5 dari asal. Tambahkan glTranslatef((30., 25., 0.)

sebelum fungsi glScalef() akan didapatkan hasil gambar 3.15 b. Buatlah

kesimpulan dari hasil fungsi glScalef() !

Gambar 3.18. a. Contoh Hasil Scaling b. Contoh Hasil Translasi Scaling

5. Program userdraw() untuk mengubah rotasi sb x 450 (counterclockwise) obyek

persegi panjang dengan titik-titik (x1,y1)=(10.,10.) dan (x2,y2)=(50.,100.),untuk

menggambar gunakan fungsi glRectf(x1,y1,x2,y2) atau fungsi

glBegin(GL_POLYGON). Lakukan dengan fungsi glRotatef(45.,0.,0.,1.). Jika

diketahui gluOrtho2D(0.,400.,0.,400.). Perhatikan potongan program pada

userdraw() berikut :

61

void userdraw(void)

{

glRectf(10.,10.,50.,100.);

glColor3f(1.,0.,0.);

glTranslatef(70., 100., 0.);

glRotatef(45., 0., 0.,1.);

glRectf(10.,10.,50.,100.);

}

Hasil dari program di atas adalah seperti gambar 3.19 a,amati hasilnya,sumbu

koordinat x akan diputar 450 dari sumbu x asal. Tambahkan glTranslatef((70., 100., 0.)

sebelum fungsi glRotatef() akan didapatkan hasil gambar 3.19 b. Buatlah kesimpulan dari

hasil fungsi glRotatef() !

Gambar 3.19. a. Contoh Hasil Rotasi 450 b. Contoh Hasil Translasi Rotasi 450

6. Program userdraw() untuk menggambar segitiga sebanyak 24 buah dengan rotasi

150 dari segitiga sebelumnya. Agar gambar yang segitiga yang dihasilkan tidak

mempunyai sumbu koordinat yang berbeda setelah di rotasi lakukan translasi

sumbu koordinat kembali ke posisi x,y,z = (0.,0.,0.).

void drawTriangle()

{ glBegin(GL_TRIANGLES);

glVertex2f(-30.,0.);

glVertex2f(30.,0.);

glVertex2f(0.,100.);

glEnd();

}

62

void userdraw(void)

{

int i;

glColor3f(1.,1.,0.);

drawTriangle();

for (i=0; i<24; i++) {

glColor3f(1.,1.,0.);

glRotatef(-15.*(i+1), 0., 0.,1.);

glTranslatef(0., 0., 0.);

drawTriangle();

}

}

Gambar 3.20 Hasil Rotasi dan Translasi dari Segitiga Berulang

E. TUGAS

1. Buatlah program user draw untuk menggambar sarang laba-laba yang dibuat dari

segitiga yang diputar berkali-kali. Catatan : gunakan fungsi transformasi glRotatef

(s,0.,0.,1.), dimana s adalah sudut 00 s/d 1800 dengan perubah 60. Output program

menghasilkan gambar 3.21.

63

Gambar 3.21. Sarang Laba-Laba dari Segitiga

F. LAPORAN RESMI

1. Buatlah kesimpulan dari masing-masing percobaan program grafika yang sudah

dilakukan !

2. Demo dan kumpulkan listing program beserta penjelasan tugas menggambar dengan

fungsi trasformasi

64

PRAKTIKUM 6

FUNGSI KEYBOARD DAN MOUSE

A. TUJUAN

Setelah mempelajari dan mempraktekkan materi dalam praktikum ini mahasiswa

diharapkan mampu:

1. Mengenal Fungsi Callback Keyboard dan Mouse

2. Mengerti dan dapat Membuat Program dengan fungsi glutKeyboardFunc()

3. Mengerti dan dapat Membuat Program dengan fungsi glutMouseFunc()

B. DASAR TEORI

B. 1. Event Handling di OpenGL

OpenGL menyediakan fungsi yang didefinisikan oleh user dan dipanggil pada saat

ada event yang bersesuaian. OpenGL memonitor peralatan input, ketika ada sesuatu yang

terjadi,misalkan saat mouse down,key press,dan lain-lain. Pada tabel 4.1 adalah beberapa

event yang dicek oleh OpenGL.

Tabel 4.1. Event di OpenGL

Event Contoh Fungsi Callback OpenGL

Keypress KeyDown

KeyUp

glutKeyboardFunc

Mouse leftButtonDown

leftButtonUp

glutMouseFunc

Motion With mouse press

Without

glutMotionFunc

glutPassiveMotionFunc

Window Moving

Resizing

glutReshapeFunc

System Idle

Timer

glutIdleFunc

glutTimerFunc

Software What to draw glutDisplayFunc

Fungsi Callback GLUT adalah fungsi yang berjalan saat ada kejadian (event-driven).

Program-program yang menggunakan window untuk input/output,menunggu sampai ada

kejadian dan kemudian mengeksekusi beberapa fungsi yang didefinisikan sebelumnya

berdasarkan input dari user. Kejadian yang dimaksud : key press,mouse button press dan

65

release,window resize,dan lain-lain. Program OpenGL yang dibuat akan berjalan tak

terbatas (infinite loop). Berikut adalah contoh coding program menggunakan input

OpenGL. Pembahasan fungsi Callback OpenGL pada praktikum 4 ini akan difokuskan

pada pengecekan adanya kejadian mouse motion dan kejadian pada penekanan keyboard.

int main( intargc, char** argv)

{

glutInit(&argc, argv);

glutInitDisplayMode( GLUT_RGB || GLUT_SINGLE );

glutInitWindowSize( 250, 250 );

glutInitWindowPosition( 100, 100 );

glutCreateWindow(argv[0]);

init ();

glutDisplayFunc( display );

glutReshapeFunc (reshape );

glutMouseFunc( mouse );

glutMotionFunc( motion );

glutKeyboardFunc( keyboard );

glutMainLoop();

return 0;

}

B. 2. Mendefinisikan Event Keyboard

OpenGL mempunyai fungsi callback pada saat ada event keyboard :

void glutKeyboardFunc

(void (*func)(unsigned char key, int x, int y));

Func adalah mencatat fungsi yang dipanggil ketika sebuah tombol keyboard di tekan.

Parameter key mengembalikan nilai karakter ascii dari tombol keyboard yang ditekan.

Koordinat x,y adalah posisi pointer mouse saat keyboard ditekan,yang diukur dari pojok

kiri atas window. Sedangkan x dan y menyatakan lokasi (di window : koordinat relatif)

dari pointer ketika kejadian key ditekan.

Fungsi OpenGL callback yang lain untuk event adanya keyboard up (pelepasan tombol

keyboard) adalah:

void glutKeyboardUpFunc

66

(void (*func)(unsigned char key, int x, int y));

Func adalah mencatat fungsi yang dipanggil ketika sebuah tombol keyboard selesai

ditekan,diangkat. Parameter key mengembalikan nilai karakter ascii dari tombol keyboard

yang diangkat. Koordinat x,y adalah posisi pointer mouse saat keyboard ditekan,yang

diukur dari pojok kiri atas window. Sedangkan x dan y menyatakan lokasi (di window :

koordinat relatif) dari pointer ketika kejadian key ditekan.

Fungsi OpenGL callback yang lain untuk event adanya penekanan pada tombol khusus

keyboard adalah:

void glutSpecialFunc

(void (*func)(int key, int x, int y));

Func adalah mencatat fungsi yang dipanggil ketika sebuah tombol keyboard khusus yang

ditekan. Parameter key mengembalikan nilai karakter ascii dari tombol keyboard khusus

yang ditekan. Koordinat x,y adalah posisi pointer mouse saat keyboard ditekan,yang

diukur dari pojok kiri atas window. Sedangkan x dan y menyatakan lokasi (di window :

koordinat relatif) dari pointer ketika kejadian key ditekan. Berikut nilai konstanta key dari

tombol keyboard khusus yang ditekan dan fungsi tombolnya di keyboard, tabel 4.2 dan

tabel 4.3.

Tabel 4.2. Konstanta Key dari Tombol Keyboard Khusus

Konstanta Spesial Key Fungsi

GLUT_KEY_F1 Key F1

GLUT_KEY_F2 Key F2

GLUT_KEY_F3 Key F3

GLUT_KEY_F4 Key F4

GLUT_KEY_F5 Key F5

GLUT_KEY_F6 Key F6

GLUT_KEY_F7 Key F7

GLUT_KEY_F8 Key F8

GLUT_KEY_F9 Key F9

GLUT_KEY_F10 Key F10

GLUT_KEY_F11 Key F11

GLUT_KEY_F12 Key F12

Tabel 4.3. Konstanta Key untuk Tombol Keyboard Arah

Konstanta Key Arah Fungsi

GLUT_KEY_LEFT Key kiri

67

Konstanta Key Arah Fungsi

GLUT_KEY_UP Key atas

GLUT_KEY_RIGHT Key kanan

GLUT_KEY_DOWN Key bawah

GLUT_KEY_PAGE_UP Key Page Up

GLUT_KEY_PAGE_DOWN Key Page Dwon

GLUT_KEY_HOME Key Home

GLUT_KEY_END Key End

GLUT_KEY_INSERT Key Insert

Fungsi OpenGL yang akan mengembalikan salah satu dari nilai konstanta berikut :

GLUT_ACTIVE_SHIFT, GLUT_ACTIVE_CTRLatau GLUT_ACTIVE_ALT jika

tombol keyboard ini ditekan atau jika ada event mouse yang bekerja.

int glutGetModifiers( )

B. 3. Mendefinisikan Event Mouse

OpenGL mempunyai fungsi callback pada saat ada event mouse :

void glutMouseFunc

(void(*func)(int button,int state,int x,int y));

Func adalah sebuah pointer ke fungsi yang membawa 4 parameter integer. Func

dipanggil oleh OpenGL ketika mouse ditekan atau dilepas (pressed atau released). Button

menyatakan tombol mouse yang ditekan, salah satu dari berikut :

1. GLUT_LEFT_BUTTON

2. GLUT_RIGHT_BUTTON, atau

3. GLUT_MIDDLE_BUTTON

State menyatakan state dari tombol mouse, bernilai salah satunya :

1. GLUT_UP

2. GLUT_DOWN

Sedangkan x dan y menyatakan lokasi (di window : koordinat relatif) dari mouse ketika

kejadian.

Fungsi OpenGL untuk event adanya pergerakan pada mouse (mouse motion) adalah:

glutMotionFunc(void(*fuc)(int x,int y));

68

Func dipanggil oleh OpenGL ketika pointer mouse berpindah di dalam window selama

satu atu beberapa button mouse ditekan. Sedangkan x dan y menyatakan lokasi dari

mouse ketika kejadian.

Fungsi OpenGL untuk pengecekan tidak adanya event pada mouse (mouse motion)

adalah:

glutPassiveMotionFunc(void(*fuc)(int x,int y));

Func dipanggil oleh OpenGL ketika pointer mouse berpindah di dalam window dengan

tidak adanya button mouse yang ditekan. Sedangkan x dan y menyatakan lokasi dari

mouse ketika kejadian.

Fungsi OpenGL untuk event mouse yang berisi state GLUT_ENTERED atau

GLUT_LEFT berdasarkan mouse masuk atau meninggalkan window yaitu:

void glutEntryFunc(void(*func)(int state));

C. TUGAS PENDAHULUAN

1. Tulislah kembali fungsi-fungsi OpenGL untuk event mouse dan keyboard

2. Tulislah nilai ascii dari tombol keyboard : backspace,enter,escape,dan delete

3. Tulislah kembali table konstanta tombol keyboard khusus dan tombol keyboard arah

D. PERCOBAAN

1. Event Keyboard: glutKeyboardFunc, glutKeyboardUpFunc, dan

glutSpecialFunc

Potongan program dengan fungsi glutMouseFunc(mouse)sebagai berikut :

- Tempatkan pemanggilan fungsi callback keyboard pada main program sbb :

1. glutKeyboardFunc(keyboard);

2. glutKeyboardUpFunc(keyboardup);

3. glutSpecialFunc(diectional_Keys);

4. glutSpecialFunc(special);

- Buat prosedur dengan nama dan parameter yang sama dengan prosedur pada

parameter fungsi callback sbb :

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

2. void keyboardup(unsigned char key, int x, int y)

69

3. void directional_Keys(int key, int x, int y)

4. void special(int key, int x, int y)

- Jalankan program,uji coba :

Fungsi callback keyboard : semua tombol keyboard,kecuali tombol directional key dan

tombol Fxx. Pengujian tombol Ctrl,Shift,dan Alt menggunakan fungsi glutGetModifier().

int main(int argc, char *argv[])

{ glutInit(&argc, argv);

glutInitWindowPosition(200, 200);

glutInitWindowSize(400, 400);

glutCreateWindow("GLUT_KEYBOARD_FUNC");

glClearColor(1.,1.,1.,1.);

glutDisplayFunc(display);

glutKeyboardFunc(keyboard);

glutMainLoop();

return 0;

}

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

{ switch(key)

{ // Backspace

case 8 :

cout<<"Pressed Backspace"<<endl; break;

// Enter

case 13 :

cout<<"Pressed Enter"<<endl; break;

// Escape

case 27 :

cout<<"Pressed Escape"<<endl; break;

// Delete

case 127 :

cout<<"Pressed Delete"<<endl; break;

default :

cout<<"Pressed key : "<< (char)key <<" at position : ("

<< x <<","<< y <<")"<<endl; break;

70

}//end switch

int mod = glutGetModifiers();

switch(mod)

{

case GLUT_ACTIVE_CTRL :

cout<<"Ctrl Held"<<endl; break;

case GLUT_ACTIVE_SHIFT :

cout<<"Shift Held"<<endl; break;

case GLUT_ACTIVE_ALT :

cout<<"Alt Held"<<endl; break;

}//end switch

}//end void keyboard

Output program dengan fungsi callback glutKeyboardFunc() disajikan pada gambar

4.1.

Gambar 4.1. Output Program glutKeyboardFunc()

- Jalankan program,uji coba :

Fungsi callback keyboard up sama dengan fungsi callback keyboard sebelumnya,

hanya saya keyboard up akan bekerja pada saat tombol keyboard yang ditekan

sudah diangkat. Pada saat tombol keyboard yang ditekan belum diangkat fungsi

callback yang aktif adalah keyboard.

71

int main(int argc, char *argv[])

{ glutInit(&argc, argv);

glutInitWindowPosition(200, 200);

glutInitWindowSize(400, 400);

glutCreateWindow("GLUT_KEYBOARD_FUNC");

glClearColor(1.,1.,1.,1.);

glutDisplayFunc(display);

glutKeyboardFunc(keyboard);

glutKeyboardUpFunc(keyboardup);

glutMainLoop();

return 0;

}

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

{ switch(key)

{ // Backspace

case 8 :

cout<<"Key Backspace Lifted"<<endl; break;

// Enter

case 13 :

cout<<"Key Enter Lifted"<<endl; break;

// Escape

case 27 :

cout<<"Key Escape Lifted"<<endl; break;

// Delete

case 127 :

cout<<"Key Delete Lifted"<<endl; break;

default :

cout<<"Key : "<< (char)key

<<" Lifted at position : ("

<< x <<","<< y <<")"<<endl; break;

}//end switch

}//end void

Output program dengan fungsi callback glutKeyboardUpFunc() disajikan pada gambar

4.2.

72

Gambar 4.2. Output Program glutKeyboardUpFunc()

- Jalankan program,uji coba :

1. Fungsi callback spesial keyboard : semua tombol keyboard pada tabel 4.2

tombol Fxx

int main(int argc, char *argv[])

{ glutInit(&argc, argv);

glutInitWindowPosition(200, 200);

glutInitWindowSize(400, 400);

glutCreateWindow("GLUT_KEYBOARD_FUNC");

glClearColor(1.,1.,1.,1.);

glutDisplayFunc(display);

glutSpecialFunc(special);

glutMainLoop();

return 0;

}

void special(int key, int x, int y)

{ switch(key)

{ case GLUT_KEY_F1 :

cout<<"Pressed F1"<<endl;break;

case GLUT_KEY_F2 :

cout<<"Pressed F2"<<endl;break;

73

case GLUT_KEY_F3 :

cout<<"Pressed F3"<<endl;break;

case GLUT_KEY_F4 :

cout<<"Pressed F4"<<endl;break;

case GLUT_KEY_F5 :

cout<<"Pressed F5"<<endl;break;

case GLUT_KEY_F6 :

cout<<"Pressed F6"<<endl;break;

case GLUT_KEY_F7 :

cout<<"Pressed F7"<<endl;break;

case GLUT_KEY_F8 :

cout<<"Pressed F8"<<endl;break;

case GLUT_KEY_F9 :

cout<<"Pressed F9"<<endl;break;

case GLUT_KEY_F10 :

cout<<"Pressed F10"<<endl;break;

case GLUT_KEY_F11 :

cout<<"Pressed F11"<<endl;break;

case GLUT_KEY_F12 :

cout<<"Pressed F12"<<endl;break;

}

}

Output program dengan fungsi callback glutSpecialFunc() disajikan pada gambar 4.3.

Gambar 4.3. Output Program glutSpecialFunc()

74

- Jalankan program,uji coba :

1. Fungsi callback spesial keyboard : pada tabel 4.3 tombol directional key

int main(int argc, char *argv[])

{

glutInit(&argc, argv);

glutInitWindowPosition(200, 200);

glutInitWindowSize(400, 400);

glutCreateWindow("Directional Keyboard");

glClearColor(1.,1.,1.,1.);

glutDisplayFunc(display);

glutSpecialFunc(directional_Keys);

glutMainLoop();

return 0;

}

void directional_Keys(int key, int x, int y)

{ switch (key)

{

case GLUT_KEY_LEFT :

printf("GLUT_KEY_LEFT %d\n",key); break;

case GLUT_KEY_UP :

printf("GLUT_KEY_UP %d\n",key); break;

case GLUT_KEY_RIGHT :

printf("GLUT_KEY_RIGHT %d\n",key);break;

case GLUT_KEY_DOWN :

printf("GLUT_KEY_DOWN %d\n",key);break;

case GLUT_KEY_PAGE_UP :

printf("GLUT_KEY_PAGE_UP %d\n",key);break;

case GLUT_KEY_PAGE_DOWN :

printf("GLUT_KEY_PAGE_DOWN %d\n",key);break;

case GLUT_KEY_HOME :

printf("GLUT_KEY_HOME %d\n",key);break;

case GLUT_KEY_END :

printf("GLUT_KEY_END %d\n",key); break;

case GLUT_KEY_INSERT:

75

printf("GLUT_KEY_INSERT %d\n",key);break;

}//end switch

}//end void

Output program dengan fungsi callback glutSpecialFunc() disajikan pada gambar 4.4.

Gambar 4.4. Output Program glutSpecialFunc()

2. Event Mouse: glutMouseFunc(mouse)

Potongan program dengan fungsi glutMouseFunc(mouse)sebagai berikut :

- Tempatkan pemanggilan fungsi callback glutMouseFunc(mouse) pada

main program

- Buat prosedur dengan nama dan parameter yang sama dengan prosedur

glutMouseFunc(mouse) yaitu prosedur mouse(int button,int

state,int x,int y)

- Definisikan kondisi button dengan GLUT_RIGHT_BUTTON atau

GLUT_LEFT_BUTTON dan state dengan GLUT_DOWN atau GLUT_UP

- Pada saat kondisi true untuk button dan state GLUT_DOWN tampilkan “Left/Right

button pressed at<x,y>” dan saat state GLUT_UP tampilkan “Left/Right button

liftet at<x,y>”

- Jalankan program uji coba :

1. klik mouse kiri diujung kiri atas window

76

2. klik mouse kanan diujung kanan atas window

3. Klik mouse kiri di tengah window

4. Klik mouse kiri di ujung kiri bawah window

5. Klik mouse kanan di ujung kanan bawah window

int main(int argc, char *argv[])

{ …

glutMouseFunc(mouse);

}

void mouse(int button, int state, int x, int y)

{

if (button == GLUT_RIGHT_BUTTON)

{

if (state == GLUT_DOWN)

cout<<"Right button pressed"

<<"at ("<< x <<","<< y<<")"<<endl;

else

cout<<"Right button lifted"

<<"at ("<< x <<","<< y<<")"<<endl;

}

else if (button == GLUT_LEFT_BUTTON)

{

if (state == GLUT_DOWN)

cout<<"Left button pressed"

<<"("<< x <<","<< y <<")"<<endl;

else

cout<<"Left button lifted "

<<"at ("<< x <<","<< y<<")"<<endl;

}

}

Output program dengan fungsi callback glutMouseFunc(mouse) disajikan pada

gambar 4.5.

77

Gambar 4.5. Output Program fungsi callback glutMouseFunc(mouse)

2. Event Mouse: glutMotionFunc (motion) dan glutPassiveMotionFunc

(motionpassive. Potongan program dengan fungsi glutMotionFunc

(motion) dan glutPassiveMotionFunc (motionpassive)sebagai

berikut :

- Tempatkan pemanggilan fungsi callback glutMotionFunc (motion) dan

glutPassiveMotionFunc (motionpassive)pada main program

- Buat prosedur dengan nama dan parameter yang sama dengan prosedur

glutMotionFunc (motion) dan glutPassiveMotionFunc

(motionpassive)yaitu prosedur motion(int x, int y) dan

motionPassive(int x, int y)

- Jalankan program uji coba :

1. Gerakkan mouse pada area window, amati hasil yang ditampilkan !

2. Klik mouse kiri dengan menggerakkan mouse di area window, amati hasil

yang ditampilkan !

3. Klik mouse kanan dengan menggerakkan mouse di area window, amati

hasil yang ditampilkan !

bool lbuttonDown = false;

bool lbutton = false;

bool rbutton = false;

int main(int argc, char *argv[])

{ …

78

glutMouseFunc(mouse);

glutMotionFunc(motion);

glutPassiveMotionFunc(motionPassive);

}

void mouse(int button, int state, int x, int y)

{ if (button == GLUT_RIGHT_BUTTON)

{rbutton=true; lbutton=false;

if (state == GLUT_DOWN)

lbuttonDown=true;

else

lbuttonDown=false;

}

else if (button == GLUT_LEFT_BUTTON)

{

lbutton=true;rbutton=false;

if (state == GLUT_DOWN)

lbuttonDown = true;

else

lbuttonDown = false;

}

}

void motion(int x, int y)

{

if (lbutton&&lbuttonDown)

cout<<"Mouse dragged with left button at "

<<"("<< x <<","<< y <<")"<<endl;

else if (rbutton&&lbuttonDown)

cout<<"Mouse dragged with right button at "

<<"("<< x <<","<< y <<")"<<endl;

}

void motionPassive(int x, int y)

79

{

cout<<"Mouse moved at "

<<"("<< x <<","<< y <<")"<<endl;

}

Output program dengan fungsi callback glutMotionFunc (motion) dan

glutPassiveMotionFunc (motionpassive)disajikan pada gambar 4.6.

Gambar 4.6. Output Program fungsi callback glutMotionFunc(motion) dan

glutPassiveMotionFunc(motionpassive)

3. Event Mouse: glutEntryFunc (entry),potongan program dengan fungsi

glutEntryFunc (entry) sebagai berikut :

- Tempatkan pemanggilan fungsi callback glutEntryFunc (entry) pada

main program

- Buat prosedur dengan nama dan parameter yang sama dengan prosedur

glutEntryFunc (entry) yaitu prosedur entry(int state

- Jalankan program dan amati outputput yang dihasilkan!

int main(int argc, char *argv[])

{ …

glutMouseFunc(mouse);

glutEntryFunc(entry);

80

}

void entry(int state)

{

if (state == GLUT_ENTERED)

cout<<"Mouse Entered"<<endl;

else

cout<<"Mouse Left"<<endl;

}

E. TUGAS

1. Buatlah gambar persegi(5x5) pada userdraw() , gunakan fungsi callback

glutSpecialFunc() untuk menggerakkan persegi maju GLUT_KEY_RIGHT

(koordX+5) dan mundur GLUT_KEY_LEFT (koordX-5).

2. Tambahkan pemanggilan fungsi callback mouse event glutMouseFunc() pada

program persegi yang sudah dibuat dengan button = GLUT_LEFT_BUTTON pada

posisi persegi akan merubah warna persegi. Lakukan juga pemanggilan callback

glutMouseMotion() dan tambahkan / kurangkan posisi x dan y dari mouse pada

koordinat posisi persegi sebelumnya.

3. Buatlah jalur maze 2D, contoh seperti pada gambar 4.7, definisikan semua range

batas koordinat tembok, gerakkan keyboard arah dari posisi start (merah) sampai

dengan mencapai posisi finish (hijau), pada saat obyek menyentuh tembok posisi

obyek tetap tidak berpindah. Gunakan tombol keyboard lain untuk mempercepat

gerakan, memperlambat dan menghentikan gerakan obyek.

Gambar 4.7. Contoh Maze 2D

4. Tambahkan program maze pada nomer 3 dengan pemanggilan glutMouseFunc(),

glutMotionFunc() dan glutPassiveMotionFunc()

81

F. LAPORAN RESMI

1. Lampirkan listing program,dan output program dari percobaan fungsi callback

keyboard dan mouse. Berikan juga kesimpulan dari masing-masing percobaan

2. Demo program tugas 1 sampai dengan tugas 4 dan kumpulkan listing program,

beserta penjelasan dan output program. Catatan : masing-masing siswa mengerjakan

tugas program berbeda dengan siswa yang lain.

82

PRAKTIKUM 7

TEXT DAN FONT

A. TUJUAN

Setelah mempelajari dan mempraktekkan materi dalam praktikum ini mahasiswa

diharapkan mampu:

1. Mengenal Fungsi Rendering Teks dengan Bitmap

2. Mengenal Fungsi Stroke Teks Karakter

3. Mengerti dan dapat Menambahkan Teks pada Program

B. DASAR TEORI

B. 1. Karakter Bitmap

OpenGL tidak menyediakan dukungan untuk font dan demikian pula untuk teks.

OpenGL menyediakan fungsi untuk bitmap dan fungsi ini dapat dipakai untuk teks.

GLUT (dan sistem window yang lain) menyediakan fungsi untuk teks. Fungsi GLUT

Bitmap berikut untuk menampilkan teks dengan model *font dan indek karakter ascii

(char) :

void glutBitMapCharacter( void *font, int char)

Model font yang dapat dipilih, salah satu dari tabel 5.1. berikut :

Tabel 5.1. Konstanta Font Bitmap

No Konstanta Font Bitmap Arti Output

1 GLUT_BITMAP_8_BY_13 Setiap font berukuran 8x13

2 GLUT_BITMAP_9_BY_15 Setiap font berukuran 9x15

3 GLUT_BITMAP_TIMES_ROMAN_10 Setiap font Times Roman,

berukuran 10 point

4 GLUT_BITMAP_TIMES_ROMAN_24 Setiap font Times

Roman,berukuran 24 point

5 GLUT_BITMAP_HELVETICA_10 Setiap font Helvetica

berukuran 10 point

6 GLUT_BITMAP_HELVETICA_12 Setiap font Times Roman,

berukuran 12 point

7 GLUT_BITMAP_HELVETICA_18 Setiap font Times Roman,

83

berukuran 18 point

B. 2. Stroke Teks Karakter

Karakter Stoke yang dihasilkan dengan menggunakan primitif OpenGL standar,

misalkan garis, poligon, dan kurva. Karakter ini dapat dimodifikasi oleh himpunan

transformasi yang dapat diterapkan pada objek geometris. Membuat stroke characters

menggunakan fungsi :

void glutStrokeCharacter(void *font, int character);

Parameter font sebagai simbolik karakter menyatakan stroke font yang dipakai

(GLUT_STROKE_ROMAN atau GLUT_STROKE_MONO_ROMAN). Sedangkan

character adalah karakter yang dibuat.

B. 3. Menempatkan Teks

Untuk menempatkan teks yang telah dibuat dengan glut bitmap atau dengan stroke

charakter, digunakan fungsi openGL berikut:

void glRasterPos{234}{sifd}( Type x, Type y, Type z, Type w)

void glRasterPos{234}{sifd}v(TYPE *array)

Penjelasan {234} merujuk pada jumlah parameter fungsi salah satu dari 2,3 atau 4,begitu

pula dengan {sifd} berarti tipe parameter single,integer,float,atau double.

C. TUGAS PENDAHULUAN

1. Tulislah kembali fungsi-fungsi OpenGL yang berhubungan dengan text dan font

2. Tampilkan semua konstanta font bitmap dan stroke teks karakter.

D. PERCOBAAN

1. Menampilkan teks menggunakan fungsi glutBitmap. Konstanta font glutBitmap yang

digunakan pada program berikut adalah : GLUT_BITMAP_TIMES_ROMAN_24

#include <GL/glut.h>

void drawBitmapText(char *string,float x,float y,float z)

{

char *c;

84

glRasterPos3f(x,y,z);

for(c=string;*c!='\0';c++)

{

glutBitmapCharacter(GLUT_BITMAP_TIMES_ROMAN_24,*c);

}

}

void init()

{

glClearColor(0.,0.,0.,0.);

}

void reshape(int w,int h)

{

glViewport(0,0,w,h);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluOrtho2D(0,w,h,0);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

}

void render(void)

{

glClear(GL_COLOR_BUFFER_BIT);

glLoadIdentity();

glColor3f(0,1,0);

drawBitmapText("Test Font",50,50,0);

glutSwapBuffers();

}

int main(int argc,char * argv[])

{

glutInit(&argc,argv);

glutInitDisplayMode(GLUT_RGBA|GLUT_DOUBLE);

glutInitWindowSize(200,200);

glutInitWindowPosition(100,100);

glutCreateWindow("Text-glutBitmap");

glClearColor(1.,1.,1.,1.);

glutDisplayFunc(render);

85

glutIdleFunc(render);

glutReshapeFunc(reshape);

glutMainLoop();

return 0;

}

Output hasilnya pada gambar 5.1.

Gambar 5.1. Hasil pemanggilan fungsi glutBitmap

2. Menampilkan teks menggunakan fungsi Stroke Teks Character. Konstanta font Stroke

Teks Character yang digunakan pada program berikut adalah :

GLUT_STROKE_ROMAN

#include <GL/glut.h>

void drawStrokeText(char *string, int x, int y, int z)

{

char *c;

glPushMatrix();

glTranslatef(x,y+8,z);

glScalef(0.5f,-0.5f,0);

for(c=string;*c!='\0';c++)

{

glutStrokeCharacter(GLUT_STROKE_ROMAN,*c);

}

glPopMatrix();

86

}

void init()

{

glClearColor(0.,0.,0.,0.);

}

void reshape(int w,int h)

{ glViewport(0,0,w,h);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluOrtho2D(0,w,h,0);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

}

void render(void)

{

glClear(GL_COLOR_BUFFER_BIT);

glLoadIdentity();

glColor3f(0,1,0);

drawStrokeText("Test Font",10,200,0);

glutSwapBuffers();

}

int main(int argc,char * argv[])

{

glutInit(&argc,argv);

glutInitDisplayMode(GLUT_RGBA|GLUT_DOUBLE);

glutInitWindowSize(500,500);

glutInitWindowPosition(100,100);

glutCreateWindow("Text-glutStrokeCharacter");

glClearColor(1.,1.,1.,1.);

glutDisplayFunc(render);

glutIdleFunc(render);

glutReshapeFunc(reshape);

glutMainLoop();

return 0;

}

87

Output hasilnya pada gambar 5.2.

Gambar 5.2. Hasil pemanggilan fungsi glutStrokeCharacter

E. TUGAS

1. Buatlah program untuk menampilkan semua konstanta font dari glutBitmap(),dengan

output seperti contoh gambar 5.3. berikut :

Gambar 5.3. GlutBitmap Font

2. Buatlah program untuk menampilkan semua konstanta font dari

glutStrokeCharacter(),dengan output seperti contoh gambar 5.4. berikut :

88

Gambar 5.4. GlutStrokeCharacter Font

F. LAPORAN RESMI

1. Lampirkan listing program,dan output program dari percobaan fungsi glutBitmapFont

dan glutStrokeFont. Berikan juga kesimpulan dari hasil dari masing-masing

percobaan !

2. Demo program tugas 1 dan tugas 2. Kumpulkan listing program, beserta penjelasan

dan output program. Catatan : masing-masing siswa mendemokan output akhir tugas

program berbeda dengan siswa yang lain.

89

PRAKTIKUM 8

PROYEK 1

A. TUJUAN

1. Menerapkan aplikasi menggambar obyek 2D

2. Menerapkan aplikasi event keyboard

3. Membuat proyek simulasi pesawat (obyek 2D) realistik,animasi,dan kendali

keyboard

Pembuatan simulasi pesawat dengan obyek grafik 2D yang realistik, animasi dan

kendalinya menggunakan keyboard seperti gambar 8.1 di bawah ini:

Gambar 8.1. [Kiri] Gerakan pesawat saat digerakkan ke kiri menggunakan tombol anak

panah kiri, [Tengah] Pesawat dalam keadaan state tengah, [Kanan] Gerakan pesawat saat

digerakkan ke kanan menggunakan tombol anak panah kanan.

Spesifikasi simulasi:

(1) Pesawat bisa bergerak ke kanan, kiri, atas dan bawah.

(2) Pesawat bisa menambah dan mengurangi kecepatan.

(3) Efek gerakan maju divisualisasikan dengan garis-garis horisontal pada latar

belakang yang bergerak dari tengah ke bawah. Kecepatan pesawat digambarkan

oleh kecepatan garis-garis horisontal.

B. DASAR TEORI

B.1. Membuat Latar Belakang

Latar belakang dari simulasi kendali pesawat ini terdapat dua macam obyek latar

belakang yaitu:

(1) Latar belakang diam yang berupa langit, gunung dan rumput/tanah.

90

(2) Latar belakang bergerak yang berupa garis-garis horisontal yang bergerak dari

tengah ke bawah.

Adapun teknik pembuatannya bisa menggunakan polygon dan pewarnaan polygon baik

satu warna maupun warna yang bergradiasi. Kreatifitas dalam membuat latar belakang

sangat dibutuhkan untuk mendapatkan latar belakang yang sesuai dengan ide proyek.

B.2. Pembuatan Obyek Pesawat

Obyek pesawat mempunyai beberapa bagian antara lain badan pesawat, sayap,

baling-baling dan mesin jet yang disimbolkan dengan api di belakang pesawat. Obyek

tambahan lain bisa diberikan untuk membuat pesawat lebih menarik. Pesawat yang

dihasilkan minimal seperti gambar 8.2 berikut.

Gambar 8.2. Contoh obyek pesawat

Beberapa spesifikasi animasi dari obyek pesawat di atas adalah:

(1) Baling-baling pesawat harus bisa berputar

(2) Mesin jet harus mampu memberikan efek besar-kecil api jet.

B.3. Sistem Kendali

Sistem kendali pesawat menggunakan keyboard:

(1) Anak panah kiri, kanan, atas dan bawah untuk menyatakan gerakan pesawat.

(2) Tombol angka 1 untuk menambah kecepatan

(3) Tombol angka 3 untuk mengurangi kecepatan.

(4) Tombol Esc untuk keluar dari program

Gambar 8.3. Arah gerakan atas-bawah dan kiri-kanan

Badan pesawat

Ruang

kemudi/penumpang Baling-baling

Sayap pesawat

Mesin jet

91

Gerakan ke atas dan ke bawah merupakan gerakan linier yang menambah atau

mengurangi nilai y dari obyek pesawat seperti terlihat pada gambar 8.3 sebelah kiri.

Gerakan ke kiri dan kanan merupakan gerakan parabolik untuk menghasilkan kesan

pesawat berbelok seperti terlihat pada gambar 8.3 sebelah kanan.

C. TUGAS PENDAHULUAN

Mengumpulkan skenario dari simulasi kendali pesawat berupa gambar obyek pesawat dan

latar belakang.

D. PERCOBAAN

1. Membuat latar belakang dengan garis-garis horisontal yang bergerak dari tengah ke

bawah sesuai dengan skenario.

2. Membuat obyek pesawat sesuai dengan skenario.

3. Membuat sistem kendali untuk gerakan pesawat.

E. LAPORAN RESMI

Laporan resmi berupa demonstrasi dari proyek ini.

92

PRAKTIKUM 9

VERTEX ARRAY – CREATING 3D OBJECT

A. TUJUAN

Setelah mempelajari dan mempraktekkan materi dalam praktikum ini mahasiswa

diharapkan mampu:

1. Mampu membuat obyek 3D

2. Mengerti dan memahami penggunaan vertex array

B. DASAR TEORI

Daripada Anda menentukan data vertex individu secara langsung (diantara pasangan

glBegin() dan glEnd ()), Anda dapat menyimpan data vertex dalam satu set array

termasuk posisi vertex, normals, koordinat tekstur dan informasi warna. Dan Anda

dapat menggambar seleksi geometri primitif dengan mereferensikan kembali elemen

array dengan indeks array.

Perhatikan kode berikut untuk menggambar

kubus secara langsung. Setiap sisi

membutuhkan 6 kali pemanggilan

glVertex*() untuk membuat 2 segitiga,

misalnya, sisi depan memiliki

segitiga v0-v1-v2 dan v2-v3-v0. Sebuah

kubus memiliki 6 sisi, sehingga jumlah total

Gambar 9.1. Kubus dengan 8 vertek

pemanggilan glVertex*() adalah 36. Jika Anda juga menentukan normals, koordinat

tekstur dan warna untuk vertex yang sesuai, hal itu akan meningkatkan jumlah

pemanggilan fungsi OpenGL.

Hal lain yang harus Anda perhatikan adalah vertex "v0" dibagi dengan 3 sisi yang

berdekatan, sisi depan, kanan dan atas. Dalam mode langsung, Anda harus

menyediakan shared vertex ini 6 kali, dua kali untuk setiap sisi seperti yang

ditunjukkan dalam kode berikut.

glBegin(GL_TRIANGLES); // menggambar kubus dengan 12

segitiga

93

// front face =================

glVertex3fv(v0); // v0-v1-v2

glVertex3fv(v1);

glVertex3fv(v2);

glVertex3fv(v2); // v2-v3-v0

glVertex3fv(v3);

glVertex3fv(v0);

// right face =================

glVertex3fv(v0); // v0-v3-v4

glVertex3fv(v3);

glVertex3fv(v4);

glVertex3fv(v4); // v4-v5-v0

glVertex3fv(v5);

glVertex3fv(v0);

// top face ===================

glVertex3fv(v0); // v0-v5-v6

glVertex3fv(v5);

glVertex3fv(v6);

glVertex3fv(v6); // v6-v1-v0

glVertex3fv(v1);

glVertex3fv(v0);

... // menggambar 3 sisi lainnya

glEnd();

Menggunakan vertex array mengurangi jumlah pemanggilan fungsi dan

penggunaan yang berlebihan dari shared vertex. Oleh karena itu, Anda dapat

meningkatkan kinerja rendering. Di sini, 3 fungsi OpenGL yang berbeda akan

dijelaskan untuk menggunakan vertex array; glDrawArrays(),

glDrawElements() dan glDrawRangeElements().

1. Inisialisasi

OpenGL menyediakan fungsi glEnableClientState() dan

glDisableClientState() untuk mengaktifkan dan menonaktifkan 6 jenis array.

Ditambah, ada 6 fungsi untuk menentukan posisi yang tepat (alamat) dari array,

sehingga, OpenGL dapat mengakses array dalam aplikasi Anda.

glVertexPointer(): menetapkan pointer ke coords array vertex

glNormalPointer(): menetapkan pointer to normal array

94

glColorPointer(): menetapkan pointer ke array warna RGB

glIndexPointer(): menetapkan pointer ke array warna index

glTexCoordPointer(): menetapkan pointer ke tekstur array cords

glEdgeFlagPointer(): menetapkan pointer ke array flag tepi

Setiap fungsi yang ditetapkan memerlukan parameter yang berbeda. Silahkan

melihat API manual OpenGL. Flag tepi digunakan untuk menandai apakah titik

berada di tepi batas atau tidak. Oleh karena itu, satu-satunya tepi di mana flag

tepi yang akan terlihat jika glPolygonMode() diatur dengan GL_LINE.

glVertexPointer(GLint size, GLenum type, GLsizei stride,

const GLvoid* pointer)

1. size: Jumlah koordinat vertex, 2 untuk titik 2D, 3 untuk titik 3D.

2. type: GL_FLOAT, GL_SHORT, GL_INT or GL_DOUBLE.

3. stride: Jumlah byte untuk mengimbangi ke vertex berikutnya

(digunakan untuk array yang disisipkan).

4. pointer: Pointer ke vertex array.

glNormalPointer(GLenum type, GLsizei stride, const GLvoid*

pointer)

1. type: GL_FLOAT, GL_SHORT, GL_INT or GL_DOUBLE.

2. stride: Jumlah byte untuk mengimbangi normal berikutnya (digunakan

untuk array yang disisipkan).

3. pointer: Pointer ke vertex array.

Perhatikan bahwa vertex array telah berada dalam aplikasi Anda (memori

sistem), yang terletak di sisi klien. Dan, OpenGL pada sisi server mendapatkan

hak akses padanya. Itulah mengapa ada perintah khusus untuk vertex array,

glEnableClientState() dan glDisableClientState() daripada menggunakan

glEnable() dan glDisable().

2. glDrawArrays()

glDrawArrays() membaca data vertex dari array yang aktif dengan

memadukan langsung melalui array tanpa melewati atau melompati. Karena

95

glDrawArrays() tidak memungkinkan untuk melompati vertex array, Anda

masih harus mengulang shared vertex satu kali pada tiap sisi.

glDrawArrays() memakai argumen 3. Yang pertama adalah tipe primitif.

Parameter kedua adalah offset awal dari array. Parameter terakhir adalah

jumlah vertex untuk melewati saluran rendering OpenGL.

Sebagai contoh di atas untuk menggambar kubus, parameter pertama adalah

GL_TRIANGLES, yang kedua adalah 0, yang berarti mulai dari awal array.

Dan parameter terakhir adalah 36: kubus memiliki 6 sisi dan masing-masing

sisi perlu 6 vertex untuk menggambar 2 segitiga, 6 × 6 = 36.

GLfloat vertices[] = {...}; // 36 koordinat vertex

...

// mengaktifkan dan menentukan pointer ke vertex array

glEnableClientState(GL_VERTEX_ARRAY);

glVertexPointer(3, GL_FLOAT, 0, vertices);

// menggambar kubus

glDrawArrays(GL_TRIANGLES, 0, 36);

// menonaktifkan vertex array setelah menggambar

glDisableClientState(GL_VERTEX_ARRAY);

Sebagai hasil dari penggunaan glDrawArrays(), Anda dapat mengganti

pemanggilan 36 glVertex*() dengan memanggil glDrawArrays() sekali.

Namun, kita masih perlu untuk menduplikasi shared vertex, sehingga jumlah

vertex yang didefinisikan dalam array masih 36 bukan 8. glDrawElements()

adalah solusi untuk mengurangi jumlah vertex dalam array, sehingga

memungkinkan lebih sedikit transfer data ke OpenGL.

3. glDrawElements()

glDrawElements() menggambar rangkaian primitif dengan melompati vertex

array dengan indeks array yang terkait. Hal ini mengurangi jumlah

pemanggilan fungsi dan jumlah vertex untuk ditransfer. Selanjutnya, OpenGL

mungkin membuat cache untuk vertex yang baru diproses dan

menggunakannya kembali tanpa mengirim vertex yang sama ke saluran

transformasi vertex berkali-kali.

glDrawElements() membutuhkan 4 parameter. Yang pertama adalah tipe

primitif, yang kedua adalah jumlah indeks dari indeks array, yang ketiga adalah

96

tipe data indeks array dan parameter terakhir adalah alamat dari indeks array.

Dalam contoh ini, parameternya adalah, GL_TRIANGLES, 36,

GL_UNSIGNED_BYTE dan indeks masing-masing.

GLfloat vertices[] = {...}; // 8 koordinat vertex

GLubyte indices[] = {0,1,2, 2,3,0, // 36 index

0,3,4, 4,5,0,

0,5,6, 6,1,0,

1,6,7, 7,2,1,

7,4,3, 3,2,7,

4,7,6, 6,5,4};

...

// mengaktifkan dan menentukan pointer ke vertex array

glEnableClientState(GL_VERTEX_ARRAY);

glVertexPointer(3, GL_FLOAT, 0, vertices);

// menggambar kubus

glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_BYTE,

indices);

// menonaktifkan vertex array setelah menggambar

glDisableClientState(GL_VERTEX_ARRAY);

Ukuran koordinat vertex array sekarang 8, yang merupakan jumlah yang sama

persis vertex dalam kubus tanpa entri berlebihan.

Perhatikan bahwa tipe data indeks array adalah GLubyte bukan GLuint atau

GLushort. Ini harus menjadi tipe data terkecil yang dapat ditampung nomor

indeks maksimal untuk mengurangi ukuran indeks array, jika tidak, dapat

menyebabkan penurunan kinerja karena ukuran dari indeks array. Sejak array

vertex mengandung 8 vertex, GLubyte cukup untuk menyimpan semua indeks.

Hal lain yang harus dipertimbangkan adalah

vektor normal pada shared vektor. Jika normals

dari poligon yang berdekatan di shared vektor

semua berbeda, maka vektor normal harus

ditentukan sebanyak jumlah sisi, sekali untuk

masing-masing sisi.

Sebagai contoh, vertex v0 dibagi dengan sisi

Gambar 9.2. Vektor Normal Kubus

bagian depan, kanan dan atas, namun, normals tidak dapat dibagi di v0. Normal

dari sisi depan n0, normal sisi yang kanan adalah n1 dan sisi atas adalah n2.

Untuk situasi ini, normal tidak sama dengan shared vertex, vertex tidak dapat

97

didefinisikan hanya sekali dalam vertex array lagi. Hal ini harus didefinisikan

beberapa kali dalam array untuk koordinat vertex dalam rangka untuk

mencocokkan jumlah elemen yang sama dalam array normal. Sebuah kubus

dengan normals yang tepat membutuhkan 24 vertex yang unik: 6 sisi × 4 vertex

per sisi.

4. glDrawRangeElements()

Seperti glDrawElements(), glDrawRangeElements() juga baik untuk

melompat-lompat di vertex array. Namun, glDrawRangeElements() memiliki

dua parameter lainnya (indeks awal dan akhir) untuk menentukan sejumlah

vertex yang di-prefetch. Dengan menambahkan pembatasan range ini, OpenGL

dapat memperoleh jumlah yang terbatas hanya dari data vertex array sebelum

rendering, dan mungkin dapat meningkatkan kinerja.

Parameter tambahan dalam glDrawRangeElements() adalah indeks awal dan

akhir, kemudian OpenGL mem-prefetch jumlah terbatas dari vertex dari nilai-

nilai: akhir – awal + 1. Dan nilai-nilai dalam indeks array harus terletak di

antara index awal dan akhir. Perhatikan bahwa tidak semua vertex dalam

rentang (awal, akhir) harus dirujuk. Tapi, jika Anda menentukan rentang yang

jarang digunakan, hal itu menyebabkan proses yang tidak perlu bagi banyak

simpul yang tidak digunakan dalam kisaran tersebut.

//Catatan : Definisi dari vertices

GLfloat vertices[] = {...}; // 8 koordinat vertex

GLubyte indices[] = // paruh pertama (18 index)

{0,1,2, 2,3,0,

0,3,4, 4,5,0,

0,5,6, 6,1,0,

1,6,7, 7,2,1,

// paruh kedua (18 index)

7,4,3, 3,2,7,

4,7,6, 6,5,4};

...

// mengaktifkan dan menetapkan pointer ke vertex array

glEnableClientState(GL_VERTEX_ARRAY);

glVertexPointer(3, GL_FLOAT, 0, vertices);

// menggambar paruh pertama, rentang 6 - 0 + 1 = 7

//vertex yang digunakan

glDrawRangeElements(GL_TRIANGLES, 0, 6, 18,

GL_UNSIGNED_BYTE, indices);

// menggambar paruh kedua, rentang 7 - 1 + 1 = 7

//vertex yang digunakan

98

glDrawRangeElements(GL_TRIANGLES, 1, 7, 18,

GL_UNSIGNED_BYTE, indices+18);

// menonaktifkan vertex array setelah menggambar

glDisableClientState(GL_VERTEX_ARRAY);

Anda dapat mengetahui jumlah maksimum vertex yang akan di-prefetch dan

jumlah maksimum indeks dapat direferensikan dengan menggunakan

glGetIntegerv() dengan GL_MAX_ELEMENTS_VERTICES dan

GL_MAX_ELEMENTS_INDICES.

Perhatikan bahwa glDrawRangeElements() tersedia di OpenGL versi 1.2 atau

lebih.

C. TUGAS PENDAHULUAN

Tulislah kembali fungsi-fungsi OpenGL yang berhubungan dengan VERTEX

ARRAY dan jelaskan kegunaannya

D. PERCOBAAN

1. Contoh Implementasi Vertex Array untuk membuat Objek 3D

Buatlah kubus dengan 4 cara yang berbeda; modus langsung, glDrawArrays(),

glDrawElements() dan glDrawRangeElements().

draw1(): Gambarlah sebuah kubus dengan modus langsung.

draw2(): Gambarlah sebuah kubus dengan glDrawArrays ().

draw3(): Gambarlah sebuah kubus dengan glDrawElements ().

draw4(): Gambarlah sebuah kubus dengan glDrawRangeElements ().

draw5(): Gambarlah sebuah kubus dengan glDrawElements () dan berbagai

simpul yang disisipkan.

1. Isi fungsi draw1() pada main.cpp. void draw1()

{

glPushMatrix();

glTranslatef(-2, 2, 0); // move to upper left corner

glBegin(GL_TRIANGLES);

// front faces

glNormal3f(0,0,1);

// face v0-v1-v2

99

glColor3f(1,1,1);

glVertex3f(1,1,1);

glColor3f(1,1,0);

glVertex3f(-1,1,1);

glColor3f(1,0,0);

glVertex3f(-1,-1,1);

// face v2-v3-v0

glColor3f(1,0,0);

glVertex3f(-1,-1,1);

glColor3f(1,0,1);

glVertex3f(1,-1,1);

glColor3f(1,1,1);

glVertex3f(1,1,1);

// right faces

glNormal3f(1,0,0);

// face v0-v3-v4

glColor3f(1,1,1);

glVertex3f(1,1,1);

glColor3f(1,0,1);

glVertex3f(1,-1,1);

glColor3f(0,0,1);

glVertex3f(1,-1,-1);

// face v4-v5-v0

glColor3f(0,0,1);

glVertex3f(1,-1,-1);

glColor3f(0,1,1);

glVertex3f(1,1,-1);

glColor3f(1,1,1);

glVertex3f(1,1,1);

// top faces

glNormal3f(0,1,0);

// face v0-v5-v6

glColor3f(1,1,1);

glVertex3f(1,1,1);

glColor3f(0,1,1);

glVertex3f(1,1,-1);

100

glColor3f(0,1,0);

glVertex3f(-1,1,-1);

// face v6-v1-v0

glColor3f(0,1,0);

glVertex3f(-1,1,-1);

glColor3f(1,1,0);

glVertex3f(-1,1,1);

glColor3f(1,1,1);

glVertex3f(1,1,1);

// left faces

glNormal3f(-1,0,0);

// face v1-v6-v7

glColor3f(1,1,0);

glVertex3f(-1,1,1);

glColor3f(0,1,0);

glVertex3f(-1,1,-1);

glColor3f(0,0,0);

glVertex3f(-1,-1,-1);

// face v7-v2-v1

glColor3f(0,0,0);

glVertex3f(-1,-1,-1);

glColor3f(1,0,0);

glVertex3f(-1,-1,1);

glColor3f(1,1,0);

glVertex3f(-1,1,1);

// bottom faces

glNormal3f(0,-1,0);

// face v7-v4-v3

glColor3f(0,0,0);

glVertex3f(-1,-1,-1);

glColor3f(0,0,1);

glVertex3f(1,-1,-1);

glColor3f(1,0,1);

glVertex3f(1,-1,1);

// face v3-v2-v7

glColor3f(1,0,1);

101

glVertex3f(1,-1,1);

glColor3f(1,0,0);

glVertex3f(-1,-1,1);

glColor3f(0,0,0);

glVertex3f(-1,-1,-1);

// back faces

glNormal3f(0,0,-1);

// face v4-v7-v6

glColor3f(0,0,1);

glVertex3f(1,-1,-1);

glColor3f(0,0,0);

glVertex3f(-1,-1,-1);

glColor3f(0,1,0);

glVertex3f(-1,1,-1);

// face v6-v5-v4

glColor3f(0,1,0);

glVertex3f(-1,1,-1);

glColor3f(0,1,1);

glVertex3f(1,1,-1);

glColor3f(0,0,1);

glVertex3f(1,-1,-1);

glEnd();

glPopMatrix();

}

2. Isi fungsi draw2() pada main.cpp. void draw2()

{

// enble and specify pointers to vertex arrays

glEnableClientState(GL_NORMAL_ARRAY);

glEnableClientState(GL_COLOR_ARRAY);

glEnableClientState(GL_VERTEX_ARRAY);

glNormalPointer(GL_FLOAT, 0, normals1);

glColorPointer(3, GL_FLOAT, 0, colors1);

glVertexPointer(3, GL_FLOAT, 0, vertices1);

glPushMatrix();

glTranslatef(2, 2, 0); // move to upper-right corner

102

glDrawArrays(GL_TRIANGLES, 0, 36);

glPopMatrix();

glDisableClientState(GL_VERTEX_ARRAY);

// disable vertex arrays

glDisableClientState(GL_COLOR_ARRAY);

glDisableClientState(GL_NORMAL_ARRAY);

}

3. Isi fungsi draw3() pada main.cpp. void draw3()

{

// enable and specify pointers to vertex arrays

glEnableClientState(GL_NORMAL_ARRAY);

glEnableClientState(GL_COLOR_ARRAY);

glEnableClientState(GL_VERTEX_ARRAY);

glNormalPointer(GL_FLOAT, 0, normals2);

glColorPointer(3, GL_FLOAT, 0, colors2);

glVertexPointer(3, GL_FLOAT, 0, vertices2);

glPushMatrix();

glTranslatef(-2, -2, 0);

// move to bottom-left corner

glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_BYTE, indices);

glPopMatrix();

glDisableClientState(GL_VERTEX_ARRAY);

// disable vertex arrays

glDisableClientState(GL_COLOR_ARRAY);

glDisableClientState(GL_NORMAL_ARRAY);

}

4. Isi fungsi draw4() pada main.cpp.

103

void draw4()

{

// enable and specify pointers to vertex arrays

glEnableClientState(GL_NORMAL_ARRAY);

glEnableClientState(GL_COLOR_ARRAY);

glEnableClientState(GL_VERTEX_ARRAY);

glNormalPointer(GL_FLOAT, 0, normals2);

glColorPointer(3, GL_FLOAT, 0, colors2);

glVertexPointer(3, GL_FLOAT, 0, vertices2);

glPushMatrix();

glTranslatef(2, -2, 0);// move to bottom-right

// draw first half (18 elements){0,1,2,

//2,3,0, 4,5,6, 6,7,4, 8,9,10, 10,11,8}

// The minimum index value in this range is 0, and the maximum index

//is 11 therefore, "start" param is 0 and "end" param is 11.

// Then, OpenGL will prefetch only 12 vertex data from the array

//prior to rendering. (half of total data)

glDrawRangeElements(GL_TRIANGLES, 0, 11, 18,

GL_UNSIGNED_BYTE, indices);

// draw last half (18 elements) {12,13,14, 14,15,12, 16,17,18,

//18,19,16, 20,21,22, 22,23,20}

// The minimum index value in this range is 12, and the maximum

//index is 23,therefore, "start" param is 12 and "end" param is 23.

// Then, OpenGL will prefetch only 12 vertex data from the array

//prior to rendering.

// Note that the last param of glDrawRangeElements(). It is the

//pointer to the location of the first index value to be drawn.

glDrawRangeElements(GL_TRIANGLES, 12, 23, 18,

GL_UNSIGNED_BYTE, indices+18);

glPopMatrix();

glDisableClientState(GL_VERTEX_ARRAY); // disable vertex arrays

glDisableClientState(GL_COLOR_ARRAY);

glDisableClientState(GL_NORMAL_ARRAY);

}

5. Isi fungsi draw5() pada main.cpp.

void draw5()

{

// enable and specify pointers to vertex arrays

104

glEnableClientState(GL_NORMAL_ARRAY);

glEnableClientState(GL_COLOR_ARRAY);

glEnableClientState(GL_VERTEX_ARRAY);

glNormalPointer(GL_FLOAT, 9 * sizeof(GLfloat),

vertices3 + 3);

glColorPointer(3, GL_FLOAT, 9 * sizeof(GLfloat),

vertices3 + 6);

glVertexPointer(3, GL_FLOAT, 9 * sizeof(GLfloat), vertices3);

glPushMatrix();

glTranslatef(-2, -2, 0);// move to bottom-left

glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_BYTE, indices);

glPopMatrix();

glDisableClientState(GL_VERTEX_ARRAY);

// disable vertex arrays

glDisableClientState(GL_COLOR_ARRAY);

glDisableClientState(GL_NORMAL_ARRAY);

}

Sehingga tampilan program akan sebagai berikut.

Gambar 9.3. Output Program Menggambar Kubus modus langsung, glDrawArrays(),

glDrawElements() dan glDrawRangeElements().

105

E. TUGAS

Buatlah program untuk menggambar 3D pyramid dengan modus langsung,

glDrawArrays(), glDrawElements() dan glDrawRangeElements()., Ouput seperti pada

gambar 9.4

Gambar 9.4. Output 3D Pyramid

F. LAPORAN RESMI

Buatlah laporan hasil percobaan di atas. Laporan berisikan dasar teori, langkah-langkah

percobaan, hasil percobaan, analisa percobaan, dan analisa kegunaan dari program yang

telah dibuat.

106

PRAKTIKUM 10

TRANSFORMASI DAN PROYEKSI

A. TUJUAN

Setelah mempelajari dan mempraktekkan materi dalam praktikum ini mahasiswa

diharapkan mampu:

1. Mengimplementasikan transformasi pada oyek 3D

2. Mengerti dan memahami OpenGL Projection

B. DASAR TEORI

Data geometris seperti posisi vertex dan vektor normal ditransformasikan

melalui Operasi Vertex dan operasi Primitif Assembly di saluran OpenGL sebelum

proses raterization.

Gambar 10.1. Vertex transformasi OpenGL

B.1. Koordinat Obyek

Koordinat obyek adalah sistem koordinat lokal suatu objek dan posisi awalnya dan

orientasi obyek sebelum dilakukan transformasi apapun. Dalam rangka untuk

mentransformasikan objek, dapat menggunakan glRotatef(), glTranslatef(),

glScalef().

B.2. Koordinat Mata

Koordinat mata ini dihasilkan dengan cara mengalikan matriks GL_MODELVIEW

dan koordinat objek. Obyek ditransformasikan dari ruang objek ke ruang mata

menggunakan matriks GL_MODELVIEW dalam OpenGL. Matriks

GL_MODELVIEW adalah kombinasi dari matriks Model dan View

( ). Transformasi Model adalah untuk mengkonversi dari ruang

107

objek untuk ruang dunia. Dan, transform View adalah untuk mengkonversi dari

ruang dunia ke ruang mata.

Perhatikan bahwa tidak ada matriks kamera (pandangan) terpisah dalam

OpenGL. Oleh karena itu, dalam rangka untuk mensimulasikan transformasi

kamera atau view, scene (objek 3D dan pencahayaan) harus ditransformasikan

dengan kebalikan dari view transformasi. Dengan kata lain, OpenGL

mendefinisikan bahwa kamera selalu terletak di (0, 0, 0) dan menghadap ke

sumbu Z koordinat ruang mata, dan tidak bisa ditransformasikan.

Vektor normal juga ditransformasikan dari koordinat objek ke koordinat mata

untuk perhitungan pencahayaan. Perhatikan bahwa normals ditransformasikan

dengan cara yang berbeda dengan yang dilakukan oleh vertex. Vektor normal

ini dikalikan tranpose dari kebalikan dari matriks GL_MODELVIEW dengan

vektor normal.

B.3. Koordinat Klip

Koordinat mata sekarang dikalikan dengan matriks GL_PROJECTION, dan

menjadi koordinat klip. Matriks GL_PROJECTION ini mendefinisikan volume

penglihatan (frustum), bagaimana data vertex diproyeksikan ke layar

(perspektif atau orthogonal). Oleh sebab itu disebut koordinat klip adalah

bahwa vertex yang ditransformasi (x,y,z) dipotong dengan membandingkan

dengan ± w.

108

B.4. Koordinat Perangkat Normalisasi (Normalized Device Coordinates / NDC)

Koordinat ini dihasilkan dengan cara membagi koordinat klip oleh w . Ini

disebut dengan pembagian perspektif. Lebih seperti koordinat window (layar),

namun belum diterjemahkan dan ditingkatkan ke layar piksel. Kisaran nilai

sekarang dinormalisasi dari -1 sampai 1 di semua 3 sumbu.

B.5. Koordinat Window (Koordinat Layar)

Koordinat ini dihasilkan dengan menerapkan koordinat perangkat dinormalisasi

(NDC) ke viewport transformasi. NDC diskala dan diterjemahkan dalam

rangka untuk bisa masuk ke layar rendering. Koordinat window akhirnya

dilewatkan ke proses raterization dari saluran OpenGL untuk menjadi fragmen.

Perintah glViewport() digunakan untuk menentukan daerah render persegi

mana yang gambar akhirnya dipetakan. glDepthRange() digunakan untuk

menentukan nilai z dari koordinat window. Koordinat window dihitung dengan

parameter yang diberikan di 2 fungsi atas;

glViewport (x, y, w, h);

glDepthRange (n, f);

Rumus transformasi viewport diperoleh dari hubungan linier antara NDC dan

koordinat window;

109

B.6. Matrix Transformasi OpenGL

OpenGL menggunakan matriks 4 x 4 untuk

transformasi. Perhatikan bahwa 16 elemen

dalam matriks disimpan sebagai array 1D dalam

urutan kolom-utama. Anda perlu mentranspose

matriks ini jika Anda ingin mengubahnya

menjadi standar konvensi, yaitu format baris-

utama. OpenGL memiliki 4 jenis matriks, GL_MODELVIEW,

GL_PROJECTION, GL_TEXTURE, dan GL_COLOR. Anda dapat

mengganti tipe saat ini dengan menggunakan glMatrixMode() dalam kode

Anda. Misalnya, dalam rangka untuk memilih matriks GL_MODELVIEW,

gunakan glMatrixMode(GL_MODELVIEW).

B.7. Model-View Matrix (GL_MODELVIEW)

GL_MODELVIEW matriks menggabungkan matriks penglihatan dan

pemodelan menjadi satu matriks. Dalam rangka untuk mengubah pandangan

(kamera), Anda perlu memindahkan seluruh scene dengan transformasi

invers. gluLookAt() terutama

digunakan untuk mengatur tampilan

transformasi.

3 elemen kolom matriks yang

paling kanan (m12, m13, m14) adalah

untuk menerjemahkan

transformasi glTranslatef(). Eleme

n m15 adalah koordinat

homogen . Elemen ini khusus digunakan

untuk transformasi proyektif.

3 set elemen, (m0, m1, m2), (m4, m5, m6) dan (m8, m9, m10) adalah untuk

Euclidean dan transformasi affine, seperti rotasi glRotatef() atau

skala glScalef(). Perhatikan bahwa 3 set ini benar-benar mewakili 3 sumbu

ortogonal;

1. (m0, m1, m2) : sumbu +X, vektor kiri, (1, 0, 0) secara default

Gambar 10.2.4 kolom matriks

GL_MODELVIEW

110

2. (m4, m5, m6) : sumbu +Y, vektor atas, (0, 1, 0) secara default

3. (m8, m9, m10) : sumbu +Z, vektor depan, (0, 0, 1) secara default

Kita bisa langsung membangun matriks GL_MODELVIEW dari sudut atau

vektor lookat tanpa menggunakan fungsi transformasi OpenGL. Berikut adalah

beberapa kode yang berguna untuk membangun matriks GL_MODELVIEW:

Angles ke Axes

Lookat ke Axes

Matrix4 kelas

Perhatikan bahwa OpenGL melakukan perkalian matriks dalam urutan terbalik

jika beberapa transformasi diterapkan ke vertex. Sebagai contoh, Jika vertex

ditransformasikan oleh MA pertama, dan ditransformasikan oleh MB kedua,

kemudian OpenGL melakukan MB x MA terlebih dahulu sebelum mengalikan

vertex. Jadi, transformasi terakhir datang pertama dan transformasi pertama

terjadi terakhir dalam kode Anda.

// Perhatikan bahwa objek akan ditranslasikan terlebih

dulu kemudian dirotasi

glRotatef (angle, 1, 0, 0); // merotasi derajat sudut

objek di sekitar sumbu X

glTranslatef (x, y, z); // memindah objek ke (x, y, z)

drawObject ();

B.8. Matrix Proyeksi (GL_PROJECTION)

Matriks GL_PROJECTION digunakan untuk mendefinisikan frustum. Frustum

ini menentukan obyek atau bagian dari obyek yang akan ditampilkan. Selain

itu, matriks ini menentukan bagaimana scene 3D diproyeksikan ke layar.

OpenGL menyediakan 2 fungsi untuk transformasi

GL_PROJECTION. glFrustum() adalah untuk menghasilkan proyeksi

perspektif, dan glOrtho() adalah untuk menghasilkan proyeksi ortografi

(paralel). Kedua fungsi memerlukan 6 parameter untuk menentukan 6 plane

111

kliping, kliping kiri, kanan, bawah, atas, dekat dan jauh. 8 simpul dari frustum

pandangan ditunjukkan pada gambar berikut.

Gambar 10.3. Perspektif OpenGL Melihat Frustum Simpul jauh (belakang) plane dapat dihitung dengan rasio segitiga yang sama,

misalnya, di sebelah kiri jauh plane berada;

Untuk proyeksi ortografi, rasio ini akan

menjadi 1, sehingga nilai-nilai kiri, kanan,

bawah dan atas plane yang jauh akan sama

seperti pada plane dekat.

Anda juga dapat menggunakan fungsi

gluPerspective() dan gluOrtho2D() dengan jumlah parameter yang lebih

sedikit. gluPerspective() hanya membutuhkan 4 parameter. Bidang pandang

vertikal (FOV), aspek rasio lebar terhadap tinggi dan jarak ke plane kliping

dekat dan jauh. Setara konversi dari gluPerspective() ke glFrustum()

digambarkan dalam kode berikut.

// This creates a symmetric frustum.

// It converts to 6 params (l, r, b, t, n, f) for

glFrustum()

// from given 4 params (fovy, aspect, near, far)

void makeFrustum(double fovY, double aspectRatio, double

front, double back)

{

Gambar 10.3. Ortografi Frustum

OpenGL

112

const double DEG2RAD = 3.14159265 / 180;

double tangent = tan(fovY/2 * DEG2RAD);

// tangent of half fovY

double height = front * tangent;

// half height of near plane

double width = height * aspectRatio;

// half width of near plane

// params: left, right, bottom, top, near, far

glFrustum(-width, width, -height, height, front,

back);

}

Namun, Anda harus menggunakan

glFrustum() secara langsung jika Anda

membuat volume pandang non-

simetris. Misalnya, jika Anda ingin

membuat sebuah scene lebar ke 2 layar

yang digabungkan, Anda dapat

memecah frustum menjadi 2 frustum asimetris (kiri dan kanan). Kemudian,

membuat scene dengan masing-masing frustum.

B.9. Matrix Tekstur (GL_TEXTURE)

Koordinat tekstur (s, t, r, q) dikalikan dengan matriks GL_TEXTURE sebelum

pemetaan tekstur. Secara default tekstur ini adalah identitas, sehingga tekstur

akan dipetakan ke obyek tepat di mana Anda menentukan koordinat tekstur.

Dengan memodifikasi GL_TEXTURE, Anda dapat menggeser, memutar,

meregangkan, dan menyusutkan tekstur.

// rotate texture around X-axis

glMatrixMode(GL_TEXTURE);

glRotatef(angle, 1, 0, 0);

B.10. Matrix Warna (GL_COLOR)

Komponen warna (r, g, b, a) dikalikan dengan matriks GL_COLOR. Hal ini

dapat digunakan untuk konversi ruang warna dan swaping komponen warna.

Matriks GL_COLOR tidak umum digunakan dan diperlukan ekstensi

GL_ARB_imaging.

Gambar 10.4. Contoh dari frustum

asimetris

113

Matrix Lain Yang Biasa Digunakan

glPushMatrix() : mendorong matriks saat ini ke dalam matriks stack.

glPopMatrix() : pop matriks arus dari matriks stack.

glLoadIdentity() : mengatur matriks saat ini untuk matriks identitas.

glLoadMatrix{fd}(m) : menggantikan matriks saat ini dengan m matriks.

glLoadTransposeMatrix{fd}(m) : menggantikan matriks saat ini dengan

baris-utama memerintahkan matriks m.

glMultMatrix{fd}(m) : kalikan matriks saat ini dengan m matriks, dan

memperbarui hasil untuk matriks saat ini.

glMultTransposeMatrix{fd}(m) : kalikan matriks saat ini dengan m baris-

utama matriks memerintahkan, dan memperbarui hasil untuk matriks saat ini.

glGetFloatv(GL_MODELVIEW_MATRIX, m) : mengembalikan 16 nilai

GL_MODELVIEW matriks m.

C. TUGAS PENDAHULUAN

Pahamilah langkah-langkah yang ada pada prosedur percobaan. Kemudian buatlah

flowchart untuk aplikasi yang akan di buat.

D. PERCOBAAN

1. Translasi pada obyek bola (sphere)

Tambahkan program berikut pada fungsi draw()

GLfloat oprY = -1;

GLfloat deltaY = 0;

void Draw() {

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glEnable(GL_DEPTH_TEST);

// Draw a sphere

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

glPushMatrix();

glTranslatef(0, deltaY, 0.0); // fungsi translasi

glutSolidSphere(.5, 20, 20);

glPopMatrix();

glFlush();

deltaY+=0.001*oprY;

if(deltaY>=1)oprY=-1;

if(deltaY<=-1)oprY=1;

114

glutPostRedisplay();

}

Dalam program dia atas dibuat sebuah obyek sphere (glutSolidSphere) yang

akan bergerak keatas kebawah sesuai nilai dari deltaY. Fungsi yang digunakan

untuk menggerakkan adalah glTranslatef(x,y,z).

Berikut adalah hasil running program dari program tersebut.

Gambar 10.5. Translasi Obyek Bola

2. Rotasi pada obyek bola

Tambahkan program berikut pada fungsi draw()

GLfloat oprY = -1;

GLfloat deltaY = 0;

void Draw() {

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glEnable(GL_DEPTH_TEST);

// Draw a sphere

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

glPushMatrix();

glRotated(deltaY, deltaY, deltaY, deltaY);

glTranslatef(1.0, 0.0, 0.0);

glutSolidSphere(.5, 20, 20);

glPopMatrix();

glFlush();

deltaY+=0.1*oprY;

glutPostRedisplay();

}

115

Dalam program dia atas dibuat sebuah obyek sphere (glutSolidSphere) yang

akan berputar searah sumbu x, y dan z sesuai nilai dari deltaY. Fungsi yang

digunakan untuk menggerakkan adalah glRotated(angle, x, y, z).

Berikut adalah hasil running program dari program tersebut.

Gambar 10.6. Rotasi Obyek Bola

3. Scaling pada obyek bola

Tambahkan program berikut pada fungsi draw()

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glEnable(GL_DEPTH_TEST);

// Draw a sphere

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

glPushMatrix();

glScalef(delta, delta, delta);

glutSolidSphere(.5, 20, 20);

glPopMatrix();

delta+=0.0001;

glutPostRedisplay();

Dalam program diatas dibuat sebuah obyek sphere (glutSolidSphere) yang akan

semakin membesar dan membesar sesuai nilai dari deltaY. Fungsi yang

digunakan untuk menggerakkan adalah glScalef(x, y, z).

Berikut adalah hasil running program dari program tersebut.

116

Gambar 10.7. Scalling Obyek Bola

E. TUGAS

Buatlah gambar matahari,bumi,bulan dengan bentuk bola. Gunakan fungsi scalling

untuk tiga ukuran bola,posisikan bumi dan bulan dari matahari dengan translasi. Jika

sudah tepat buatlah animasi gerakan bumi mengelilingi matahari,dan bulan

mengelilingi bumi. Contoh tampilan output pada gambar 10.8.

Gambar 10.8. Transformasi

F. LAPORAN RESMI

Buatlah laporan hasil percobaan di atas. Laporan berisikan dasar teori, langkah-langkah

percobaan, hasil percobaan, analisa percobaan, dan analisa kegunaan dari program yang

telah dibuat.

117

PRAKTIKUM 11

LIGHTING DAN SHADING

A. TUJUAN

Setelah mempelajari dan mempraktekkan materi dalam praktikum ini mahasiswa

diharapkan mampu:

1. Mengenal dan Mengerti Lighting pada OpenGL

2. Mengerti dan dapat Melakukan Flat Shading

3. Mengerti dan dapat Melakukan Smooth Shading

B. DASAR TEORI

B.1. Lighting Model

Ada beberapa macam metode optical view yang dapat dijadikan dasar sebagai

pencahayaan yang jatuh pada benda, yaitu:

Diffuse Scattering

Specullar Reflection

Ambient

Phong Model

Dari semua model pencahayaan tersebut, Phong model merupakan model pencahayaan

yang paling lengkap. Jadi dalam buku grafika ini fungsi pencahayaan yang digunakan

adalah Phong model.

Untuk dapat mengimplementasikan model-model pencahayaan itu terlebih dahulu kita

perlu melakukan pengaturan terhadap lighting model view point menjadi local. Secara

default opengl menyediakan sudut pandang infinite dimana jarak antara sumber cahaya,

sudut pandang dan setiap komponen vertex yang tergambar di layar dianggap sama.

Sehinga cahaya terlihat merata diseluruh bagian obyek pada gambar. Untuk merubahnya

kita gunakan perintah berikut ini:

glLightModeli(GL_LIGHT_MODEL_LOCAL_VIEWER,GL_TRUE);

118

selain itu kita juga harus mengaktifkan fungsi enablelighting, untuk mengaktifkan

pencahayaan dengan sumber cahaya yang kita tentukan.

glEnable(GL_LIGHTING);

glEnable(GL_LIGHT0);

Dua baris perintah diatas adalah perintah untuk mengaktifkan pencahayaan

“glEnable(GL_LIGHTING)” dan mengaktifkan sumbercahaya yang akan kita gunakan

“glEnable(GL_LIGHT0)”. Kita akan mengimplementasikan pencahayaan phong model

kedalam “GL_LIGHT0” ini.

B.2. Diffuse Scattering

Model pencahayaan diffuse scatering adalah pencahayaan yang menyebar. Sinar yang

datang dipantulkan kebanyak sudut. Gambar 11.1 adalah ilustrasi pantulan cahaya

diffuse.

Gambar 11.1 Pencahayaan Diffuse

Dari ilustrasi pada gambar 11.1 terlihat sinar yang datang dipantulkan menyebar

kebanyak sudut. Dan jika diimplementasikan ke gambar maka hasilnya akan terlihat

seperti gambar 11.2 berikut ini.

119

Gambar 11.2 Diffuse Lighting

Untuk mengimplementasikan diffuse lighting terlebih dahulu kita inisialisasikan

intensitas cahaya dan warna seperti berikut:

GLfloat qaDiffuseLight[] = {0.8, 0.8, 0.8, 1.0};

glLightfv(GL_LIGHT0, GL_DIFFUSE, qaDiffuseLight);

Kemudian di fungsi draw kita tambahkan perintah untuk memberikan properti pada

material atau gambar.

GLfloat qaGreen[] = {0.0, 1.0, 0.0, 1.0};

glMaterialfv(GL_FRONT, GL_DIFFUSE, qaGreen);

perintah itu digunakan untuk memberikan properti cahaya diffuse (GL_DIFFUSE)

dengan warna (qaGreen) pada sisi depan material (GL_FRONT).

B.3. Specullar Reflection

Refleksi specullar ini sama dengan refleksi pada cermin. Cahaya yang datang dipantulkan

secara tepat kesatu arah.

Gambar 11.3 Ilustrasi Specular Reflection

120

Misalkan cahaya datang searah garis P maka cahaya akan dipantulkan ke arah Q. Dimana

sudut antara Q dan sumbu normal (Qr) sama dengan P dan sumbu normal (Qi).

Jika specullar reflection ini diimplementasikan pada gambar maka akan terlihat seperti

gambar 11.4 berikut ini.

Gambar 11.4 Specular Lighting

Untuk mengimplementasikan specullar lighting terlebih dahulu kita inisialisasikan

intensitas cahaya dan warna seperti berikut:

GLfloat qaSpecullarLight[] = {1.0, 1.0, 1.0, 1.0};

glLightfv(GL_LIGHT0, GL_SPECULLAR, qaSpecullarLight);

Kemudian di fungsi draw kita tambahkan perintah untuk memberikan properti pada

material atau gambar.

GLfloat qaGreen[] = {0.0, 1.0, 0.0, 1.0};

glMaterialfv(GL_FRONT, GL_ SPECULLAR, qaGreen);

perintah itu digunakan untuk memberikan properti cahaya diffuse (GL_SPECULLAR)

dengan warna (qaGreen) pada sisi depan material (GL_FRONT).

B.4. Ambient

Model pencahayaan menggunakan ambient adalah model pencahayaan yang merata pada

semua permukaan benda. Gambar 11.3 adalah contoh hasil pencahayaan ambient pada

benda.

121

Gambar 11.5 Ambient Lighting

Untuk mengimplementasikan specullar lighting terlebih dahulu kita inisialisasikan

intensitas cahaya dan warna seperti berikut:

GLfloat qaSpecullarLight[] = {1.0, 1.0, 1.0, 1.0};

glLightfv(GL_LIGHT0, GL_SPECULLAR, qaSpecullarLight);

Kemudian di fungsi draw kita tambahkan perintah untuk memberikan properti pada

material atau gambar.

GLfloat qaGreen[] = {0.0, 1.0, 0.0, 1.0};

glMaterialfv(GL_FRONT, GL_ SPECULLAR, qaGreen);

perintah itu digunakan untuk memberikan properti cahaya diffuse (GL_SPECULLAR)

dengan warna (qaGreen) pada sisi depan material (GL_FRONT).

B.5. Phong Model

Phong model adalah gabungan dari ambient, diffuse, dan specullar. Dengan

menggabungkan ketiga model tersebut akan didapat hasil pencahayaan yang lebih baik

dan terlihat lebih nyata. Gambar 11.6 adalah hasil dari phong model.

122

Gambar 11.6 Phong Model

B.6. Flat dan Smooth Shading

Untuk mengimplementasikan flat shading dan smooth shading (gauraud shading)

opengl telah menyediakan fungsi yang dapat kita pakai. Untuk mengganti mode flat

shading ataupun smooth shading, kita gunakan fungsi glShadeModel();

Parameter untuk fungsi itu adalah mode shading yang kita inginkan flat atau smoot.

Untuk mode flat maka kita gunakan glShadeModel(GL_FLAT);, untuk smooth kita gunakan

glShadeModel(GL_SMOOTH);.

Flat shading umumnya lebih ringan dibandingkan dengan smooth shading. Namun

smooth shading membuat obyek terlihat lebih halus. Mode default yang disediakan oleh

opengl adalah mode smooth shading. Jika kita tidak mengubah shadeModel maka

otomatis shade yang digunakan adalah smooth. Gambar 11.7 adalah hasil penggunaan flat

dan smooth shading pada sebuah bola.

Gambar 11.7 Flat dan Smooth Shading

C. TUGAS PENDAHULUAN

1. Jelaskan mengenai ambient, diffuse, specular dan phong mode menurut pemahaman

anda!

2. Apa kegunaan dari fungsi glShadeModel()?

3. Jelaskan default shading model yang disediakan oleh opengl!

123

D. PERCOBAAN

1. Mengimplementasikan phong model pada gambar segiempat (GL_QUAD).

a. Aturlah window size menjadi 250x250. Dan ortho menjadi -1 sampai 1

glutInitWindowSize(250, 250);

glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0);

b. Melakukan pengaturan lighting, intensitas lighting, warna lighting, dan posisi

lighting

// Lighting set up

glLightModeli(GL_LIGHT_MODEL_LOCAL_VIEWER, GL_TRUE);

glEnable(GL_LIGHTING);

glEnable(GL_LIGHT0);

// Set lighting intensity and color

GLfloat qaAmbientLight[]= {0.2, 0.2, 0.2, 1.0};

GLfloat qaDiffuseLight[]= {0.8, 0.8, 0.8, 1.0};

GLfloat qaSpecularLight[]= {1.0, 1.0, 1.0, 1.0};

glLightfv(GL_LIGHT0, GL_AMBIENT, qaAmbientLight);

glLightfv(GL_LIGHT0, GL_DIFFUSE, qaDiffuseLight);

glLightfv(GL_LIGHT0, GL_SPECULAR, qaSpecularLight);

// Set the light position

GLfloat qaLightPosition[]= {.5, .5, 0.0, 1.0};

glLightfv(GL_LIGHT0, GL_POSITION, qaLightPosition);

c. Kemudian tambahkan perintah berikut pada fungsi draw()

void Draw() {

glClear(GL_COLOR_BUFFER_BIT);

// Set material properties

GLfloat qaBlack[] = {0.0, 0.0, 0.0, 1.0};

GLfloat qaGreen[] = {0.0, 1.0, 0.0, 1.0};

GLfloat qaWhite[] = {1.0, 1.0, 1.0, 1.0};

glMaterialfv(GL_FRONT, GL_AMBIENT, qaGreen);

glMaterialfv(GL_FRONT, GL_DIFFUSE, qaGreen);

glMaterialfv(GL_FRONT, GL_SPECULAR, qaWhite);

124

glMaterialf(GL_FRONT, GL_SHININESS, 60.0);

// Draw square with many little squares

glBegin(GL_QUADS);

glNormal3f(0.0, 0.0, 1.0);

const GLfloat kqDelta = .01;

for (int i = -90; i < 90; ++i) {

for (int j = -90; j < 90; ++j) {

glVertex3f(j*kqDelta, i*kqDelta, -.2);

glVertex3f((j+1)*kqDelta, i*kqDelta, -.2);

glVertex3f((j+1)*kqDelta, (i+1)*kqDelta, -.2);

glVertex3f(j*kqDelta, (i+1)*kqDelta, -.2);

}

}

glEnd();

glFlush();

}

d. Hasil running program

Gambar 11.8 Percobaan 1 Phong Model

2. Implementasi Flat Shading dan Smooth Shading pada bola ()

a. Lakukan sedikit perubahan pada program percobaan 1

125

b. Tambahkan GLUT_DEPTH pada glutInitDisplayMode();

Awal glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);

Menjadi glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB |

GLUT_DEPTH);

c. Kemudian ubahlah fungsi initialize()

void Initialize() {

glClearColor(0.0, 0.0, 0.0, 0.0);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

glOrtho(-1.0, 1.0, 0.0, 1.0, -3.0, 3.0);

// Lighting set up

glLightModeli(GL_LIGHT_MODEL_LOCAL_VIEWER, GL_TRUE);

glEnable(GL_LIGHTING);

glEnable(GL_LIGHT0);

// Set lighting intensity and color

GLfloat qaAmbientLight[]= {0.2, 0.2, 0.2, 1.0};

GLfloat qaDiffuseLight[]= {0.8, 0.8, 0.8, 1.0};

GLfloat qaSpecularLight[]= {1.0, 1.0, 1.0, 1.0};

glLightfv(GL_LIGHT0, GL_AMBIENT, qaAmbientLight);

glLightfv(GL_LIGHT0, GL_DIFFUSE, qaDiffuseLight);

glLightfv(GL_LIGHT0, GL_SPECULAR, qaSpecularLight);

// Set the light position

GLfloat qaLightPosition[]= {0.0, 1.0, -.5, 1.0};

glLightfv(GL_LIGHT0, GL_POSITION, qaLightPosition);

}

d. Setelah itu kita gambar dua buah sphere pada fungsi draw()

void Draw() {

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glEnable(GL_DEPTH_TEST);

126

// Set material properties

GLfloat qaBlack[] = {0.0, 0.0, 0.0, 1.0};

GLfloat qaGreen[] = {0.0, 1.0, 0.0, 1.0};

GLfloat qaRed[] = {1.0, 0.0, 0.0, 1.0};

GLfloat qaBlue[] = {0.0, 0.0, 1.0, 1.0};

GLfloat qaWhite[] = {1.0, 1.0, 1.0, 1.0};

GLfloat qaLowAmbient[] = {0.2, 0.2, 0.2, 1.0};

GLfloat qaFullAmbient[] = {1.0, 1.0, 1.0, 1.0};

for (int iIndex = 0; iIndex < 2; ++iIndex) {

if (iIndex == 0) {

glShadeModel(GL_FLAT);

} else {

glShadeModel(GL_SMOOTH);

}

//Set, ambient, diffuse and specular lighting. Set ambient to20%.

glMaterialfv(GL_FRONT, GL_AMBIENT, qaGreen);

glMaterialfv(GL_FRONT, GL_DIFFUSE, qaGreen);

glMaterialfv(GL_FRONT, GL_SPECULAR, qaWhite);

glMaterialf(GL_FRONT, GL_SHININESS, 128.0);

glLightfv(GL_LIGHT0, GL_AMBIENT, qaLowAmbient);

// Draw a sphere

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

glPushMatrix();

glTranslatef(-0.5 + (float)iIndex, 0.5, -2.0);

glutSolidSphere(.5, 20, 20);

glPopMatrix();

// Turn off diffuse and specular. Set ambient light tofull.

glMaterialfv(GL_FRONT, GL_DIFFUSE, qaBlack);

glMaterialfv(GL_FRONT, GL_SPECULAR, qaBlack);

glLightfv(GL_LIGHT0, GL_AMBIENT, qaFullAmbient);

}

glFlush();

}

127

e. Pada fungsi draw dibuat sphere sebanyak 2 buah dengan menggunakan looping.

Untuk sphere pertama menggunakan shade model flat. Yang kedua menggunakan

smooth shading.

f. Ketika di running hasilnya adalah seperti berikut:

Gambar 11.9 Flat dan Smooth Shading

E. TUGAS

Implementasikan Flat Shading dan Smooth Shading pada obyek 3D anda sendiri!

Ubahlah posisi sumber cahaya sesuai keinginan anda!

F. LAPORAN RESMI

Demo dan kumpulkan listing program beserta penjelasan tugas implementasi flat shading

dan smooth shading pada obyek 3D yang anda buat!

128

PRAKTIKUM 12

PROYEK 2

A. TUJUAN

Setelah mempelajari dan mempraktekkan materi dalam praktikum ini mahasiswa

diharapkan mampu:

1. Membuat animasi obyek 3D

2. Menggabungkan beberapa obyek 3D

3. Melakukan kamera view

4. Menggunakan fungsi callback keyboard

Obyek 3D yang akan digambar dinosaurus dengan menggabungkan beberapa obyek

dan bisa melakukan camera view menggunakan keyboard. Animasi ini dibuat dengan

lebih luwes seperti gambar 12.1 berikut. Perubahan saat menggerakkan mouse adalah

mengubah sudut 3D dari obyek tersebut. Gambar 12.2 menunjukkan perubahan saat

drag-drop mouse.

Gambar 12.1. [Kiri] Gerakan kepala dan badan dari dinosaurus dengan menoleh ke kanan

dan ke kiri.

Gambar 12.2. Mengubah camera-view menggunakan mouse

129

B. DASAR TEORI

B.1. Membuat Obyek

Obyek dibentuk dari beberapa obyek dasar yang digabungkan menjadi satu obyek.

Ada beberapa bagian obyek sebagai berikut:

Gambar 12.3. Obyek dinosaurus

(3) Obyek kepala yang bergerak ke kanan dan kekiri. Obyek ini termasuk pipi,

hitung, mata dan mulut.

(4) Obyek badan hampir seolah bergerak mengikuti sudut gerakan kepala namun

dengan sudut yang jauh lebih kecil.

(5) Obyek sepasang tangan yang gerakannya menyesuaikan gerakan badan.

(6) Obyek sepasang sepatu yang mempunyai sepasang yaitu sepatu di sisi kiri dan

sisi kanan.

Adapun teknik pembuatannya bisa menggunakan polygon dan pewarnaan polygon baik

satu warna maupun warna yang bergradiasi.

B.2. Pembuatan Kendali Camera View

Camera view lebih pada bentuk transformasi sumbu koordinat yang digerkan

dengan sudut azimut (a) dan elevasi (b). Gerakannya mengikuti gerakan pointer dari

130

mouse. Gambar 13 menyatakan model gerakan 3D dari gerakan mouse merupakan

konversi dari sistem koordinat (x,y,z) menjadi (r,a,b) seperti ditunjukkan oleh gambar

12.4 berikut ini.

Gambar 12.4. Sistem Koordinat 3D

C. TUGAS PENDAHULUAN

Mengumpulkan obyek-obyek pembentuk dari kepala, badan, tangan dan kaki dari

dinosaurus.

D. PERCOBAAN

1. Membuat obyek dinosaurus

2. Membuat animasi dari obyek dinosaurus

3. Membuat sistem kendali dengan mouse untuk camera view.

E. LAPORAN RESMI

Laporan resmi berupa demonstrasi dari proyek ini.

x

y

z

131

DAFTAR PUSTAKA

5. Achmad Basuki,Nana Ramadijanti,Buku Ajar Grafika Komputer,PENS,2008

6. Lecture Notes, The Ohio State University,2D Coordinate Systems and Drawing

4. Keyboard Movement, http://www.youtube.com/watch?v=kp5i1P9YeFE, (diakses 12

September 2013)

5. Mouse Click,http://www.youtube.com/watch?v=OrIs4CrfzRk ,(diakses 12 September

2013

6. Zeyang Li (Linus), Carnegie Mellon University, Transformation inOpenGL

7. Song Ho Ahn.2005-2012, Tutorial and Source and Binary: OpenGL Vertex Array,

http://www.songho.ca/opengl/gl_vertexarray.html,(diakses Oktober 2013)