Pembangkitan Citra Grafik Dosen :Dewi Octaviani, S.T, M.C.s 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 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 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 : 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 Koordinat selanjutnya (x+XInc, y+yInc) Posisi pada layar ditentukan dengan pembulatan nilai koordinat tersebut 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

Urutan langkah-langkah agoritma DDA : A(10,10) dan B(17,16) Tabel perhitungan Urutan langkah-langkah agoritma DDA : A(10,10) dan B(17,16) (x0, y0) =(10,10) dan (x1, y1) =(17,16) dx = x1 - x0  dx = 17 - 10  dx = 7 dy = y1 - y0  dy = 16 - 10  dy = 6 ( dx = 7 ) > ( dy = 6 ) maka step = 7 XInc = dx / step  XInc = 7 / 7  XInc = 1 YInc = dy / step  YInc = 6 / 7  YInc = 0,86 (x+XInc, y+yInc) = (10+1, 10+0,86)= (11, 10,86) 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 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

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,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 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

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

Bentuk Garis 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

Gradien bernilai m > 1 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

Hasil dari fungsi : bilangan riil Koordinat pixel : integer 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