Mata kuliah Komputer Grafik

( Grafika Computer 1)
2 SKS

Dosen : Atit Pertiwi, Skom., MMSI

Teknik Informatika
Universitas Gunadarma
Ide Dasar Grafika Komputer
l Grafika komputer adalah suatu bidang
ilmu yang mempelajari bagaimana
membangun grafik (gambar) baik 2D
maupun 3D yang kelihatan nyata
menggunakan komputer
l Salah satu bidang grafika komputer yang
sangat terkenal adalah Desain grafis
Beberapa Penerapan Grafika
Komputer
l Entertainment, misalnya dalam pembuatan film animasi. Terminator II dan Titanic
merupakan contoh film non animasi yang memanfaatkan efek-efek grafika komputer
yang sangat canggih.
l Visualisasi Proses, misalnya menggambarkan layout kinerja proses pabrik, atau proses-
proses yang dalam modul ajar. Visualisasi Hasil Penelitian, seperti menggambar grafik
performance, grafik perubahan bahkan grafik model hasil simulasi dan implementasi
program.
l Bersama-sama dengan image processing digunakan sebagai algoritma identifikasi,
seperti yang dilakukan pada kepolisian untuk menggambarkan wajah seseorang secara
3D dan identifikasi seseorang.
l GIS (Geographic Information System)
l Masil banyak yang lainnya.
Applications

• Simulators (flight,
driving)

• Mechanical CAD
(Computer
Aided Design)

• Architectural
visualization

• Advertising

4
Applications

• Computer games
• Special effects
• Computer art
• Scientific visualization
• Medical imaging

5
Apakah Beda Gambar dan
Photo?
l Photo merupakan gambar yang dihasilkan
dengan proses capture dari kegiatan nyata.
Hasilnya setiap detail akan muncul,
misalnya jumlah kumis pada kucing sama
l Gambar adalah proses pembentukan yang
dilakukan dengan meniru kegiatan nyata.
Hasilnya ada beberapa detail yang tidak
dapat ditampilkan. Siapa yang peduli pada
jumlah kumis pada kucing saat
menggambar?
Macam-Macam Gambar
Komputer
l Raster Image adalah gambar yang strukturnya
berupa matriks. Dimana setiap titik (x,y) mempunyai
nilai berupa warna yang digunakan seperti RGB atau
CYMK. File dengan ekstensi BMP, GIF, TIFF, JPG
dan PNG merupakan contoh dari Raster Image.
Model gambar ini digunakan dalam Image
Processing
l Vector Image adalah gambar yang strukturnya
berupa vektor. Gambar yang dibuat menggunakan
AutoCAD atau Maya atau gambar-gambar pada GIS,
ini merupakan contoh dari Vector Image. Model
gambar semacam ini digunakan dalam grafika
komputer dan GIS
Pada tahun 1950-an
l Keluarannya via teletypes, lineprinter, dan
cathode ray tube (CRT). Suatu picture yang
di reprodukisi menggunakan karakter gelap
dan terang

Part 2
Contoh Gambar nya

linesprinter CRT

Part 2
Tahun 1960-an
l Merupakan permulaan grafik interaktif
modern, keluarannya adalah grafik
vektor dan grafik interaktif.
l Permasalahan yang terburuk adalah
masalah biaya dan mesin yang tidak
bisa di akses.
l Misalnya : Spacewars

Part 2
Contoh gbr
l Spacewars

Part 2
Tahun 1970-an
l Keluaran mengenai raster display,
kemampuan grafis masih tipis dan tebal.
l Seperti :
Ø Video arcade game ( GAME seperti di TIMEZONE )
Ø film “Westword” > film pertama kali menggunakan CG
Ø Apple II, warna grafik komputer pribadi
Ø Specular Highlighting

Part 2
Contoh gambarnya

Specular
Apple II.. Video Arcade Film Westworld Highlighting
GAMES

Part 2
Tahun 1980-an
l Keluarannya adalah grafik raster built-in,
gambar bitmap, dan pixel.
l Biaya – biaya komputer pribadi
berkurang secara drastis
l Trackball dan mouse menjadi alat
interaktif yang baku.

Part 2
Contoh Gambar

Raster build-in

Part 2
Tahun 1990-an
l Sejak diperkenalkan VGA, SVGA,
komputer pribadi bisa dengan mudah
menampilkan gambar hidup dan gambar
photo-realistik dan juga gambar 3D
rendering yang merupakan kemajuan
utama dan mampu merangsang aplikasi
garfik sinematik.
l Misalnya : Jurassic park, Toy Story

Part 2
Tahun 2000-2001
l Munculah NVIDIA Corporation , GeForce
256, dan GeForce3.

Part 2
Tahun 2003
l Berkembang lagi ID Software – mesin
grafik Doom.
l DOOM adalah bagian dari DNA id
software dan membutuhkan talenta dan
otak tercerdas di dalam industri ini demi
membawa seri berikut dari franchise
utama kita” Ujar Todd Hollenshead,
CEOnya id software.

Part 2
 Kekuatan Pemrosesan yang
Murah
Chips sebagai Kunci Subsistem Grafik
Keuntungan - Hukum Moore
– harga/performance meningkat 2x setiap 18 bulan untuk
setiap penggandaan jumlah transistor.
– Teknologi bergerak secara eksponensial kecuali
pertumbuhan www.
CPU
Komputasi 64-bit masuk ke dalam mainstream
• Server: Intel Itanium, AMD Opteron
• Consumer: IBM G5, AMD Athlon64
– AMD Athlon MP
– Intel Xeon
– Sun UltraSPARC III
– Hewlett Packard PA-RISC
– IBM POWER4
Kekuatan Pemrosesan yang
Murah
Graphics subsystems
– SGI, Sun, HP, Evans & Sutherland masih memiliki ceruk
yang selektif, meskipun PC cards menguasai pasar
bawah dan menengah (nVidia GeForce3, ATI’s Radeon
9000 line, 3DLabs’ Wildcat)
– Spesifik Graphics Hardware (nVidia GeForceFX, ATI
Radeon 9800) memasuki tahap baru dukungan grafik
main processor graphics (Intel MMX, AMD 3DNow!)
SELESAI
 Pengenalan OpenGL
OpenGL adalah suatu graphic library yang sebagian bersifat open source, dipakai pada
banyak platform (windows, linux) dan dapat digunakan pada berbagai jenis compiler seperti
C++ atau Delphi.
OpenGL bukanlah bahasa pemrograman tetapi merupakan suatu Application Programming
Interface (API).

Sintax Perintah OpenGL

Sintaks perintah OpenGL mengikuti aturan penulisan dari library dimana fungsi tersebut
berasal, format penulisan fungsi OpenGL adalah :
<awalan library><perintah><optional jumlah argumen><optional tipe
argumen>
Semua perintah OpenGL menggunakan awalan gl diikuti dengan huruf kapital pada setiap
kata membentuk nama perintah (sebagai contoh glClearColor). Untuk mendefinisikan
konstanta diawali dengan GL_, dengan menggunakan huruf kapital dan garis bawah untuk
memisahkan kata (seperti GL_POLY_STIPPLE). Terkadang beberapa huruf dan angka
ditambahkan pada akhir perintah (seperti 3f pada glVertex3f). Dalam hal ini angka 3
menunjukkan berapa banyak argumen yang harus ada pada perintah tersebut dan akhiran
huruf f menunjukkan jenis datanya yaitu floating. Sebagai contoh pada dua perintah berikut
ini :
glVertex3i(1,0,-2);
glVertex3f(1.0, 0.0, -2.0);
adalah sama yaitu meletakkan titik di layar pada koordinat x = 1, y = 0 dan z = -2,
perbedaannya yaitu pada perintah pertama menspesifikasikan titik dengan tipe data integer
32-bit, sedangkan yang kedua dengan tipe data single precision floating point.
Beberapa perintah OpenGL menambahkan perintah huruf akhir v yang menunjukkan bahwa
perintah tersebut menggunakan pointer ke array/vektor. Di bawah ini contoh perbedaannya.
float color_array[]={1.0,0.0,0.0}
glColor3f (1.0,0.0,0.0);
glColor3fv(color_array);

