Laporan Komputer Grafik-Debi Juwanda

LAPORAN

KOMPUTER GRAFIK

Nama Praktikan Nomor IndukMahasiswa Tanggal Kumpul

Tanda Tangan

Praktikan

Debi Juwanda 1214370161 12 Juni 2014

Nama Penilai TanggalKoreksi Nilai

Tanda Tangan

Dosen

Indri Sulistianingsih, S.Kom

UNIVERISTAS PEMBANGUNAN PANCA BUDIFAKULTAS TEKNIK

SISTEM INFORMATIKAMEDAN

2014

KELAS

TI-4 SORE B

i

DAFTAR ISIDaftar isi ............................................................................................................................ i

Kata Pengantar .................................................................................................................. ii

Bab 1 Pengenalan Komputer Grafik ................................................................................. 1

Bab 2 Teori Dasar ............................................................................................................. 2

Bab 3 Praktikum ............................................................................................................... 19

A. Grafik 2 Dimensi.................................................................................................. 19

1. Gambar Segitiga Pelangi........................................................................................ 19

2. Gambar Rumah Berwarna ..................................................................................... 20

3. Gambar Monas....................................................................................................... 26

4. Gambar Kursi dan Meja......................................................................................... 33

B. Grafik 3 Dimensi................................................................................................... 37

1. Gambar Tabung....................................................................................................... 37

2. Gambar Mobil ........................................................................................................ 41

3. Gaambar Kubus ..................................................................................................... 49

4. Gambar Bintang ..................................................................................................... 54

Bab 4 Kesimpulan............................................................................................................. 61

Penutup ............................................................................................................................ 62

Daftar Pustaka ................................................................................................................. 63

ii

KATA PENGANTAR

Assalamu’alaikum Wr. Wb.

Puji sukur saya panjatkan kehadirat Allah Swt yang telah memberikan Rahmat serta

Karunia-Nya kepada saya sehingga saya dapat menyelesaikan Laporan Komputer Grafik ini

yang Alhamdulillah tepat pada waktunya.

Laporan ini berisi tentang teori-teori dasar dan pembuatan gambar pada komputer

grafik. Diharapkan laporan ini dapat memberikan informasi kepada kita kita semua tentang

komputer grafik.

Saya menyadari bahwa laporan ini masih jauh dari kesempurnaan, oleh karena itu

kritik dan saran dari semua pihak yang bersifat membangun selalu saya harapkan demi

kesempurnaan laporan ini.

Akhir kata, saya sampaikan terima kasih kepada “Ibu Indri Sulistianingsih, S. Kom”

yang telah memberikan materi-materi dan bimbingannya selama ini hingga selesainya dalam

pembuatan laporan ini. Semoga Allah Swt senantiasa meridhai segala usaha kita. Amin.

Medan, 11 Juni 2014

Penuyusun,

DEBI JUWANDA

NIM. 1214370161

1

BAB 1

PENGENALAN KOMPUTER GRAFIK

LATAR BELAKANG

Komputer merupakan salah satu teknologi yang paling pesat perkembangannya. Pada

saat pertama kali ditemukan, komputer digunakan terutama sebagai alat bantu untuk

mempercepat proses hitung menghitung. Komputer dari generasi ke generasi mengalami

perkembangan dalam hal pengolahan data baik kapasitas maupun kecepatannya. Data yang

diolah tidak hanya berupa teks atau angka, tapi kini komputer dapat mengolah

gambar/grafika. Komputer yang memiliki piranti grafis untuk mengolah gambar atau grafika

disebut grafis komputer.

Komputer grafik adalah bagian dari ilmu komputer yang berkaitan dengan pembuatan

dan manipulasi gambar (visual) secara digital. Bentuk sedrahana dari Komputer Grafik adalah

Komputer Grafik 2D yang kemudian berkembang menjadi Komputer Grafik 3D, pemrosesan

citra (image processing), dan pengenalan pola (patten recognition). Komputer grafik sering

dikenal juga dengan istilah visualisasi data.

TUJUAN PRAKTIKUM

Mempelajari dasar-dasar pembuatan grafik OpenGL

Mengenal dan mengerjakan program dalam membuat suatu objek atau gambar.

Mengembangkan teori-teori dasar dalam menciptakan gambar-gambar yang baru.

2

BAB 2

LANDASAN TEORI

Pada bagian ini akan dibahas tentang teori dasar dari grafika komputer, yang akan

digunakan dalam pembahasan teknik environment mapping.

2.1.1 Sistem Koordinat Dua Dimensi

Sistem koordinat digunakan untuk membedakan posisi atau lokasi suatu titik. Sistem

koordinat yang sering digunakan adalah sistem koordinat cartesian dua dimensi seperti yang

digambarkan pada gambar 2.1. Dalam sistem koordinat cartesian dua dimensi digunakan 2

besaran (x,y). Sumbu x digunakan untuk memproyeksikan panjang dan sumbu y untuk tinggi.

Gambar 2. 1 Sistem Koordinat Cartesian dua dimensi, dengan sumbu x dan y

2.1.2 Titik / Pixel

Titik atau pixel (singkatan dari picture element) merupakan elemen penyusun terkecil

dari suatu objek dalam grafika komputer. Titik didefinisikan pada suatu posisi (x,y) dalam

koordinat cartesian. Gambar 2.2 menunjukkan sebuah titik pada posisi (3,4) dalam koordinat

cartesian.

Gambar 2. 2 Titik dengan koordinat cartesian (3,4)

Titik memiliki atribut yaitu warna dari titik tersebut. Selain itu, titik juga memiliki

property yang terdiri dari posisi atau koordinat (x,y) titik tersebut.

2

BAB 2

LANDASAN TEORI









2.1.2 Titik / Pixel




cartesian.




2

BAB 2

LANDASAN TEORI









2.1.2 Titik / Pixel




cartesian.




3

2.1.3 Garis

Garis merupakan persamaan matematika yang disusun oleh sekumpulan titik. Suatu

titik merupakan penyusun dari garis jika koordinat titik tersebut memenuhi persamaan garis y

= mx + c. Gambar 2.3 menunjukkan sebuah garis dengan koordinat titik – titik ujung (2,2)

dan (5,4).

Gambar 2. 3 Garis dengan koordinat titik – titik ujung (2,2) dan (5,4)

Garis memiliki atribut yang terdiri dari warna, tebal dan jenis dari garis tersebut

(gambar 2.4). Garis juga memiliki property yang terdiri dari koordinat dari titik – titik ujung

garis tersebut (x1, y1) dan (x2, y2).

2.1.4 Poligon

Gambar 2. 4 Jenis garis

Poligon merupakan bidang tertutup yang dibentuk oleh minimal 3 simpul (titik sudut

atau vertices) yang terhubung oleh garis (sisi atau edge). Garis – garis tersebut tidak saling

memotong. Contoh : segitiga, segi lima, segi delapan, dsb. Gambar 2.5 menunjukkan sebuah

poligon yang berupa segi lima.

Gambar 2. 5 Poligon segi lima memiliki lima simpul dan lima sisi

3

2.1.3 Garis




dan (5,4).





2.1.4 Poligon







3

2.1.3 Garis




dan (5,4).





2.1.4 Poligon







4

Poligon juga memiliki atribut seperti : tebal tepi, jenis tepi, warna tepi dan jenis isi

poligon (gambar 2.6). Property dari poligon terdiri dari koordinat titik – titik sudut

penyusunnya.

Gambar 2. 6 Jenis isi poligon (hollow, solid, patterned)

2.2 Teori Grafika Komputer Tiga Dimensi

Teori grafika komputer tiga dimensi yang akan digunakan dalam pembahasan teknik

environment mapping akan dibahas pada bagian ini.

2.2.1 Sistem Koordinat Tiga Dimensi

Koordinat dua dimensi dirasakan kurang memadai dalam merepresentasikan suatu objek

tiga dimensi. Pada grafik tiga dimensi terdapat 2 buah sistem koordinat, yaitu sistem

koordinat cartesian tiga dimensi dan sistem koordinat spheris.

2.2.1.1 Sistem Koordinat Cartesian Tiga Dimensi

Dalam sistem koordinat cartesian dua dimensi hanya terdapat 2 besaran saja (sumbu x

dan y). Sedangkan untuk memodelkan objek tiga dimensi yang memiliki kedalaman,

diperlukan 1 sumbu tambahan yaitu sumbu z, maka digunakanlah sistem koordinat cartesian

tiga dimensi. Sistem koordinat cartesian dibedakan menjadi 2 yaitu, sistem koordinat tangan

