Buku grafkom

Page i
KATA PENGANTAR
Segala puji syukur kami ucapkan atas kehadirat Tuhan
Yang Maha Esa dimana telah melimpahkan taufik serta
hidayahnya sehingga kami dapat menyelesaikan buku
Grafika Komputer Tingkat Pendidikan Perkuliahan untuk
Mahasiswa Program Studi Pendidikan Teknik Informatika.
Buku ini telah disusun untuk memberi kemudahan
bagi mahasiswa dalam mengenal dan memahami tentang
konsep OpenGL dan GLUT yang meliputi Pengantar Grafika
Komputer, OpenGL dan GLUT, Primitive Objek, Transformasi
Objek, Animasi, Interaksi Keyboard dan Mouse, Bangun 3
Dimensi, Lighting, dan Texture. Materi pada buku setiap
tema bahasan dapat dikembangkan mahasiswa melalui
keterampilan dan kreativitas dalam pemrograman
menggunakan OpenGL sehingga dapat mendukung
pengembangan dari kompetensi dasar itu sendiri.
Penulisan buku ini diharapkan mahasiswa mampu
mengembangkan kreativitasnya, baik secara mandiri maupun
kelompok melalui pemahaman mengenai konsep serta materi
yang ada pada setiap sub bahasan.
Pada kesempatan kali ini penulis mengucapkan
terima kasih kepada semua pihak yang telah memberi
bantuan sehingga buku ini dapat terselesaikan. Buku ini jauh

Page ii
dari sempurna, maka penulis sangat mengharapkan kritik dan
saran dalam rangka penyempurnaan penyusunan buku ini di
kemudian hari. Sehingga dapat memberi manfaat bagi
mahasiswa Universitas Negeri Malang pada semua bidang
keahlian khususnya bidang Teknik Informatika .
Penulis,

Page
iii
DAFTAR ISI
KATA PENGANTAR.....................................................................i
DAFTAR ISI...............................................................................iii
BAB 1........................................................................................1
PENGANTAR GRAFIKA KOMPUTER...........................................1
A. Pengertian Grafika Komputer……………………………………1
B. Sejarah Grafika Komputer…………………………………………2
C. Peranan dan Penggunaan Grafika Komputer…………….3
E. Teknologi Display Komputer Grafik………………………….15
BAB 2......................................................................................21
OPENGL dan GLUT..................................................................21
A. SEJARAH OPENGL…………………………………………………….21
B. PENGENALAN OPENGL…………………………………………….22
C. EVOLUSI OPENGL…………………………………………………….24
D. GLUT (GL Utility Toolkit)………………………………………….25
E. CARA KERJA OPENGL……………………………………………….26
F. SET UP PROJECT BARU…………………………………………….30
BAB 3......................................................................................34
P R I M I T I F O B J E K...........................................................34
A. Definisi Primitif Objek……………………………………………..34
B. Algoritma Pembentukan Objek……………………………….40
C. Contoh Program Primitif Objek………………………………46
D. Latihan……………………………………………………………………48

Page
iv
BAB 4......................................................................................50
Transformasi Objek................................................................50
A. Translasi………………………………………………………………….53
B. Rotate……………………………………………………………………..56
C. Scale………………………………………………………………………..66
D. Tutorial Urutan Transformasi………………………………….69
E. Implementasi Transformasi Objek…………………………..76
BAB 5......................................................................................85
ANIMASI .................................................................................85
A. ANIMASI, SEJARAH DAN PERKEMBANGANNYA……….85
B. JENIS-JENIS ANIMASI………………………………………………96
C. Konsep Animasi pada GLUT…………………………………..106
BAB 6....................................................................................116
INTERAKSI KEYBOARD ..........................................................116
A. STRUKTUR TOMBOL PADA KEYBOARD…………………..117
B. PEMETAAN (MAPPING)……………………………………….. 118
C. JENIS-JENIS KEYBOARD………………………………………….119
D. FUNGSI TOMBOL KEYBOARD KOMPUTER………………125
E. KONSEP INPUTKEYBOARD PADA GLUT-KEY BIASA DAN
SPECIAL KEY………………………………………………………….126
BAB 7 ...................................................................................136
INTERAKSI OBJEK 2D (MOUSE FUNCTION)...........................136
A. SEJARAH MOUSE dan JENIS MOUSE………………………136
B. FUNGSI MOUSE……………………………………………………..148

Page v
C. KONSEP MOUSE PADA GLUT………………………………..149
D. CONTOH PROGAM PENERAPAN MOUSE PADA
GLUT…………………………………………………………………….152
BAB 8....................................................................................162
OBJEK 3D ..............................................................................162
A. Pengertian Objek 3 Dimensi………………………………….162
B. Objek 3 Dimensi……………………………………………………163
C. Alur Proses Rendering Grafis 3D……………………………166
D. Sistem koordinat 3D……………………………………………..168
E. Primitive 3D………………………………………………………….169
F. Transformasi Objek 3 Dimensi………………………………172
G. Contoh Program dalam Open GL…………………………..177
H. Contoh Implementasi Objek 3 Dimensi dalam Open
GL…………………………………………………………………………208
BAB 9....................................................................................214
LIGHTING..............................................................................214
A. Pendahuluan…………………………………………………………214
B. Pencahayaan pada OpenGL dan Dunia Nyata………..216
C. Cahaya Ambient, Diffuse, dan Specular…………………219
D. Implementasi Pencahayaan (lighting) pada
OpenGL………………………………………………………………..224
E. Contoh Program……………………………………………………226
BAB 10..................................................................................260
TEXTURE...............................................................................260

Page
vi
A. Pendahuluan…………………………………………………………260
B. Konsep Texture Mapping………………………………………262
C. Teknik-teknik Realisme dalam Kompuer Grafik……..263
D. Teknik-teknik dalam Geometri………………………………267
E. Mip maps………………………………………………………………270
F. Texture maping……………………………………………………..273
G. Object Texture………………………………………………………274
H. Contoh penerapan material dan tekstur……………….275
DAFTAR PUSTAKA.................................................................336
KONTRIBUTOR………………………………………………………………….337

BAB 1
PENGANTAR GRAFIKA KOMPUTER
A. Pengertian Grafika Komputer
Menurut Suyoto (2003), grafika komputer (Computer
Graphic) dapat diartikan sebagai seperangkat alat yang terdiri
dari hardware dan software untuk membuat gambar, grafik
atau citra realistik untuk seni, game komputer, foto dan film
animasi. Sistem grafika komputer dapat dijalankan dengan
komputer pribadi (Personal Computer) atau workstation.
Grafika komputer semakin lama semakin pesat
perkembangannya sehingga definisi dari grafika komputer
dapat diartikan sebagai suatu studi tantang bagaimana
menggambar (membuta grafik) dengan menggunakan
komputer dan manipulasinya (merubah sedikit/transformasi/
animasi).
Pengertian grafik berbeda dengan image/citra, image
adalah gambar yang diperoleh dengan alat pengambil
gambar, sperti kamera, scanner, dll. Sedangkan grafik adalah
gambar yang dibuat dengan cara tertentu, yaitu cara yang ada
di grafik komputer. Grafik dan image termasuk
picture/gambar.

B. Sejarah Grafika Komputer
Sejarah grafika komputer telah dimulai sejak jaman
dahulu kala yaitu ketika bangsa Mesir, Roma dan Yunani
berkomunikasi secara grafik. Beberapa lukisan terdapat pada
batu nisan orang Mesir dapat dikatakan sebagai lukisan
teknik. Perkembangan grafika komputer secara sederhana
dapat dibagi menjadi empat fase, yaitu :
1. Fase Pertama (1950) era grafika komputer interaktif
- Tidak begitu cepat karena teknologi, jumlah dan
harga komputer tidak mendukung.
- MIT berhasil mengembangkan komputer whirlwind
dengan tabung sinar katode (Cathode Ray Tube-CRT).
- Sudah menggunakan pena cahaya (light pen) yaitu
sebuah alat input bentuknya seperti pensil yang
digunakan untuk memilih posisi, menunjuk sesuatu
dan menggambar pada layar dengan pendeteksian
cahaya yang datang dari titik-titik pada layar CRT.
- Telah ada alat pemrograman otomatis (Automatic
Programming Tool)
2. Fase Kedua (1960) Jaman Penelitian/Riset Grafika
Komputer Interaktif
- Grafika interaktif modern telah ditemukan oleh Ivan
Sutherland.

Mengembangkan teknik interaktif dengan sarana
keyboard dan pena cahaya.
- Sejumlah projek penelitian dan produk Computer
Aided Design/Manufacturing (CAD/CAM) telah
muncul.
3. Fase Ketiga (1970)
Grafika komputer interaktif telah digunakan oleh sektor
industri, pemerintah dan ilmuawan untuk memperbaiki
kualitas desain produk secara cepat dan mudah.
4. Fase Keempat (1980-1990)
- Penelitian pada dekade ini bertumpu pada
penggabungan dan pengotomasasian pelbagai unsur
desain dan pemodelan pejal (solid modelling).
- Teknologi hibrid mulai diperkenalkan. Teknologi ini
berguna untuk penggabungan objek pejal dengan
permukaan.
C. Peranan dan Penggunaan Grafika Komputer
Grafika komputer telah menunjukkan kemajuan yang
pesat dalam pengembangan berbagai aplikasi untuk
menghasilkan gambar. Walaupun pada awalnya aplikasi
dalam sains dan engineering memerlukan peralatan yang
mahal, perkembangan teknologi komputer memberikan

kemudahan penggunaan komputer sebagai alat bantu aplikasi
grafik komputer interaktif. Pada saat ini grafika komputer
digunakan secara rutin dibidang ilmu pengetahuan, teknik,
kedokteran, bisnis, industri, pemerintahan, seni, hiburan,
pendidikan, periklanan, dan lain sebagainya.
1. Desain
Dalam proses desain grafika komputer terutama
digunakan pada sistem engineering dan arsitektur. Pada
umumnya Computer Aided Design (CAD) digunakan untuk
pembuatan desain mobil, bangunan, pesawat terbang, kapal,
komputer, tekstil, dan lain-lain. Pada beberapa aplikasi
desain, objek ditampilkan dalam bentuk wireframe, dimana
diperlihatkan keseluruhan bentuk, dengan bentuk internal
dari objek tersebut. Penggunaan wireframe bermanfaat bagi
designer untuk melihat isi dari objek tersebut. Contoh
perangkat lunak yang digunakan yaitu AutoCAD, 3D Studio
Max, dan Maya.
Gambar 1.1. Contoh Penggunaan 3D dengan 3Ds Max

2. Grafik Presentasi
Bidang lain yang berhubungan dengan grafika
komputer adalah grafik presentasi yang dapat berupa
cetakan, slide, dan transparansi. Grafik presentasi biasanya
digunakan untuk melengkapi laporan keuangan, sains, data
ekonomi, dan lain-lain. Bentuk grafik presentasi tersebut
adalah chart, bar chart, pie chart, dan lain-lain.
Gambar 1.2. Grafik Presentasi
3. Computer Art
Metode grafika komputer digunakan dalam aplikasi
commercial art dan fine art. Seniman menggunakan
bermacam-macam perangkat lunak grafik, dan kadang
dilengkapi dengan perangkat keras khusus.
Contoh perangkat lunak yang digunakan yaitu Corel
Draw, Adobe Photoshop, Adobe Ilustrator, Macromedia, dan
sebagainya.

Gambar 1.3. Adobe Photoshop CS
4. Film
Pada pembuatan film layar lebar, komputer banyak
digunakan untuk menunjang proses pemodelan, visualisasi,
dan editing. Misalnya dalam proses special effect, film
animasi. “Toy Story” (1995), merupakan film pertama yang di
produksi oleh The Walt Disney Company secara penuh
menggunakan teknologi komputer dan ilmu Grafik komputer.
Sejak saat itu, mulailah studio animasi digital lain untuk
membuat film serupa. diantaranya Blue Sky Studios (Fox),
DNA Productions (Paramount Pictures and Warner Bros.),
Onation Studios (Paramount Pictures), Sony Pictures
Animation (Columbia Pictures) dan DreamWorks.

Gambar 1.4. Toy Story, salah satu contoh film animasi.
Kunci pembuatan film-film ini adalah sebuah aplikasi
komputer grafis yang disebut computer generated imagery
(CGI). Dengan perangkat lunak ini bisa diciptakan gambar 3D
lengkap dengan berbagai efek yang dikehendaki. Beberapa
software CGI populer antara lain Art of Illusion (bisa di-
download di sourceforce.net), Maya, Blender, dan lain-lain.
Salah satu efek CGI dalam film yang kurang dikenal,
namun penting, adalah digital grading. Dengan efek ini warna
asli hasil shooting direvisi menggunakan perangkat lunak
untuk memberikan kesan sesuai dengan skenario. Contohnya
wajah Sean Bean (pemeran Boromir) dalam “The Lord of the
Rings: the Two Tower” ketika mati dibuat lebih pucat. Jadi,
tidak dengan trik kosmetik, tetapi dengan polesan komputer.

5. Televisi
Grafika komputer dalam tayangan televisi juga dapat
berupa iklan, tampilan tiap acara, dan lainnya.
6. Video musik
Produksi video musik tidak terlepas dari grafika
komputer, diantaranya pembuatan promosi, cover atau
kemasan video, serta animasi yang mengiringi setiap lagu.
Proses editing video dan audio dilakukan dengan
menggunakan komputer.
7. Game
Berbagai game dapat dijalankan pada komputer PC,
video player dengan monitor TV, dan ada yang menggunakan
perangkat keras khusus. Alat input interaktif seperti mouse
dan joystick diperlukan untuk aplikasi game.
Gambar 1.5. Game “Angry Bird Seasons”
8. Pendidikan
Komputer sebagai alat bantu pendidikan (Computer
Assisted Instruction) sudah cukup dikenal. Komputer juga