Library yang Berhubungan dengan OpenGL

OpenGL menyediakan set perintah untuk menggambar dan semua penggambaran yang
lebih tinggi tingkatnya harus dilakukan dengan mengambil fungsi dasar dari perintah ini.
Maka dari itu dapat dibuat library itu sendiri di atas program OpenGL yang mempermudah
pemrograman lebih lanjut. Fungsi asli dari OpenGL sendiri selalu diawali dengan gl yang
terdapat pada library opengl32.dll dan file header gl.h. Sedangkan beberapa library yang
telah ditulis untuk menyediakan fungsi-fungsi tambahan pada OpenGL adalah :
1. OpenGL Utility Library (GLU) yang didalamnya terdapat sejumlah rutin yang
menggunakan level bawah dari perintah OpenGL. Rutin-rutin ini mempunyai awalan
glu. Library ini digunakan sebagai bagian dari implementasi OpenGL.
2. OpenGL Extension untuk X-Windows yang menyediakan fungsi untuk menciptakan
OpenGL context dan mengasosiasikannya dengan mesin yang menggunakan X-
Windows. Rutin-rutin ini mempunyai awalan glx.
3. Auxiliary atau aux library terdapat pada library glaux.lib dan file header glaux.h.
Perintah yang akan digunakan selalu menggunakan awalan aux
4. OpenGL Utility Toolkit (GLUT) adalah toolkit untuk sistem windows yang ditulis oleh
Mark Kilgard untuk menyembunyikan perintah API sistem windows yang kompleks.

Menggambar Objek Geometri

Pada OpenGL ada dua dasar operasi gambar yaitu membersihkan windows dan
menggambar objek geometri termasuk titik, garis dan poligon.

Membersihkan Windows
Menggambar pada layar komputer berbeda dengan menggambar pada kertas putih yang
dari pabriknya sudah berwarna putih. Pada komputer, memory untuk menampilkan gambar
biasanya diisi dengan gambar yang berasal dari perintah gambar paling akhir, jadi perlu
dibersihkan dengan warna latar belakang sebelum digambar lagi. Warna latar belakang yang
dipilih tergantung dari aplikasi yang akan dibuat. Sintaks glClearColor(Glclamp red,Glclamp
green, Glclamp blue, Glclamp alpha) digunakan untuk memilih warna, yang akan digunakan
untuk membersihkan latar belakang dalam mode RGBA. Selanjutnya perintah
glClear(Glbitfield mask) digunakan untuk membersihkan buffer yang dispesifikasikan dengan
warna yang telah ditentukan. Contoh berikut ini perintah yang digunakan untuk
membersihkan layar latar belakang dengan warna hitam dan buffer apa yang akan
dibersihkan. Dalam hal ini, buffer warna yang akan dibersihkan karena buffer warna
merupakan tempat gambar disimpan.
glClearColor(0.0,0.0,0.0);
glClear(GL_COLOR_BUFFER_BIT);

Spesifikasi Warna
Pada OpenGL mendeskripsikan objek dengan warna objek adalah proses yang berjalan
sendiri-sendiri. Karena pada umumnya seorang programmer akan mengatur warna terlebih
dahulu lalu menggambar objek. Sebelum warna diubah maka semua objek yang digambar
sesudah perintah tersebut akan menggunakan warna terakhir yang terdapat pada coloring
scheme.
Untuk warna digunakan perintah glColor3f(), jika lebih dari tiga maka argumen keempat
adalah alpha yang akan dijelaskan pada bagian blending sebagai salah satu efek yang
dipunyai OpenGL. Contoh berikut menunjukkan urutan langkah dalam proses spesifikasi
warna sebelum objek digambar.
glColor3f(0.0,1.0,0.0); //setting warna
draw_object(A); //gambar objek A
Memaksa Proses Menggambar Sampai Selesai
Kebanyakan sistem grafik modern sudah menggunakan sistem graphics pipeline. Dimana
CPU utama memberikan issue perintah menggambar dan hardware lain yang melakukan
transformasi, clipping, shading, texturing dan lain-lain. Pada arsitektur yang demikian,
proses tidak dilakukan pada satu komputer karena setiap komputer mempunyai tugas
sendiri. CPU utama tidak harus menunggu proses pada masing-masing komputer tadi
selesai, tapi bisa dengan memberikan issue perintah gambar yang berikutnya. Untuk inilah
OpenGL menyediakan perintah glFlush() yang memaksa client untuk segera mengirim paket
network walaupun belum penuh. Program sebaiknya ditulis menggunakan perintah ini
karena glFlush() tidak memaksa proses gambar untuk selesai tetapi memaksa proses
gambar untuk segera dieksekusi, sehingga dijamin semua perintah gambar yang
sebelumnya akan segera dieksekusi dalam suatu waktu tertentu.

Instalasi OpenGL
Berikut adalah tahapan dalam melakukan instalasi OpenGL pada MS Visual C++ 6.0.
1. File dll yang diperlukan seperti glu32.dll, glut32.dll, dan opengl32.dll harus ada
didalam folder Windows  System32, seperti tampak pada gambar 1.
File opengl32.dll dan glu32.dll akan ada di folder windows/system32 pada saat
melakukan instalasi Windows XP

Gambar 1. File dll di Windows System32

2. File header(gl.h, glaux.h, glu.h, dan glut.h) harus ditempatkan di folder tempat MS
VC++ di instal dan harus diletakan di subfolder Include/ GL. File gl.h, glaux.h, dan
glu.h akan otomatis terpasang ketika instalasi MS VC++ dilakukan.
 Gambar 2. File header OpenGL
3. File lib (glaux.lib, glu32.lib, glut.lib, glut32.lib dan opengl32.lib) harus tersedia di
subfolder Lib. File glaux.lib, glu32.lib dan opengl32.lib akan terpasang ketika instalasi
MS VC++.

Gambar 3. file lib OpenGL

Penggambaran Primitif Grafik Dasar
OpengGL menyediakan banyak fungsi untuk kebanyakan grafik primitif termasuk titik, garis
dan lingkaran. Masing-masing perintah atau fungsi dalam OpenGL mempunyai format dan
struktur yang sama. Ini memudahkan untuk mengetahui bagaimana jalannya fungsi,
argumen yang dibutuhkan untuk melakukannya dan format tipe datanya. Pada tabel 1
menunjukan contoh perintah OpenGL yang digunakan, dan tabel 2 menunjukan format
fungsi OpenGL.
Tabel 1. Contoh-contoh Perintah dalam OpenGL
Perintah Arti Keterangan
glVertex2i(x,y); Lokasi titik berada (x,y)
Tipe argumennya adalah
integer dan 2D (x,y)
glVertex2f(x,y); Lokasi titik berada (x,y) Tipe argumennya adalah
float dan 2D (x,y)
glVertex3i(x,y,z); Lokasi titik berada (x,y,z) Tipe argumennya adalah
integer dan 3D (x,y,z)
glVertex3f(x,y,z); Lokasi titik berada (x,y,z) Tipe argumennya adalah
float dan 3D (x,y,z)
glClearColour(R,G,B, ); Warna latar belakang Empat komponen warna
RGBA
glColor3f(R,G,B) Warna latar muka Tiga komponen warna
(RGB)
glColor4f(R,G,B, ) Warna latar muka Empat komponen warna
(RGBA)
glBegin(GL_POINTS); Titik Objek primitif
glBegin(GL_LINES); Garis Objek primitif
glBegin(GL_LINE_STRIP); Poligaris Objek primitif
glBegin(GL_LINE_LOOP); Poligaris tertutup Objek primitif
glBegin(GL_TRIANGLES); Segitiga Objek primitif
glBegin(GL_TRIANGLE_STRIP); Segitiga Objek primitif
glBegin(GL_TRIANGLE_FAN); Segitiga Objek primitif
glBegin(GL_QUADS); Segiempat Objek primitif
glBegin(GL_QUADS_STRIP); Segiempat Objek primitif
glBegin(GL_LINE_STIPPLE); Garis putus-putus Objek primitif
glBegin(GL_POLY_STIPPLE); Poligon dengan pola Objek primitif
tertentu
Tabel 2. Format Fungsi OpenGL