kanan dan sistem koordinat tangan kiri. Sistem koordinat tangan kanan diilustrasikan dengan

jari telunjuk tangan kanan sebagai sumbu x diputar sebesar 90 derajat ke arah jari tengah

tangan kanan sebagai sumbu y, sehingga arah ibu jari tangan kanan sebagai sumbu z

mendekati pengamat (arah z positif). Gambar 2.7 menunjukkan orientasi sumbu koordinat

menggunakan sistem koordinat tangan kanan.

5

Gambar 2. 7 Sistem Koordinat Tangan Kanan

Sedangkan pada sistem koordinat tangan kiri dapat diilustrasikan dengan jari telunjuk

tangan kiri sebagai sumbu x diputar sebesar 90 derajat ke arah jari tengah tangan kiri sebagai

sumbu y, sehingga arah ibu jari tangan kiri sebagai sumbu z menjauhi pengamat (arah z

positif). Gambar 2.8 menunjukkan orientasi sumbu koordinat menggunakan sistem koordinat

tangan kiri. Dalam komputer grafik lebih banyak digunakan sistem koordinat tangan kanan.

Gambar 2. 8 Sistem Koordinat Tangan Kiri

2.2.1.2 Sistem Koordinat Spheris

Pada sistem koordinat spheris, sebuah titik dianggap terletak pada permukaan kulit

bola yang memiliki jari – jari R, dan titik pusat bola berimpit dengan titik pusat sistem

koordinat. Dapat diambil sembarang titik, misalnya titik W sehingga dikenal besaran colatitud

dan azimuth. Colatitud ( ) adalah besarnya sudut yang dibentuk antara sumbu z dan garis

yang ditarik dari titik pusat ke titik W. Azimuth ( ) adalah besarnya sudut antara bidang xz

dengan bidang yang melewati titik W dan sumbu z. Gambar 2.9 menunjukkan sistem

koordinat spheris.

Gambar 2. 9 Sistem Koordinat Spheris

6

Dengan trigonometri, komponen koordinat spheris dapat dinyatakan dalam bentuk R, , dan

yaitu :

Wx = R sin ( ) cos ( )

Wy = R sin ( ) sin ( )

Wz = R cos ( )

2.2.2 Refleksi

Refleksi merupakan sifat material yang dapat mencerminkan bentuk objek – objek di

sekitarnya jika terkena sinar. Besarnya sudut pantul bergantung pada besarnya sudut datang

dari sinar dan bentuk permukaan dari objek yang terkena sinar tersebut.

Secara umum refleksi dapat diilustrasikan seperti gambar 2.10 berikut :

Gambar 2. 10 Vektor refleksi R N berasal dari vektor V , dengan garis normal V

dan dengan sudut ,