digunakan pada aplikasi-aplikasi bukan pengajaran untuk
menunjang sistem pendidikan, seperti mengolah data,
mencatat kehadiran, dan sebagainya. Aplikasi bidang
pengajaran dengan komputer sebagai alat bantunya,
diantaranya:
- Drill and Practice (latih dan praktek)
- CAI menggantikan pengajar untuk memberikan latihan
kepada siswa
- Tutorial (penjelasan) yakni sistem komputer digunakan
untuk menyampaikan materi ajaran
- Simulasi digunakan untuk mengkaji permasalahan yang
rumit pada bidang biologi, transportasi, ekonomi, dan lain-
lain.
Gambar 1.6. Aplikasi bidang pengajaran mata pelajaran
Matematika
Aplikasi bidang bukan pengajaran dengan alat bantu
komputer, diantaranya :

Computer Assisted Testing (Ujian Berbantuan Komputer):
komputer digunakan untuk sarana ujian.
- Computer Assisted Guidance (Pengarahan Berbantuan
Komputer): komputer digunakan sebagai sarana untuk
mencari informasi yang diperlukan.
- Computer Managed Instruction : komputer digunakan
untuk merencanakan pelajaran, evaluasi belajar, serta
memantau prestasi siswa.
9. Visualisasi
Ilmuwan, ahli kedokteran, analis bisnis, dan lain-lain
sering menggunakan banyak informasi suatu masalah dalam
mempelajari perilaku proses tertentu. Informasi tersebut
berisi ribuan data untuk memberikan gambaran hasil suatu
evaluasi. Data tersebut diproses sehingga mendapatkan hasil
dalam bentuk visual.
Virtual Reality adalah lingkungan virtual yang seakan-
akan begitu nyata di mana user dapat Berinteraksi dengan
objek-objek dalam suasana atau lingkungan 3 dimensi.
Perangkat keras khusus digunakan untuk memberikan efek
pemadangan 3 dimensi dan memampukan user beriteraksi
dengan objek-objek yang ada dalam lingkungan. Contoh:
aplikasi VR parachute trainer yang digunakan oleh U.S. Navy
untuk latihan terjun payung. Aplikasi ini dapat memberikan
keutungan berupa mengurangi resiko cedera selama latihan,
mengurangi biaya penerbangan, melatih perwira sebelum
melakukan terjun payung sesungguhnya.

Sedangkan visualisasi data adalah teknik-teknik
membuat image, diagram, atau animasi untuk
Mengkomunikasikan pesan. Visualisasi telah menjadi cara
yang efektif dalam mengkomunikasikan baik data atau ide
abstrak maupun nyata sejak permulaan manusia. Contoh:
visualisasi dari struktur protein, strutur suatu website,
visualisasi hasil data mining.
Contoh pengolahan citra dalam kehidupan sehari – hari :
1.Bidang kesehatan, digunakan untuk rontgen tubuh manusia
yang berfungsi untuk mengetahui ada atau tidaknya kelainan
di tubuh.
2.Bidang visual, bisa digunakan untuk pemotretan lewat
satelit, GPS, foto kamera dan lain-lain
10. Image Processing
Image processing (pengolahan citra) merupakan
teknik untuk memodifikasi atau menginterpretasi gambar
yang ada, seperti foto dan rangkaian gambar film. Dua macam
prinsip pengolahan citra adalah :
- Meningkatkan kualitas gambar.
- Memberikan persepsi dari informasi visual, seperti pada
robotik.
Untuk melakukan pengolahan citra, pertama-tama
membuat digitasi dari foto atau membuat foto menjadi file
image. Selanjutnya metode digital dapat digunakan untuk
memodifikasi gambar sehingga mendapatkan kualitas yang
baik.

11. Graphical User Interface (GUI)
Graphical interface (antarmuka grafik) banyak
digunakan dalam setiap aplikasi. Komponen utamanya adalah
window manager, dimana pengguna dapat mengatur
tampilan dari window. Interface juga menampilkan menu dan
icon untuk mempercepat pemilihan yang dilakukan oleh
pengguna.
D. Sistem Grafika Komputer
Graphics library/package (contoh: OpenGL) adalah
perantara aplikasi dan display hardware (Graphics System).
Application program memetakan objek aplikasi ke
tampilan/citra dengan memanggil graphics library. Hasil dari
interaksi user menghasilkan/modifikasi citra.
Penggunan user mengendalikan isi,struktur, dan
kemunculan objek serta menampilkan citra melalui suatu
komponen dasar visual feedback.
Komponen Dasar Sistem Grafik Interaktif meliputi:
- Masukan : mouse,tablet,dan stylus,peralatan
feedback,scanner,live video stream,dll.
- Proses & Penyimpanan .
- Keluaran : layar, printer berbasis kertas, perekam video,
non-linear, editor, dll.

Gambar Komponen Sistem Pengolah Citra Digital
Sistem Interaktif Grafik Pertama, Sketchpad, ditemukan oleh
Ivan Sutherland (1963) di MIT.
 1960, William Fetter, dimulainya pembuatan model
animasi

 1963, Ivan Shutherland (MIT), menggunakan sketcpad
(Manipulasi langsung, CAD), alat untuk menampilkan
vector.
 1968, Evans & Shutherland.
 1970, Pierre B’eezier, pengembangan kurva B’eezier.
 1972 Ditayangkannya film Westworld, sebagai film
pertama yang menggunakan animasi komputer.
 1974, Ed Catmull mengembangkan z-buffer.
 1976, Jim Blinn mengembangkan texture dan bumo
mapping
 1977, Film terkenal Star Wars menggunakan grafik
komputer
 1979, Turner Whitted mengembangkan algoritma ray
tracing.
 Pertengahan tahun 70an – 80an, pengembangan Quest
for realism radiosity.
 1982, Pengembangan grafik untuk menampilkan
partikel.
 1984, Digunakan untuk menggantikan model fisik pada
film The Last Star Fighter.
 1986, Film hasil produksi grafik komputer di masukkan
dalam academy award, Luxo Jr. (PIXAR).
 1989, Film Tin Toy (PIXAR) memenangkan Academy
Award.

 1995, Produksi film 3D animasi panjang pertama “Toy
Story” (PIXAR & DISNEY).
 Akhir tahun 90an, teknologi visualisasi interaktif untuk
ilmu pengetahuan dan kedokteran.
 Tahun 2000 ditemukan perangkat keras untuk real-
time photorealistic dan rendering image.
E. Teknologi Display Komputer Grafik
Sejak terjadi pengembangan yang pesat dari tahun ke
tahun grafik komputer di gunakan sebagai teknologi yang
interaktif dalam pengembangan, maupun penggunaannya.
sampai sekrang ini komputer grafik dapat di sinkroinkan
dengan suara dalam pembelajaran multimedia. Beberapa
software yang di gunakan untuk memanipulasi grafik adalah
blender, 3D xmax, CorelDraw, Photoshop, Inkscape, Gimp, dll.
Penggunaan alat utama untuk menampilkan output pada
system grafika adalah video monitor. Operasi pada sebagian
besar video monitor berdasarkan perancanangan Cathode
Ray Tube(CRT).
Cathode Ray Tubes (CRT) mampu menampilkan
vektor dan raster dan merupakan awal mula di mana
teknologi komputer mengunakan user interface untuk
kemudahan dengan pengguna. Tidak hanya itu CRT juga
merupakan pengembangan awal dari teknologi televisi.
Untuk menggambar pada screen, komputer
membutuhkan sinkronisasi dengan pola scanning dari raster.

Diperlukan memori khusus untuk buffer citra dengan scan out
sinkronous ke raster yang disebut framebuffer . Warna CRT’s
lebih rumit/sulit. Menggunakan pola warna phospors di layer:
 Delta electron gun arrangement
 In-line electron gun arrangement
Sebuah electron gun memancarkan elektron, melalui
focusing system (sistem untuk menentukan fokus), dan
deflection system (sistem untuk mengatur pembelokan)
sehingga pancaran elektron mencapai posisi tertentu dari
lapisan fosfor pada layar. Kemudian, fosfor memancarkan
sinar kecil pada setiap posisi yang berhubungan dengan
pancaran elektron. Sinar yang dipancarkan dari fosfor
cepat hilang, maka diperlukan pengaturan supaya fosfor
tetap menyala. Hal ini dilakukan dengan cara refreshing,
yaitu menembakkan elektron berulang kali pada posisi yang
sama.
Focusing system pada CRT diperlukan untuk mengarahkan
pancaran elektron pada suatu titik tertentu dari lapisan
fosfor. Pengaturan fokus dapat dilakukan pada electric dan
magnetic field. Dengan electronic focusing, pancaran

elektron melewati metal electrostatic yang berfungsi
sebagai lensa untuk mengatur fokus dari pancaran
elektron ke tengah monitor.
Resolusi adalah jumlah titik per centimeter yang dapat
ditempatkan menurut arah horizontal dan vertikal.
Resolusi tergantung pada tipe fosfor, intensitas yang
ditampilkan, serta focusing dan deflection system.
Liquid Crystal Display (LCD) mampu menampilkan
gambar labih halus dengan menggunakan teknologi molekul
kristal yang teranyam dan mempolarisasi cahaya. LCD
berfungsi sebagai katup cahaya yang tergantung pada cahaya
dari luar. LCD biasanya digunakan untuk suatu system yang
kecil, seperti computer laptop dan kalkulator.
Plasma, mempunyai cara kerja yang mirip dengan lampu
neon. kapsul yang berisi gas yang di gerakkan oleh medan
listrik menghasilkan UV. UV menggerakkan phosfor dan
phosfor menghasilkan beberapa warna.
Alat utama untuk menampilkan output pada sistem
grafika adalah video monitor. Operasi sebagian besar video

monitor menggunakan Teknologi Cathode Ray Tube
(CRT) walaupun ada juga yang menggunakan teknologi lain.
Secara garis besar teknologi CRT dapat digambarkan sebagai
berikut :
a. Refreshing, yaitu menembakkan elektron
berulang ulang pada posisi yang sama untuk
menjaga agar fosfor tetap menyala.
b. Persistence, yaitu berapa lama suatu jenis
fosfor dapat menyala (jenis fosfor ada yang
low persistence dan ada yang high
persistence)
c. Resolution / resolusi, yaitu jumlah
maksimum titik yang dapat dihasilkan tanpa
tupang tindih (horisontal x vertikal).
d. Aspec Ratio, yaitu perbandingan jumlah titik
vertikal dan horisontal.
e. Pixel, yaitu satu titik di layar monitor.
Raster Scan Display
Jenis monitor ini paling banyak digunakan, yaitu
pancaran elektron bergerak ke seluruh layar baris per baris
dari atas ke bawah. (digunakan oleh TV).

Random Scan Display
Pada random scan display pancaran elektron hanya
diarahkan ke bagian layar dimana gambar akan dibuat disebut
juga Vektor Display, strock display atau calligraphic display.
Color Monitor CRT
Color CRT menampilkan gambar dengan kombinasi fosfor
yang memancarkan sinar warna yang berbeda. Dengan
menggabungkan sinar dari fosfor yang berbeda, tingkat dari
warna yang berbeda.
Terdapat 2 teknik dasar untuk mendapatkan warna, yaitu :
a. Beam Penetration
Dua lapisan fosfor (biasanya red dan green) dilapiskan
pada bagian dalam, dan warna yang dihasilkan
tergantung dari seberapa besar pancaran elektron
menembus fosfor, tetapi warna yang dihasilkan
kurang banyak dan kurang baik jika dibandingkan
dengan teknologi lain. Digunakan untuk gambar
berwarna dengan random scan monitor,
b. Shadow Mask
Shadow mask mempunyai tiga macam fosfor warna
pada titik pixel (red, green dan blue). CRT mempunyai
3 elektron gun untuk tiap warna, warna dihasilkan
dari perbedaan intensitas dari tiap-tiap elektron gun.
Color CRT dalam sistem grafika dirancang sebagai RGB
monitor. Monitor ini menggunakan metode shadow mask
dan mengambil tingkat intensitas untuk setiap electron
gun (red, green, blue) langsung dari sistem komputer
tanpa pemrosesan antara.

Flat Planel Display
Merupakan video display merupakan kelas video yang
mengurangi volume, berat dan penggunaan power jika
dibandingkan CRT, FPD digunakan untuk kalkulator, Video
game saku, TV kecil, Laptop dll.
Terdapat 2 jenis :
a. Emmisive Display = mengkonversikan energi listrik menjadi
sinar. Cth. Plasma Panel.
b. Nonemissive Display / Noneemitters = menggunakan efek
optik untuk mengkonversikan sinar matahari atau sinar dari
sumber lain ke dalam pola grafik. Cth. Liquid Crystal display

BAB 2
OPENGL dan GLUT
A. SEJARAH OPENGL
Tahun 1980-an, mengembangkan perangkat lunak
yang dapat berfungsi dengan berbagai hardware grafis adalah
tantangan nyata. Pengembang perangkat lunak antarmuka
dan kebiasaan menulis driver untuk setiap perangkat keras.
Ini mahal dan mengakibatkan banyak duplikasi usaha.
Pada awal 1990-an, Silicon Graphics (SGI) adalah
seorang pemimpin dalam grafis 3D untuk workstation.
Mereka IRIS GL API dianggap keadaan seni dan menjadi
standar industri de facto, membayangi terbuka berbasis
standar PHIGS. Ini karena GL IRIS dianggap lebih mudah
digunakan, dan karena itu mendukung modus langsung
rendering. By contrast, Sebaliknya, PHIGS dianggap sulit untuk
digunakan dan ketinggalan zaman dalam hal fungsionalitas.
SGI’s pesaing (termasuk Sun Microsystems, Hewlett-
Packard dan IBM) juga dapat membawa ke pasar 3D
hardware, didukung oleh ekstensi yang dibuat pada PHIGS
standar. Hal ini pada gilirannya menyebabkan pangsa pasar
SGI untuk melemahkan karena lebih banyak hardware grafis
3D pemasok memasuki pasar. Dalam upaya untuk
mempengaruhi pasar, SGI memutuskan untuk mengubah
IrisGL API menjadi standar terbuka. SGI menganggap bahwa
IrisGL API itu sendiri tidak cocok untuk membuka karena
masalah lisensi dan paten. Juga, IrisGL memiliki fungsi-fungsi
API yang tidak relevan dengan grafis 3D. Sebagai contoh,