Suffix Tipe Data C++ atau C OpenGL

b Integer 8-bit Signed char GLbyte

s Integer 16-bit Short GLshort

i Integer 32-bit Int atau long GLint,GLsizei

f Float 32-bit float GLfloat

d Float 64-bit Double GLdouble

Memulai Visual C++ dan OpenGL
Pada bagian ini akan diterangkan langkah-langkah dalam pembuatan project, setting untuk
OpenGL, serta pembuatan program dengan menggunakan Microsoft Visual C++ 6.0

Membuat Project Baru

1. Pilih Start  Program  Microsoft Visual C++ 6.0
2. Pilih menu File  New, kemudian akan tampil kotak dialog seperti pada gambar 4.
Kemudian pilih tab Project  Win32 Console Application, tentukan lokasi file
yang akan dibuat, misal : D:\Grafika\, kemudian berikan nama proyek pada Project
Name, misal program1 setelah itu tekan tombol OK.

Gambar 4. Kotak dialog New project

3. Selanjutnya akan muncul kotak dialog Win32 Console Application – Step 1, pilih An
empty project, kemudian tekan tombol Finish
 Gambar 5. Win32 Console Application – Step 1
4. Setelah itu akan tampil New Project Information, tekan tombol OK

Gambar 6. New Project Information

5. Kemudian akan tampil seperti pada gambar 7.
 Gambar 7. Tampilan Project

Membuat/ menambah File ke dalam Project

Setelah project pada MS VC++ 6.0 selesai dibuat maka langkah berikutnya adalah
membuat/ menambah file ke dalam project tersebut. Berikut ini adalah langkah-langkah
dalam proses tersebut.
1. Pilih File View pada gambar 7, seperti yang ditunjukan oleh gambar oval. Kemudian
klik tanda plus (+) untuk menampilkan list yag ada pada file program1.
 Gambar 8. Tampilan File View
2. Klik kanan pada program1 files, kemudian pilih Add Files to Project …

Gambar 9. Menambahkan File ke Project

3. Setelah itu berikan nama file baru yang akan ditambahkan ke dalam project misal
test1.cpp dan file tersebut harus diberi dengan nama extention *.cpp, lalu tekan
tombol OK. Kemudian akan muncul kotak dialog yang akan mengkonfirmasi bahwa
file test1.cpp akan ditambahkan ke project.
 Gambar 10. Mengisi nama file
4. Selanjutnya klik tanda plus (+) untuk menampilkan file test1.cpp lalu klik dua kali
pada test1.cpp untuk membuat filenya dan akan muncul kotak dialog informasi
seperti pada gambar 11. Tekan tombol Yes.

Gambar 11. Membuat file baru

5. Setelah itu akan muncul editor yang siap digunakan untuk membuat program.

Gambar 12. Editor MS VC++

Setting Project
Sebelum memulai membuat program, project harus disetting terlebih dahulu dengan melink
project dengan library dari OpenGL. Berikut adalah langkah-langkah dalam prosesnya.
1. Klik menu Project  Setting, kemudian akan tampil kotak dialog Project Setting
(Alt+F7) seperti pada gambar 13.

Gambar 13. Project Setting

2. Pilih tab Link kemudian tambahkan opengl32.lib glut32.lib glu32.lib glaux.lib
pada text object/library modules. Kemudian klik OK.

Program 1 (layar.cpp)
/* Program layar.cpp
* Pengenalan OpenGL
*/
#include <windows.h>
#include <GL\glut.h>

void display(void)
{
//membersihkan buffer
glClear(GL_COLOR_BUFFER_BIT);
glFlush();
}

void init(void){
//membuat background warna merah
glClearColor(1.0,0.0,0.0,0.0);
//set viewport dengan nilai 320 x 240, inisialisasi windowsize
glViewport(0,0,320,240);
// set the 2D clipping area
gluOrtho2D(0.0, 160.0,0.0, 120.0);
}

/* Deklarasi window size, position, dan display mode(single buffer and RGBA).
* Pemanggilan routin inisialisasi.
* Memanggil fungsi untuk manampilkan objek di layar
*/
int main(int argc, char** argv)
{
glutInit(&argc, argv);
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize (320, 240);
glutInitWindowPosition (200, 100);
glutCreateWindow ("Program layar");
init ();
glutDisplayFunc(display);
glutMainLoop();
return 0;
}

Program 1 (Hallo.cpp)
/*
* Program hallo.cpp
* Pengenalan OpenGL
*/

#include <windows.h>
#include <GL/glut.h>

void display(void)
{
/* Membersihkan semua pixel di buffer(clear all pixels) */
glClear (GL_COLOR_BUFFER_BIT);

/* Menggambar polygon (rectangle) (0.25, 0.25, 0.0) dan (0.75, 0.75, 0.0)
* Objek berwarna hijau
*/
glColor3f (0.0, 1.0, 0.0);
glBegin(GL_POLYGON);
glVertex3f (0.25, 0.25, 0.0);
glVertex3f (0.75, 0.25, 0.0);
glVertex3f (0.75, 0.75, 0.0);
glVertex3f (0.25, 0.75, 0.0);
glEnd();

/* Memulai proses penggambaran

*/
glFlush ();
}

void init (void)

{
// Membuat warna background

glClearColor (0.0, 0.0, 0.0, 0.0);

/* inisialisasi nilai tampilan (viewing values) */

glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(0.0, 1.0, 0.0, 1.0, -1.0, 1.0);
}

/* Deklarasi window size, position, dan display mode(single buffer and RGBA).
* Pemanggilan routin inisialisasi.
* Memanggil fungsi untuk manampilkan objek di layar
*/
int main(int argc, char** argv)
{
glutInit(&argc, argv);
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize (640, 480);
glutInitWindowPosition (200, 100);
 glutCreateWindow ("Program Pertamaku");
init ();
glutDisplayFunc(display);
glutMainLoop();
return 0;
}

Program 2 (garis.cpp)
/* Program garis.cpp
* Pengenalan OpenGL
*/
#include <windows.h>
#include <GL\glut.h>

void display(void)
{
//membersihkan buffer
glClear(GL_COLOR_BUFFER_BIT);
//menggambar garis
glBegin(GL_LINES);
glColor3f(1.0,0.0,0.0); //merah
glVertex2f(10.0,10.0);
glColor3f(0.0,0.0,1.0); //biru
glVertex2f(10.0,110.0);
glColor3f(0.0,1.0,0.0); //hijau
glVertex2f(100.0,110.0);
glColor3f(1.0,1.0,0.0); //kuning
glVertex2f(100.0,10.0);
glEnd();
glFlush();
}

void reshape(int w, int h){

glViewport (0,0, (GLsizei) w, (GLsizei) h);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0.0,160.0,0.0,120.0);

void init(void){
//membuat background warna merah
glClearColor(0.0,0.0,0.0,0.0);
//set viewport dengan nilai 320 x 240, inisialisasi windowsize
glViewport(0,0,320,240);
// set the 2D clipping area
gluOrtho2D(0.0, 160.0,0.0, 120.0);
glPointSize(5.0);
}

/* Deklarasi window size, position, dan display mode(single buffer and RGBA).
* Pemanggilan routin inisialisasi.
* Memanggil fungsi untuk manampilkan objek di layar
*/

int main(int argc, char** argv)