Rumus untuk menghitung vector R V R =V - 2(V .N N , dengan besar

sudut , vektor normal N

2.2.3 Proyeksi

Proyeksi merupakan proses mentransformasikan titik – titik di sistem koordinat

berdimensi n ke titik – titik di sistem koordinat dengan dimensi yang lebih kecil dari n. Dalam

grafik tiga dimensi, proyeksi didefinisikan dengan pancaran sinar proyeksi yang berasal dari

sebuah pusat proyeksi yang dipancarkan sampai mengenai masing – masing titik dari objek

tiga dimensi dan memotong sebuah bidang proyeksi sehingga terbentuk hasil proyeksi.

Dua teknik proyeksi yang sering digunakan dalam grafik tiga dimensi yaitu proyeksi

perspektif dan proyeksi paralel. Perbedaan diantara kedua teknik itu terletak pada letak pusat

proyeksi terhadap bidang proyeksi. Pada proyeksi perspektif, jarak pusat proyeksi ke bidang

proyeksi terdefinisi. Pada proyeksi paralel jarak pusat proyeksi ke bidang proyeksi tidak

terdefinisi (sangat jauh).

7

Proyeksi perspektif menghasilkan efek visual yang menyerupai sistem fotografi dan

sistem visual pada manusia. Hal ini membuat proyeksi perspektif menampilkan objek yang

lebih nyata daripada objek yang dihasilkan oleh proyeksi paralel. Proyeksi paralel biasanya

digunakan untuk pengukuran yang pasti. Karena perbandingan panjang objek di ruang tiga

dimensi dengan panjang objek di bidang proyeksi selalu sama.

2.2.3.1 Proyeksi Paralel

Proyesi paralel dapat diilustrasikan dengan sebuah titik pada bidang tiga dimensi W(wx,w

y,wz) diproyeksikan ke bidang dua dimensi dengan cara menghapus salah satu komponen

titiknya, misalnya komponen z (membuat nilai wz sama dengan nol) sama dengan

memproyeksikan titik W ke bidang xy. Dalam hal ini bidang xy disebut dengan bidang

pandang (viewplane). Proyeksi dari setiap titik diperoleh dengan menjatuhkan sinar (disebut

proyektor), dengan arah jatuh sinar tegak lurus terhadap bidang proyeksi. Proyeksi ini disebut

dengan proyeksi orthogonal. Gambar 2.11 menggambarkan proyeksi paralel.

Gambar 2. 11 Proyeksi Paralel

2.2.3.2 Proyeksi Perspektif

Proyeksi perspektif sering juga disebut frustrum projection, merupakan sekumpulan sinar

paralel yang diproyeksikan terhadap titik hilang (vanishing point). Jika sekumpulan sinar

sejajar dengan salah satu sumbu koordinat, maka titik hilang disebut dengan titik hilang

sumbu. Sedangkan jika ada titik hilang sumbu yang berpotongan dengan bidang proyeksi

maka disebut dengan titik hilang utama. Objek yang berada di dekat view plane akan terlihat

lebih besar bila dibandingkan dengan objek yang letaknya jauh dari view plane, hal ini

membuat proyeksi perspektif lebih terlihat nyata. Gambar 2.12 menunjukkan proyeksi

perspektif.

Gambar 2. 12 Proyeksi PerspektifView Plane adalah bidang pandang berbentuk piramid yang dihasilkan dari suatu proyeksi 12

8

2.2.4 Kamera Model

Dalam grafika komputer tidak semua objek dapat ditampilkan pada layar, sehingga

diperlukan suatu batasan objek – objek mana saja yang akan ditampilkan. Objek – objek

tersebut dibatasi dengan suatu daerah yang disebut view volume.

Untuk menampilkan ke layar maka harus dilakukan proyeksi terhadap view volume pada

view plane, hanya sebagian dari view plane yang akan ditampilkan pada layar. Bagian dari

view plane ini berbentuk bujur sangkar, disebut dengan viewport seperti terlihat pada gambar

2.13 berikut ini :

Gambar 2. 13 Kamera Model dengan View Frustrum

View plane dibatasi oleh dua plane 2 (Near dan Far), yang paralel terhadap view plane

ini disebut dengan view frustrum. Paralel plane yang dekat dengan mata (E) disebut dengan

near plane, sedangkan plane yang letaknya jauh dari mata disebut dengan far plane.

Kombinasi dari lokasi kamera (eye point), view plane, viewport, dan view frustrum

disebut dengan kamera model. Kamera model merupakan suatu cara untuk menempatkan

kamera dan mengorientasikannya pada ruang tiga dimensi. Plane adalah bidang yang

berbentuk persegi panjang. Salah satu cara yang digunakan dalam kamera model yaitu sistem

koordinat arah pandang.

Sistem koordinat arah pandang sering disebut dengan sistem koordinat uvn, sesuai

dengan nama – nama sumbu koordinat yang menjadi komponennya. Sistem koordinat arah

pandang dapat diilustrasikan dengan bidang pandang berimpit dengan bidang uv, sedangkan

mata terletak pada sumbu n. Hal ini mirip dengan sistem koordinat cartesian, dimana mata

terletak pada sumbu z, dan bidang pandang pada bidang xy.

9

Gambar 2. 14 Sistem Koordinat Arah Pandang

Hubungan antara sistem koordinat arah pandang dengan sistem koordinat cartesian,

diilustrasikan pada gambar 2.14. Dari gambar tersebut, bidang uv merupakan bidang pandang.

Pada bidang pandang ini ditentukan sebuah titik yang disebut dengan titik acuan pandang

(view reference point, VRP), dan dianggap sebagai titik pusat dari sistem koordinat arah

pandang. Dalam sistem koordinat dunia, komponen vektor n dinyatakan sebagai (narah n

inilah sistem koordinat uvn terbentuk. x,ny,nz). Dengan adanya sumbu ke Sumbu u dan

sumbu v saling tegak lurus. Sedangkan vektor n mempunyai arah tegak lurus terhadap bidang

uv, dan karena sumbu u dan sumbu v terletak pada 14 bidang uv, maka jelaslah bahwa arah

vektor n tegak lurus terhadap sumbu u dan sumbu v.

Jika vektor n dan v diketahui, dengan mudah bisa dihitung komponen vektor u. Karena

arah vektor u tegak lurus pada vektor v dan n, maka vektor u bisa dihitung dengan

menggunakan cross product dari vektor n dan v, yaitu u = n x v.

Setelah sistem koordinat arah pandang lengkap dengan berbagai komponennya, maka

perlu ditentukan batas jendela dan posisi matanya. Jendela terletak pada sistem koordinat

bidang pandang, dan batas – batasnya dinyatakan sebagai (jkr, jat, jkn, jbw). Dari batas – atas

tersebut terlihat bahwa pada arah mendatar, jendela mempunyai batas – batas dari u = j tegak,

jendela mempunyai batas dari u = j Posisi mata, yaitu m(mu, mv, mn at sampai v = jkr

sampai v = jbw. kn15 , pada arah ) dapat diletakkan pada sembarang tempat pada sistem

koordinat arah pandang. Posisi mata yang paling sering dipakai adalah dengan

menempatkannya pada sumbu n sejauh M dari VRP, yaitu pada posisi m = (0, 0,M).

Gambar 2.15 berikut mengilustrasikan posisi jendela dan mata pada sistem koordinat arah

pandang.

10

Gambar 2.15 Posisi jendela dan mata

2.2.5 Model Layar

Pada grafika komputer, layar penampil memiliki titik pusat koordinat (0,0) terletak

pada posisi paling atas dan paling kiri. Sistem windowing pada komputer grafik berbentuk

kotak yang didefinisikan berupa koordinat (kiri,atas) dan (kanan,bawah) seperti yang terlihat

pada gambar 2.16 berikut :

Gambar 2. 16 Titik pusat koordinat pada layar penampil

Dari gambar tersebut, untuk posisi tengah (center), lebar layar dan tinggi layar dapat

dihitung sbb :

horizontal center = ( kiri + kanan ) / 2

vertical center = ( atas + bawah ) / 2

lebar = kanan – kiri

tinggi = bawah – atas

Dalam menampilkan gambar pada layar penampil, dilakukan perbandingan ukuran

window dengan kamera model. Sehingga jika dilakukan perubahan ukuran pada kamera

model, window dapat dengan mudah menyesuaikan ukurannya. Gambar 2.17 menunjukkan

proses untuk menampilkan sebuah titik ke layar.

11

Gambar 2. 17 Proses untuk menampilkan sebuah titik ke layar

2.2.6 Pemotongan (Clipping)

Kadang kala objek – objek yang hendak ditampilkan ada bagian yang berpotongan dengan

view volume sehingga perlu dilakukan proses pemotongan (clipping). Gambar 2.18

menunjukkan proses clipping dan culling.

Gambar 2. 18 Proses pemotongan (clipping) dilakukan pada garis di tengah dan bawah,

proses penghilangan (culled) garis di atas

2.3 Pemetaan Tekstur

Suatu objek akan terlihat lebih nyata dengan adanya tekstur yang sesuai dengan objek

tersebut dibandingkan dengan objek yang tidak memakai tekstur / polos. Gambar 2.19 (a)

menunjukkan objek tanpa tekstur, sedangkan gambar 2.19 (b) menunjukkan objek dengan

tekstur.

12

(a) (b)

Gambar 2. 19 Perbedaan penggunaan tekstur pada objek (a) Objek tanpa tekstur, (b)

Objek dengan tekstur

Dalam komputer grafik, pemakaian tekstur dilakukan dengan melakukan pemetaan

terhadap tekstur pada permukaan objek. Tekstur yang dipetakan dapat berupa gambar atau

pola. Jika tekstur itu berupa pola maka dapat dilakukan perulangan untuk memetakannya,

sehingga ukuran filenya akan lebih kecil dibandingkan jika harus dipetakan seluruhnya.

Secara sederhana dalam pemetaan tekstur dilakukan perhitungan koordinat dunia (world

coordinates) yang berasal dari koordinat teksturnya. Gambar 2.20 mengilustrasikan pemetaan

tekstur.

x = x(s,t)

y = y(s,t)

z = z(s,t)

Gambar 2. 20 Ilustrasi dari pemetaan suatu tekstur

Dalam memetakan suatu tekstur pada suatu permukaan dikenal 4 komponen yang

terlibat. Parametric coordinates, digunakan untuk memodelkan permukaan objek. Texture

coordinates, digunakan untuk mengenali posisi dari tekstur yang akan dipetakan. World

coordinates, dimana pemetaan dilakukan. Screen coordinates, dimana pemetaan dari tekstur

ditampilkan. Gambar 2.21 mengilustrasikan 4 komponen dalam pemetaan tekstur.

Gambar 2. 21 Empat komponen dalam pemetaan tekstur

13

2.4 Pencahayaan

Dalam komputer grafik, faktor pencahayaan cukup penting. Suatu objek akan terlihat

lebih nyata dan menarik jika diberi pencahayaan yang sesuai. Beberapa tipe pencahayaan,

yaitu :

Directional Light Source, tipe pencahayaan yang sumber cahayanya dianggap terletak

sangat jauh dari objek, sehingga seluruh berkas cahaya yang mengenai objek datang secara

paralel. Contoh directional light di dunia nyata adalah cahaya matahari yang menyinari bumi.

Positional Light Source, tipe pencahayaan yang sumber cahaya ini serupa dengan lampu

yang terletak dekat dengan objek yang disinari, sehingga jarak/posisi antara cahaya dengan

objek akan mempengaruhi terang/gelapnya objek.

Spotlight, tipe pencahayaan yang mirip dengan positional light source, hanya saja dengan

batasan daerah pencahayaan. OpenGL juga telah menyediakan model pencahayaan yang

terdiri dari diffuse, ambient, dan specular.

2.4.1 Diffuse

Diffuse merupakan sifat material yang menyebarkan cahaya ke semua arah. Jika sinar

mengenai suatu objek yang memiliki material diffuse maka permukaan objek tersebut terlihat

lebih jelas. Intensitas cahaya diffuse lebih kecil dikarenakan sifatnya penyebarannya yang ke

semua arah. Gambar 2.22 menggambarkan arah penyebaran cahaya pada model diffuse.

Gambar 2. 22 Arah penyebaran cahaya pada model diffuse

2.4.2 Ambient

Ambient merupakan cahaya latar belakang yang dipantulkan oleh objek secara

seragam ke segala arah. Intensitas cahayanya kecil karena penyebarannya ke segala arah.

Gambar 2.23 menunjukkan model pencahayaan dengan ambient.

Gambar 2.23 Model pencahayaan dengan ambient

14

2.4.3 Specular

Model pencahayaan dimana penyebaran cahayanya hanya ke arah tertentu saja,

sehingga hukum yang berlaku disini adalah sudut pantul sama dengan sudut datang cahaya.

Intensitas cahayanya tinggi karena hanya dipantulkan ke satu arah saja. Objek yang memiliki

material ini memiliki kesan berkilau. Gambar 2.24 menunjukkan penyebaran cahaya specular.

Gambar 2. 24 Arah penyebaran cahaya pada model specular

2.5 Komputer Grafik menggunakan OpenGL

OpenGL merupakan sebuah open-source graphics library yang dirancang untuk

berjalan di berbagai platform berbeda (multiplatform). Library yang dikembangkan oleh

perusahaan Silicon Graphics ini, dapat digunakan pada hampir semua tool pemrograman,

seperti Microsoft Visual C++, Visual Basic, Borland C++, Borland Delphi, Java, dll.

2.5.1 Graphics Library Utility Toolkit ( GLUT )

GLUT merupakan pustaka tambahan yang berjalan pada OpenGL, dibuat untuk

mempermudah penanganan window dan interaksi dengan user. Tanpa GLUT, memprogram

OpenGL agak sedikit sulit karena perlu menggunakan fungsi – fungsi penanganan window

dan event dari windows API.

2.5.2 Sintaks Dasar dalam OpenGL

Penamaan fungsi – fungsi dasar dalam OpenGL dimulai dengan tulisan “gl” yang

diikuti dengan kata berikutnya yang diawali dengan huruf kapital. Contohnya : glBegin (),

glClear (), glPixels (), glPolygonMode (), dsb.

Beberapa fungsi membutuhkan argumen yang nilainya konstan dan tertentu. Untuk

penulisan konstanta, dimulai dengan tulisan “GL” yang diikuti kata yang ditulis dalam huruf

kapital semua, dengan underscore ( _ ) sebagai penghubungnya. Contohnya:

GL_AMBIENT_AND_DIFUSSE, GL_2D, GL_RGB, GL_CCW, dsb.

Tipe data dalam OpenGL ditulis dengan diawali dengan tulisan “GL” yang diikuti

dengan kata yang ditulis dalam huruf kecil semua.

Contohnya : GLbyte, GLshort, GLint, GLfloat, GLdouble, GLboolean, dsb.

15

2.5.3 Perintah – perintah dalam OpenGL

Beberapa perintah dalam OpenGL diberi nomor satu, dua dan tiga pada akhir katanya

yang diikuti pula dengan tipenya. Hal ini untuk menunjukkan jumlah parameter yang

digunakan beserta dengan tipe dari parameter tersebut.

Contoh : glColor3f (1.0, 0.0, 0.0); ‘3’ digunakan untuk menunjukkan 3 parameter ‘f’

digunakan untuk menunjukkan tipe yang digunakan adalah floating point. Kadang ada juga

perintah – perintah yang diakhiri dengan huruf ‘v’, hal ini menunjukkan perintah – perintah

tersebut dalam format vektor. Jika perintah tidak diakhiri dengan ‘v’, maka perintah tersebut

dalam format skalar.

2.5.4 Header Files

Dalam semua program grafik yang menggunakan OpenGL, perlu disertakan beberapa file

header. File header yang perlu disertakan adalah GLUT yang menyediakan rutin untuk

pengaturan dalam menampilkan, memproyeksikan suatu objek.

#include <GL/glut.h>

Gambar 2.25 berikut ini menunjukkan sebuah window OpenGL.

Gambar 2. 25 Tampilan Jendela OpenGL

2.6 Environment Mapping

Dalam texture mapping terdapat suatu teknik yang disebut teknik environment

mapping. Teknik ini memantulkan tekstur dari lingkungan di sekelilingnya pada suatu

permukaan tiga dimensi yang melingkupi suatu objek. Teknik environment mapping ini

pertama kali diperkenalkan oleh Blinn dan Newell pada tahun 1976.

16

Suatu objek yang menggunakan teknik environment mapping, jika dilihat dari

berbagai sudut maka dapat memantulkan tekstur lingkungan pada bagian dimana objek

tersebut dilihat sehingga tekstur yang terlihat akan berbeda jika dilihat pada sudut pandang

yang berbeda. Hal ini sedikit berbeda dibandingkan dengan texture mapping biasa. Pada

texture mapping biasa, tekstur yang terlihat akan tetap sama walaupun dilihat dari sudut

pandang manapun. Contoh dari teknik environment mapping pada dunia nyata dapat

diilustrasikan dengan sebuah mobil yang diparkir di depan halaman sebuah rumah. Jika

dilihat dari atas maka atap permukaan mobil memantulkan awan dan langit dimana mobil itu

ada, jika dilihat bagian sisi mobil yang menghadap pintu rumah, maka akan dipantulkan pintu

dan benda – benda lain yang ada di hadapannya. Jika dilihat pada sisi lainnya maka dapat

terlihat pepohonan yang ada dihadapannya.

2.7 Analisis dan Perancangan Berorientasi Objek

Pada awalnya terdapat dua pendekatan yang digunakan dalam melakukan analisis

perangkat lunak, yaitu analisis berorientasi data dan berorientasi aksi. Analisis berorientasi

data lebih mengutamakan pada data daripada aksi, begitu juga sebaliknya, analisis

berorientasi aksi lebih mengutamakan pada aksi daripada data.

Kelemahan dari kedua jenis pendekatan ini adalah data dan aksi tidak dapat

dipisahkan pada kenyataannya. Suatu item data tidak dapat berubah kecuali dilakukan aksi

pada item data tersebut. Demikian juga dengan aksi tanpa adanya data yang berhubungan

tidak berarti apa – apa.

Karena kelemahan diatas, maka munculah pendekatan berorientasi objek yang

memberi penekanan yang sama antara data dan aksi. Dalam analisis berorientasi objek, data

disebut sebagai atribut dan aksi sebagai methods.

Analisis berorientasi objek saat ini lebih sering dipakai dalam mengembangkan

perangkat lunak. Selain karena faktor tersebut diatas, faktor pendorong lainnya dalam

penggunaan analisis berorientasi objek, diantaranya karena analisis ini memberi kemudahan

dalam pengembangan perangkat lunak karena analisis ini menggunakan pendekatan yang

“membungkus” kerumitan yang ada. Selain itu dengan menggunakan analisis ini,

pengembang diberi kemudahan dalam melakukan pemeliharaan karena kode program dibagi

ke dalam modul – modul sesuai dengan objeknya, sehingga jika dilakukan perubahan pada

17

suatu objek tidak banyak mempengaruhi objek - objek lainnya. Notasi UML digunakan dalam

analisis berorientasi objek yang merupakan representasi permasalahan dengan bentuk

Diagram Use Case, skenario, Diagram Kelas dan Diagram Transisi.

Diagram use case memberi gambaran mengenai fungsi – fungsi yang ada pada

perangkat lunak secara umum, selain itu juga dapat memberi gambaran interaksi antara kelas

– kelas yang ada.

Skenario memberikan gambaran umum interaksi yang terjadi antara pengguna dan

objek yang ada pada perangkat lunak, seperti yang telah dijabarkan dalam diagram use case.

Dalam membangun perangkat lunak menggunakan pendekatan berorientasi objek,

kelas – kelas yang dibutuhkan direpresentasikan dalam diagram kelas. Tujuannya adalah

untuk menentukan kelas – kelas yang dibutuhkan, atribut-atribut dari setiap kelas – kelas

tersebut, dan hubungan antara kelas – kelas tersebut.

Diagram transisi digunakan untuk menjelaskan perubahan state (keadaan). Perubahan

apa yang terjadi, penyebab perubahan tersebut, dan kapan perubahan tersebut terjadi.

Dalam membangun perangkat lunak dengan menggunakan analisis berorientasi objek, selalu

diikuti dengan perancangan. Seperti halnya dengan analisis, perancangan berorientasi objek

juga menggunakan notasi UML.

Perancangan berorientasi objek dilakukan dalam beberapa tahapan, yaitu : pembuatan

diagram interaksi yang terdiri dari diagram sekuen dan diagram kolaborasi, pembuatan

diagram kelas rinci, pembuatan diagram klien – objek, dan pembuatan rancangan rinci

perangkat lunak.

Diagram interaksi terdiri atas diagram sekuen dan diagram kolaborasi. Pada dasarnya

diagram sekuen dan diagram kolaborasi memiliki isi yang tidak jauh berbeda. Perbedaannya

hanya terletak pada tujuan pembuatannya. Diagram sekuen lebih menekankan pada kronologi

pengiriman pesan – pesan. Sedangkan diagram kolaborasi lebih menekankan pada relasi antar

objek.

18

Diagram sekuen dan diagram kolaborasi dibuat berdasarkan pada skenario yang telah

disusun pada tahapan analisis beroreintasi objek, sehingga untuk setiap skenario akan

dibuatkan diagram sekuen dan diagram kolaborasinya.

Pada tahap analisis, diagram kelas hanya menggambarkan kelas – kelas dan atribut –

atributnya saja, belum menggambarkan aksi dan metodenya. Pada tahap perancangan diagram

kelas akan dijelaskan secara lebih lengkap, mulai dari kelas – kelas yang ada, atribut dari

setiap kelasnya hingga metodenya.

Suatu objek yang mengirimkan suatu pesan ke objek lainnya, akan menjadi client.

Sedangkan suatu objek yang menerima pesan dari objek lainnya akan menjadi object. Dalam

diagram klien-objek, pesan yang dikirimkan oleh client direpresentasikan dengan anak panah

dari client menuju ke object.

2.8 Frames Per Seconds (FPS)

Frames Per Seconds adalah frame rate atau banyaknya frame gambar yang dapat di

tampilkan setiap detiknya.

Frames Per Seconds dalam dunia komputer grafik berbeda dengan Frames Per

Seconds dalam dunia animasi atau film. Dalam animasi atau film, FPS sudah ditentukan oleh

pembuat animasi/ film, berapa Frame yang akan di tampilkan dalam satu detiknya. Sedangkan

dalam komputer grafik banyaknya Frames yang akan ditampilkan dalam setiap detiknya

sangat tergantung dari kinerja Hardware yang digunakan.

Jadi dalam komputer grafik, Frames Per Seconds yang ditampilkan tidak

ditentukan oleh si pembuat software seperti layaknya dalam animasi atau film,

melainkan tergantung kemampuan kinerja hardware untuk menampilkannya

19

BAB 3

PRAKTIKUM KOMPUTER GRAFIK

A. Grafik 2 Dimensi

1. Membuat Segitiga Pelangi

Scriptnya adalah sebagai berikut :

#include "GL/glut.h"

void display(void)

{

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // Menghapus layar

glLoadIdentity(); // me-nonaktifkan transformasi sebelumnya

glTranslatef(-0.5,0.0,0.0);//merubah titik tengah sumbu obyek

glBegin(GL_TRIANGLES);//membuat obyek segitiga

glColor3f(1.0,0.0,0.0);

glVertex3f( 0.0, 0.25, 0.0);

glColor3f(0.0,1.0,0.0);

glVertex3f(-0.25,-0.25, 0.0);

glColor3f(0.0,0.0,1.0);

glVertex3f( 0.25,-0.25, 0.0);

glEnd();

glFlush();

}

void init (void)

{

// Membuat warna background

glClearColor (1.0, 1.0, 0.0,0.0); //Warna background kuning (Red : 1, Green:1, Blue:0)

/* inisialisasi nilai tampilan (viewing values) */

glMatrixMode(GL_PROJECTION);

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

}

int main(int argc, char** argv)

{

glutInit(&argc, argv);

glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);

20

glutInitWindowSize (640, 480); //Ukuran window

glutInitWindowPosition (200, 200); //Posisi window

glutCreateWindow ("DEBI JUWANDA-SEGITIGA PELANGI");

init ();

glutDisplayFunc(display);

glutMainLoop();

return 0;

}

