pembangkitan citra grafik dosen : dewi octaviani , s.t, m.c.s

PEMBANGKITAN CITRA GRAFIK

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

Grafika Komputer

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 DharmaDosen : Dewi Octaviani, S.T, M.C.s

Grafika Komputer - STMIK Widya Cipta DharmaDosen : 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 DharmaDosen : Dewi Octaviani, S.T, M.C.s

Grafika Komputer - STMIK Widya Cipta DharmaDosen : 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 DharmaDosen : 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 DharmaDosen : 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 DharmaDosen : 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 DharmaDosen : Dewi Octaviani, S.T, M.C.s

Grafika Komputer - STMIK Widya Cipta DharmaDosen : 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 DharmaDosen : 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 titik–titik 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 DharmaDosen : Dewi Octaviani, S.T, M.C.s

Grafika Komputer - STMIK Widya Cipta DharmaDosen : 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 DharmaDosen : Dewi Octaviani, S.T, M.C.s

Langkah-langkah membentuk garis menurut algoritma DDA adalah :

a) Tentukan dua titik yang akan dihubungkan dalam pembentukan garis

b) Tentukan titik awal yaitu dan titik akhir .

c) Hitung dx = x1- x0 dan dy = y1 – y0

d) Tentukan step = max( |dx| , |dy| )

e) 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 DharmaDosen : 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 DharmaDosen : 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 DharmaDosen : Dewi Octaviani, S.T, M.C.s

Tabel Hasil Perhitungan• Ulangi langkah 5 dan 6 sampai 7 kali langkah. Akan

didapat table :

Grafika Komputer - STMIK Widya Cipta DharmaDosen : Dewi Octaviani, S.T, M.C.s

k x Y ),( bulatbulat yx

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)

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);elsesteps = 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 DharmaDosen : 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 DharmaDosen : 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 DharmaDosen : Dewi Octaviani, S.T, M.C.s

Prosedur Algoritma BressenhamVoid line (int xa,ya,xb,yb,xEnd; Float x,y){ int dx=abs(xb-xa),dy=abs(yb-ya),p=2*dy-dx,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 DharmaDosen : 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 DharmaDosen : Dewi Octaviani, S.T, M.C.s

• Cara pemanggilan untuk kedua fungsi tersebut adalah :

Grafika Komputer - STMIK Widya Cipta DharmaDosen : Dewi Octaviani, S.T, M.C.s

void __fastcall MoveTo(int X, int Y);void __fastcall LineTo(int X, int Y);

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 DharmaDosen : 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 DharmaDosen : 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 DharmaDosen : Dewi Octaviani, S.T, M.C.s

To be continue..

Grafika Komputer - STMIK Widya Cipta DharmaDosen : Dewi Octaviani, S.T, M.C.s