{
glutInit(&argc, argv);
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize (320, 240);
glutInitWindowPosition (200, 100);
glutCreateWindow ("Program layar");
init ();
glutDisplayFunc(display);
glutMainLoop();
 return 0;
}
Grafik Komputer dan Pengolahan Citra

Grafik Komputer :
KONSEP DASAR

Universitas Gunadarma
2006

Grafik Komputer : Konsep Dasar 1/14

 Grafik Komputer dan Pengolahan Citra

Kegiatan yang Terkait dengan

Grafik Komputer
• Pemodelan geometris: menciptakan
model matematika dari objek-objek 2D
dan 3D.

• Rendering: memproduksi citra yang

lebih solid dari model yang telah
dibentuk.

• Animasi: Menetapkan/menampilkan
kembali tingkah laku/behavior objek
bergantung waktu .

Grafik Komputer : Konsep Dasar 2/14

 Grafik Komputer dan Pengolahan Citra

Kerangka Grafik Komputer

Interaktif

Graphics
Application Application
Library Graphics
model program
(GL) System

• 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

• Citra merupakan hasil akhir dari sintesa, disain,

manufaktur, visualisasi dll.

Grafik Komputer : Konsep Dasar 3/14

 Grafik Komputer dan Pengolahan Citra

Pemodelan Geometris

• Transformasi dari suatu konsep (atau suatu

benda nyata) ke suatu model geometris yang bisa
ditampilkan pada suatu komputer :
– Shape/bentuk
– Posisi
– Orientasi (cara pandang)
– Surface Properties / Ciri-ciri Permukaan (warna,
tekstur)
– Volumetric Properties / Ciri-ciri volumetric
(ketebalan/pejal, penyebaran cahaya)
– Lights/cahaya (tingkat terang, jenis warna)
– Dan lain-lain …

• Pemodelan Geometris yang lebih rumit :

– Jala-Jala segi banyak: suatu koleksi yang besar dari
segi bersudut banyak, dihubungkan satu sama lain.
– Bentuk permukaan bebas: menggunakan fungsi
polynomial tingkat rendah.
– CSG: membangun suatu bentuk dengan menerapkan
operasi boolean pada bentuk yang primitif.

Grafik Komputer : Konsep Dasar 4/14

 Grafik Komputer dan Pengolahan Citra

Elemen-elemen Pembentuk Grafik:

GEOMETRI
Titik
2D
Garis

Polygon Kurva Lingkaran

3D

Grafik Komputer : Konsep Dasar 5/14

 Grafik Komputer dan Pengolahan Citra

Pemrosesan Citra untuk

Ditampilkan di Layar

Vector Display Raster Display

2D/3D Citra/ Grafik 2D Tampilan

Model Data Komputer Citra

Grafik Komputer : Konsep Dasar 6/14

 Grafik Komputer dan Pengolahan Citra

Hardware Display Grafik : Vektor

• Vetor (calligraphic, stroke, random-scan)

• Arsitektur Vektor

Grafik Komputer : Konsep Dasar 7/14

 Grafik Komputer dan Pengolahan Citra

Hardware Display Grafik : Raster

• Raster (TV, bitmap, pixmap), digunakan dalam
layar dan laser printer

• Arsitektur Raster

Grafik Komputer : Konsep Dasar 8/14

 Grafik Komputer dan Pengolahan Citra

Elemen-elemen Pembentuk Grafik:

WARNA (1/4)

• Sistem Visual Manusia

Pembentukan Citra oleh Sensor Mata

• Intensitas cahaya ditangkap oleh diagram iris dan

diteruskan ke bagian retina mata.
• Bayangan obyek pada retina mata dibentuk dengan
mengikuti konsep sistem optik dimana fokus lensa
terletak antara retina dan lensa mata.
• Mata dan syaraf otak dapat menginterpretasi
bayangan yang merupakan obyek pada posisi terbalik.

Grafik Komputer : Konsep Dasar 9/14

 Grafik Komputer dan Pengolahan Citra

Elemen-elemen Pembentuk Grafik:

WARNA (2/4)
Sistem Visual Manusia….(lanjutan)

• Fovea di bagian retina terdiri dari dua jenis receptor:

– Sejumlah cone receptor, sensitif terhadap warna, visi cone disebut
photocopic vision atau bright light vision
– Sejumlah rod receptor, memberikan gambar keseluruhan pandangan
dan sensitif terhadap iluminasi tingkat rendah, visi rod disebut scotopic
vision atau dim-light vision

• Blind Spot
– adalah bagian retina yang tidak mengandung receptor sehingga tidak
dapat menerima dan menginterpretasi informasi
255
Black
• Subjective brightness
– Merupakan tingkat kecemerlangan yang dapat
ditangkap sistem visual manusia;
Gray 128
– Merupakan fungsi logaritmik dari intensitas
cahaya yang masuk ke mata manusia;
– Mempunyai daerah intensitas yang bergerak dari
ambang scotopic (redup) ke photocopic (terang).
White 0
• Brightness adaption
– Merupakan fenomena penyesuaian mata manusia Brightness Spacing
– dalam membedakan gradasi tingkat kecemerlangan; Proses Kwantisasi
– Batas daerah tingkat kecemerlangan yang mampu Brightness Resolution
dibedakan secara sekaligus oleh mata manusia lebih kecil
dibandingkan dengan daerah tingkat kecemerlangan sebenarnya.

Grafik Komputer : Konsep Dasar 10/14

 Grafik Komputer dan Pengolahan Citra

Elemen-elemen Pembentuk Grafik:

WARNA (3/4)

• Kubus Warna RGB

-Sistem Koordinat
dengan R,G, B sebagai
axes.

• Model Warna CMY

M Magenta
-Sistem Koordinat dengan C, M, Y sebagai Blue
axes; banyak digunakan untuk Red Black
menggambarkan warna pada perangkat
output hard-copy
Cyan
- Grayscale axis runs from (0,0,0) to (1,1,1). C
- Color : proses substractive. Yellow Green
Y

Grafik Komputer : Konsep Dasar 11/14

 Grafik Komputer dan Pengolahan Citra

Elemen-elemen Pembentuk Grafik:

WARNA (4/4)
• True Color

• Indexed Color

• High Color

High Color
True Color

Indexed Color

Grafik Komputer : Konsep Dasar 12/14

 Grafik Komputer dan Pengolahan Citra

Koordinat Sistem

• Koordinat sistem Jendela / (0,0) x

Layar Monitor

y
y
• Koordinat sistem
Framebuffer OpenGL

(0,0) x

Contoh : 2
1. (0, 0)
3
2. (5, 7)
1
3. (8, 3)

Grafik Komputer : Konsep Dasar 13/14

 Grafik Komputer dan Pengolahan Citra

Dasar Matematika yang Diperlukan

dalam Grafik Komputer

– Geometry (2D, 3D)

– Trigonometry
– Vector spaces
• Points, vectors, dan koordinat
– Dot dan cross products

Grafik Komputer : Konsep Dasar 14/14

 Grafik Komputer dan Pengolahan Citra

Grafik Komputer :
Geometri Primitive

Universitas Gunadarma

Grafik Komputer : Geometri Primitive 1/12

 Grafik Komputer dan Pengolahan Citra

Menggambar GARIS (1/11)

• Garis adalah kumpulan titik-titik yang tersusun sedemiki-
an rupa sehingga memiliki pangkal dan ujung.
• Suatu titik pada layar terletak pada posisi (x,y), untuk
menggambarkannya plot suatu pixel dengan posisi yang
berkesesuaian.
• Contoh program :
Setpixel (x,y) (x, y) (x, y)

• Penampilan garis pada layar komputer dibedakan

berdasarkan Resolusi-nya.
– Resolusi : keadaan pixel yang terdapat pada suatu area
tertentu
– Contoh : Resolusi 640x480, berarti pada layar kompuer
terdapat 640 pixel per-kolom dan 480 pixel per-baris.
– Resolusi dapat pula dibedakan menjadi kasar, medium dan
halus.
High Resolution
Low Resolution