Hasil gambarnya sebagai berikut :

2. Gambar Rumah Berwarna


#include <gl/glut.h>

void myInit(void)

{

glClearColor(1.0,1.0,1.0,0.0); // membuat latar belakang putih

glPointSize(4.0); // ukuran titik 4 x 4 pixel


glLoadIdentity();

21

gluOrtho2D(0.0, 640.0, 0.0, 480.0);

}

void myDisplay(void)

{

glClear(GL_COLOR_BUFFER_BIT);// hapus layar

//Depan Rumah

glBegin(GL_POLYGON); //untuk membuat full warna

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

glVertex2i(100, 150);//titik kiri atas

glVertex2i(100, 50); //titik kiri bawah

glVertex2i(200, 50);//titik kanan bawah

glVertex2i(200, 150);//titik kanan atas

glEnd();

//Garis Depan Rumah

glBegin(GL_LINE_LOOP);






glEnd();

//Pintu Rumah

glBegin(GL_POLYGON);



glVertex2i(165, 50); //titik kanan bawah

glVertex2i(165, 110); //titik kanan atas

glVertex2i(130, 110); //titik kiri atas

glEnd();

//Garis Pintu Rumah



22





glEnd();

//Gagang Pintu

glBegin(GL_POINTS);

glVertex2i(134,73); //titik kiri bawah

glEnd();

//Samping Rumah




glVertex2i(200, 50);//titik kiri bawah



glEnd();

//Garis Samping Rumah







glEnd();

//Kaca Jendela kiri atas






23


glEnd();

//Garis Kaca Jendela kiri atas







glEnd();

//Kaca Jendela kanan atas







glEnd();

//Gairs Kaca Jendela kanan atas







glEnd();

//Kaca Jendela kanan bawah






24


glEnd();

//Garis Kaca Jendela kanan bawah







glEnd();

//Kaca Jendela kiri Bawah


glColor3f(1.0f,1.0f,.0f);





glEnd();

//Garis Kaca Jendela kiri Bawah







glEnd();

//Atap Depan Rumah



glVertex2i(100, 150); //titik kiri

glVertex2i(200, 150); //titik kanan

glVertex2i(150, 230); //titik atas

25

glEnd();

//Garis Atap Depan Rumah



glVertex2i(100, 150); //titik kiri

glVertex2i(200, 150); //titik kanan

glVertex2i(150, 230); //titik atas

glEnd();

//Atap Samping Rumah







glEnd();

//Garis Atap Samping Rumah







glEnd();

glFlush(); // mengirim semua output ke layar

}

