Grafika Komputer

PEMBANGKITAN
CITRA GRAFIK
Dosen :Dewi Octaviani, S.T, M.C.s

Sistem Koordinat
Grafik paling sederhana titik
Sistem koordinat cartesian yang dipakai untuk
membedakan lokasi atau posisi sembarang titik/obyek
Sistem koordinat cartesian 2D dan 3D
Dalam sistem koordinat 2D ditentukan oleh dua besaran,
berupa
sumbu
koordinat
mendatar(absis)
dan
tegak(ordinat)
Sistem koordinat 3D, ditambahkan sebuah sumbu lain
yang tegak lurus dgn absis juga dengan ordinat /
menembus bidang gambar

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

Sistem Koordinat Layar

Berbeda dengan sistem koordinat cartesian yang
mengenal sumbu x dan sumbu y (serta sumbu z untuk 3D)
Pada sistem koordinat layar, hanya dikenal sistem 2D
dimana hanya ada sumbu x dan y positif.
Koordinat (0,0) menunjukkan titik kiri atas layar, koordinat
(x1, y1) menunjukkan koordinat kanan bawah dari layar.

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

Pembangkitan Piksel
Piksel bisa dibangkitkan berdasarkan data digital. Nilai 0
berarti mati, nilai 1 berarti hidup.
Proses pembangkitan sbb :
Pada pengingat digital dan layar terdapat sebuah piranti
scan line
Scan line membaca pola digital baris per baris
Setiap kali scan line membaca satu baris pola digital,
pengolah tampilan akan menterjemahkan menjadi pola
piksel yang terlihat dalam layar.

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

Pembangkitan Garis
Dalam grafika, proses menghidupkan sejumlah piksel
membentuk garis disebut dengan pembangkitan vektor.
Garis yang akan dibangkitkan pasti mempunyai panjang
tertentu dan arah tertentu, dalam ilmu geometri besaran
yang mempunyai panjang dan arah dinamakan sebagai
vektor.

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

 Garis yang tampak pada layar harus memenuhi kriteria sbb :

Garus harus terlihat lurus

Garis harus berakhir pada titik yang tepat
Garis harus memiliki kerapatan (density) yang tetap
Tingkat kehitaman (blackness) tidak tergantung dari panjang garis

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

Persamaan Garis
Persamaan garis menurut koordinat Cartesian adalah

y = mx + b
dimana m adalah slope/kemiringan garis yang dibentuk
dari dua titik, yaitu (x1,y1) dan (x2,y2).Untuk penambahan x
sepanjang garis yaitu dx akan mendapatkan penambahan
y sebesar :

dy = m . dx

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

Atribut
Atribut dasar untuk garis lurus adalah type (tipe), width
(tebal) dan color (warna). Dalam beberapa paket aplikasi
grafik, garis ditampilkan dengan menggunakan pilihan pen
atau brush

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

Tipe Garis
Garis mempunyai beberapa linetype (tipe garis)
diantaranya solid line (garis tebal), dashed line (garis
putus), dan dotted line (garis titik-titik).
Garis putus dibuat dengan memberikan nilai jarak
dengan bagian solid yang sama.
Garis titiktitik dapat ditampilkan dengan memberikan
jarak yang lebih besar dari bagain solid.
Prosedur yang serupa digunakan pula untuk membuat
bermacam-macam tipe garis. Untuk mengatur atribut
dalam program aplikasi PHIGS menggunakan fungsi:
setLinetype (lt)
Grafika Komputer - STMIK Widya Cipta Dharma
Dosen : Dewi Octaviani, S.T, M.C.s

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

Algoritma DDA
Digital Diferensial Analyser (DDA) adalah algoritma
pembentukan garis berdasarkan perhitungan dx maupun
dy, menggunakan rumus

dy = m . dx
Garis dibuat menggunakan dua endpoint, yaitu titik awal
dan titik akhir. Setiap koordinat titik yang membentuk garis
diperoleh dari perhitungan, kemudian dikonversikan
menjadi nilai integer.

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

Langkah-langkah membentuk garis menurut algoritma DDA

adalah :
a)
b)
c)
d)
e)

Tentukan dua titik yang akan dihubungkan dalam pembentukan garis

Tentukan titik awal yaitu dan titik akhir .
Hitung dx = x1- x0 dan dy = y1 y0
Tentukan step = max( |dx| , |dy| )
Hitung penambahan koordinat pixel XInc = dx / step dan YInc = dy /
step
f) Koordinat selanjutnya (x+XInc, y+yInc)
g) Posisi pada layar ditentukan dengan pembulatan nilai koordinat
tersebut
h) Ulangi nomor 6 dan 7 untuk menentukan posisi pixel berikutnya.
sampai x=x1 dan y=y1.

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

Contoh Program Pembentukan Garis DDA

Diketahui dua titik untuk membentuk garis yaitu titik
A(10,10) dan B(17,16).
Buat table perhitungan untuk titik-titik yang dihasilkan oleh
algoritma DDA.
Buat program untuk mengimplementasikannya !

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