termasuk windowing, keyboard dan mouse API, sebagian
karena dikembangkan sebelum Sistem X Window dan Sun’s
NEWS sistem dikembangkan. Selain itu, SGI memiliki sejumlah
besar pelanggan perangkat lunak; dengan mengubah ke
OpenGL API mereka berencana untuk mempertahankan
pelanggan mereka terkunci ke SGI (dan IBM) hardware untuk
beberapa tahun sementara pasar dukungan untuk OpenGL
matang. Sementara itu, SGI akan terus berusaha untuk
mempertahankan pelanggan mereka terikat pada hardware
SGI dengan mengembangkan maju dan kepemilikan Iris
Inventor dan Iris Performer pemrograman API. Akibatnya, SGI
merilis standar OpenGL.
B. PENGENALAN OPENGL
OpenGL adalah sebuah program aplikasi interface
yang digunakan untuk mendefinisikan komputer grafis 2D dan
3D. Program lintas-platform API ini umumnya dianggap
ketetapan standar dalam industri komputer dalam interaksi
dengan komputer grafis 2D dan juga telah menjadi alat yang
biasa untuk digunakan dengan grafis 3D. Singkatnya, Open
Graphics Library, OpenGL menghilangkan kebutuhan untuk
pemrogram untuk menulis ulang bagian grafis dari sistem
operasi setiap kali sebuah bisnis akan diupgrade ke versi baru
dari sistem. Fungsi dasar dari OpenGL adalah untuk
mengeluarkan koleksi perintah khusus atau executable ke
sistem operasi. Dengan demikian, program ini bekerja dengan
perangkat keras grafis yang ada yang berada pada hard drive
atau sumber tertentu lainnya. Setiap perintah dalam
dirancang untuk melakukan tindakan tertentu, atau memulai
efek khusus tertentu yang terkait dengan grafis.

OpenGL adalah suatu spefikasi grafik yang low-level
yang menyediakan fungsi untuk pembuatan grafik primitif
termasuk titik, garis, dan lingkaran. OpenGL digunakan untuk
keperluan-keperluan pemrograman grfis.OpenGL bersifat
Open-Source, multi-platform dan multi-language serta
digunakan mendefinisikan suatu objek, baik objek 2 dimensi
maupun objek 3 dimensi. OpenGL juga merupakan suatu
antarmuka pemrograman aplikasi (application programming
interface (API) yang tidak tergantung pada piranti dan
platform yang digunakan, sehingga OpenGL dapat berjalan
pada sistem operasi Windows, UNIX dan sistem operasi
lainnya.
OpenGL pada awalnya didesain untuk digunakan pada
bahasa pemrograman C/C++, namun dalam
perkembangannya OpenGL dapat juga digunakan dalam
bahasa pemrograman yang lain seperti Java, Tcl, Ada, Visual
Basic, Delphi, maupun Fortran. Namun OpenGL di-package
secara berbeda-beda sesuai dengan bahasa pemrograman
yang digunakan. Oleh karena itu, package OpenGL tersebut
dapat di-download pada situs http://www.opengl.org sesuai
dengan bahasa pemrograman yang akan digunakan.
OpenGl melayani dua tujuan :
 Untuk menyembunyikan kompleksitas dari interfacing
dengan berbagai 3D accelerators, memamerkan oleh
programmer dengan satu, seragam API.
 Untuk menyembunyikan kemampuan yang berbeda
dari hardware platform, oleh semua yang memerlukan

mendukung implementasi penuh fitur opengl set
(menggunakan software emulation jika diperlukan).
C. EVOLUSI OPENGL
Pendahulu openGL adalah IRIS GL dari Silicon
Grapics.Padamulanya adalah library grafis 2D,yang berefolusi
menjasi API program 3D untuk workstation canggih milik
perusahaan tersebut.
OpenGL adalah hasil dari usaha SGI untuk
mengembangkan dan meningkatkan kemampuan portable
IRIS.API grafis yang baru akan menawarkan kemampuan IRIS
GL tetapi dengan standar yang lebih terbuka,dengan input
dari pembuatan hardware lain dan sistem operasi lain,dan
akn memudahkan adaptasi ke hardware platform dan sistem
operasi lain.
Untuk lebih mempopulerkan openGL SGI mengijinkan
pihak lain untuk mengembangkan standart openGL,dan
beberapa vendor menyambut hal tersebut dengan
membentuk OpenGL Architecture Review Board (ARB) Pendiri
openGL adalah SGI,Digital Equepment Corporation,IBM,Intel
dan Microsoft,pada tanggal 1 juli 1992 OpenGL versi 1.0
diperkenalkan.
Letak openGL dalam aplikasi gambar di atas pada
umumnya ketika aplikasi berjalan program tersebut
memanggil banyak fungsi,beberapa yang dibuat oleh
programer dan beberapa yang disediakan oleh sistem operasi
bahasa pemrograman.Aplikasi windows membuat output
pada layar biasanya dengan memanggil sebual API windows

yang disebut Graphics Devise Interfase,yang memungkinkan
sebagai penulisan teks pada sebuah windows,menggambar
garis 2D sederhana dan lainnya.Implementasi dari openGL
mengambil permintaan grafis dari aplikasi dan membangun
sebuah gambar berwarna dari grafis 3D,kemudian
memberikan gambar tersebut ke GDI untuk ditampilkan pada
layar monitor.
D. GLUT (GL Utility Toolkit)
 Merupakan pengembangan dari OpenGL yang
didesain untuk aplikasi dengan level kecil hingga
menengah dan menggunakan callback functions
untuk menambahkan interaksi dari user.
 Untuk pemrograman OpenGL menggunakan C++,
diperlukan library tambahan yaitu :
1. glut.h yang dicopy ke drive:Program FilesMicrosoft
Visual Studio 2010VcincludeGL
2. glut32.lib yang dicopy ke drive:Program
FilesMicrosoft Visual Studio 2010Vc
3. libglut32.dll yang dicopy ke drive:WindowsSystem
Klasifikasi Fungsi
 Primitive : berupa geometric, imagesAttribute :
berupa color, line type, light, texture
 Viewing : berupa virtual cameraControl : turn fuction
ON / OFF

 Windowing : window, mouse, keyboard
E. CARA KERJA OPENGL
OpenGL lebih mengarah pada prosedural daripada
sebuah deskriptif API grafis.Untuk mendeskripsikan scene dan
bagaimana penampilannya,sebenarnya programer lebih tau
untuk menentukan hal-hal yang dibutuhkan untuk
menghasilkan efek yang di inginkan.Langkah tersebut
termasuk memanggil banyak perintah openGL,perintah
tersebut digunakan untuk menggambarkan grafis primitif
seperti titik,garis dan poligon dalam tiga dimensi.Sebagai
tambahan,openGL mendukung lighting,shading,texture
mapping,blending,transparancy,dan banyak kemampuan efek
khusus lainnya.
OpenGL mempunyai bnayak fungsi dan penggunaan
perintah yang sangat luas, penggunaan openGL
membutuhkan library tambahan yang harus di letakkan pada
direktory system dari windows (OS),yaitu :
 OpenGL32.dll
 Glu32.dll
 Glut32.dll
Inisialisasi awal
Inti dari tahapan ini adalah mengatur view port dan
persepektif untuk penampilan obyek ke dalam layar
monitor,viewport adalah besarnya layar monitor(image) yang

dipakai untuk menampilkanobyek,sedangkan persepektif
yang dimaksud adalah pengaturan sumbu z dalam
penampilan obyek 3 dimensi,sehingga user dapat melihat
obyek seolah-olah dalam bidang 3 dimensi (X-Y-Z),selain itu
penggambaran obyek yang dilakukan oleh programer juga
dapat menggunaan koordinat 3 dimensi. Selain ke dua tujuan
di atas pada tahap ini juga dilakukan koneksi awal dengan
library openGL, koneksi ini dilakukan supaya fungsi-fungsi
yang di sediakan openGL dapat digunakan. Fungsi/prosedur
yang digunakan :
 LoadGlut(‘glut32.dll) - pemanggilan library openGL
 InitGL – inisialisasi openGL awal yang harus dilakukan
 glViewport – untuk pengaturan viewport
 glMatrixMode – pengaturan viewport
 gluPerspective – pengaturan persepektif
Contoh script untuk inisialisasi openGL :
Try
LoadGlut(‘glut32.dll’);
InitGL;
Exept on e :=
exeption
do
Begin

messageDlg{ e.message, mtError, [mbOk],};
Halt {1}; End;
End;
Script di atas merupakan script yang paling
sederhana, dalam artian minimal diperlukan untuk
menginisialisasi penggunaan openGL.Fungsi-fungsi lain
seperti yang disebut diatas seperti glViewport,
glMatrixMode, dapat di tambah kan pada script sesuai
dengan kebutuhan.
Pembuatan gambar
Didalam openGL pembuatan obyek dilakukan
dengan titik-titik 3 dimensi,dengan mode GL_QUARDS,
maka otomatis setiap 4 titik digambar menjadi sebuah
bidang segiempat,sedangkan mode GL_LINES, pada
setiap 2 titik digambar manjadi sebuah garis.Di dalam
tahap ini setiap garis atau bidang juga dapat di atur
warnanya.
Fungsi atau prosedur yang digunakan :
 mode GL_QUARDS – menggambarkan segi empat
 mode GL_LINES – menggambark garis
 glVertex3f- penentuan titik 3 dimensi
 glColor3f – penentuan warna

OpenGL memiliki lebih dari 200 fungsi. Fungsi tersebut
bisa dikelompokkan menjadi :
 Fungsi primitif, menentukan elemen yang bisa
menghasilkan gambar di layar. Fungsi ini terdiri dari 2
jenis, yaitu primitif geometric seperti polygon (segi
banyak) yang bisa dibuat menjadi dua, tiga, atau
empat dimensi, dan primitif gambar seperti bitmaps.
Fungsi atribut, mengontrol tampilan dari primitif.
Fungsi ini menentukan warna, jenis garis, properti
material, sumber cahaya, dan tekstur.
 Fungsi pandangan, menentukan properti kamera.
OpenGL menyediakan sebuah virtual kamera yang
bisa diposisikan dan diorientasikan relatif ke obyek
yang ditentukan dengan fungsi primitif. Lensa kamera
juga bisa dikendalikan sehingga bisa dihasilkan sudut
yang lebar dan pandangan telefoto (jarak jauh).
 Fungsi windowing, fungsi ini mengendalikan windows
pada layar dan penggunaan dari mouse dan
keyboard.
 Fungsi kontrol, menghidupkan macam-macam fitur
OpenGL. Fungsi-fungsi OpenGL dimuat didalam 2
library yang disebut dengan gl dan glu (atau GL dan
GLU). Library yang pertama, adalah fungsi utama dari
OpenGL, berisi semua fungsi OpenGL yang

dibutuhkan sedangkan yang kedua, openGL Utility
Llibrary (GLU) memuat fungsi yang ditulis
menggunakan fungsi dari library utama dan sangat
membantu bagi pengguna. Fungsi utama mempunyai
nama yang diawali dengan “gl” seperti “glVertex3f()”,
sedangkan fungsi didalam GLU mempunyai nama
yang diawali dengan “glu” seperti “gluOrtho2D()”.
F. SET UP PROJECT BARU
1. Buatlah project baru pada Visual Studio dengan nama
prak0.
Gambar 1.1a New Project – Template

Gambar 1.1b New Project – Application Setting
2. Buka windows explorer pada direktori project prak0
dan buatlah direktori baru di dalamnya dengan nama
include dan tempatkan file glut.h di dalamnya.
3. Kembali ke folder project dan copy-paste file
glut32.libdan glut32.dll ke folder project prak0.
Gambar 1.2 Penambahan file untuk grafika komputer menggunakan
GLUT
4. Lakukan konfigurasi pada properties projek prak0.

Gambar 1.3 Konfigurasi pada Project Properties
Gambar 1.4a menambah lokasi file include
Gambar 1.4b Pemilihan folder yang berisi glut.h

5. Menciptakan file baru dengan nama cg-0.cpp.
Gambar 1.5a Menambahkan item baru
Gambar 1.5b Menambahkan file c++ baru

BAB 3
P R I M I T I F O B J E K
A. Definisi Primitif Objek
Primitif objek merupakan salah satu subbab dari grafika
komputer yang terdiri dari titik, garis dan bangun dua
dimensi. Dalam grafika komputer penghasilan citra
menggunakan primitive grafik dasar, primitif ini memudahkan
untur merender atau menggambar pada layar monitor
sebagaimana penggunaan persamaan geometri sederhana.
Contoh primitive grafika dasar antara lain : titik, garis, kurva,
fill area dan text. Objek kompleks dapat dibuat dengan
kombinasi dari primitive ini. Misalkan, Poligaris atau yang
dapat didefinisikan sebagai urutan garis lurus yang saling
terhubung. Secara umum algoritma grafis memiliki
persamaan yaitu bagaimana menampilkan hasil. Primitive
grafis yang umum dijelaskan pada tabel berikut :

Input primitif grafik dan pirantinya sebagaimana banyak
piranti dan cara untuk pemaparan output grafika komputer,
demikian pula untuk piranti inputnya, yaitu :
 Keyboards
 Tombol
 Mouse
 Graphics tablets
 Joysticks dan trackballs
 Knobs
 Space balls dan data gloves
Masing-masing input ini mempunyai cara masing-masing
untuk mengirimkan input ke komputer. Input ini
diinterpretasikan oleh aplikasi grafika komputer dan
dipresentasikan ke pengguna melalui layar monitor. Data
yang diinputkan disebut primitif input. Beberapa primitif
input diantaranya sebagai berikut :
 Titik
 Strings (keyboards, suara)
 Pilihan (tombol, layar sentuh)
 Valuators (analogue dial)
 Locator (mouse)
 Ambil (pemilihan sebagian citra, mouse, lightpen)

Fungsi dasar menggambar titik. Berikut adalah beberapa
fungsi didalam menggambar suatu titik, antara lain :
- glVertex2i(x,y)
Yaitu suatu fungsi untuk menggambar titik pada
koordinat x dan y, dengan nilai satuan berupa integer.
Contoh glVertex2i(10,10)
- glVertex2f(x,y)
koordinat x dan y, dengan nilai satuan berupa float.
Contoh glVertex2f(10.0,10.0)
- glVertex2d(x,y)
koordinat x dan y, dengan nilai satuan berupa double.
Contoh glVertex2d(10.0,10.0);
Cara pendefinisian primitive objek yang digunakan dalam
pembuatan suatu objek :
 #define GL_POINTS
Primitif objek ini dipergunakan untuk menciptakan
suatu titik.
 # define GL_LINES
Primitif objek ini adalah suatu primitive objek guna
menciptakan suatu garis.
 # define GL_LINE_LOOP
 # define GL_LINE_STRIP

 # define GL_TRIANGLES
Triangle atau segitiga adalah tiga buah titik yang
terhubung menjadi suatu segitiga dengan blok di
tengahnya.
 # define GL_TRIANGLES_STRIP
Pada triangles strip jumlah vertex yang dipergunakan
adalah 4 buah vertex
 # define GL_TRIANGLE_FAN
Triangles fan adalah pembuatan suatu objek dengan
menggunakan segitiga dimana hanya menggunakan 1
titik pusat saja.
 # define GL_QUADS
Quad atau segempat adalah empat buah titik yang
terhubung menjadi quat segi empat dengan blok di
tengahnya.
 # define GL_QUADS_STRIP
Pada quads strip 4 buah vertex merupakan 1
kelompok.
Langkah rendering pada quads strip :
a. Nomor yang berhadap (membentuk 2 garis yang
sejajar
b. Nomor ganjil dengan nomor ganjil dipertemukan
c. Nomor genap dengan nomor genap dipertemukan
d. Garis yang tersisa akan dipertemukan
 # define GL_POLYGON

Polygon merupakan suatu fungsi yang mirip dengan
polyline, tetapi menghasilkan kurva tertutup dengan
blok warna (fill). Rendering yang dimiliki oleh
GL_POLYGON sama dengan GL_TRIANGLE_FAN.
Catatan :
a) glLineWidth yaitu suatu fungsi yang berfungsi
untuk mengatur tebalnya garis,
b) glPointSize yaitu suatu fungsi yang berfungsi
untuk mengatur besarnya suatu objek,
c) gluOrtho2D yaitu suatu fungsi untuk mengatur
proyeksi hasil eksekusi dan mendefinisikan
besarnya sistem koordinat dengan urutan kiri-
kanan dan bawah-atas.
Untuk memberi warna pada objek, seperti titik atau
garis, dapat dilakukan dengan menggunakan fungsi
glColor3f(red,green,blue). Di mana red, green, blue berada
pada 0 sampai dengan 1, yang menunjukkan skala
pencerahan dari masing-masing skala. Berikut adalah
beberapa fungsi color :
glColor3f(0,0,0);//black
glColor3f(0,0,1);//blue
glColor3f(0,1,0);//green
glColor3f(0,1,1)//cyan
glColor3f(1,0,0)//red
glColor3f(1,0,1)//magenta