Grafik Komputer : Geometri Primitive 2/12

 Grafik Komputer dan Pengolahan Citra

Menggambar GARIS (2/11)

Pixel Aktif

• Untuk menggambarkan garis seperti gambar di

atas, diperlukan pixel aktif.
• Parameter pixel address yang membentuk garis
pada layar adalah :
Pixel X Y
1 1 2
2 2 3
3 3 3
4 4 4
5 5 5
6 6 5
7 7 6

Grafik Komputer : Geometri Primitive 3/12

 Grafik Komputer dan Pengolahan Citra

Menggambar GARIS (3/11)

• Untuk menampilkan atau menggambarkan garis

pada layar dibutuhkan minimal 2 titik (endpoint),
yaitu titik awal dan akhir.
– Awal garis dimulai dengan titik atau pixel pertama,
P1 diikuti titik kedua, P2.
– Untuk mendapatkan titik-titik selanjutnya sampai ke
Pn perlu dilakukan inkrementasi atas nilai koordinat
sumbu X dan Y pada titik sebelumnya.
– Perhitungan inkrementasi untuk masing-masing
sumbu adalah berbeda :
Jenis Sumbu-X Sumbu-Y
Horisontal Gerak (X=X+1) Konstan
Vertikal Konstan Gerak (Y=Y+1)
Diagonal Gerak (X=X+1) Gerak (Y=Y+1)
Bebas Gerak (X=X+n) Gerak (Y=Y+n)

n dan m adalah nilai inkrementasi

– Persamaan Umum Garis : y = mx +c

Grafik Komputer : Geometri Primitive 4/12

 Grafik Komputer dan Pengolahan Citra

Menggambar GARIS (4/11)

• Garis Horisontal y
– Garis yang membentang secara paralel
dengan sumbu X dengan asumsi titik P1
pada koordinat X1 lebih kecil daripada X2 dari P2,
sedangkan Y1 dan Y2 konstant
– Algoritma : x
1. Menentukan titik awal (P1) dan titik akhir (P2)
2. Periksa posisi sumbu (koordinat)
Jika titik ahir < titik awal,
Lakukan inkrementasi sumbu X dati titik awal sampai titik akhir
Jika tidak, maka
Lakukan dekrementasi sumbu X dati titik awal sampai titik akhir
3. Tampilkan garis menggunakan parameter koordinat yang telah
dihitung.

• Garis Vertikal y
– Garis yang membentang secara paralel
dengan sumbu Y dengan asumsi titik P1
pada koordinat Y1 lebih kecil daripada Y2 dari P2,
sedangkan X1 dan X2 konstant
– Algoritma :
1. Menentukan titik awal (P1) dan titik akhir (P2) x
2. Periksa posisi sumbu (koordinat)
Jika titik ahir < titik awal,
Lakukan inkrementasi sumbu Y dati titik awal sampai titik akhir
Jika tidak, maka
Lakukan dekrementasi sumbu Y dati titik awal sampai titik akhir
3. Tampilkan garis menggunakan parameter koordinat yang telah
dihitung.

Grafik Komputer : Geometri Primitive 5/12

 Grafik Komputer dan Pengolahan Citra

Menggambar GARIS (5/11)

• Garis Diagonal
– Garis yang membentang secara paralel y
45 derajat dari sumbu X atau sumbu Y
dengan asumsi titik awal P1 dengan
koordinat X1 dan Y1 lebih kecil daripada
X2 dan Y2 atau sebaliknya.
x
– Algoritma :
1. Menentukan titik awal (P1) dan titik akhir (P2)
2. Periksa posisi sumbu (koordinat)
Jika titik ahir < titik awal,
Lakukan inkrementasi sumbu X dan sumbut Y dati titik awal
sampai titik akhir
Jika tidak, maka
Lakukan dekrementasi sumbu X dan sumbu Y dati titik awal
sampai titik akhir
3. Tampilkan garis menggunakan parameter koordinat yang
telah dihitung.

Grafik Komputer : Geometri Primitive 6/12

 Menggambar GARIS
Garis Bebas
(Simple Digital Differential Analyzer/DDA)

1. Tentukan 2 titik yang akan dihubungkan

dalam pembentukan garis
2. Tentukan titik awal yaitu (x0, y0) dan (x1,y 1)
titik akhir
3. Hitung dx = x1 – x0 dan dy = y1 – y0
4. Tentukan step = max (|dx|, |dy|)
5. Hitung penambahan koordinat pixel XInc =
dx/step dan YInc = dy/step
6. Koordinat selanjutnya (x + XInc, y + YInc)
7. Posisi pada layar ditentukan dengan
pembulatan nilai koordinat tersebut
8. Ulangi nomor 6 dan 7 untuk menentukan
posisi pixel berikutnya sampai x = x1 dan y =
y1
 Menggambar GARIS
Garis Bebas
(Algoritma Bresenham)

1. Tentukan 2 titik yang akan dihubungkan

dalam pembentukan garis
2. Tentukan sala satu titik di sebelah kiri
sebagai titik awal dan titik lainnya
sebagai titik akhir
3. Hitung nilai dx, dy, 2dy, dan 2dy – 2dx
4. Hitung parameter P0 = 2dy – dx
5. Untuk setiap xk sepanajng garis dimulai
dengan k = 0
a. Bila Pk < 0 maka titik selanjutnya
adalah (xk + 1, yk) dan Pk+1 = Pk +
2dy
b. Bila Pk > 0 maka titik selanjutnya
adalah (xk + 1, yk + 1) dan Pk+1 = Pk
+ 2dy – 2dx
6. Ulangi langkah 5 untuk menentukan
posisi pixel selanjutnya sampai x = x1
dan y = y1
 Latihan Soal

1. Diketahui dua titik untuk membentuk garis,

yaitu A(10,10) dan B(17,16). Buat table
perhitungan dan gambar grafik untuk titik-
titik yang dihasilkan algoritma:
a. DDA
b. Brensenham
2. Diketahui dua titik untuk membentuk garis,
yaitu A(10,5) dan B(15,9). Buat table
perhitungan dan gambar grafik untuk titik-
titik yang dihasilkan algoritma:
a. DDA
b. Brensenham
 Grafik Komputer dan Pengolahan Citra

Grafik Komputer :
Transformasi Geometri
2 Dimensi

Universitas Gunadarma
2006

Grafik Komputer : Transformasi Geometri 2D 1/11

 Grafik Komputer dan Pengolahan Citra

Matriks dan
Transformasi Geometri
⎡ M11 M12 L M1n ⎤
⎢ M21 M22 L M2n ⎥⎥
• Representasi umum suatu Matriks adalah : M=⎢
⎢ M M O M ⎥
⎢ ⎥
⎣Mm1 Mm2 L Mmn ⎦

dimana pada Matriks Mrc, r adalah kolom dan c baris.

⎡ v1 ⎤
• Suatu Vektor direpresentasikan sebagai matriks kolom : v = ⎢⎢ v 2⎥⎥
⎢⎣ v 3 ⎥⎦

• Perkalian Matriks dan Vektor dapat digunakan untuk

transformasi linier suatu vektor. ⎡M M M ⎤⎡v ⎤ 11 12 13 x ⎡a ⎤
M • v = ⎢⎢ M 21 M 22 ⎥ ⎢ ⎥
M 23 ⎥ ⎢ v y ⎥ = ⎢⎢ b ⎥⎥
⎢⎣ M 31 M 32 M 33 ⎥⎦ ⎢⎣ v z ⎥⎦ ⎢⎣ c ⎥⎦

• Suatu sekuens transformasi linier berkorespondensi

dengan matriks korespondennya : M M M v = v
1 2 3 old new
dimana, Vektor hasil di sisi kanan dipengaruhi matriks transformasi linier
dan vektor awal.