void main(int argc, char** argv)

{

glutInit(&argc, argv); // inisialisasi toolkit

26

glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); // set modus display

glutInitWindowSize(640,480); // set ukuran window

glutInitWindowPosition(100, 150); // set posisi window di layar

//acuan sudut kiri-atas

glutCreateWindow("DEBI JUWANDA-Rumah Warna"); // buka screen window

glutDisplayFunc(myDisplay); // registrasi fungsi menggambr

myInit();

glutMainLoop(); // berulang terus-menerus

}

Hasilnya gambarnya sebagai berikut :

3. Menggambar Monas



typedef struct

{

int x,y;

}point2D_t;

typedef struct

{

float r,g,b;

27

}color_t;

void setColor(color_t col)

{

glColor3f(col.r, col.g, col.b);

}

void drawPolygon(point2D_t pnt[],int n)

{

int i;


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

{

glVertex2i(pnt[i].x,pnt[i].y);

}

glEnd();

}

void fillpolygon(point2D_t pnt[],int n,color_t color)

{

int i;

setColor(color);


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

{ glVertex2f(pnt[i].x, pnt[i].y);

}

glEnd();

}

void userdraw(void)

{

point2D_t

petakdasar[4]={{0,0},{0,80},{350,80},{350,0}};

28

color_t hijau ={0,1,0};

fillpolygon(petakdasar, 4, hijau);

drawPolygon(petakdasar,4);

point2D_t

tangga[4]={{10,10},{50,50},{310,50},{340,10}};

color_t merah ={1,0,0};

fillpolygon(tangga, 4, merah);

drawPolygon(tangga,4);

point2D_t

petaktengah1[4]={{110,50},{100,70},{260,70},{250,50}};

color_t kuning ={1,1,0};

fillpolygon(petaktengah1, 4, kuning);

drawPolygon(petaktengah1,4);

point2D_t

petaktengah2[4]={{100,70},{80,90},{280,90},{260,70}};

color_t kuning2 ={1,1,0};

fillpolygon(petaktengah2, 4, kuning2);


point2D_t

petaktengah3[4]={{80,90},{70,110},{290,110},{280,90}};


fillpolygon(petaktengah3, 4, kuning3);


point2D_t

batang2[4]={{160,510},{160,530},{200,530},{200,510}};

color_t hitam4 ={0,0,0};

fillpolygon(batang2, 4, hitam4);

29

drawPolygon(batang2,4);

point2D_t

batang[4]={{150,120},{170,520},{190,520},{210,120}};

color_t putih2 ={1,1,1};

fillpolygon(batang, 4, putih2);

drawPolygon(batang,4);

point2D_t

petaktengah4[4]={{70,110},{70,120},{290,120},{290,110}};


fillpolygon(petaktengah4, 4, hitam3);


point2D_t

segitiga[3]={{170,530},{180,580},{190,530}};


fillpolygon(segitiga, 3, kuning4);

drawPolygon(segitiga,3);

point2D_t

bayangbatang[4]={{160,530},{160,535},{200,535},{200,530}};


fillpolygon(bayangbatang, 4, putih3);

drawPolygon(bayangbatang,4);

point2D_t

bayangbatang2[4]={{200,510},{200,535},{203,535},{203,510}};


fillpolygon(bayangbatang2, 4, putih4);

drawPolygon(bayangbatang2,4);

30

point2D_t

tanggatgh1[4]={{140,10},{140,50},{150,50},{150,10}};

color_t hitam ={0,0,0};

fillpolygon(tanggatgh1, 4, hitam);

drawPolygon(tanggatgh1,4);

point2D_t

tanggatgh2[4]={{210,10},{210,50},{220,50},{220,10}};


fillpolygon(tanggatgh2, 4, hitam2);

drawPolygon(tanggatgh2,4);

point2D_t

tangga2[4]={{10,10},{50,50},{310,50},{340,10}};

drawPolygon(tangga2,4);

point2D_t

petaktengah11[4]={{110,50},{100,70},{260,70},{250,50}};


point2D_t

petaktengah22[4]={{100,70},{80,90},{280,90},{260,70}};


point2D_t

petaktengah33[4]={{80,90},{70,110},{290,110},{280,90}};


point2D_t

batang3[4]={{150,120},{170,520},{190,520},{210,120}};

drawPolygon(batang3,4);

31

point2D_t

anaktangga[4]={{150,40},{150,45},{210,45},{210,40}};

drawPolygon(anaktangga,4);

point2D_t

anaktangga2[4]={{150,30},{150,35},{210,35},{210,30}};

drawPolygon(anaktangga2,4);

point2D_t

anaktangga3[4]={{150,20},{150,25},{210,25},{210,20}};


point2D_t

anaktangga4[4]={{150,10},{150,15},{210,15},{210,10}};


}