glColor3f(1,1,0);//yellow
glColor3f(1,1,1);//white
Contoh SegiEmpat yang menggunakan Primitive Objek :
Pada primitive object dapat digunakan untuk membuat
segi empat berikut adalah pembuatan suatu objek berupa
segiempat, pertama mengalami Proses Rendering :
SegiEmpat (posx, posy, w, h)
Maka sintaks pembuatan segiempat :
glBegin (GL_QUADS);
glVertex2i (posx, posy);
glVertex2i (posx-w, posy);
glVertex2i (posx-w, posy-h);
glVertex2i (posx,posy-h);

B. Algoritma Pembentukan Objek
 Algoritma Pembentukan Garis
Garis dibuat dengan menentukan dua endpoint atau
posisi titik awal dan akhir dari suatu garis. Kemudian
peralatan output membuat garis sesuai posisi titik-titik
tersebut.
Untuk peralatan analog seperti plotter dan
random-scan display garis lurus dapat dihasilkan dengan
halus. Pada peralatan digital garis lurus dihasilkan
dengan menetapkan titik diskrit antara titik awal dan
akhir. Posisi titik diskrit sepanjang garis lurus data
diperhitungkan dari persamaan garis tersebut. Untuk
menentukan nilai suatu titik, dapat digunakan prosedur
dasar dimana x sebagai nilai kolom pixel dan y sebagai
nilai scan line sebagai berikut :

setPixel(x,y)
bila nilai x dan y sudah tersimpan pada frame buffer
untuk dapat menampilkannya pada layer menggunakan
fungsi dasar getPixel(x,y).
 Algoritma DDA
Algoritma Digital Differential Analyzer (DDA)
adalah algoritma pembentukan garis berdasarkan
perhitungan dx maupun dy dengan menggunakan rumus
dy = m.dx. Garis dibuat dengan menentukan dua
endpoint yaitu titik awal dan titik akhir. Setiap koordinat
titik yang membentuk garis diperoleh dari perhitungan
kemudian dikonversikan menjadi nilai integer.
Keuntungan dari algoritma ini adalah tidak perlu
menghitung koordinat berdasarkan persamaan yang
lengkap (menggunakan metode offset). Sedangkan
kerugiannya adalah adanya akumulasi Round-off errors,
sehingga garis akan melenceng dari garis lurus, selain itu
operasi round-off juga menghabiskan waktu. Algoritma
pembentukan garis DDA adalah sebagai berikut :
void lineDDA (int x0, int y0, int xEnd,
int yEnd)
{
int dx = xEnd - x0, dy = yEnd - y0,
steps, k;
float xIncrement, yIncrement, x = x0, y
= y0;
if (fabs (dx) > fabs (dy))
steps = fabs (dx);
else
steps = fabs (dy);
xIncrement = float (dx) / float
(steps);

yIncrement = float (dy) / float
(steps);
setPixel (round (x), round (y));
for (k = 0; k < steps; k++) {
x += xIncrement;
y += yIncrement;
setPixel (round (x), round (y));
}
}
 Algoritma Pembentukan Lingkaran
Lingkaran merupakan objek grafik yang paling
sering digunakan pada grafik sederhana. Lingkaran dapat
didefinisikan sebagai kumpulan titik yang memiliki jarak r
dari posisi pusat (xc,yc). Persamaan lingkaran dengan
titik pusat (xc,yc) dan radius r dapat dispesifikasikan
menggunakan koordinat rectangular berikut :
(x – xc)2 + (y-yc)2 = r2
Lingkaran juga dapat didefinisikan menggunakan
koordinat polar. Lingkaran yang sama dapat didefinisikan
sebagai berikut :
x = r cos _ + xc
y = r sin _ + yc
dimana 0 _ _ _ 2_
Kita dapat menggambarkan lingkaran dengan
menggunakan persamaan koordinat rectangular diatas,
akan tetapi pendekatan ini menimbulkan dua masalah
yaitu :

1. Persamaan tersebut mengandung perhitungan akar yang
operasinya memakan waktu.
2. Timbul gap yang cukup signifikan pada lingkaran ketika
digambarkan.
Lingkaran dapat juga digambarkan dengan
menggunakan persamaan koordinat polar, tetapi fungsi
trigonometri juga membutuhkan cost yang tidak sedikit
sehingga algoritma yang disusun tidak akan efisien.
Untuk mengatasi masalah yang timbul dari
penerapan koordinat polar maupun rectangular,
Bresenham menyusun suatu algoritma pembentukan
lingkaran yang hanya menggunakan aritmetika integer.
Secara prinsip algoritma ini sejenis denga algoritma
penggambaran garis yang disusun oleh orang yang sama.
Lingkaran merupakan objek yang simetris sehingga
karakteristik ini dapat dimanfaatkan untuk mengurangi
pekerjaan pada saat menggambar lingkaran. Lingkaran
dibagi menjadi 8 oktan (lihat gambar 3.x), misalkan kita
menyusun algoritma untuk menggambarkan lingkaran di
oktan pertama, maka koordinat untuk 7 oktan
selanjutnya dapat ditentukan pada table berikut :

Gambar lingkaran dengan 8 oktan :
Tahapan penggambaran lingkaran dengan
menggunakan algoritma yang dikenal dengan nama
algoritma midpoint ini adalah sebagai berikut :

1. Input jari-jari r dan koordinat pusat lingkaran (xc, yc),
kemudian tentukan koordinat untuk titik awal yaitu (xo,
y0) = (0, r).
2. Hitung nilai awal untuk parameter keputusan p0 = 1 – r
3. Untuk setiap xk, mulai dari k=0, lakukan langkah berikut :
jika pk<0, maka titik selanjutnya pada lingkaran dengan
pusat (0,0) adalah (xk + 1, yk) dan pk+1 = pk + 2 xk+1 + 1,
jika pk0, titik berikutnya adalah (xk+ 1, yk - 1) dan pk+1 =
pk + 2 xk+1 + 1 - 2 yk+1 dimana 2 xk+1 = 2 xk + 2, dan 2
yk+1 = 2 yk – 2
4. Tentukan titik simetri untuk 7 oktan lainnya.
5. Untuk lingkaran dengan pusat bukan di (0,0). Pindahkan
setiap posisi pixel hasil perhitungan (x, y) dengan rumus
x = x + xc , y = y + yc
6. Ulangi langkah 3 sampai 5, hentikan ketika x >= y Contoh
Penerapan algoritma midpoint untuk mengggambarkan
lingkaran. Contoh 1: lingkaran dengan persamaan X2 +
Y2 =100

C. Contoh Program Primitif Objek
 Primitif Point (GL_POINTS)

 Primitif (GL_LINES)

D. Latihan
prak1-Points. Dan tambahkan fungsi callback untuk
glutDisplayFunc(drawDot); . Beri nilai x0, x1, x2 dan
y0, y1, y2 dengan nilai integer bebas tapi tetap dalam
kanvas.
a. Eksekusi program yang telah anda buat dan
tampilkan hasilnya berupa screenshot.
b. Jelaskan Proses Rendering untuk primitive object
GL_LINES pada bangun anda berupa ilustrasi
gambar.
prak1-LineStrip. Beri nilai x0, x1, x2, x3 dan y0, y1, y2,
y3 dengan nilai integer bebas tapi tetap dalam kanvas
dan menghasilkan tampilan bangun simetris terbuka.
a. Sajikan screenshotnya.
b. Jelaskan proses rendering vertex untuk
GL_LINE_STRIP pada bangun anda berupa ilustrasi
gambar.

prak1-Poligon. Beri nilai x0, x1, x2, x3,x4dan y0, y1,
y2, y3,y4 dengan nilai integer bebas tapi tetap dalam
kanvas dan menghasilkan tampilan bangun simetris
tertutup.
a. Sajikan screenshotnya
b. Jelaskan proses rendering vertex untuk
GL_LINE_LOOP pada bangun anda berupa ilustrasi
gambar.

BAB 4
Transformasi Objek
Grafika komputer merupakan bidang yang menarik minat
banyak orang. Salah sub bagian dari grafika komputer adalah
pemodelan objek (object modelling). Dalam pemodelan objek
dua dimensi (2D), didapati berbagai objek dapat dimodelkan
menurut kondisi tertentu, objek yang dimodelkan itu perlu
dimodifikasi. Pemodifikasian objek ini dapat dilakukan dengan
melakukan berbagai operasi fungsi atau operasi transformasi
geometri. Transformasi ini dapat berupa transformasi dasar
ataupun gabungan dari berbagai transformasi geometri.
Contoh transformasi geometri adalah translasi, penskalaan,
putaran (rotasi), balikan, shearing dan gabungan.
Transformasi ini dikenal dengan transformasi affine. Pada
dasarnya, transformasi ini adalah memindahkan objek tanpa
merusak bentuk.
Tujuan transformasi adalah :
 Merubah atau menyesuaikan komposisi pemandangan
 Memudahkan membuat objek yang simetris
 Melihat objek dari sudut pandang yang berbeda
 Memindahkan satu atau beberapa objek dari satu
tempat ke tempat lain, ini biasa dipakai untuk animasi
komputer.
Secara substansi, Grafika Komputer adalah proses
transformasi dari model 3D obyek berupa informasi geometri

bentuk, informasi pose, warna, texture, dan pencahayaan
menjadi citra 2D (cf. Gambar 4.1).
Gambar 4.1. Grafika Komputer: Transformasi dari Model 3D
Obyek menjadi Citra
Jika dilihat secara analogi, hal di atas mirip dengan cara
kerja kamera dalam mengambil foto dalam bidang fotografi
(cf. Gambar 4). Model ini disebut model sintesis kamera.

Gambar 4.2. Analogi Pengambilan Gambar oleh Kamera
Untuk menghasilkan gambar dari obyek dengan skenario
tertentu kita harus melakukan beberapa proses, yaitu:
- Melakukan pengesetan kamera dalam bentuk setting
lensa kamera (Transformasi Proyeksi),
- Mengarah kamera dengan mengatur letak tripod
(Transformasi Viewing),
- Mengatur letak obyek (Transformasi Modeling), dan