• Jadi….. Suatu Transformasi Linier :

– Memetakan suatu vektor ke vektor lain
– Menyimpan suatu kombinasi linier

Grafik Komputer : Transformasi Geometri 2D 2/11

 Grafik Komputer dan Pengolahan Citra

TRANSLASI
• Translasi adalah suatu pergerakan/perpindahan semua titik dari
objek pada suatu jalur lurus sehingga menempati posisi baru.
• Jalur yang direpresentasikan oleh vektor disebut Translasi atau
Vektor Geser.
⎡a b ⎤ ⎡ x ⎤ ⎡ x'⎤
• Pergeseran tersebut dapat ditulis : ⎢ ⎥ ⎢ y ⎥ = ⎢ y '⎥
⎣ c d ⎦⎣ ⎦ ⎣ ⎦

• Untuk merepresentasikan translasi dalam matriks 3x3 kita

dapat menulisnya :
⎡1 0 Tx ⎤ ⎡1 0 Tx ⎤ ⎡ x ⎤ ⎡ x + Tx ⎤
⎢ ⎥ ⎢ ⎥⎢ ⎥ ⎢ ⎥
Translation = ⎢0 1 Ty ⎥ ⎢ 0 1 T y ⎥ ⎢ y ⎥ = ⎢ y + Ty ⎥
⎢0 0 1 ⎥ ⎢0 0 1 ⎥ ⎢⎣ 1 ⎥⎦ ⎢⎣ 1 ⎥⎦
⎣ ⎦ ⎣ ⎦

Tx = 2
Ty = 1

Grafik Komputer : Transformasi Geometri 2D 3/11

 Grafik Komputer dan Pengolahan Citra

ROTASI
• Rotasi adalah mereposisi semua titik dari objek sepanjang jalur
lingkaran dengan pusatnya pada titik pivot.

(x’, y’) x’ = x cos(θ) - y sin(θ)

y’ = x sin(θ) + y cos(θ)
(x, y)
x = r cos (Φ)
y = r sin (Φ)
θ x’ = r cos (Φ + θ)
φ y’ = r sin (Φ + θ)
Identitas Geometri…
x’ = r cos(Φ) cos(θ) – r sin(Φ) sin(θ)
y’ = r sin(Φ) sin(θ) + r cos(Φ) cos(θ)
Substitusi…
x’ = x cos(θ) - y sin(θ)
y’ = x sin(θ) + y cos(θ)

• Untuk memudahkan perhitungan dapat digunakan matriks:

⎡ x'⎤ ⎡cos(θ ) − sin (θ )⎤ ⎡ x ⎤
⎢ y '⎥ = ⎢ sin (θ ) cos(θ ) ⎥ ⎢ y ⎥
⎣ ⎦ ⎣ ⎦⎣ ⎦
Dimana :
- sin(θ) dan cos(θ) adalah fungsi linier dari θ,
- x’ kombinasi linier dari x dan y
– y’ kombinasi linier dari x and y

Grafik Komputer : Transformasi Geometri 2D 4/11

 Grafik Komputer dan Pengolahan Citra

SKALA
• Penskalaan koordinat dimaksudkan untuk menggandakan
setiap komponen yang ada pada objek secara skalar.
• Keseragaman penskalaan berarti skalar yang digunakan
sama untuk semua komponen objek.

×2

• Ketidakseragaman penskalaan berarti skalar yang

digunakan pada objek adalah tidak sama.

X × 2,
Y × 0.5

• Operasi Skala : ⎡ x'⎤ ⎡ax ⎤

⎢ y '⎥ = ⎢by ⎥
⎣ ⎦ ⎣ ⎦

atau dalam bentuk matriks :⎡ x'⎤ = ⎡a 0⎤ ⎡ x ⎤

⎢ y '⎥ ⎢0 b⎥ ⎢ y ⎥
⎣ ⎦ ⎣ ⎦⎣ ⎦

Grafik Komputer : Transformasi Geometri 2D 5/11

 Grafik Komputer dan Pengolahan Citra

CONTOH
• Translasi : Y 6
⎡4⎤
5 ⎢4⎥
⎣ ⎦
4

dx = 2 3

dy = 3 2
⎡2⎤
1 ⎢1 ⎥
⎣ ⎦
0
1 2 3 4 5 6 7 8 9 10
X

Y
• Skala : 6
5
sx = 3 4

sy = 2 3
2
⎡6 ⎤ ⎡9 ⎤
1 ⎡2⎤ ⎡3⎤ ⎢2⎥ ⎢2⎥
⎢1 ⎥ ⎢1 ⎥ ⎣ ⎦ ⎣ ⎦
⎣ ⎦ ⎣ ⎦
0
1 2 3 4 5 6 7 8 9 10
X
Y
• Rotasi :
6
π
5 θ=
6
4
3
2
1 θ

0
1 2 3 4 5 6 7 8 9 10
X

Grafik Komputer : Transformasi Geometri 2D 6/11

 Grafik Komputer dan Pengolahan Citra

Koordinat Homogen
• Koordinat Homogen adalah representasi koordinat 2 dimensi
dengan 3 vektor.
⎡ x⎤
⎡ ⎤ homogeneous coords ⎢ ⎥
x
⎢ y ⎥ ⎯⎯ ⎯ ⎯ ⎯⎯→ ⎢ y ⎥
⎣ ⎦ ⎢⎣ 1 ⎥⎦

⎡ cos( θ ) − sin( θ ) 0⎤
R otation = ⎢⎢ sin( θ ) cos( θ ) 0 ⎥⎥
⎢⎣ 0 0 1 ⎥⎦

⎡ a 0 0⎤
Scale = ⎢⎢ 0 b 0⎥⎥
⎢⎣ 0 0 1⎥⎦

⎡1 0 Tx ⎤
⎢ ⎥
Translation = ⎢0 1 Ty ⎥
⎢0 0 1 ⎥
⎣ ⎦

Grafik Komputer : Transformasi Geometri 2D 7/11

 Grafik Komputer dan Pengolahan Citra

Transformasi Gabungan (1/3)

• Kita dapat merepresentasikan 3 transformasi
dalam sebuah matriks tunggal.
– Operasi yang dilakukan adalah perkalian matriks
– Tidak ada penanganan khusus ketika
mentransformasikan suatu titik : matriks • vector
– Transformasi gabungan : matriks • matriks

• Tranformasi Gabungan :
– Rotasi sebagai titik perubahan : translasi – rotasi-
translai
– Skala sebgai titik perubahan : translasi – skala-
translasi
– Perubahan sistem koordinat : translasi – rotasi –
skala

• Langkah yang dilakukan :

1. Urutkan matriks secara benar sesuai dengan
transformasi yang akan dilakukan.
2. Kalikan matriks secara bersamaan
3. Simpan matriks hasil perkalian tersebut (2)
4. Kalikan matriks dengan vektor dari verteks
5. Hasilnya, semua verteks akan ter-transformasi
dengan satu perkalian matriks.

Grafik Komputer : Transformasi Geometri 2D 8/11

 Grafik Komputer dan Pengolahan Citra

Transformasi Gabungan (2/3)

• Perkalian Matriks bersifat Asosiatif :
⎛ ⎡a b ⎤ ⎡ e f ⎤⎞ ⎡i j ⎤ ⎡ae + bg af + bh⎤ ⎡ i j⎤
⎜⎢ ⎟•
⎜ c d ⎥ • ⎢g h ⎥⎦ ⎟⎠ ⎢⎣k
=
l ⎥⎦ ⎢⎣ ce + dg
•
cf + dh ⎥⎦ ⎢⎣k l ⎥⎦
⎝⎣ ⎦ ⎣
⎡aei + bgi + afk + bhk aej + bgj + afl + bhl ⎤
=⎢
⎣ cei + dgi + cfk + dhk cej + dgj + cfl + dhl ⎥⎦

