Line Drawing Algorithms

Make it work

Make it fast

Quest for Ideal Line

Grafika Komputer © Sekolah Tinggi Teknik Surabaya, 2003 1

• Garis di atas adalah ideal line yang kita inginkan• Batasan yang ada: layar monitor terdiri dari

sekumpulan pixel• Yang bisa kita lakukan adalah membuat perkiraan

bentuk garis ideal

Syarat Perkiraan Garis

Grafika Komputer © Sekolah Tinggi Teknik Surabaya, 2003 2

• Syarat yang harus dipenuhi adalah:• Tampilan garis harus kontinyu, tidak putus-putus• Ketebalan harus sama• Harus sedekat mungkin dengan garis ideal• Harus cepat

Ingatlah Persamaan Garis

• Gradient dihitung dari m = (y2-y1) / (x2-x1)• Dari persamaan di atas, coba kita buat program

sederhana untuk menggambar garis

Grafika Komputer © Sekolah Tinggi Teknik Surabaya, 2003 3

Y = mX + c

X dan Y : koordinatm : gradientc : konstanta

c(x1, y1)

(x2, y2)

Simple Line (DDA Algorithm)

Grafika Komputer © Sekolah Tinggi Teknik Surabaya, 2003 4

procedure DD_Line(row1,col1,row2,col2,color : integer)var dx, dy, y, m : real; x : integer;begin    dx := col2 - col1;    dy := row2 - row1;    m := dy / dx;    y := row1;    for x := col1 to col2 do     begin     SetPixel(x, Round(y), color);     y := y + m;     endend;

DDA = Digital

Differential Analyzer

Sempurnakan lagi …

• Buatlah pengecekan bila gradient > 1• Buatlah pengecekan bila

x1>x2 atau y1>x2

Grafika Komputer © Sekolah Tinggi Teknik Surabaya, 2003 5

JADI TUGAS

YA!

Kelemahan DDA …

Grafika Komputer © Sekolah Tinggi Teknik Surabaya, 2003 6

• Ingat dulu rule optimisasi berikut ini:– penjumlahan & pengurangan lebih cepat dari perkalian– perkalian lebih cepat dari pembagian– menggunakan tabel lebih cepat dari menghitung fungsi– perhitungan integer lebih cepat dari float– hindari if-then sebisa mungkin

• Terlihat bahwa DDA perlu optimisasi besar2an

Algoritma Bresenham

Grafika Komputer © Sekolah Tinggi Teknik Surabaya, 2003 7

• Algoritma yang jauh lebih cepat dibuat oleh Bresenham (1965)

• Algoritma ini cuma menggunakan integer• Banyak yang percaya bahwa tidak ada cara

menggambar garis yang lebih cepat lagi selain algoritma ini

Jack Bresenham

Algoritma Bresenham (pascal)

Grafika Komputer © Sekolah Tinggi Teknik Surabaya, 2003 8

procedure Bresenham(xa,xb:col;ya,yb:row;col_val:color)var  x : col;  y : row; dx, dy,  e_inc, {change in error when y increments}  e_noinc, {change in error when no increment in y}  e : integer; {curent error term}begin y := ya; dx := xb - xa; dy := yb - ya; e_noinc := dy+dy; {initialize error terms} e := e_noinc - dx; e_inc := e - dx; for x:= xa to xb do {the main loop} begin SetPixel(x,y,col_val); if e<0 then e:=e+e_noinc else begin   y := y + 1;   e := e + e_inc   end;   end;end;

Algoritma Bresenham (C)

Grafika Komputer © Sekolah Tinggi Teknik Surabaya, 2003 9

Bresenham( POINT a, POINT b ){ int y = a.y, W = b.x – a.x, H = b.y – a.y; int F = 2 * H – W;

for ( int x = a.x; x <= b.x; x++ ) { setPixel( x,y ); if ( F<0 ) { F += 2*H; } else { y++; F += 2*(H-W); } }}

Tentu aja masih perlu ditambahin

dg pengecekan gradient dsb

Conto

Grafika Komputer © Sekolah Tinggi Teknik Surabaya, 2003 10

• Gambarlah garis dengan algoritma Bresenham dari (4,1) ke (16,4).

• W = 12 dan H = 3

x: 4 5 6 7 8 9 10 ...y: 1 1 2 2 2 2 3 ...F: -6 0 -18 -12 -6 0 -18 ...

• Lihat lanjutannya di papan tulis ...

Circle Drawing Algorithm

Grafika Komputer © Sekolah Tinggi Teknik Surabaya, 2003 11

• Tadi itu soal garis. Lalu bagaimana cara menggambar lingkaran?

Persamaan Lingkaran

Grafika Komputer © Sekolah Tinggi Teknik Surabaya, 2003 12

(xc, yc)

r

(x-xc)2+(y-yc)2=r2

• Persamaan ini susah diimplementasikan di program

x= xc + r * cos y= yc + r * sin

• Persamaan ini lebih mudah• Tapi ada cara yang lebih cepat!

Bagi Lingkaran Jadi 8

Grafika Komputer © Sekolah Tinggi Teknik Surabaya, 2003 13

• Lalu setiap segmen digambar dengan Michener’s Circle Algorithm (Mid-Point Algorithm)

Michener’s Circle Algorithm

Grafika Komputer © Sekolah Tinggi Teknik Surabaya, 2003 14

procedure MichCirc(xc:col;yc:row;Rad:integer;value:color)var x : col; y : row; d : integer;begin x := 0; y := Rad; d := 3 - 2 * Rad; while x<=y do         begin         SetPixel(xc+x,yc+y,value); {draw 8 points} …         if d<0 then d:=d+4*x+6 {update error term}        else begin     d := d + 4 * (x-y) + 10;       y := y + 1       end         x:=x+1          end end; End;

Aliasing vs Anti-Aliasing

Grafika Komputer © Sekolah Tinggi Teknik Surabaya, 2003 15

• Fakta bahwa mata manusia lebih toleran terhadap pola yang buram daripada pola yang jelas

• Anti-aliasing dilakukan untuk menghilangkan jagginess

Metode Anti-Aliasing (1)

Grafika Komputer © Sekolah Tinggi Teknik Surabaya, 2003 16

• Mempertebal garis. Ukuran pixel berdasar gradient.

Metode Anti-Aliasing (2)

Grafika Komputer © Sekolah Tinggi Teknik Surabaya, 2003 17

• Menggunakan intensitas yang berbeda-beda dalam menggambar garis

Setelah Itu Apa?

Grafika Komputer © Sekolah Tinggi Teknik Surabaya, 2003 18

• Beberapa algoritma dikembangkan setelah Bresenham. Misalkan: two-pass algorithm (Xiaolin Wu). Pelajarilah sendiri!

• Coba kembangkan algoritma untuk menggambar bentuk-bentuk lain