Mengatur skala dan layout dari foto (Transformasi
Viewport)
A. Translasi
Transformasi translasi merupakan suatu operasi yang
menyebabkan perpindahan objek 2D dari satu tempat ke
tempat yang lain. Perubahan ini berlaku dalam arah yang
sejajar dengan sumbu X dan sumbu Y.
Translasi dilakukan dengan penambahan translasi pada
suatu titik koordinat dengan translation vector, yaitu (tx,ty),
dimana tx adalah translasi menurut sumbu x dan ty adalah
translasi menurut sumbu y. Koorinat baru titik yang
ditranslasi dapat diperoleh dengan menggunakan rumus :
Translasi adalah transformasi dengan bentuk yang tetap,
memindahkan objek apa adanya. Setiap titik dari objek akan
ditranslasikan dengan besaran yang sama.Dalam operasi
translasi, setiap titik pada suatu entitas yang ditranslasi
bergerak dalam jarak yang sama. Pergerakan tersebut dapat
berlaku dalam arah sumbu X saja, atau dalam arah sumbu Y
saja atau keduanya.
Translasi juga berlaku pada garis, objek atau gabungan
objek 2D yang lain. Untuk hal ini, setiap titik pada garis atau
objek yang ditranslasi dalam arah x dan y masing -masing
sebesar tx,ty.

Contoh
Untuk menggambarkan translasi suatu objek berupa
segitiga dengan koordinat A(10,10) B(30,10) dan C(10,30)
dengan tx,ty(10,20), tentukan koordinat yang barunya?
Jawab
A : x’=10+10=20
y’=10+20=30
A‟=(20,30)
B : x’=30+10=40
y’=10+20=30
B‟=(40,30)
C : x’=10+10=20
y’=30+20=50
C‟=(20,50)
Program di bawah ini akan memberikan ilustrasi
bagaimana transformasi translate diimplementasikan.
#include <stdlib.h>
#include <glut.h>
void drawQuad(){
glBegin(GL_QUADS);
glVertex2f(0.,0.);
glVertex2f(0.,50.);
glVertex2f(200.,50.);

glEnd();
}
void render(){
glClear(GL_COLOR_BUFFER_BIT);
//drawKoordinat
glColor3f(1.,1.,1.);
drawQuad();
glTranslatef(0,50,0);
drawQuad();
glFlush();
}
void main (int argc, char **argv) {
glutInit (&argc, argv);
glutInitWindowPosition(100,100);
glutInitWindowSize(480,480);
glutCreateWindow("Translasi");
gluOrtho2D(-320.0,320.0,-320.0,320.0);

glutDisplayFunc(render);
glutMainLoop();
}
Dengan output sebagai berikut:
Gambar 4.3 Translasi
B. Rotate
Ada beberapa hal mendasar yang perlu di pelajari dan di
pahami untuk bisa membuat dan mengkreasikan suatu
bentuk atau bidang dalam grafika komputer.
Banyak istilah2 dasar yang familiar di telinga tp sudah
tidak di temukan lagi apa maksud dan pengertiannya," Matrik
rotasi, translasi, dan seterusnya. Untuk memindah atau
merubah posisi suatu model/bentuk tidak bisa terlepas dari
yang namanya Tranformasi. Ada beberapa jenis tranformasi
yaitu: Rotasi, Translasi, Dilatasi, dan refleksi. Yang saya bahas
disini adalah rotasi dan translasi.
Rotasi artinya berputar. Ketika suatu bentuk benda
sengaja diputar maka perlu di tentukan pusat dan besar

sudut putar. sedangkan translasi adalah pergeseran. Benda
yang telah berpindah dari pusatnya berarti mengalami
pergeseran, yaitu apakah dia bergerak maju mundur ataupun
menuju ke atas bawah.
Rotasi berbeda dengan translasi karena perubahan posisi
pada translasi tidak mengacu pada suatu titik tertentu.
Keistimewaan dari rotasi adalah jarak antara titik pusat
dengan masing-masing bagian dari obyek yang diputar akan
selalu tetap, seberapa jauh pun obyek itu diputar.
Pada sebuah game yang menggunakan grafik vektor dan
grafik bitmap, rotasi dan translasi sangat di butuhkan.
Dengan basic4GL kita bisa menggunakan source code yang
tersedia yaitu :
glTranslatef (x, y, z) digunakan untuk merubah titik posisi
awal sumbu koordinat menuju posisi yang ditentukan sesuai
koordinat x,y, dan z.
glRotatef (angle, x, y, z) digunakan untuk memutar suatu
bidang pada sudut tertentu (angle).
Gambar 4.4 Rotasi dan Translasi

Untuk membangkitkan rotasi pada objek 3D kita harus
membuat aksis dari rotasi dan jumlah sudut rotasi . Tidak
seperti melakukan rotasi pada objek 2D yang semua proses
transformasi dilakukan di koordinat xy , sebuah rotasi objek
tiga dimensi bisa dilakukan di space manapun.
Dengan menggunakan notasi matrix, maka besaran R
bisa dikatakan sbb:
R = cos(0) sin(0)
sin(0) cos(0)
Gambar 4.5 Rotasi objek 3D pada Sumbu x , y , dan z
Fungsi Dasar Pembentuk Objek
Contoh:
Semisal kita ingin membuat pergerakan planet dan bulan.
Void Keterangan

void Rotate(void)
{
hari += 2;
if(hari > 360)
hari = hari - 360;
tahun += .1;
if(tahun > 360)
tahun = tahun - 360;
glutPostRedisplay();
}
Rotasi
pergerakan
untuk planet
dan bulan. Hari
menunjukkan
perputaran
bulan dan tahun
menunjukkan
perputaran
planet
void garisOrbit(float rad, float
inc)
{
glPushMatrix();
float y = 0.0;
glColor3f(1.0, 1.0, 1.0);
glBegin(GL_POINTS);
for(float sudut = 0; sudut
<=
360; sudut+=inc)
{
float x =
rad*sin((sudut)*phi/180);
float z =
rad*cos((sudut)*phi/180);
Garis orbit
untuk
menunjukkan
perputaran
planet yang
beraturan dan
tetap pada
tempatnya

glVertex3f(x, y, z);
}
glEnd();
glPopMatrix();
}
void merkurius(void)
{
glPushMatrix();
garisOrbit(5.5, 1);
glRotatef(tahun*9, 0.0, 1.0,
0.0);
glTranslatef(5.5, 0.0, 0.0);
glutSolidSphere(0.4, 10,
8);
glPopMatrix();
}
Penggambaran
planet dan
rotasinya. Untuk
pembuatan
planet hampir
sama fungsi
yang
digunakannya,
yang
membedakanny
a hanya nilai
dari setiap
komponen.
void fungsiKeyboard(void)
{
if(GetAsyncKeyState(VK_LEFT)
)
{
jarakX +=
(cos((rot+90)*phi/180))/2;
Void ini untuk
interaksi yang
dilakukan oleh
keyboard yaitu
1. Dengan
menekan

jarakZ += -
(sin((rot+90)*phi/180))/2;
}
if(GetAsyncKeyState(VK_RIGHT
))
{
jarakX += (cos((rot-
90)*phi/180))/2;
jarakZ += -(sin((rot-
90)*phi/180))/2;
}
if(GetAsyncKeyState(VK_UP))
{
jarakX +=
(cos(rot*phi/180)*
cos(pitch*phi/180))/2;
jarakZ += -
(sin(rot*phi/180) *
jarakY +=
sin(pitch*phi/180);
}
if(GetAsyncKeyState(VK_DOWN)
)
{
tombol Up
maka
gambar akan
menjauhi
layar
2. Dengan
menekan
tombol
Down maka
gambar akan
mendekati
layar
3. Dengan
menekan
tombol Right
maka
gambar akan
bergerak ke
arah kiri
4. Dengan
menekan
tombol Left
maka
gambar akan
bergerak ke
arah kanan

jarakX -=
(cos(rot*phi/180)*
jarakZ -= -
(sin(rot*phi/180) *
jarakY -=
sin(pitch*phi/180);
}
xlook = jarakX +
(cos(rot*phi/180) *
cos(pitch*phi/180));
zlook = jarakZ -
(sin(rot*phi/180) *
cos(pitch*phi/180));
ylook = jarakY +
sin(pitch*phi/180);
xup = cos(rot*phi/180) *
cos((pitch+90)*phi/180);
zup = -sin(rot*phi/180) *
cos((pitch+90)*phi/180);
yup =
sin((pitch+90)*phi/180);
}

void PassiveMouse(int x, int y)
{
if( (lastx - x) >50 ||
(lastx - x) <-50 ||
(lasty - y) >50 ||
(lasty - y) <-50 )
{
lastx = x;
lasty = y;
}
rot += ((lastx - x)/2);
lastx = x;
if(rot>360)
rot-=360;
if(rot<0)
rot+=360;
pitch += ((lasty - y))/2;
lasty = y;
if(pitch > 90)
pitch = 90.0;
if(pitch<-90)
pitch = -90.0;
Void ini untuk
interaksi yang
digunakan oleh
mouse.
Pergerakannya
sesuai dengan
ke arah mana
mouse bergerak

}
Tampilan Objek
Ini adalah tampilan awal perputaran planet terhadap
matahari
Gambar 4.6 Perputaran planet terhadap matahari

Gambar 4.7 Perputaran planet terhadap matahari tampak
atas
Gambar dibawah ini adalah gambar matahari yang diberi
cahaya agar terlihat seperti matahari
Gambar 4.8 Objek diberi cahaya agar terlihat seperti
matahari

Gambar 4.9 Beberapa planet mengelilingi matahari
C. Scale
Skala merupakan salah satu bentuk transformasi yang
merubah ukuran dari objek yang ditentukan, baik membesar
ataupun mengecil. Perubahan ukuran tersebut didasarkan
pada sumbu x, sumbu y, maupun sumbu z, dimana jika yang
diubah hanya sumbu x, maka besarnya objek akan berubah
sesuai dengan sumbu x baru yang telah ditentukan, begitu
pula jika diubah terhadap sumbu dan zy, maka objek akan
menguikuti perubahan sesuai sumbu y maupun z baru yang
telah ditentukan.
Perubahan skala diperoleh dari mengalikan nilai
koordinat objek dengan skala tertentu sesuai dengan sumbu
masing - masing. Bentuk dari matriks skala adalah:
[ ] [ ] [ ]
Transformasi skala dapat dilakukan dengan cara
memanggil fungsi:

glScalef(Sx, Sy, Sz)
glScaled(Sx, Sy, Sz)
Dimana Sx, Sy, dan Sz merupakan parameter dari masing
– masing sumbu ( Sx merupakan parameter pada sumbu x, Sy
merupakan parameter pada sumbu y, dan Sz merupakan
parameter pada sumbu z)
Contoh penerapan dalam program dari transformasi
skala :
Source Code:
void renderScene(void){
drawKoordinat();
glColor3f(1,1,0);
glScalef(1,2,1);
drawQuad();
glFlush();
}

Screen Shot Hasil:
Setelah di scale 2,1,1
drawKoordinat();
glColor3f(1,1,0);
glScalef(2,1,1);
drawQuad();
glFlush();
}

Screen shot hasil:
D. Tutorial Urutan Transformasi
Transformasi dapat dilakukan pada level vertex, level
surface, maupun level obyek bergantung dimana transformasi
diletakkan dalam program. Operasi transformasi merupakan
operasi yang tidak bersifat komutatif, artinya, urutan
transformasi juga sangat berpengaruh pada hasilnya. Gambar
4.3 memberi ilustrasi akibat urutan transformasi yang
berbeda, yaitu hasil operasi “rotasi kemudian di translasi”
berbeda dengan operasi “translasi baru dirotasi”.

Gambar 4.10 Pengaruh urutan transformasi
Program obyeknya sudah berupa obyek 3D berupa
kubus. Perhatikan bagaimana kubus dibentuk dari vertex dan
surface. Selain dengan mendefinisikan obyeknya sendiri,
GLUT telah menyediakan beberapa fungsi untuk menggambar
standard obyek, yaitu kubus, bola, dan poci teh.
Perhatikan apa yang terjadi bila glTranslate() dan
glRotate() di fungsi mydisplay() ditukar posisinya atau
diletakkan didalam salah satu glBegin()..glEnd()
// OpenGL
// - Complex Object
// - Notice:
// 1. There are surfaces that are not correctly
rendered in order.
// uncommented the GL_DEPTH
// 2. Flicker can be eliminated by using GL_DOUBLE
//
// Rubah rendering algoritma dengan menggunakan
data struktur
//
#include<stdio.h>
#include<stdlib.h>
#include<string.h>
#include<stdarg.h>
#include<glut.h>

float z_pos=-10.0f;
float rot=0.0f;
void resize(int width, int height)
{
glViewport(0, 0, width, height);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45.0,
(float)width/(float)height, 1.0, 300.0);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
}
void myTimeOut(int id)
{
// called if timer event
// ...advance the state of animation
incrementally...
rot+=10;
glutPostRedisplay(); // request redisplay
glutTimerFunc(100, myTimeOut, 0); //
request next timer event

}
void myKeyboard(unsigned char key,int x, int y)
{
if((key=='<')||(key==',')) z_pos-=0.1f;
if((key=='>')||(key=='.')) z_pos+=0.1f;
}
void mydisplay(void)
{
glClear(GL_COLOR_BUFFER_BIT );
//glClear(GL_COLOR_BUFFER_BIT |
GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
glTranslatef(0.0,0.0f,z_pos);
glRotatef(rot, 0, 1, 0);
glBegin(GL_QUADS);
// Front Face, red
glColor3f(1.0,0.0,0.0);
glVertex3f(-1.0f, -1.0f, 1.0f);
glVertex3f( 1.0f, -1.0f, 1.0f);
glVertex3f( 1.0f, 1.0f, 1.0f);
glVertex3f(-1.0f, 1.0f, 1.0f);
// Back Face, green

glColor3f(0.0,1.0,0.0);
glVertex3f( 1.0f, -1.0f, -1.0f);
glVertex3f( 1.0f, 1.0f, -1.0f);
glVertex3f(-1.0f, 1.0f, -1.0f);
glVertex3f(-1.0f, -1.0f, -1.0f);
// Top Face, blue
glColor3f(0.0,0.0,1.0);
glVertex3f(-1.0f, 1.0f, -1.0f);
glVertex3f( 1.0f, 1.0f, -1.0f);
// Bottom Face, yellow
glColor3f(1.0,1.0,0.0);
glVertex3f(-1.0f, -1.0f, -1.0f);
glVertex3f( 1.0f, -1.0f, -1.0f);
glVertex3f( 1.0f, -1.0f, 1.0f);
glVertex3f(-1.0f, -1.0f, 1.0f);
// Right face, cyan
glColor3f(0.0,1.0,1.0);
glVertex3f( 1.0f, -1.0f, -1.0f);
glVertex3f( 1.0f, 1.0f, -1.0f);

glVertex3f( 1.0f, -1.0f, 1.0f);
// Left Face, magenta
glColor3f(1.0,0.0,1.0);
glVertex3f(-1.0f, -1.0f, -1.0f);
glVertex3f(-1.0f, -1.0f, 1.0f);
glVertex3f(-1.0f, 1.0f, -1.0f);
glEnd();
glFlush();
glutSwapBuffers();
}
void init()
{
glEnable(GL_DEPTH_TEST);
glClearColor( 0.0, 0.0, 0.0, 1.0 ); // A
Background Clear Color
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45,
(GLdouble)500.0/(GLdouble)500.0, 0, 100);
glMatrixMode(GL_MODELVIEW);
return;

}
int main(int argc, char** argv)
{
glutInit(&argc,argv);
//glutInitDisplayMode( GLUT_DOUBLE /*|
GLUT_DEPTH*/ );
glutInitDisplayMode( GLUT_DOUBLE |
GLUT_DEPTH );
glutCreateWindow("simple");
// callbacks
glutDisplayFunc(mydisplay);
glutKeyboardFunc(myKeyboard);
glutTimerFunc(100, myTimeOut, 0);
glutReshapeFunc(resize);
init();
glutMainLoop();
return 0;
}
Tambahan:

Konsep Depth Buffer. Mode display pada program di atas
diberi tambahan mode GLUT_DEPTH dan perintah
glEnable(GL_DEPTH_TEST). Hal ini untuk memastikan bahwa
surface digambar sesuai dengan urutan penampakkan yang
logis. Teknik ini merupakan salah satu algoritma HIDDEN
SURFACE REMOVAL. Untuk melihat apa yang terjadi bila
teknik ini tidak dilakukan, hapus/commented moda
GLUT_DEPTH dan glEnable(GL_DEPTH_TEST).
E. Implementasi Transformasi Objek
#include <stdlib.h>
#include <glut.h>
void drawQuad(){
glBegin(GL_POLYGON);
glVertex2f(32.,1.);

glVertex2f(3.,90.);
glEnd();
glFlush();
}
glPushMatrix();
glTranslatef(-500,-500,0);
drawQuad();
glPopMatrix();
glPushMatrix();
glRotatef(30,0,0,1);
drawQuad();
glPopMatrix();

glPushMatrix();
glScalef(0.5,0.5,0);
glColor3f(0,1,1);//cyan
drawQuad();
glPopMatrix();
glPushMatrix();
glColor3f(1,0,0);//red
drawQuad();
glPopMatrix();
glPushMatrix();
glColor3f(1,0,1);//magenta
drawQuad();
glPopMatrix();

glPushMatrix();
drawQuad();
glPopMatrix();
glPushMatrix();
drawQuad();
glPopMatrix();
glPushMatrix();
glTranslatef(-150,0,0);
drawQuad();
glPopMatrix();
glPushMatrix();

glColor3f(0,1,1);//cyan
drawQuad();
glPopMatrix();
glPushMatrix();
drawQuad();
glPopMatrix();
glPushMatrix();
glColor3f(1,0,1);//pink
drawQuad();
glPopMatrix();
glPushMatrix();

glColor3f(1,0,1);//pink
drawQuad();
glPopMatrix();
glPushMatrix();
drawQuad();
glPopMatrix();
glPushMatrix();
glTranslatef(-100,115,0);
drawQuad();
glPopMatrix();
glPushMatrix();

drawQuad();
glPopMatrix();
glPushMatrix();
glColor3f(1,0,1);//magenta
drawQuad();
glPopMatrix();
glPushMatrix();
drawQuad();
glPopMatrix();
glPushMatrix();

drawQuad();
glPopMatrix();
glPushMatrix();
drawQuad();
glPopMatrix();
glPushMatrix();
glRotatef(-45,0,0,1);
drawQuad();
glPopMatrix();
glPushMatrix();

drawQuad();
glPopMatrix();
glFlush();
}
void main(int argc,char **argv){
glutInit(&argc,argv);
glutCreateWindow("Implementasi Transformasi");
gluOrtho2D(-640.,640.,-640.,640.);
glutDisplayFunc(renderScene);
glutMainLoop();}
Gambar 4.11 Implementasi Transformsi Obje

BAB 5
ANIMASI
A. ANIMASI, SEJARAH DAN PERKEMBANGANNYA
1. Masa Prasejarah
Seperti karya-karya peradaban manusia yang lainnya,
sejarah animasi ternyata sama tuanya dengan perkembangan
peradaban manusia di bumi ini. Sejak jaman pra sejarah,
manusia purba telah berusaha untuk membuat gambar-
gambar bergerak sesuai dengan imajinasi mereka serta
dengan keterbatasan alat yang mereka gunakan pada waktu
itu.
Lukisan dinding gua altamira di Spanyol merupakan
bukti peninggalan peradaban manusia pra sejarah pada masa
Paleolithicum, berupa lukisan dinding gua tentang binatang
dan perburuan, sebagai cermin dari kondisi kehiduapan
mereka pada waktu itu. Dari sekian banyak lukisan dinding
gua, ada beberapa lukisan yang apabila dicermati, merupakan
upaya manusia purba untuk menggambarkan sebuah
garakan. Lukisan tersebut berupa lukisan binatang yang
digambarkan dengan kaki yang banyak. Hal ini sebagai bukti,
bahwa mereka telah berupaya untuk membuat kesan seolah-
olah binatang tersebut sedang berlarian.

2. Masa Peradaban Mesir Kuno
Perkembangan animasi tidak berhenti pada masa
prasejarah saja, namun terus berkembang bahkan hingga saat
ini. Pada masa peradaban Mesir kuno, orang-orang pada
masa tersebut telah berupaya untuk membuat sebuah
rangkaian gambar yang memiliki makna sebuah gerakan dan
bahkan mengandung unsur cerita. Peradaban Mesir telah
terbukti sebagai sebuah peradaban yang sangat maju, pada
waktu itu. Dengan huruf hieroglif meraka meninggalkan bukti
catatan peradaban maju mereka yang mengundang decak
kagum manusia hingga saat ini. Diantara ribuan peninggalan
peradaban Mesir, mereka juga meninggalkan bukti adanya
upaya manusia untuk membuat gambar yang mereka buat
seolah-olah sedang bergerak.
Pharao Ramses II di Mesir membangun sebuah kuil
untuk Dewa Isis. Tidak seperti pada kuil-kuil yang lain, dalam
kuil dewa isis tersebut terdapat beberapa tiang yang terdapat
relief fugur dewa, dalam urutan gerakan yang runut. Kuil

tersebut sebagai bukti adanya upaya manusia pada masa
Mesir kuno untuk membuat gambar yang seolah-olah sedang
bergerak.
3. Masa Perdaban Yunani Kuno
Pada masa yunani kuno, upaya untuk membuat
rangkaian gambar yang terkesan bergerak telah mereka
lakukan. Bukti adanya upaya tersebut dapat dilihat melalui
beragam benda-benda seni yang telah dihasilkan oleh
peradaban Yunani kuno, diantaranya adalah kendi. Kendi-
kendi yang artistic tersebut seringkali dilukis dengan figure-
figur tokoh dalam tahapan gerakan yang mengelilingi kendi.
Jika kendi diputar, maka akan memberikan efek gerakan.

4. Relief Candi
Selain pada peninggalan peradaban kuno diatas,
masih ada lagi bukti perkembangan animasi pada perdaban
manusia, yaitu relief candi. Dimana pada relief tersebut
rentetan panel relief mengandung unsur cerita dan seolah-
olah hidup dalam benak orang yang melihat dan menghayati
alur ceritanya.

5. Wayang
Wayang kulit yang dimainkan oleh dalang, dengan
efek-efek suara berupa gamelan, dan alur cerita yang sangat
kuat, mampu menyedot perhatian pemirsanya selama
berjam-jam hingga semalam suntuk, adalah bentuk animasi
pertama yang sudah dikatakan lengkap, dimana unsur-unsur
animasi adanya gambar yang bergerak, alur cerita dan efek
suara, sudah terpenuhi.

6. The Persistance of Vision
Perkembangan animasi selanjutnya, lebih ditekankan
pada aspek keilmuan, dan mulai merambah bidang teknologi,
meskipun dengan hasil yang sangat sederhana. Adalah
Thomas Alfa Edison (1860), selain terkenal dengan penemuan
lampu pijarnya, juga mengamukakan sebuah teory yang di
kenal dengan "The Persistance of Vision". Inti dari teori
tersebut adalah, jika kita melihat sebuah gambar, maka citra
gambar tersebut akan terekam dalam retina manusia selama
1/10 detik sebelum citra akan gambar tersebut benar-benar
menghilang.
Berbasis pada teori tersebut, mulai muncul orang-
orang yang memperdalam ilmu untuk membuat agar sebuah
gambar tampak hidup dan bergerak-gerak. Dengan teknologi
yang sangat sederhana, mereka mampu menciptakan alat
yang mampu membuat rangkaian gambar, dapat tampak
hidup dan bergerak. Tentu saja penemuan teknologi tersebut
mampu membuat kekaguman orang pada saat itu.
a. Thaumatrope (Paul Roget - 1828)
Merupakan sebuah alat yang sangat sederhana,
berupa sebuah kepingan yang memiliki dua gambar, di satu
sisi bergambar burung dan sisi lain bergambar
sangkar. Kepingan tersebut pada kedua sisinya diberi pegas
atau tali yang fungsinya untuk memutar. Jika kepingan
berputar, maka akan terlihat seekor burung yang ada didalam
sangkar. Alat ini membuktikan teori dari Thomas Alfa Edison
tentang persistance of vision.

b. (Joseph Plateu - 1826)
Berupa sebuah kepingan gambar, dan di sisi lain
terdapat kepingan dengan lubang-lubang di sekitarnya. Ketika
kepingan gambar terebut diputar, melalui lubang yang talah
disediakan, akan terlihat rangkaian gambar tersebut
bergerak.

c. Zeotrope (Pierre Desvignes - 1860)
Hampir sama dengan Thaumatrope, Zoetrope berupa
rangkaian gambar yang dimasukkan dalam sebuah tabung,
dibagian lain dari tabung diberi lubang untuk melihat gambar.
Ketika tabung digerakkan, maka gambar tersebut akan
terlihat bergerak.

Penemuan Film Proyektor
Penemuan film proyektor oleh Thomas Alfa Edison,
membuka peluang baru untuk menciptakan gambar yang
bergerak. Dengan menggunakan media film proyektor,
semakin mempermudah cara untuk membuat rangkaian
gambar menjadi hidup dan bergerak. Gambar dibawah ini
merupakan proyektor pertama yang di ciptakan oleh Thomas
Alfa Adison.

Film Animasi
Era setelah diketemukannya proyektor dan
perkembangannya, mulai bermunculan film-film animasi
pendek yang dibuat dengan teknik yang masih sangat
sederhana serta dengan keterbatasan alat yang digunakan.
Film-film pada awal perkembangan animasi adalah sebagai
berikut.
1. Humourous Phases of Funny Faces. (Stuart Blackton -
1906)
Film animasi ini, berupa gambar kartun yang di buat
dengan kapur tulis diatas papan tulis. Teknik pengambilan
gambarnya adalah dengan menggambar kemudian difoto dan
dihapus untuk diganti dengan gambar selanjutnya. Rangkaian
foto-foto tersebut kemudian digabung dan disajikan sebagai

film animasi. Film inilah yang menggunakan teknik "stop-
motion" yang pertama didunia.
2. Gartie The Dinosaur (Winsor McCay 1914)
Merupakan fim animasi yang sudah memasukkan unsur
cerita didalamnya.
3. Felix the Cat (Otto Massmer, 1919)
Pada film ini sudah jauh lebih menarik, karena adanya

unsur cerita yang megalir, serta beberapa efek yang
membuat film ini menarik.
4. Flowers and tree (Walt Disney, 1932)
Film flowers and tree, sebelumnya telah diproduksi
dalam bentuk film hitam putih, film tersebut akhirnya di
produksi ulang dengan menambahkan unsur warna.
Flowers and tree akhirnya memenangkan Academy
Award untuk kategori film pendek animasi.
B. JENIS-JENIS ANIMASI
Animasi yang dulunya mempunyai prinsip sederhana,
sekarang telah berkembang menjadi beberapa jenis yaitu ;
 Animasi 2d

 Animasi 3d
 Animasi tanah liat (clay animation)
 Animasi jepang (anime)
