Grafika Komputer Pembangkitan Citra Grafik Dosen Dewi Octaviani

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 2 D dan 3 D • Dalam sistem koordinat 2 D ditentukan oleh dua besaran, berupa sumbu koordinat mendatar(absis) dan tegak(ordinat) • Sistem koordinat 3 D, 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 3 D) • Pada sistem koordinat layar, hanya dikenal sistem 2 D dimana hanya ada sumbu x dan y positif. • Koordinat (0, 0) menunjukkan titik kiri atas layar, koordinat (x 1, y 1) 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 (x 1, y 1) dan (x 2, y 2). 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 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: set. Linetype (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 = x 1 - x 0 dan dy = y 1 – y 0 Tentukan step = max( |dx| , |dy| ) Hitung penambahan koordinat pixel XInc = dx / step dan YInc = dy / step f) Koordinat selanjutnya (x+XInc, y+y. Inc) g) Posisi pada layar ditentukan dengan pembulatan nilai koordinat tersebut h) Ulangi nomor 6 dan 7 untuk menentukan posisi pixel berikutnya. sampai x=x 1 dan y=y 1. 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) (x 0, y 0) =(10, 10) dan (x 1, y 1) =(17, 16) c) dx = x 1 - x 0 dx = 17 - 10 dx = 7 d) dy = y 1 - y 0 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+y. Inc) = (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 : 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 line. DDA (int x 0, int y 0, int x. End, int y. End) { int dx = x. End - x 0, dy = y. End - y 0, steps, k; float x. Increment, y. Increment, x = x 0, y = y 0; if (fabs (dx) > fabs (dy)) steps = fabs (dx); else steps = fabs (dy); x. Increment = float (dx) / float (steps); y. Increment = float (dy) / float (steps); set. Pixel (round (x), round (y)); for (k = 0; k < steps; k++) { x += x. Increment; y += y. Increment; set. Pixel (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 (x 0, y 0) dan titik lainnya sebagai titik akhir (x 1, y 1) – Hitung dx, dy, 2 dx dan 2 dy-2 dx – Hitung parameter P 0 = 2 dy - dx – Untuk setiap xk sepanjang garis dimulai dengan k=0 • Bila Pk < 0 maka titik selanjutnya adalah (xk+1, yk) dan Pk+1=Pk+2 dy • Bila tidak maka titik selanjutnya adalah (xk+1, yk+1) dan Pk+1=Pk+2 dy-2 dx – Ulangi nomor 5 untuk menentukan posisi pixel selanjutnya sampai x=x 1 dan y=y 1 Grafika Komputer - STMIK Widya Cipta Dharma Dosen : Dewi Octaviani, S. T, M. C. s

Latihan • Tentukan koordinat yang terbentuk dengan Algoritma Bressenham untuk garis dengan endpoint (20, 10, 30, 18)

Prosedur Algoritma Bressenham Void line (int xa, ya, xb, yb, x. End; Float x, y) { int dx=abs(xb-xa), dy=abs(yb-ya), p=2*dydx, two. Dy=2*dy, two. Dy. Dx=2*(dy-dx); if (xa>xb){ x=xb; y=yb; x. End=xa; } else{ x=xa; y=ya; x. End=xb; } Set. Pixel(x, y); While (x<x. End){ x++; if (p<0){ p +=two. Dy; } else { y++; p+=two. Dy. Dx; } set. Pixel(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 Move. To dan Line. To. • Move. To digunakan untuk mengubah posisi gambar dari X ke Y. • Line. To 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 Move. To(int X, int Y); void __fastcall Line. To(int X, int Y); Grafika Komputer - STMIK Widya Cipta Dharma Dosen : Dewi Octaviani, S. T, M. C. s

KUADRAN GARIS Grafika Komputer - STMIK Widya Cipta Dharma Dosen : Dewi Octaviani, S. T, M. C. s

Bentuk Garis 1. Cenderung Mendatar • Gradien bernilai 0 < m < 1 • Pixel bertambah 1 pada sumbu x dan bertambah sebesar m pixel pada sumbu y • Sumbu x sebagai parameter • Sumbu y sebagai hasil dari fungsi 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

2. Cenderung Tegak • Gradien bernilai m > 1 • Pixel bertambah 1 pada sumbu y dan bertambah sebesar 1/m pixel pada sumbu x • Sumbu y sebagai parameter • Sumbu x sebagai hasil dari fungsi 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

3. Miring 450 • Gradien bernilai m=1 • Pixel bertambah 1 pada sumbu x dan bertambah sebesar 1 pixel pada sumbu y • Hasil dari fungsi : bilangan riil • Koordinat pixel : integer • Harus dibulatkan ke integer terdekat 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 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