Tabel perhitungan
Urutan langkah-langkah agoritma DDA :
a) A(10,10) dan B(17,16)
b) (x0, y0) =(10,10) dan (x1, y1) =(17,16)
c) dx = x1 - x0 dx = 17 - 10 dx = 7
d) dy = y1 - y0 dy = 16 - 10 dy = 6
e) ( dx = 7 ) > ( dy = 6 ) maka step = 7
f) XInc = dx / step XInc = 7 / 7 XInc = 1
g) YInc = dy / step YInc = 6 / 7 YInc = 0,86
h) (x+XInc, y+yInc) = (10+1, 10+0,86)= (11, 10,86)
i) Dibulatkan (11,11)
Grafika Komputer - STMIK Widya Cipta Dharma
Dosen : Dewi Octaviani, S.T, M.C.s

Tabel Hasil Perhitungan

Ulangi langkah 5 dan 6 sampai 7 kali langkah. Akan
didapat table :

( xbulat , ybulat )

0
1
2
3
4
5
6

10
11
12
13
14
15
16
17

10
10,86
11,71
12,57
13,43
14,29
15,14
16

(10,10)
(11,11)
(12,12)
(13,13)
(14,13)
(15,14)
(16,15)
(17,16)
Grafika Komputer - STMIK Widya Cipta Dharma
Dosen : Dewi Octaviani, S.T, M.C.s

Latihan
Tentukan koordinat yang terbentuk
dengan Algoritma DDA untuk garis
dengan endpoint (1,3,8,5)

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)); }}
Grafika Komputer - STMIK Widya Cipta Dharma
Dosen : Dewi Octaviani, S.T, M.C.s

Algortima Bressenham
Prosedur untuk menggambar kembali garis dengan
membulatkan nilai x atau y ke bilangan integer memerlukan
waktu. serta variabel x,y maupun m memerlukan bilangan
real karena kemiringan merupakan nilai pecahan.
Bressenham mengembangkan algoritma klasik yang lebih
menarik, karena hanya menggunakan perhitungan
matematik dengan bantuan bilangan integer.
Dengan demikian tidak perlu membulatkan nilai posisi pixel
setiap waktu. Langkah-langkahnya adalah sebagai berikut:

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

 Langkah-langkah algoritma Bressenham

Tentukan dua titik yang akan dihubungkan dalam pembentukan
garis.
Tentukan salah satu titik disebelah kiri sebagai titik awal (x0,y0) dan
titik lainnya sebagai titik akhir (x1,y1)
Hitung dx, dy, 2dx dan 2dy-2dx
Hitung parameter P0 = 2dy - dx
Untuk setiap xk sepanjang garis dimulai dengan k=0
Bila Pk < 0 maka titik selanjutnya adalah (xk+1, yk) dan
Pk+1=Pk+2dy
Bila tidak maka titik selanjutnya adalah (xk+1, yk+1) dan
Pk+1=Pk+2dy-2dx
Ulangi nomor 5 untuk menentukan posisi pixel selanjutnya sampai
x=x1 dan y=y1

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

Prosedur Algoritma Bressenham

Void line (int xa,ya,xb,yb,xEnd; Float x,y)
{
int dx=abs(xb-xa),dy=abs(yb-ya),p=2*dydx,twoDy=2*dy,twoDyDx=2*(dy-dx);
if (xa>xb){ x=xb;
y=yb;
xEnd=xa; }
else{ x=xa;
y=ya;
xEnd=xb; }
SetPixel(x,y);
While (x<xEnd){
x++;
if (p<0){ p +=twoDy; }
else { y++; p+=twoDyDx; }
setPixel(x,y); } };
Grafika Komputer - STMIK Widya Cipta Dharma
Dosen : Dewi Octaviani, S.T, M.C.s

Algoritma Garis C++

Algoritma garis C++ adalah pembentukan garis dengan
memanfaatkan fungsi yang disediakan oleh C++.
Dalam C++, fungsi yang digunakan untuk pembentukan
garis dengan menggunakan pasangan fungsi MoveTo dan
LineTo.
MoveTo digunakan untuk mengubah posisi gambar dari X
ke Y.
LineTo digunakan untuk menggambar garis pada canvas
dengan pen dimana garis dimulai dari titik X menuju Y.

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

 Cara pemanggilan untuk kedua fungsi tersebut adalah :

void __fastcall MoveTo(int X, int Y);

void __fastcall LineTo(int X, int Y);

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

Pembangkitan Karakter
Tampilan gambar akan lebih sempurna jika ditambah
dengan kata atau kalimat.
Dua metoda untuk membangkitkan karakter, yaitu :
Stroke method
Metoda titik/ dot-matrix / bitmap method

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

Stroke Method
Dalam metoda ini, karkater dianggap sebagai kumpulan
segmen garis yang dihubungkan pada tempat-tempat
tertentu untuk membentuk karakter yang dimaksud.
Keuntungan : dengan mudah dapat memperbesar atau
memperkecil ukuran karakter yang dibangkitkan, dengan
cara memperpanjang / memperpendek segmen garis yang
ada.

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

Metoda Titik
Dalam metoda titik, karakter disajikan sebagai suatu larik
dimensi dua yang mempunyai beragam jumlah baris dan
kolom.
Setiap elemen larih dianggap sebagai piksel yang dapat
dihidupkan atau dimatikan.
Keuntungan : kita bisa membuat tulisan hitam seolah-olah
berada di atas layar putih atau sebaliknya.

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s

To be continue..

Grafika Komputer - STMIK Widya Cipta Dharma

Dosen : Dewi Octaviani, S.T, M.C.s