void display(void)

{

//clear screen

glClear(GL_COLOR_BUFFER_BIT);

userdraw();

glutSwapBuffers();

}

int main(int argc, char **argv)

{

glutInit(&argc,argv);//Inisialisasi Toolkit

glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);

glutInitWindowPosition(100,100);

glutInitWindowSize(500,640);

glutCreateWindow("DEBI JUWANDA-MONAS");

glClearColor(0.0,0.0,1.0,0.0);

32

gluOrtho2D(0.,350.,-5.,600.);

glutIdleFunc(display);


glutMainLoop();

return 0;

}

Hasil gambarnya adalah sebagai berikut :

33

4. Menggambar Kursi dan Meja


#include<GL/glut.h>

#include<math.h>

typedef struct {

float x,y;

} point2D_t;

typedef struct {

int r,g,b;

} color_t;

void setColor ( color_t col )

{ glColor3f(col.r, col.g, col.b); }

void fillPolygon (point2D_t pnt[], int n, color_t color)

{

int i;

setColor(color);


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

{

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

}

glEnd();

}

void drawPolygon(point2D_t pnt[], int n)

{

int i;


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

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

glEnd();

}

34

void userdraw()

{ static int tic = 0;

point2D_t

meja[4]={{20,80},{60,160},{200,160},{160,80}};

color_t magenta ={1,0,1};

fillPolygon(meja,4, magenta);

//setColor(1,0,1);

drawPolygon(meja,4);

point2D_t

depankiri[4]={{20,20}, {20,80}, {30,80}, {30,20}};

color_t white ={1,1,1};

fillPolygon(depankiri,4, white);

//setColor(1,1,1);

drawPolygon(depankiri,4);

point2D_t

depankanan[4]={{150,20},{150,80},{160,80},{160,20}};

color_t green ={0,1,0};

fillPolygon(depankanan,4, green);

drawPolygon(depankanan,4);

point2D_t

belakangkiri[4]={{60,50},{60,80},{70,80},{70,50}};

color_t yellow ={1,1,0};

fillPolygon(belakangkiri,4, yellow);

drawPolygon(belakangkiri,4);

point2D_t

belakangkanan[4]={{190,50},{190,140},{200,160},{200,50}};

color_t red ={1,0,0};

fillPolygon(belakangkanan,4, red);

drawPolygon(belakangkanan,4);

35

point2D_t

kursi[4]={{220,80},{240,120},{320,120},{300,80}};

color_t birumuda ={0,1,1};

fillPolygon(kursi,4, birumuda);

//setColor(0,0,1);

drawPolygon(kursi,4);

point2D_t

depankiri1[4]={{220,20}, {220,80}, {230,80}, {230,20}};

color_t hijau ={0,1,0};

fillPolygon(depankiri1,4, hijau);

//setColor(0,1,0);

drawPolygon(depankiri1,4);

point2D_t

depankanan1[4]={{290,20},{290,80},{300,80},{300,20}};

color_t biru ={0,0,1};

fillPolygon(depankanan1,4, biru);

drawPolygon(depankanan1,4);

point2D_t

belakangkiri1[4]={{240,50},{240,80},{250,80},{250,50}};

color_t kuning ={1,1,0};

fillPolygon(belakangkiri1,4, kuning);

drawPolygon(belakangkiri1,4);

point2D_t

belakangkanan1[4]={{310,50},{310,100},{320,120},{320,50}};

color_t merah ={1,0,0};

fillPolygon(belakangkanan1,4, merah);

drawPolygon(belakangkanan1,4);

point2D_t

kursi1[4]={{300,80},{300,160},{320,200},{320,120}};

color_t putih ={1,1,1};

36

fillPolygon(kursi1,4, putih);

//setColor(1,1,1);

drawPolygon(kursi1,4);

point2D_t

kursi2[4]={{290,160},{310,200},{320,200},{300,160}};

color_t ungu ={1,0,1};

fillPolygon(kursi2,4, ungu);

//setColor(1,0,1);


point2D_t

kursi3[4]={{290,160},{290,80},{300,80},{300,160}};

color_t hijau1 ={0,1,0};

fillPolygon(kursi3,4, hijau1);

//setColor(0,1,0);


}

void display(void)

{ //clear screen


userdraw();

glutSwapBuffers(); }

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

glutInit(&argc,argv);//Inisialisasi Toolkit




glutCreateWindow("DEBI JUWANDA-KURSI&MEJA");


gluOrtho2D(0.,640.,-240.,240.);

glutIdleFunc(display);


37

glutMainLoop();

return 0;

}


B. GRAFIK 3 DIMENSI

1. Membuat Tabung



#include <math.h>

void cylinder(float alas,float atas,float tinggi);

void balok(float tebal,int ratiol,int ratiop);

double Loop=0;

GLfloat ambient_light[]={0.0,0.0,0.0,0.0};

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

GLfloat light_pos[]={0,0.0,0.0,4.0};

void Printer(void)

{

glClearColor(0.1,0.0,0.0,0.1); //putih

glShadeModel(GL_SMOOTH);

glViewport(10,100,480,480);


38

glLoadIdentity();

// 90.0, 1.5, 5.0, 100

gluPerspective(90.0,1.5,5.0,120.0);

glEnable (GL_DEPTH_TEST);

glPolygonMode (GL_FRONT_AND_BACK,GL_FILL);

glEnable (GL_LIGHTING);

//glLightModelfv (GL_LIGHT_MODEL_AMBIENT,ambient_light);

glLightfv (GL_LIGHT7,GL_DIFFUSE,source_light);

glLightfv (GL_LIGHT7,GL_POSITION,light_pos);

glEnable (GL_LIGHT7);

glEnable (GL_COLOR_MATERIAL);

glColorMaterial (GL_FRONT,GL_AMBIENT_AND_DIFFUSE);

}

void display(void)

{

glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

glPushMatrix();

// -3 -3 -50

glTranslatef(-3,-3,-50);

Loop++;

glRotatef( -Loop,1.0,1.0,1.0);//Sumbu yang berotasi

glTranslatef(0.0,0.0,10.0);//tabung

glColor3f(0.0,0.0,50.0);

cylinder(6,6,20);

glPopMatrix();

glFlush();

glutSwapBuffers();

}

void cylinder(float alas,float atas,float tinggi)

{

float i;

glPushMatrix();

39

glTranslatef(1.0,0.0,-alas/8);

glutSolidCone(alas,0,32,4);

for(i=0;i<=tinggi;i+=alas/24)

{

glTranslatef(0.0,0.0,alas/24);

glutSolidTorus(alas/4,alas-((i*(alas-atas))/tinggi),16,16);

}


glutSolidCone(atas,0,20,1);

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

glPopMatrix();

}

void balok(float tebal,int ratiol,int ratiop)

{

float i,j;

glPushMatrix();

for(i=0;i<ratiop;i++)

{

glTranslatef(-(ratiol+1)*tebal/2,0.0,0.0);

for(j=0;j<ratiol;j++)

{

glTranslatef(tebal,0.0,0.0);

glutSolidCube(tebal);

}

glTranslatef(-(ratiol-1)*tebal/2,0.0,tebal);

}

glPopMatrix();

}

void tampil()

{

display();

}

40

int main(int argc,char **argv)

{

glutInit(&argc,argv);

glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);//|GLUT_DEPTH);



glutCreateWindow("DEBI JUWANDA-TABUNG");



gluOrtho2D(-320., 320., -240.0, 240.0);

glutIdleFunc(tampil);

Printer();

glutMainLoop();

return(0);

}


41

2. Membuat Mobil



#include <math.h>

void cylinder(float alas,float atas,float tinggi);

void kerucut(float ngisor, float nduwur, float dowo);

void blok(float tebal,int ratiol,int ratiop);

GLfloat source_light[]={0.30,0.30,0.30,0.50};

double Loop,LoopAll=0;

