SISTEM KOORDINAT KOMPUTER GRAFIK DAN VISUALISASI Alvin Adam

SISTEM KOORDINAT KOMPUTER GRAFIK DAN VISUALISASI Alvin Adam Nasution (181401049) M Daffa Abigail (181401073) Mhd Iqbal Maulana (181401118) Vika Nabilla A (181401133)

SISTEM KOORDINAT Pada komputer grafik ada 3 macam sistem koordinat yang harus kita perhatikan : • Koordinat nyata • Koordinat sistem (koordinat cartesian) • Koordinat tampilan / layar KOORDINAT NYATA (WORLD COORDINATE) adalah koordinat yang pada saat itu objek yang bersangkutan berada, misal koordinat sebuah kursi Tergantung dari letak kursi itu ada dimana, bagaimana letaknya. Dalam implementasinya koordinat nyata bisa dikatakan sebagai WINDOW yaitu area di dunia nyata yang menunjukkan bagian yang dilihat oleh pemirsa. 2

KOORDINAT CARTESIAN Setiap titik yang digambar dengan teknik point-plotting lokasinya ditentukan berdasarkan sistem koordinat cartesian. Setiap titik ditentukan lokasinya melalui pasangan nilai x dan y. Dimana nilai koordinat x bertambah positif dari kiri ke kanan dan nilai y bertambah positif dari bawah ke atas. 3

KOORDINAT TAMPILAN LAYAR • • • Arah sumbu koordinat kartesian berkebalikan dengan yang digunakan di layar komputer. Pada layar komputer sumbu x bertambah positif ke kanan dan sumbu y bertambah positif ke bawah. Seperti pada gambar berikut jika sebuah titik pada koordinat cartesian digambar ulang ke layar komputer maka secara visual lokasi titik tersebut akan berubah. 4

Dalam implementasinya, koordinat tampilan/layar bisa dikatakan sebagai VIEWPORT yaitu area di layar monitor yang menunjukkan dimana WINDOW akan ditampilkan. Untuk memetakan sebuah titik di window ke titik di viewport digunakan rumus : Dengan xv = s x * xw + t x VR − VL yv = s y * yw + t y Sx = ---------WR − WL VL * WR − VR * WL Tx = ------------WR − WL VT − VB Sy = -------------WT − WB VB * WT − VL * WB Ty = -------------WT − WB 5

Algoritma Garis n Masalah : q Pixel mana yang harus dipilih untuk menggambar sebuah garis ? 6

ALGORITMA GARIS n n Algoritma garis adalah algoritma untuk menentukan lokasi pixel yang paling dekat dengan garis sebenarnya (actual line) Ada tiga algoritma utama untuk menggambar garis : q q q Line Equation DDA Algorithm Bresenham’s Algorithm 7

Kuadran Garis Kuadran Kriteria Arah Garis (x 2, y 2) I (x 1 < x 2) dan (y 1 < y 2) (x 1, y 1) (x 2, y 2) II (x 1 > x 2) dan (y 1 < y 2) (x 1, y 1) III (x 1 > x 2) dan (y 1 > y 2) (x 2, y 2) (x 1, y 1) IV (x 1 < x 2) dan (y 1 > y 2) (x 2, y 2) Contoh (1, 1) – (4, 5) (-3, 2) – (-1, 4) (4, 2) – (3, 4) (-3, -3) – (-6, -1) (6, -2) – (4, -5) (9, 5) – (1, 2) (3, 9) – (6, 2) (-2, 1) – (4, -5) 8

Kuadran Garis 8 7 (x 1, y 1) 6 5 B 4 3 2 1 8 7 (x 2, y 2) A 4 3 D (x 2, y 2) 2 (x 2, y 2) (x 1, y 1) 0 1 2 6 5 (x 1, y 1) 3 4 5 6 7 8 9 (x 2, y 2) C 1 (x 1, y 1) 0 1 2 3 4 5 6 7 8 9 Di kuadran mana garis A ? Di kuadran mana garis B ? Dapatkah garis A dan B dinyatakan sebagai garis dengan kuadran yang sama ? Bagaimana caranya ? Bagaimana halnya dengan garis C dan D ? 9