1. Animasi 2d
Animasi ini yang paling akrab dengan keseharian
kita,biasa juga disebut dengan film kartun.kartun berasal dari
cartoon yang artinya gambar yang lucu,memang kebanyakan
film kartun itu kebanyakan film yang lucu.
Contohnya banyak sekali, looney tunes,tom and jerry, scooby
doo, doraemon, lion king brother bear dan banyak lagi
2. Animasi 3d
Perkembangan teknologi adan komputer membuat
teknik pebuuatan animasi 3d semakin berkembang dan maju
pesat;. animasi 3d adalah pengembangan animasi 2d dengan
animasi 3d karakter yang di perlihatkan semakin hidup dan
nyata,mendekati wujud manusia asllinnya. Toy story adalah
film animasi 3d pertama buatan disney(pixar studio),dan
semenjak itu maka berlomba lombalah studio film dunia
memproduksi film sejenis .bermunculanlah bug's life,antz,
dinosaurs,final fantasy ,toy story 2,monster inc hingga finding
nemo yang merupakan film aniasi terbaik di dunia pada saat
itu dan masih banyak lagi lainnya. Kesemuannya itu biasa
juga di sebut dengan animasi 3d atau cgi (computer
generated imagery).
3. Animasi tanah liat (clay animation)
Animasi ini msudah lam sekali sebenarnya bahkan
sebelum era animasi 3d,bahkan boleh di bilang nenek

moyangnya animasi.M eski namanya clay (tanah liat) yang di
pakai bukanlah tanah liat biasa.animasi ini memakai
plasticin,bahan lentur seperti permen karet yang di temukan
pada tahun 1897.tokoh dalam clay di buat dengan memakai
rangka khusus untuk kerangka tubuhnya lallu kerangka
tersebut di tutup dengan plasticin sesuai bentuk tokoh yang
ingin di buat .bagian-bagian tubuh kerangka ini seperti
kepala,tangan kaki bisa di lepas dan bisa di pasang lagi,
setelah semuanya siap lalu di foto gerkan pergerakan ,inilah
yang deisebut teknik pembuatan animasi dengan stop otion
picture film animasi clay pertama di rilis 1908 berjudul A
Sculptor's welsh rarebit nightmare.dan yang sekarang masih
di puta di tv2 kita adlah shawn the sheep dan timmy time.
4. Anime (aniimasi jepang)
Anime jepang tak kalah dengan animasi buatan eropa
dan amerika,jepang sudah banyak memproduksi anime
bahkan anime jepang tidak semua diperuntukkan bagi anak-
anak,bahkan ada yang khusus dewasa.
Jenis - jenis animasi dalam industri hiburan:
1. Animasi Sel (Cell Animation)
Kata “cell” berasal dari kata “celluloid”, yang
merupakan material yang digunakan untuk membuat film
gambar bergerak pada saat awal. Sekarang, material film
dibuat dari asetat (acetate), bukan celluloid. Potongan
animasi dibuat pada sebuah potongan asetat atau sel
(cell). Sel animasi biasanya merupakan lembaran-
lembaran yang membentuk sebuah frame animasi

tunggal. Sel animasi merupakan sel yang terpisah dari
lembaran latar belakang dan sebuah sel untuk masing-
masing obyek yang bergerak secara mandiri di atas latar
belakang. Lembaran-lembaran ini memungkinkan
animator untuk memisahkan dan menggambar kembali
bagian-bagian gambar yang berubah antara frame yang
berurutan. Sebuah frame terdiri dari sel latar belakang
dan sel di atasnya. Misalnya seorang animator ingin
membuat karakter yang berjalan, pertama-tama dia
menggambar lembaran latar belakang, kemudian
membuat karakter akan berjalan pada lembaran
berikutnya, selanjutnya membuat membuat karakter
ketika kaki diangkat dan akhirnya membuat karakter kaki
dilangkahkan. Di antara lembaran-lembaran (frame-
frame) dapat disipi efek animasi agar karakter berjalan itu
mulus. Frame-frame yang digunakan untuk menyisipi
celah-celah tersebut disebut keyframe. Selain dengan
keyframe proses dan terminology animasi sel dengan
layering dan tweening dapat dibuat dengan animasi
computer.
Berikut adalah Contoh Gambar Animasi sel.

2. Animasi Frame (Bingkai Animasi)
Animasi bingkai adalah bentuk animasi Yang
Sederhana memucat. Diupamakan Andari mempunyai
sebuah Buku bergambar Yang Berseri di Tepi Auditan
berurutan. Bila jempol Andari membuka Buku Artikel
Baru CEPAT, Maka GAMBAR kelihatan Bergerak. PADA
Komputer multimedia, animasi Buku nihil menampilkan
sebuah GAMBAR Yang berurutan secara CEPAT. Antara
GAMBAR Satu (frame satu) Artikel Baru GAMBAR lain
(bingkai Lain) berbeda. Kalau kitd bayangkan bagaimana
Film ATB ITU diputar di Bioskop, Maka dapat kitd pahami
bagaimana Cara Koperasi Karyawan Bhakti Samudera
frame animasi secara lebih BAIK Dalam, sebuah film,
serangkaian bingkai Bergerak melalui proyektor Film
Artikel Baru kecepatan sekitar 24 frame per Detik. Kita
Bisa menangkap adanya Gerak di Layar karena setiap
bingkai mengandung Satu GAMBAR Yang tampil PADA
Layar begitu bingkai Yang bersangkutan Muncul.
Mengapa 24 frame per Detik? Karena kecepatan ITU
merupakan Ambang Batas, kurang bahasa Dari ITU Maka
Yang Akan kitd lihat di Layar adalah GAMBAR Yang Kabur.
Berikut adalah contoh gambar animasi frame

3. Animasi Sprite (Sprite Animasi)
Animasi sprite serupa Artikel Baru Teknik animasi
ATB, yaitu obyek Yang diletakkan Dan dianimasikan PADA
bagian Puncak Grafik Artikel Baru latar Belakang
diam. Sprite adalah setiap bagian bahasa Dari animasi
Andari Yang Bergerak secara mandiri, misalnya Burung
Bagus terbang, planert berotasi, bola memantul-mantul
atau berputar logo. Sprite beranimasi Dan Bergerak
sebagai obyek Yang mandiri. Dalam, animasi sprite,
sebuah GAMBAR Tunggal atau berurutan dapat
ditempelkan Dalam, sprite. Sprite dapat dianimasikan
Dalam, Satu klien untuk membuka posisi, seperti halnya
planet berputar atau Burung Bergerak Sepanjang Garis
lurus. Animasi sprite berbeda Artikel Baru animasi frame,
Illustrasi Urutan masing-masing frame, Andari hanya
dapat memperbaiki bahasa Dari Layar Yang mengandung
sprite. Andari tidak dapat memperbaiki bagian Dalam,
Yang ditampilkan Layar untuk masing-masing bingkai,
seperti Yang dapat Andari kerjakan PADA animasi frame.
Berikut adalah contoh gambar animasi sprite.

4. Animasi Path ( Path Animasi)
Animasi path adalah animasi dari objek yang
gerakannya mengikuti garis lintasan yang sudah
ditentukan. Contoh animasi jenis ini adalah animasi
kereta api yang bergerak mengikuti lintasan rel. Biasanya
dalam animasi path diberi perulangan animasi, sehingga
animasi terus berulang hingga mencapai kondisi tertentu.
Dalam Macromedia Flash, animasi jenis ini didapatkan
dengan teknik animasi path, teknik ini menggunakan layer
tersendiri yang didefinisikan sebagai lintasan gerakan
objek.
Berikut adalah contoh gambar animasi Path.
5. Animasi Spline ( Spline Animasi )
Spline adalah representasi matematis dari kurva. Bila
obyek bergerak, biasanya tidak mengikuti garis lurus,
misalnya berbentuk kurva. Program animasi computer
memungkinkan Anda untuk membuat animasi spline
dengan lintasan gerakan berbentuk kurva. Untuk
mendefinisikan animasi spline, posisi pertama Anda pada
sebuah titik pijak. Kurva itu sendiri melewati titik pijak.
Titik pijak mendefinisikan awal dan akhir titik dari bagian

kurva yang berbeda. Masing-masing titik pijak dapat
dikendalikan sehingga memungkinkan Anda untuk
mengubah bentuk kurva antara dua titik pijak.
Sebagian besar program animasi memungkinkan Anda
untuk membuat variasi gerakan sepanjang lintasan. Jika
sebuah lintasan gerakan mempunyai belokan tajam,
sebagai contoh sebuah obyek bergerak pelan mengikuti
belokan dan kemudian meningkatkan kecepatannya
setelah melewati belokan. Beberapa program
menyediakan pengontrol kecepatan sprite sepanjang
lintasan secara canggih.
Berikut adalah contoh gambar dari animasi Spline .
6. Animasi Vektor (Vector Animasi)
Animasi vektor serupa Artikel Baru animasi sprite.
PADA animasi sprite menggunakan bitmap untuk sprite,
animasi vektor menggunakan rumus Matematika untuk
menggambarkan sprite. Rumus inisial serupa Artikel Baru
Yang rumus menggambarkan kurva spline. Animasi vektor
menjadikan objek Bergerak Artikel Baru SIBOR
memvariasikan parameter Ujung-Pangkal, arah Dan
Panjang PADA segmen-segmen Garis Yang menentukan
objek. Macromedia adalah industri terdepan Dalam,

perangkat lunak animasi berbasis vektor. Perangkat lunak
flash Yang dikembangkan Macromedia menggunakan
vektor grafis untuk membuat animasi interaktif Serta
grafis untuk digunakan di web. Macromedia telah
menerbitkan format file Flash (. Swf) sebagai sebuah
standar Terbuka.Untuk INFORMASI lebih JAUH, ikuti Link
situs web Macromedia Flash, di mana ANDA Bisa
mengunjungi sebuah galeri halaman Web Yang berisi
animasi Flash Dan mendownload flash gratis selama
periode 30 Hari Percobaan terpisah.
Berikut adalah contoh dari gambar animasi Vektor.
7. Animasi Clay ( Clay Animasi )
Animasi ini sering disebut juga animasi doll (boneka).
Animasi ini dibuat menggunakan boneka-boneka tanah
liat atau material lain yang digerakkan perlahan-lahan,
kemudian setiap gerakan boneka-boneka tersebut difoto
secara beruntun, setelah proses pemotretan selesai,
rangkaian foto dijalankan dalam kecepatan tertentu
sehingga dihasilkan gerakan animasi yang unik. Contoh
penerapan animasi ini adalah pada film Chicken Run dari
Dream Work Pictures. Teknik animasi inilah yang menjadi

cikal bakal animasi 3 Dimensi yang pembuatannya
menggunakan alat bantu komputer.
Berikut adalah contoh dari gambar animasi clay.
8. Animasi Karakter (Character Animation)
Animasi karakter merupakan sebuah cabang khusus
animasi. Animasi karakter semacam yang Anda lihat
dalam film kartun. Animasi ni berbeda dengan animasi
lainnya, misalnya grafik bergerak animasi logo yang
melibatkan bentuk organic yang komplek dengan
penggandan yang banyak, gerakan yang herarkis. Tidak
hanya mulut, mata, muka dan tangan yang bergerak
tetapi semua gerakan pada waktu yang sama.
Meskipun untuk membuat animasi tunggal dan bitmap
mudah, tetapi untuk membuat animasi karakter yang
hidup dan meyakinkan merupakan sebuah seni yang
membutuhkan pertimbangan khusus dalam
pengerjaanya. Teknik ini juga dapat diterapkan terhadap
animasi obyek. Perankgat lunak yang dapat dipakai untuk

animasi karakter, antara lain Maya Unlimited. Film kartun
Toy Story dan Monster Inc dibuat dengan Maya
Unlimited.
Berikut adalah contoh dari gambar animasi karakter.
C. Konsep Animasi pada GLUT
Dalam penggunaan glutTimerFunc dimungkinkan
untuk membuat sebuah animasi yang dikontrol oleh waktu.
Fungsi dari glutPostRedisplaya dalah mengirimkan perintah
untuk mengaktifkan display secara berkala (looping).
Kemudian pada main program perlu menambahkan fungsi
untuk mengaktifkan timer function.
1. Fungsi dasarbpembuatan animasi dengan
menggunakan TimerFunction
GLUTAPI void APIENTRY glutTimerFunc(unsigned int
millis, void
(GLUTCALLBACK *func)(int value), int value);

Dalam penggunaan glutTimerFunc dimungkinkan untuk
membuat sebuah animasi yang dikontrol olehwaktu.
2. Inisialisasi dalam penggunaan TimerFunction
Fungsi dari glutPostRedisplay adalah mengirim kan
perintah untuk mengaktifkan display secara berkala
(looping).
Kemudian pada main program perlu menambahkan fungsi
untuk mengaktifkan timer function.
Berikut adalah contoh dari sebuah bentuk jam analog
sederhana dengan minimal empat tempat penunjuk angka
dan menggunakan 3 jarum. Jarum jam berputar sesuai
dengan timer per detik waktu nyata.
Source Code:
#include <stdlib.h>
#include <glut.h>
#include <math.h>
#define PI 3.1415926535
float sudut = 0;
int i,n;

void lingkaran(int radius, int jumlah_titik, int
x_tengah, int y_tengah) {
for (i=0;i<=360;i++){
float sudut=i*(2*PI/jumlah_titik);
float x=x_tengah+radius*cos(sudut);
float y=y_tengah+radius*sin(sudut);
glVertex2f(x,y);
}
glEnd();
}
void panahJam(){
glColor3f(0,0,0);
glVertex2i(0,200);
glVertex2i(10,180);
glVertex2i(5,180);
glVertex2i(5,0);
glVertex2i(-5,0);
glVertex2i(-5,180);
glVertex2i(-10,180);

glVertex2i(0,200);
glEnd();
}
void panahMenit(){
glColor3f(1,1,1);
glVertex2i(0,220);
glVertex2i(10,200);
glVertex2i(5,200);
glVertex2i(5,0);
glVertex2i(-5,0);
glVertex2i(-5,200);
glVertex2i(0,220);
glEnd();
}
void panahDetik(){
glColor3f(1,0,0);
glVertex2i(0,240);
glVertex2i(10,210);

glVertex2i(5,210);
glVertex2i(5,0);
glVertex2i(-5,0);
glVertex2i(-5,210);
glVertex2i(0,240);
glEnd();
}
void angka(float jarak, float x, float y) {
glPointSize(10);
glBegin(GL_POINTS);
glColor3f(0,0,0);
for(n=0;n<360;n+=30)
glVertex2f(jarak*(float)sin(n*PI/180.0)+x,ja
rak*(float)cos(n*PI/180.0)+y);
glEnd();
}