bool on=false;

void Mobil(void)

{

glClearColor(1.0,9.0,1.0,0.0); //blackground

glShadeModel(GL_SMOOTH);


glLoadIdentity();

gluPerspective(50.0,1.5,10.0,1000.0);

glEnable (GL_DEPTH_TEST);

glPolygonMode (GL_FRONT_AND_BACK,GL_FILL);

glEnable (GL_LIGHTING);

glLightfv (GL_LIGHT7,GL_DIFFUSE,source_light);

glEnable (GL_LIGHT7);

glEnable (GL_COLOR_MATERIAL);

glColorMaterial (GL_FRONT_AND_BACK,GL_AMBIENT);

}

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

42

{

if (key==GLUT_KEY_F1)

{

if(on == false)

{

on=true;

}

else

{

on=false;

}

}

}

void display(void)

{

glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);


glLoadIdentity();

/*

Keterangan:

glTranslatef : coba nilainya diubah2 untuk menempatkan pada posisi yang tepat

dengan sumbu (x, y, z)

glRotated : coba nilainya diubah2 untuk memutar objek agar sesuai dengan

keinginan.

cylinder: untuk membentuk model tabung

*/

43

glTranslatef(0,0,-100);// besar kecilnya mobil

Loop++;

glRotatef(Loop,0.9,4.0,0.6);//mobil yang berotasi

glPushMatrix();//body

//glpushmatrix();

glColor3f(0.0,0.0,9.0);

blok(10, 3, 2);

glTranslatef(0, 9, 0);

blok(10, 3, 2);

glTranslatef(10, -10,0);

blok(10, 5.5, 2);

glRotatef(-35, 0, 0, 15);

glTranslatef(0, 7,0);

blok(10, 2, 2);

glTranslatef(2, 4.9,-2.5);

glColor3f(0.9,0.9,0.9);// warna kaca

blok(0.5, 20, 31);

glRotatef(180, 45, -45, 0);

//glTranslatef(0, 10,0);

//blok(3, 2, 5);

//cylinder(2,2,30);

//glTranslatef(-10, -10,0);

//glRotatef(90, 45,-45, 0);

//cylinder(2,2,30);

//glRotatef(90, -45, 90, 90);

//blok(5, 3, 2);

glPopMatrix();

44

glPushMatrix();//roda

glColor3f(0.0,0.0,0.0);

glTranslatef(20, -8,-7);

cylinder(5, 5,3);

glColor3f(0.0,0.0,0.0);

glTranslatef(-20, 8,7);

glTranslatef(-5, -8,-7);

cylinder(5, 5,3);

glColor3f(0.0,0.0,0.0);

glTranslatef(5, 8,7);

glRotatef(180,0,180,0);

glTranslatef(3,-8,-17);

cylinder(5, 5,3);

glColor3f(0.0,0.0,0.0);

glTranslatef(-3,8,17);

glTranslatef(-22,-8,-17);

cylinder(5, 5,3);

glColor3f(1.0,1.0,1.0);

glRotatef(90,1,0,0);

glTranslatef(8, 2.5,-15);

blok(2, 4, 5);


glTranslatef(0,-0.2,7);

blok(2, 4, 8);

45

glRotatef(0,0,0,0);

glTranslatef(0,19.2,0);

blok(2, 4, 8);


glTranslatef(7, 0,-8);

blok(2, 4, 5);

glColor3f(9.9,9.9,0.0);//lampu


glTranslatef(0,-3,20);

cylinder(2, 2,3);

glColor3f(9.9,9.9,0.0);//lampu

glRotatef(0,0,0,0);

glTranslatef(0,-12,0);

cylinder(2, 2,3);

glColor3f(0.0,0.0,0.0);//knalpot

glRotatef(0,0,0,0);

glTranslatef(0,0,-52);

cylinder(1, 1,3);

glColor3f(1.0,1.0,1.0);


glTranslatef(-8,3.5,-12);

blok(2, 4, 8);

glColor3f(9.0,0.0,0.0);//lampu atas

glRotatef(0,0,0,0);

glTranslatef(-8,28,0);

cylinder(1, 1,12);

46

glPopMatrix();

glFlush();

glutSwapBuffers();

}

void kerucut(float ngisor, float nduwur, float dowo)

{

float i;

glPushMatrix();

glTranslatef(1.0,0.0,ngisor/24);

glutSolidCone(ngisor,0,32,4);

for(i=0;i<=dowo;i+=ngisor/24)

{


glutSolidTorus(ngisor/4,ngisor-((i*(ngisor-nduwur))/dowo),16,16);

}


glutSolidCone(nduwur,0,20,1);


glPopMatrix();

}

void cylinder(float alas,float atas,float tinggi)

{

float i;

glPushMatrix();

glTranslatef(1.0,0.0,-alas/8);

glutSolidCone(alas,0,32,4);

for(i=0;i<=tinggi;i+=alas/24)

{

47


glutSolidTorus(alas/4,alas-((i*(alas-atas))/tinggi),16,16);

}


glutSolidCone(atas,0,20,1);


glPopMatrix();

}

void blok(float tebal,int ratiol,int ratiop)

{

float i,j;

glPushMatrix();

for(i=0;i<ratiop;i++)

{

glTranslatef(-(ratiol+1)*tebal/2,0.0,0.0);

for(j=0;j<ratiol;j++)

{

glTranslatef(tebal,0.0,0.0);

glutSolidCube(tebal);

}

glTranslatef(-(ratiol-1)*tebal/2,0.0,tebal);

}

glPopMatrix();

}

void tampil()

{

display();

}

int main(int argc,char **argv)

{

48


glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);//|GLUT_DEPTH);



glutCreateWindow("DEBI JUWANDA-MOBIL");



gluOrtho2D(-320., 320., -240.0, 240.0);

glutIdleFunc(tampil);

glutSpecialFunc(keyboard_s);//biar bisa dikendalikan dengan keyboard (F1 untuk

mati nyala)

Mobil();

glutMainLoop();

return(0);

}


49

3. Menggambar Kubus


#include <gl\glut.h>

#include <math.h>

typedef

struct {

float x,y,z;

} point3D_t;

typedef

struct {

float v[4];

} vector3D_t;

typedef struct {

int NumberofVertices;

short int pnt[32];

}face_t;

typedef struct {

int NumberofVertices;

point3D_t pnt[100];

int NumberofFaces;

face_t fc[32];

}object3D_t;

GLfloat vertices[][3] = {{0.0,0.0,1.50},

{0, 1,0.0},

{0.866, 0.5},

{0.866, -0.5},

{0, -1},

{-0.866, -0.5},

{-0.866 , 0.5},

{0.0,0.0,0.0}};

GLfloat normals[][3] = {{0.0,0.0,1.0},

{0, 1,0.0},

{0.866, 0.5},

50

{0.866, -0.5},

{0, -1},

{-0.866, -0.5},

{-0.866 , 0.5},

{0.0,0.0,0.0}};

GLfloat colors[][3] = {{0.0,0.0,0.0},

{1.0,0.0,0.0},

{1.0,1.0,0.0},

{0.0,1.0,0.0},

{0.0,1.0,1.0},

{0.0,0.0,1.0},

{1.0,0.0,1.0},

{1.0,1.0,1.0}};

void DrawPoints(int nNumPoints, GLfloat ctrlPoints[][3])

{

int i;

glPointSize(2.0f);

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

glBegin(GL_POINTS);

for(i = 0; i < nNumPoints; i++)

glVertex2fv(ctrlPoints[i]);

glEnd();

}

void polygon(int x, int y, int z )

{


glColor3fv(colors[x]);

glNormal3fv(normals[x]);

glVertex3fv(vertices[x]);

glColor3fv(colors[y]);

glNormal3fv(normals[y]);

51

glVertex3fv(vertices[y]);

glColor3fv(colors[z]);

glNormal3fv(normals[z]);

glVertex3fv(vertices[z]);

glEnd();

}

void colorkubus()

{

polygon(1,7,2);

polygon(2,7,3);

polygon(3,7,4);

polygon(4,7,5);

polygon(5,7,6);

polygon(6,7,1);

polygon(1,0,2);

polygon(2,0,3);

polygon(3,0,4);

polygon(4,0,5);

polygon(5,0,6);

polygon(6,0,1);

}

static GLfloat theta[] = {0.0,0.0,0.0};

static GLint axis = 2;

static GLdouble viewer[]= {0.0, 0.0, 5.0};

void display(void)