Kuadran Garis A : (3 ; 1) – (8 ; 4) q n Garis A berada di kuadran I Garis B : (3 ; 7) – (1 ; 2) q q Garis B berada di kuadran III m = (2 – 7) / (1 – 3) = -5 / -2 = 2. 5 tetapi apabila garis B dinyatakan sebagai (1 ; 2) – (3 ; 7) maka garis B akan berada di kuadran I m = (7 – 2 ) / ( 3 – 1) = 5 / 2 = 2. 5 10

LINE EQUATION n Sebuah garis lurus dapat diperoleh dengan menggunakan rumus : y = mx + b n dimana : q q m = gradien b = perpotongan garis dengan sumbu y. y 2 y 1 b x 1 x 2 11

LINE EQUATION n Apabila dua pasang titik akhir dari sebuah garis dinyatakan sebagai (x 1, y 1) and (x 2, y 2), maka nilai dari gradien m dan lokasi b dapat dihitung dengan : (1) (2) 12

Contoh n Gambar garis (0, 1) – (5, 7) dengan menggunakan Line Equation x 1 = x 2 = m = b = 7 6 5 4 3 2 1 0 x 0 1 2 3 4 5 6 7 8 0 y 1 = 1 5 y 2 = 7 (7 -1)/(5 -0) = 1, 2 1 – 1, 2 * 0 = 1 y 0 1. 2 * 0 + 1 = 1 1 1. 2 * 1 + 1 = 2, 2 ≈ 2 2 1. 2 * 2 + 1 = 3, 4 ≈ 3 3 1. 2 * 3 + 1 = 4, 6 ≈ 5 4 1. 2 * 4 + 1 = 5, 8 ≈ 6 5 1. 2 * 5 + 1 = 7 13

Gradien dan Tipe Garis y 2 miring 45 o tegak y 2 mendatar y 1 y 1 x 1 m = tak terdefinisi x 2 m=0 x 1 x 2 m=1 y 2 cenderung mendatar cenderung tegak y 2 y 1 x 1 0<m<1 x 2 x 1 x 2 m>1 14

Tipe Garis 8 7 6 5 B 4 3 A 2 1 0 1 2 3 4 5 6 7 8 9 Dapatkah anda mencari perbedaan yang esensial antara garis A dan B (misal : gradien, pertambahan x dan y) ? 15

Tipe Garis n Garis A : (3; 1) – ( 8; 4) q q q n Garis B : (1; 2) – (2; 7) q q q n m = (y 2 – y 1) / (x 2 – x 1) = (4 -1)/ (8 -3) = 3/5= 0, 6 0<m<1 xi+1 = xi + 1 ; yi+1 = yi + d 1 m = (7 -2) / (2 -1) = 5 / 1 = 5 m>1 xi+1 = xi + d 2 ; yi+1 = yi + 1 Berapa nilai d 1 dan d 2 ? 16

ALGORITMA DDA n n Digital differential analyzer (DDA) merupakan algoritma untuk menghitung posisi pixel disepanjang garis dengan menggunakan posisi pixel sebelumnya. Algoritma berikut ini menggunakan asumsi bahwa garis berada di kuadran I atau II serta garis bertipe cenderung tegak atau cenderung mendatar. 17

Algoritma DDA n Untuk garis dengan 0 < m < 1, maka xi+1 = xi +1 dan : (3) n Untuk garis dengan m > 1, maka yi+1 = yi + 1 dan : (4) 18

Algoritma DDA n Garis dengan 0 > m > -1, maka xi+1 = xi-1 dan (5) n Sedangkan bila m < -1, maka yi+1 = yi+1 dan (6) 19

Contoh Algoritma DDA n Gambar garis dari (0; 1) – (5; 7) dengan menggunakan DDA. x 1=0, y 1=1 x 2=5, y 2=7 m = (7 -1)/(5 -0) = 1, 20 1/m=1/1, 20 = 0, 83 7 6 5 4 3 2 1 0 x 0 1 2 y 0 1 0+0, 83 = 0, 83 ≈ 1 2 0, 83+0, 83 = 1, 66 ≈ 2 3 1, 66+0, 83 = 2, 59 ≈ 3 4 2, 59+0, 83 = 3, 42 ≈ 3 5 3, 42+0, 83 = 4, 25 ≈ 4 6 4, 25+0, 83 = 5, 08 ≈ 5 7 3 4 5 6 7 8 20