glPushMatrix();
glColor3f(0.7,0.7,0.7);
lingkaran(250,100,0,0);
angka(230.,0.,0.);
glPopMatrix();
glPushMatrix();
glRotatef(sudut,0,0,1);
panahDetik();
glPopMatrix();
glPushMatrix();
glRotatef(sudut/60,0,0,1);
panahMenit();
glPopMatrix();
glPushMatrix();
glRotatef(sudut/720,0,0,1);
panahJam();
glPopMatrix();
glColor3f(0,0,0);

lingkaran(20,100,0,0);
glFlush();
}
void timer(int value){
sudut-=0.6;
glutTimerFunc(100,timer,0);
}
void main (int argc, char **argv){
glutInit(&argc, argv);
glutCreateWindow("JAM ANALOG: Prak Grafkom");
gluOrtho2D(-300.,300.,-300.,300.);
glutMainLoop();

Output:
Contoh program ke-2
Membuat sebuah baling-baling yang bisa perputar secara
clockwise kemudian unclockwise yang pusatnya berada pada
pusat koordinat.
#include <stdlib.h>
#include <glut.h>
int x=0;
int zputer=0;
int zbalik=180;
void Timer(int value){

if(zputer <=360){
x = 1;
zputer += 1;
}
if(zputer>360){
x = -1;
zbalik -= 1;
}
if(zbalik<0){
x = 1;
zputer = 0;
zbalik = 360;
}
glutTimerFunc(5,Timer,0);
}
void Draw(){
glBegin(GL_TRIANGLES);
glVertex2d(0,0);
glVertex2d(-100,200);
glVertex2d(100,200);
glVertex2d(0,0);
glVertex2d(-100,-200);
glVertex2d(100,-200);
glEnd();
}
void display(){

glPopMatrix();
glRotatef(x,0.,0.,1.);
Draw();
glPushMatrix();
glFlush();
}
void main(int argc, char **argv){
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE
| GLUT_RGBA);
glutCreateWindow("Praktikum Grafika
Komputer");
gluOrtho2D(-300.0,300.0,-300.0,300.0);
glutDisplayFunc(display);
glutTimerFunc(100,Timer,0);
glutMainLoop();
Output:

Animasi 2D menggunakan OpenGL dapat dilakukan
dengan melakukan perpindahan objek menggunakan
glTranslatef, juga dapat dilakukan dengan melakukan
perputaran atau pergerakan objek yang berporos pada
sumbu-sumbu koordinat dari sumbu pembentuk objek
tersebut menggunakan glRotatef. Kemudian waktu yang
digunakan dalam pergerakan animasi juga dapat diatur sesuai
keinginan dengan menggunakan glutTimerFunc.
BAB 6
INTERAKSI KEYBOARD

Keyboard adalah alat input yang berfungsi untuk
berfungsi mengetikkan huruf, angka, karakter khusus dan
memasukkan perintah atau instruksi ke dalam software atau
system operasi yang dijalankan komputer, serta sebagai
media bagi user (pengguna) untuk melakukan perintah –
perintah lainya yang diperluka, seperti menyimpan file dan
membuka file.
A. STRUKTUR TOMBOL PADA KEYBOARD
Secara umum, struktur tombol pada keyboard terbagi atas 4,
yaitu:
a. Tombol Ketik (typing keys)
Tombol ketik adalah salah satu bagian dari keyboard
yang berisi huruf dan angka serta tanda baca. Secara
umum, ada 2 jenis susunan huruf pada keyboard,
yaitu tipe QWERTY dan DVORAK. Namun, yang
terbanyak digunakan sampai saat ini adalah susunan
QWERTY.
b. Numeric Keypad
Numeric keypad merupakan bagian khusus dari
keyboard yang berisi angka dan sangat berfungsi
untuk memasukkan data berupa angka dan operasi
perhitungan. Struktur angkanya disusun menyerupai
kalkulator dan alat hitung lainnya.
c. Tombol Fungsi (Function Keys)
Tahun 1986, IBM menambahkan beberapa tombol
fungsi pada keyboard standard. Tombol ini dapat

dipergunakan sebagai perintah khusus yang
disertakan pada sistem operasi maupun aplikasi.
d. Tombol kontrol (Control keys)
Tombol ini menyediakan kontrol terhadap kursor dan
layar. Tombol yang termasuk dalam kategori ini
adalah 4 tombol bersimbol panah di antara tombol
ketik dan numeric keypad, home, end, insert, delete,
page up, page down, control (ctrl), alternate (alt) dan
escape (esc)
B. PEMETAAN (MAPPING)
Karena saluran cache lebih sedikit dibandingkan
dengan blok memori utama, diperlukan algoritma untuk
pemetaan blok-blok memori utama ke dalam saluran cache.
Selain itu diperlukan alat untuk menentukan blok memori
utama mana yang sedang memakai saluran cache. Pemilihan
fungsi pemetaan akan menentukan bentuk organisasi cache.
Dapat digunakan tiga jenis teknik, yaitu sebagai berikut :
a. Pemetaan Langsung (Direct Mapping)
Pemetaan ini memetakan masing-masing blok memori
utama hanya ke satu saluran cache saja. Jika suatu blok ada
di cache, maka tempatnya sudah tertentu. Keuntungan dari
direct mapping adalah sederhana dan murah. Sedangkan

kerugian dari direct mapping adalah suatu blok memiliki
lokasi yang tetap (Jika program mengakses 2 block yang di
map ke line yang sama secara berulang-ulang, maka cache-
miss sangat tinggi).
b. Pemetaan Asosiatif (Associative Mapping)
Pemetaan ini mengatasi kekurangan pemetaan
langsung dengan cara mengizinkan setiap blok memori utama
untuk dimuatkan ke sembarang saluran cache. Dengan
pemetaan asosiatif, terdapat fleksibilitas penggantian blok
ketika blok baru dibaca ke dalam cache. Kekurangan
pemetaan asosiatif yang utama adalah kompleksitas
rangkaian yang diperlukan untuk menguji tag seluruh saluran
cache secara paralel, sehingga pencarian data di cache
menjadi lama.
c. Pemetaan Asosiatif Set (Set Associative Mapping)
Pada pemetaan ini, cache dibagi dalam sejumlah sets.
Setiap set berisi sejumlah line. Pemetaan asosiatif set
memanfaatkan kelebihan-kelebihan pendekatan pemetaan
langsung dan pemetaan asosiatif
C. JENIS-JENIS KEYBOARD
Jenis Jenis Keyboard Komputer Secara Fisik
a. Keyboard Serial : digunakan pada komputer tipe AT

b. Keyboard PS/2 : digunakan pada komputer ATX
c. Keyboard Wireless : digunakan pada semua jenis
komputer dan laptop
d. Keyboard USB : Untuk menjamin transfer data lebih
cepat

Jenis Jenis Keyboard Komputer Secara Bentuk dan Tombol
1. Keyboard QWERTY
Keyboard yang biasanya dipakai adalah jenis Qwerty,
yang bentuknya ini mirip seperti tuts pada mesin tik.
ditemukan oleh Scholes, Glidden dan Soule pada tahun 1878,
dan fungsi keyboard QWERTY ini digunakan sebagai standar
mesin tik komersial pada tahun 1905. Keyboard QWERTY
memiliki empat bagian yaitu :
a. Typewriter key
b. Numeric key
c. Funtion key
d. Special function key
Tata Letak ini sama dengan keyboard yang biasa
digunakan yang terdiri dari 4 bagian yaitu:
 Tombol fungsi (function key)

 Tombol alphanumerik (alphanumerik key)
 Tombol kontrol (control key)
 Tombol numerik (numerik keypad).
Untuk menghasilkan bilangan dalam jumlah yang besar,
orang lebih suka menggunakan tombol numerik (numerik
keyped) yang tata letak tombol-tombolnya dapat dijangkau
dengan sebuah tangan. Selain itu, fungsinya untuk
mengetikkan angka apabila tombol Num Lock di aktifkan.
Apabila tombol Num Lock tidak diaktifkan, fungsinya berubah
menjadi tombol-tombol untuk menggerakkan kursor.
2. KEYBOARD ALPHABETIC
Tombol-tombol pada papan ketik dengan tata letak
alphabetik disusun persis seperti pada tata letak QWERTY
maupun Dvorak. Susunan hurufnya berurutan seperti pada
urutan alphabet.Biasanya banyak ditemui pada mainan anak-
anak, sehingga anak-anak dapat diajar mengenal hurup
alphabet. Keyboard Alphabetic, digunakan utk negara-negara
yg menggunakan alphabetic berbeda dgn alphabetic yg ada.
Misal : Arab, Cina, Rusia. Tombol-tombol disusun menurut
abjad. Tidak punya kelebihan dibanding tata letak lainnya,
karena itu tidak banyak dipakai.

3. KEYBOARD DVORAK
Ditemukan pada tahun 1932 dengan dirancang lebih
efisien 10-15 % dibanding keyboard QWERTY. Menggunakan
susunan papan ketik yang sama, tetapi susunan hurufnya
disusun sehingga tangan kanan dibebani oleh banyak
pekerjaan dibanding dengan tangan kiri. Dirancang agar 70
persen dari ketukan jatuh pada home row, sehingga jari-
jemari yang harus mencapai huruf-huruf yang tidak berada
pada posisi home row mempunyai kerja yang lebih ringan.
Mengurangi kelelahan karena adanya faktor ergonomik yang
ditambahkan pada tata letak ini.
4. KEYBOARD CHORD
Keyboard Chord, digunakan utk mencatat ucapan. Untuk
menghasilkan suatu kata dgn menekan tombol atau
kombinasi tombol. Misal; tombol ‘D’ kombinasi dari ‘T’ & ‘+’.
Keyboard ini hanya mempunyai beberapa tombol antara 4
sampai 5. Untuk memasukkan suatu huruf harus menekan
beberapa tombol secara bersamaan. Ukurannya kompak,
sangat cocok untuk aplikasi yang portabel.
5. KEYBOARD KLOCKENBERG

Keyboard ini dibuat dengan maksud menyempurnakan
jenis keyboard yang sudah ada, yaitu dengan memisahkan
kedua bagian keyboard (bagian kiri dan kanan).
6. KEYBOARD MALTRON
Keyboard ini dibuat agak cekung ke dalam. Dengan
pertimbangan bahwa pada saat jari-jari diposisikan akan
mengetik, maka jari-jari itu dijamin tidak akan membentuk
satu garis lurus.
7. KEYBOARD NUMERIC
Keyboad ini bertujuan untuk memasukkan bilangan
dalam jumlah yang besar.

D. FUNGSI TOMBOL KEYBOARD KOMPUTER
 Back Space : untuk menghapus 1 character di kiri cursor
 Caps Lock : untuk membuat huruf kecil menjadi huruf
besar atau Kapital
 Delete : untuk menghapus 1 karakter pada posisi cursor
 Esc : untuk membatalkan suatu perintah dari suatu menu
 End : untuk memindahkan cursor ke akhir baris /
halaman / lembar kerja
 Enter : untuk berpindah ke baris baru atau untuk
melakukan suatu proses perintah
 Home : Untuk menuju ke awal baris atau ke sudut kiri
atas layar
 Insert : untuk menyisipkan character
 Page Up : untuk meggerakan cursor 1 layar ke atas
 Page Down : untuk Menggerakkan cursor 1 layar ke
bawah
 Tab : untuk memindahkan cursor 1 tabulasi ke kanan
 Numeric Key : memberikan perintah menghidupkan dan
mematikan fungsi tombol numerik

E. KONSEP INPUTKEYBOARD PADA GLUT-KEY
BIASA DAN SPECIAL KEY
1. KONSEP INPUT KEYBOARD (GENERAL BUTTON)
glutKeyboardFunc adalah suatu fungsi callback
untuk digunakan sebagai masukan pada suatu jendela
window. Konsepnya pada saat seorang user atau pengguna
memberikan input yaitu menekan pada tombol keyboard,
setiap tombol keyboard yang ditekan akan menghasilkan
suatu karakter ASCII yang akan menghasilkan suatu callback
keyboard yang telah didefinisikan berupa fungsi dengan 3
parameter.
Penggunaan input keyboard pada tombol-tombol biasa
atau normal key (a-z, 1-0), dapat dilakukan dengan
menggunakan callback function berupa
glutKeyboardFunc(myKeyboard) dengan
dideklarasikan terlebih dahulu suatu fungsi buatan untuk
menampung semua perintah input yang akan digunakan oleh
user. Fungsi buatan tersebut seperti contoh di bawah ini:
void myKeyboard(unsigned char key, int x,int y)
{
// masukkan perintah disini
}
Fungsi tersebut berisi suatu perintah yang akan digunakan
dalam pengoperasian program oleh user. Di dalam fungsi
tersebut terdapat 3 parameter dan di dalamnya
dideklarasikan suatu perintah yang nantinya akan digunakan.

void timer(int value){
glutTimerFunc(100, timer, 0);
}
void myKeyboard(unsigned char key, int x, int y)
{
if(key == 'a') glTranslatef(0,5,0);
if(key == 'd') glTranslatef(0,-5,0);
}
Draw();
glFlush();
}
Sintaks tersebut adalah sintak dasar yang digunakan,
untuk bisa menggunakan input keyboard maka harus
diberikan callback function untuk memanggilnya.
glutKeyboardFunc(myKeyboard);

Buku grafkom

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (11)

Similaire à Buku grafkom

Similaire à Buku grafkom (20)

Dernier

Dernier (11)

Buku grafkom