{

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

52

gluLookAt(viewer[0],viewer[1],viewer[2], 0.0, 0.0, 0.0, 1.0, 1.0, 0.0);

colorkubus();

//DrawPoints(7, vertices);

glFlush();

glutSwapBuffers();

}

void myReshape(int w, int h)

{

glViewport(0, 0, w, h);


glLoadIdentity();

gluPerspective(45.0, w/h, 2.0, 20.0);


glEnable(GL_DEPTH_TEST);

glDisable(GL_CULL_FACE);

// white background

glClearColor(1.0f, 1.0f, 1.0f, 1.0f );

}

void

main(int argc, char **argv)

{

53

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);

glutInitWindowSize(500, 500);

glutInitWindowPosition(250, 200);

glutCreateWindow("DEBI JUWANDA-KUBUS3D");

glutReshapeFunc(myReshape);


glutMainLoop();

}


54

4. Menggambar Bintang


#include "GL/glut.h"

#include <math.h>

struct point {

float x,y,z;

};

struct vektor {

float v[4];

};

struct matriks {

float m[4][4];

};

struct face {

int jumtitikons;

int indextitik[40];

};

struct objek {

int jumtitik;

point titik[40];

int jumsisi;

face sisi[30];

};

matriks mat;

float theta=0.5;

vektor point2vektor(objek balok, int i) {

vektor vec;

vec.v[0] = balok.titik[i].x;

vec.v[1] = balok.titik[i].y;

vec.v[2] = balok.titik[i].z;

vec.v[3] = 1;

return vec;

}

55

point vektor2point(vektor vec) {

point pnt;

pnt.x = vec.v[0];

pnt.y = vec.v[1];

pnt.z = vec.v[2];

return pnt;

}

matriks identitas(void) {

int i,j;

matriks mat;

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

for (j=0;j<4;j++) {

if (i==j)

mat.m[i][j] = 1;

else

mat.m[i][j] = 0;

}

}

return mat;

}

matriks translasi(float dx, float dy, float dz) {

matriks trans = identitas();

trans.m[0][3] = dx;

trans.m[1][3] = dx;

trans.m[2][3] = dx;

return trans;

}

matriks rotasiX(float theta) {

matriks rotate = identitas();

float cs = cos(theta);

float sn = sin(theta);

rotate.m[1][1] = cs;

rotate.m[1][2] = -sn;

rotate.m[2][1] = sn;

56


return rotate;

}

matriks rotasiY(float theta) {








return rotate;

}

matriks rotasiZ(float theta) {








return rotate;

}

vektor kali (matriks mat, vektor b) {

int i,j;

vektor c;

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

c.v[i] = 0;

for (j=0;j<4;j++) {

c.v[i]+= mat.m[i][j] * b.v[j];

}

}

return c;

57

}

matriks kalim (matriks a, matriks b) {

int i,j,k;

matriks c;

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

for (j=0;j<4;j++) {

c.m[i][j] = 0;

for (k=0;k<4;k++) {

c.m[i][j]+=a.m[i][k] * b.m[k][j];

}

}

}

return c;

}

matriks titling = kalim(rotasiX(theta),rotasiY(-theta));

vektor cross (vektor a, vektor b) {

vektor c;

c.v[0] = a.v[1]*b.v[2]-a.v[2]*b.v[1];

c.v[1] = a.v[2]*b.v[0]-a.v[0]*b.v[2];

c.v[2] = a.v[0]*b.v[1]-a.v[1]*b.v[0];

c.v[3] = 1;

return c;

}

void DrawPolygon(objek obj)

{

int i,j;

float r,g,b;

for(i=0;i<obj.jumsisi;i++)

{

r=1.0f; g=0.0f; b=0.0f;


if (i==0) { r=0.0f; g=0.0f; b=1.0f; }

if (i==1) { r=0.0f; g=0.0f; b=1.0f; }

58

if (i==2) { r=0.0f; g=0.0f; b=1.0f; }

if (i==3) { r=0.0f; g=0.0f; b=1.0f; }

if (i==4) { r=0.0f; g=0.0f; b=1.0f; }

if (i==5) { r=0.0f; g=0.0f; b=1.0f; }

if (i==6) { r=0.0f; g=0.0f; b=1.0f; }

if (i==7) { r=0.0f; g=0.0f; b=1.0f; }

if (i==8) { r=0.0f; g=0.0f; b=1.0f; }

if (i==9) { r=0.0f; g=0.0f; b=1.0f; }

if (i==10) { r=0.0f; g=0.0f; b=1.0f; }

if (i==11) { r=0.0f; g=0.0f; b=1.0f; }

glColor3f(r,g,b);

for(j=0;j<obj.sisi[i].jumtitikons;j++)

{

glVertex3f(obj.titik[obj.sisi[i].indextitik[j]].x,

obj.titik[obj.sisi[i].indextitik[j]].y,

obj.titik[obj.sisi[i].indextitik[j]].z);

}

glEnd();

}

}

void gambarbintang() {

int i;

vektor hasil,HslKali;

point HslTitik;

mat = titling;

objek balok =

{12,{{20,60,110},{10,0,70},{30,35,70},{70,20,70},{60,55,70},{70

,100,110},{25,80,80},{5,120,110},{-5,70,80},{-40,54,110},{-

10,30,70},{20,60,40}},

20,{{3,{11,2,1}},{3,{11,2,3}},{3,{11,4,3}},{3,{11,5,4}},{3,

{11,6,5}},{3,{11,7,6}},{3,{11,8,7}},{3,{11,9,8}},{3,{11,10,9}},{3,{11,1,10}},

59

{3,{0,2,1}},{3,{0,2,3}},{3,{0,4,3}},{3,{0,5,4}},{3,

{0,6,5}},{3,{0,7,6}},{3,{0,8,7}},{3,{0,9,8}},{3,{0,10,9}},{3,{0,1,10}}

}};

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

hasil = point2vektor(balok,i);

HslKali = kali(mat,hasil);

HslTitik = vektor2point(HslKali);

balok.titik[i] = HslTitik;

}

DrawPolygon(balok);

}

void UserDraw() {

glClearColor(0.0f,0.0f,0.0f,0.0f);


glRotatef(0.1f,0.0f,0.1f,0.0f);

gambarbintang();

glutSwapBuffers();

}

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





glutCreateWindow("DEBI JUWANDA-BINTANG");

glOrtho(-200.0f,200.0f,-200.0f,200.0f,-200.0f,200.0f);

glutIdleFunc(UserDraw);

glutDisplayFunc(UserDraw);

glutMainLoop();

}

61

BAB 4

KESIMPULAN

KESIMPULAN

1. Dari program Microsoft Visual C++ dapat ditampilkan gambar titik dan gari.

2. Gambar titik dan garis yang digabungkan menghasilkan gambar 2D dan 3D.

3. Dalam pembuatan grafik 3D ada beberapa hal yang perlu dilakukan yaitu mengubah

titik 3D menjadi vektor 3D.

4. Pada gambar 2D dapat diberi warna sesuai dengan yang diinginkan.

62

PENUTUPAssalamu’alaikum Wr. Wb.

Alhamdulillahirabbil’alamin saya ucapkan puji syukur kehadirat Allah Swt, berkat

Rahmat dan Karunia-Nya saya dapat menyelesaikan laporan praktikum ini dengan lancar.

Shalawat dan salam tidak lupa saya hadiahkan kepada Nabi Muhammad Saw, beserta

keluarganya. Saya berharap dengan adanya laporan ini dapat memberikan manfaat dan

pelajaran bagi orang lain khususnya diri saya sendiri.

Saya selaku penulis menyadari laporan praktikum ini masih jauh dari sempurna.

Namun saya telah berupaya untuk mendekati kesempurnaan itu. Kritik dan saran yang

membangun saya terima dengan senang hati, agar saya mampu belajar lebih baik lagi untuk

kedepannya. Tidak lupa saya ucapkan terima kasih kepada “Ibu INDRI

SULISTIANINGSIH, S.Kom”. yang telah memerikan materi-materi dan bimbingannya.

Semoga laporan ini dapat membantu pembaca dalam mendapatkan suatu informasi.

Amin Yaa Rabbal’alamin.

Wassalamu’alaikum Wr. Wb.

63

DAFTAR PUSTAKA1. http://id.wikipedia.org/wiki/Grafika_komputer

2. http://elib.unikom.ac.id/files/disk1/304/jbptunikompp-gdl-pauluskard-15185-3-

bab2.pdf

Laporan Komputer Grafik-Debi Juwanda

Documents

Transcript of Laporan Komputer Grafik-Debi Juwanda