Algoritma Bresenham n n Bresenham mengembangkan algorithma yang lebih efisien. Algorithma ini mencari nilai integer yang paling mendekati garis sesungguhnya (actual line). Algorithma ini tidak memerlukan pembagian. Berdasarkan selisih antara garis yang diinginkan terhadap setengah ukuran dari pixel yang sedang digunakan 3 2 actual line 1 0 0 1 2 3 4 21

Algoritma Bresenham n n Algorithma Bresenham yang disajikan berikut ini hanya dapat digunakan untuk garis yang berada di kuadran I dan 0 < m < 1. Pembuktian matematis dari algorithma Bresenham dapat dibaca pada buku Computer Graphics (Hearn dan Baker) 22

Algoritma Bresenham Xi+1, yi+1 Actual line xi, yi Xi+1, yi d 1=m – ½, karena d 1< 0 atau negatif maka pixel berikutnya adalah pixel (xi+1, yi) 23

Algoritma Bresenham Xi+1, yi+1 d 1 Actual line Xi+1, yi xi, yi d 1=m – ½, karena d 1> 0 atau positif maka pixel berikutnya adalah pixel (xi+1, yi+1) 24

Algoritma Bresenham (0 < m < 1) dx = x 2 – x 1 ; dy = y 2 – y 1 d 1 =2 * dy ; d 2 =2 * (dx – dy) p = d 1 – dx x = x 1 ; y = y 1 p = p + d 1 y=y T p >= 0 Y p = p - d 2 y = y +1 x = x +1 stop x >= x 2 25

Algoritma Bresenham n n Contoh Soal : Gambar garis berikut ini dengan menggunakan algorithma Bresenham : (0; 1) – (6; 5) (2; 2) – (7; 5) (0; 1) – (5; 7) 26

Algoritma Bresenham Garis : (0; 1) - (6; 5) 8 7 6 5 4 3 2 1 0 0 1 p x y 2 0 1 -2 1 2 6 2 2 2 3 3 -2 4 4 6 5 4 2 6 5 2 3 4 5 6 7 8 9 10 27

Algoritma Bresenham Garis : (2; 2) - (7; 5) 8 7 6 5 4 3 2 1 0 0 1 p x y 1 2 2 -3 3 4 3 -1 5 4 5 6 4 1 7 5 2 3 4 5 6 7 8 9 10 28

Algoritma Bresenham Garis : (0; 1) - (5; 7) 8 7 6 5 4 3 2 1 0 0 1 p x y 7 0 1 9 1 2 11 2 3 13 3 4 15 4 5 17 5 6 2 3 4 5 6 7 8 9 10 29

Algoritma Bresenham n Mengapa garis (0; 1) – (5; 7) tidak dapat digambar dengan tepat ? q Garis (0; 1) – (5; 7) mempunyai m = 1, 2, dengan demikian asumsi pada algorithma tersebut tidak tepat dan harus disesuaikan. 30

Algoritma Bresenham ( m > 1) dx = x 2 – x 1 ; dy = y 2 – y 1 d 1 =2 * dx ; d 2 =2 * (dx – dy) p = d 1 – dy x = x 1 ; y = y 1 p = p + d 1 x=x T p >= 0 Y p = p + d 2 x = x +1 y = y +1 stop y >= y 2 31

Algoritma Bresenham (m > 1) Garis : (0; 1) - (5; 7) 8 7 6 5 4 3 2 1 0 0 1 p x y 4 0 1 2 0 2 3 -2 3 4 8 3 5 6 4 5 7 2 3 4 5 6 7 8 9 10 32

SUMBER Gunawan, Rudy. Sistem Koordinat Grafika Komputer. Nugroho, H. Edhi. Grafika Komputer – Algoritma Garis. 33