⎡a b ⎤ ⎛ ⎡ e f ⎤ ⎡i j ⎤ ⎞ ⎡a b ⎤ ⎡ ei + fk ej + fl ⎤
⎢ c d ⎥ • ⎜⎜ ⎢ g •
h ⎥⎦ ⎢⎣k
⎟= •
l ⎥⎦ ⎟⎠ ⎢⎣ c d ⎥⎦ ⎢⎣ gi + hk gj + hl ⎥⎦
⎣ ⎦ ⎝⎣
⎡aei + afk + bgi + bhk aej + afl + bgj + bhl ⎤
=⎢
⎣ cei + cfk + dgi + dhk cej + cfl + dgj + dhl ⎥⎦

• Perkalian Matriks tidak bersifat Komutatif

⎡a b ⎤ ⎡ e f ⎤ ⎡ae + bg af + bh ⎤
⎢c d ⎥ • ⎢ g =
h ⎥⎦ ⎢⎣ ce + dg cf + dh ⎥⎦
⎣ ⎦ ⎣
⎡e f ⎤ ⎡a b ⎤ ⎡ ea + fc eb + fd ⎤
⎢g • =
⎣ h ⎥⎦ ⎢⎣ c d ⎥⎦ ⎢⎣ ga + hc gb + hd ⎥⎦

Grafik Komputer : Transformasi Geometri 2D 9/11

 Grafik Komputer dan Pengolahan Citra

Transformasi Gabungan (3/3)

Contoh :
• Jika terdapat objek yang tidak terletak di titik pusat, maka bila
akan dilakukan pen-skala-an dan rotasi,kita perlu
mentranslasikan objek tersebut sebelumnya ke titik pusat baru
kemudian dilakukan pen-skala-an atau rotasi, dan terakhir
dikembalikan lagi ke posisi semula.
House ( H ) T ( dx , dy ) H R (θ )T ( dx , dy ) H T ( − dx , − dy ) R (θ )T ( dx , dy ) H

• Rotasikan sebuah segment garis sebesar 45o dengan endpoint pada titik a
!
– Posisi awal a
a
– Translasi ke titik pusat
a
– Rotasi 45o
a
– Translasi ke titik semula
a
⎡1 0 − 3⎤ ⎡cos(45) − sin(45) 0⎤ ⎡1 0 3⎤ ⎡ a x ⎤ ⎡ a ' x ⎤
⎢0 1 0 ⎥ ⎢ sin(45) cos(45) 0⎥ ⎢0 1 0⎥ ⎢a ⎥ = ⎢a ' ⎥
⎢ ⎥⎢ ⎥⎢ ⎥⎢ y ⎥ ⎢ y ⎥
⎢⎣0 0 1 ⎥⎦ ⎢⎣ 0 0 1⎥⎦ ⎢⎣0 0 1⎥⎦ ⎢⎣ 1 ⎥⎦ ⎢⎣ 1 ⎥⎦

Grafik Komputer : Transformasi Geometri 2D 10/11

 Grafik Komputer dan Pengolahan Citra

Transformasi Lainnya

• Refleksi
⎡−1 0 0⎤
⎡1 0 0⎤ ⎢ 0 −1 0⎥
⎢0 −1 0⎥ ⎡0 1 0⎤
⎢ ⎥ ⎢1 0 0⎥
⎢ ⎥ ⎢⎣ 0 0 1⎥⎦ ⎢ ⎥
⎢⎣0 0 1⎥⎦ ⎣⎢0 0 1⎥⎦

⎡−1 0 0⎤
⎢ 0 1 0⎥
⎢ ⎥
⎢⎣ 0 0 1⎥⎦

• Shear
Arah x Arah y

⎡1 shx 0⎤ ⎡ 1 0 0⎤
⎢0 1 0⎥ ⎢ sh
⎢ ⎥ ⎢ y 1 0 ⎥⎥
⎢⎣0 0 1⎥⎦ ⎢⎣ 0 0 1 ⎥⎦

Grafik Komputer : Transformasi Geometri 2D 11/11

Grafik Komputer dan Pengolahan Citra

Grafik Komputer :
KLIPING

Universitas Gunadarma
2006

Grafik Komputer : Kliping 1/13

 Grafik Komputer dan Pengolahan Citra

Definisi
• Kliping adalah pemotongan suatu objek dengan
bentuk tertentu

• Alasan dilakukannya kliping :

– Menghindari perhitungan koordinat pixel yang rumit
(karenanya kliping dilakukan sebelum rasterisasi).
– Interpolasi parameter

• Sarana pemotong objek disebut jendela kliping.

• Fungsi jendela kliping adalah untuk mengidentifikasi
objek yang akan di-clipping dan memastikan bahwa
data yang diambil hanya yang terletak di dalam
jendela clipping.

• Bentuk jendela kliping :

– Segi empat, segi tiga
– Lingkaran atau ellips
– Polygon dan lain-lain.

Grafik Komputer : Kliping 2/13

 Grafik Komputer dan Pengolahan Citra

Kliping Titik
• Untuk menentukan letak suatu titik di dalam jendela
kliping, digunakan ketentuan :
Xmin O X O Xmax dan
Ymin O Y O Ymax
Ymax
P2
P1

Ymin
Xmin Xmax
• Pada gambar di atas, terdapat sebuah jendela kliping
dengan parameter sebagai berikut :
Xmin - batas minimum sumbu X
Xmax - batas maksimum sumbu x
Ymin - batas minimum sumbu Y
Ymax - batas maksimum sumbu Y

• Terdapat w2 buah titik P1(x,y) dan P2(x,y) dengan :

– P1 terletak di dalam jendela kliping,karena
P1.x < Xmax dan P1.x > Xmin
serta P1.y < Ymax dan P1.y > Ymin
– P2 terletak di dalam jendela kliping,karena
P2.x < Xmin
walaupun P2.x < Xmax
P2.y < Ymax dan P2.y > Ymin

Grafik Komputer : Kliping 3/13

 Grafik Komputer dan Pengolahan Citra

Kliping Garis (1/2)

• Kliping sebuah garis P1 dan P2 dengan jendela L, R, T, dan B
akan berhubungan dengan garis yang terletak di dalam jendela
dan garis di luar jendela. Garis yang berada di dalam jendela
adalah garis yang akan ditampilkan (P1’ – P2’), sedangkan
garis yang terletak di luar jendela dibuat tidak tampak (P1 –
P1’ dan P2 – P2’)
T
P2

P2’
L R

P1’
P1
B
• Untuk menentukan letak sebuah garis di dalam jendela kliping
dilakukan analisis letak titik yang menentukan garis tersebut
dan memastikan bahwa titik-titik tersebut berada di dalam
jendela kliping.

Titik Asli Titik Semu Kondisi X Kondisi Y

P1(x,y) P1’(x,y) P1(x) ≥ L P1(y) ≤ T
P2(x,y) P2’(x,y) P2(x) ≤ R P2(x) ≥ B

Grafik Komputer : Kliping 4/13

 Grafik Komputer dan Pengolahan Citra

Kliping Garis (2/2)

• Kondisi garis terhadap jendela kliping :
– Invisible : Tidak kelihatan, terletak di luar jendela kliping
– Visible : Terletak di dalm jendela kliping
– Halfpartial : Terpotong sebagian oleh jendela kliping, bisa
hanya dnegan bagian atas, bawah, kiri atau kanan
– Vollpartial : Terpotong penuh oleh jendela kliping. Garis
melintasi jendela kliping

• Algoritma Umum Kliping

Mulai Baca Garis

Baca Jendela Kliping

Invisible Cek Garis Visible

Kliping Garis

P’(x,y),P2'(x,y)

Gambar Garis Selesai

Grafik Komputer : Kliping 5/13

 Grafik Komputer dan Pengolahan Citra

