Transcript 2-Pembangkitan Citra Grafis

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 :
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 :
k
x
Y
( 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