Kliping Garis
Cohen-Sutherland (1/6)
• Hubungan antara sebuah garis dengan jendela kliping
dapat ditulis seperti hubungan antara titik awal dan titik
akhir sebuah garis dengan jendela kliping
P1(x,y) dan P2(x,y) ⇔ W(L,R,T,B)
• Untuk menentukan relasi tersebut diperlukan suatu
struktur data pembantu yang disebut pointcode.
Dengan pointcode kita dapat mengidentifikasi posisi
titik terhadap jendela kliping.
• Nilai untuk pointcode l, r, t dan b adalah 1 dan 0 yang
merupakan nilai logika yang dapat dimengerti dengan
nilai true dan false.
• Suatu titik yang visible berarti titik tersebut terletak di
dalam jendela kliping, dan invisible jika terletak di luar
jendela kliping.

• Suatu titik itu visible dengan pointcode jika nilai l, r, t

dan b adalah nol, artinya jika salah satu nilai dari l, r, t
dan b tidak sama degan nol maka dapat diketahui
bahwa titik tersebut terletak di luar jendela kliping dan
diketahui pada posisi mana.

Grafik Komputer : Kliping 6/13

 Grafik Komputer dan Pengolahan Citra

Kliping Garis
Cohen-Sutherland (2/6)
• Berdasarkan urutan kode, pointcode ditentukan :
T B R L 1001 1000 1010

0001 0000 0010

0101 0100 0110

pointcode Arti Kode

0000 Terletak di dalam jendela kliping
0001 Terletak di sebelah kiri jendela kliping
0010 Terletak di sebelah kanan jendela kliping
0100 Terletak di sebelah bawah jendela kliping
0101 Terletak di sebelah kiri bawah jendela kliping
0110 Terletak di sebelah kanan bawah jendela kliping
1000 Terletak di sebelah atas jendela klipig
1001 Terletak di sebelah kiri atas jendela kliping
1010 Terleak di sebelah kanan atas jendela kliping

• Titik terletak di dalam jendela kliping jika jumlah keempat

pointcode adalah nol :L + R + T + B = 0
• Titik terletak di luar jendela kliping jika jumlah keempat
pointcode lebih besar dari nol. L + R + T + B > 0

Grafik Komputer : Kliping 7/13

 Grafik Komputer dan Pengolahan Citra

Kliping Garis
Cohen-Sutherland (3/6)
• Visibilitas suatu garis tergantung dari pointcode pada
kedua titik yang membentuk garis tersebut, yaitu P1
dan P2.
– Jika P1 dan P2 di dalam jendela kliping maka garis adalah
visible
– Jika salah satu dari titik P1 atau P2 di uar jendela kliping,
artinya garis adalah halfpartial
– Jika titik P1 dan P2 di luar jendela kliping, artinya garis adalah
invisible.
– Jika P1 dan P2 melintasi jendela kliping, artinya garis adalah
vollpartial

• Algoritma Kliping Cohen-Sutherland :

1. Tentukan regioncode dari setiap endpoint
2. Jika kedua endpoint memiliki regioncode 0000, maka garis
berada di dalam jendela kliping. Gambar garis tersebut
3. Jika tidak, lakukan operasi logika AND untuk kedua regioncode
3.1. Jika hasilnya 0000, maka buang garis tersebut (tolak)
3.2 Jika tidak (hasilnya 000), maka dibutuhkan kliping
3.2.1. Pilih salah satu endpoint yang berada di luar jendela kliping
3.2.2. Cari titik persinggungan pada batas jendela (berdasarkan regioncode)
3.2.3. Ganti endpoint dengan titik persinggungan dan update regioncode
3.2.4. Ulangi langkah 2 hingga diperoleh garis klipping yang diterima dan yang
ditolak
4. Ulangi langkah 2 untuk garis yang lain.

Grafik Komputer : Kliping 8/13

 Grafik Komputer dan Pengolahan Citra

Kliping Garis
Cohen-Sutherland (4/6)
• Daerah titik persinggungan dapat dilihat dari nilai bit :
– Jika bit 1 = 1, titik persinggungan ada di atas
– Jika bit 2 = 1, titik persinggungan ada di bawah
– Jika bit 3 = 1, titik persinggungan ada di kanan
– Jika bit 4 = 1, titik persinggungan ada di kiri
• Titik persinggungan dapat dicari dengan persamaan
garis :
– Persinggungan antara batas KIRI dan KANAN
x = xwmin (LEFT) x = xwmax (RIGHT)

y = y1 + m(x –x1)

– Persinggungan antara batas ATAS dan BAWAH

y = ywmin (BOTTOM) y = ywmax (TOP)

x = x1 + (y –y1)/m

Grafik Komputer : Kliping 9/13

 Grafik Komputer dan Pengolahan Citra

Kliping Garis
B1 Cohen-Sutherland (5/6)
1001 D1’ 1000 1010
D1
B2
D1”
C1 A2

0001 A1 0000 0010

C1’

C2 D2”

D2’
0101 0100 0110
D2
Garis C1 – C2
Garis A1- A2 1. C1=0001,C2=0000
1. A1=0000,A2=0000 2. (both 0000) – No
……now
2. (both 0000) – Yes 3. AND Operation
C1 Æ 0001 1. C1=0000,C2=0000
-> accept & draw
C2 Æ 0000 2. (both 0000) – Yes
Garis B1 – B2 Result 0000 Æ accept & draw
1. B1=1001,B2=1010 3.1 (not 0000) - No
2. (both 0000) – No 3.2 (0000) - Yes
3. AND Operation 3.2.1 Choose C1
B1 Æ 1001 3.2.2 Intersection point
B2 Æ 1010 C1’ at LEFT
Result 1000 3.2.3 C1 < C1’
3.1 (not 0000) – Yes C1 = 0000
Æ reject 3.2.4 repeat 2
next…….

Grafik Komputer : Kliping 10/13

 Grafik Komputer dan Pengolahan Citra

Kliping Garis
Cohen-Sutherland (6/6)
(150, 100)

1. P1=1001, P2=0100
2. (both 0000) – No
3. AND Operation
B1 Æ 0000
B2 Æ 0100
(10, 10) Result 0000
3.1 (not 0000) – no
3.2 (0000) yes
3.2.1choose P2
Diketahui jendela kliping 3.2.2 intersection with BOTTOM
seperti di atas. Bila titik P1 boundary
adalah (0, 120) dan titik m = (5-120)/(130-0) = -0.8846
x = x1 + (y –y1)/m where y = 10;
P2(130, 5), carilah titik-titik x = 130 + (10-5)/ -0.8846 = 124.35
persinggungan yang P2’ = (124, 10)
membentuk garis baru di 3.2.3 update region code
dalam jendela kliping. P2’ = 0000
Gunakan algoritma Cohen- 3.2.4 repeat step 2
Sutherland ! next……..
….now
1. P1=1001, P2=0100
2. (both 0000) – yes
Æ ACCEPT & DRAW

Endpoints after clipping

P1’’ = (22, 100) P2’ = 124, 10)

Grafik Komputer : Kliping 11/13

 Grafik Komputer dan Pengolahan Citra

Kliping Poligon
Sutherland-Hodgeman (1/2)
• Kliping poligon lebih kompleks dibandingkan
kliping garis :
– Input: poligon
– Output: poligon asli, poligon baru, atau lainnya

• Contoh : Apa yang terjadi apabila pada suatu

segitiga dilakukan kliping ?
Kemungkinan hasilnya :

segitiga Ö segitiga segitiga Ö segiempat segitiga Ö segilima

Grafik Komputer : Kliping 12/13

 Grafik Komputer dan Pengolahan Citra

Kliping Poligon
Sutherland-Hodgeman (2/2)
• Ide Dasar Kliping Poligon :
– Perhatikan setiap edge pada setiap arah pandang.
– Klip/potong poligon dengan persamaan edge.
– Lakukan pada semua edge, hingga poligon
tersebut secara penuh ter-klip/terpotong.

Grafik Komputer : Kliping 13/13