Pada komputer grafik ada 3 macam sistem koordinat yang harus di perhatikan :

Transkripsi

1

2 Pada komputer grafik ada 3 macam sistem koordinat yang harus di perhatikan : Koordinat nyata Koordinat sistem (koordinat cartesian) Koordinat tampilan / layar Grafika Komputer Page 2

3 Adalah koordinat yang pada saat itu objek yang bersangkutan berada. Ex: 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. Grafika Komputer Page 3

4 Setiap titik yang digambar dengan teknik pointplotting 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. Grafika Komputer Page 4

5 Grafika Komputer Page 5

6 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. Grafika Komputer Page 6

7 X Y Koordinat layar pada OS. Windows

8 Grafika Komputer Page 8

9 0,0 640,480

10 Dalam implementasinya koordinat tampilan/layar bisa dikatakan sebagai VIEWPORT yaitu area di layar monitor yang menunjukkan dimana WINDOW akan ditampilkan Grafika Komputer Page 10

11 Grafika Komputer Page 11

12 Untuk memetakan sebuah titik di window ke titik di viewport digunakan rumus : Grafika Komputer Page 12

13 13

14 Titik(point) dalam grafika komputer didefinisikan sebagai suatu posisi tertentu dalam sistem koordinat Pixel merupakan ukuran satuan gambar terkecil dalam layar dan dapat ditempati oleh satu titik Maksimum titik atau pixel yang dapat ditempati dalam satu layar disebut resolusi Membangkitkan pixel dalam BGI putpixel (x,y,color) Dalam OpenGL glvertex3f(0,0,-0.0)

15 Garis merupakan kumpulan titik titik Persamaan garis lurus pada koordinat kartesian y =m.x+b dimana: m=gradien, b=intercept m=y1-y0 / x1-x0 b= y1-m.x1 Berdasarkan algoritma diatas dikembangkan beberapa algoritma utk membangkitkan garis - Algoritma sederhana - Algoritma DDA ( digital differential Analyzer ) - Algoritma Bresenham

16 Garis adalah kumpulan titik-titik yang tersusun sedemiki-an rupa sehingga memiliki pangkal dan ujung. Suatu titik pada layar terletak pada posisi (x,y), untuk menggambarkannya plot suatu pixel dengan posisi yang berkesesuaian. Contoh program :Setpixel (x,y) 16

17 Tampilan garis pada layar komputer dibedakan berdasarkan Resolusi-nya. Resolusi : keadaan pixel yang terdapat pada suatu area tertentu Contoh : Resolusi 640x480, berarti pada layar komputer terdapat 640 pixel per-kolom dan 480 pixel per-baris. Resolusi dapat pula dibedakan menjadi kasar, medium dan halus. 17

18 Untuk menggambarkan garis seperti gambar di atas, diperlukan pixel aktif. 18

19 Parameter pixel address yang membentuk garispada layar adalah : 19

20 Untuk menampilkan atau menggambarkan garis pada layar dibutuhkan minimal 2 titik (endpoint), yaitu titik awal dan akhir. - Awal garis dimulai dengan titik atau pixel pertama, P1 diikuti titik kedua, P2. - Untuk mendapatkan titik-titik selanjutnya sampai ke Pn perlu dilakukan inkrementasi atas nilai koordinat sumbu X dan Y pada titik sebelumnya. 20

21 Menggambar GARIS (lanjt) - Perhitungan inkrementasi untuk masing-masing sumbu adalah berbeda : n dan m adalah nilai inkrementasi - Persamaan Umum Garis : y = mx +c 21

22 22

23 Garis yang membentang secara paralel dengan sumbu X dengan asumsi titik P1 pada koordinat X1 lebih kecil daripada X2 dari P2, sedangkan Y1 dan Y2 konstant Algoritma: 1. Menentukan titik awal (P1) dan titik akhir (P2) 2. Periksa posisi sumbu (koordinat)jika titik akhir > titik awal, Lakukan inkrementasi sumbu X dari titik awal sampai titik akhir. Jika tidak, maka Lakukan dekrementasi sumbu X dari titik awal sampai titik akhir 3. Tampilkan garis menggunakan parameter koordinat yang telah dihitung. 23

24 Garis yang membentang secara paralel dengan sumbu Y dengan asumsi titik P1 pada koordinat Y1 lebih kecil daripada Y2 dari P2, sedangkan X1 dan X2 konstant Algoritma: 1. Menentukan titik awal (P1) dan titik akhir (P2) 2. Periksa posisi sumbu (koordinat) Jika titik akhir > titik awal,lakukan inkrementasi sumbu Y dati titik awal sampai titik akhir. Jika tidak, maka lakukan dekrementasi sumbu Y dari titik awal sampai titik akhir 3.Tampilkan garis menggunakan parameter koordinat yang telah dihitung. 24

25 Garis yang membentang secara paralel 45 derajat dari sumbu X atau sumbu Y dengan asumsi titik awal P1 dengan koordinat X1 dan Y1 lebih kecil daripada X2 dan Y2 atau sebaliknya. Algoritma : 1. Menentukan titik awal (P1) dan titik akhir (P2) 2. Periksa posisi sumbu (koordinat)jika titik akhir > titik awal, lakukan inkrementasi sumbu X dan sumbu Y dari titik awal sampai titik akhir. Jika tidak, maka lakukan dekrementasi sumbu X dan sumbu Y dari titik awal sampai titik akhir 3. Tampilkan garis menggunakan parameter koordinat yang telah dihitung. 25

26 Prinsip algoritma DDA adalah mengambil nilai integer teredekat dengan jalur garis berdasarkan atas sebuah titik yang telah ditentukan sebelumnya (titik awal garis) Algoritma pembentukan garis DDA 1. Tentukan dua titik yang akan dihubungkan utk pembentukan garis 2. Tentukan salah satu titik sebagai awal (x0,y0) dan yang lain sebagai titik akhir (x1,y1) 3. Hitung dx=x1-x0 dan dy=y1-y0 4. Tentukan step untuk titik x dan y - if abs(dx) > abs(dy), step= dx else step= dy 5. Hitung penambahan koordinat pixel - x_increment = dx/step - y_increment = dy/step 6. Koordinat selanjutnya (x+x_inc, y+y_inc) 7. Posisi pixel pada layar merupakan pembulatan dari nilai koor pixel 8. Ulangi langkah 6 & 7 sampai x=x1 dan y=y1

27 Garis yang membentang antara 2 titik, P1 dan P2, selalu membentuk sudut yangbesarnya sangat bervariasi. Sudut yang terbentuk menentukan kemiringan suatu garis atau disebut gradient/ slop atau disimbolkan dengan parameter m. Jika titiktitik yang membetuk garis adalah : (x1,y1) dan (x2,y2) maka y m x, m y2- y1 x2 - x1 27

28 Algoritma DDA bekerja atas dasar penambahan nilai x dan nilai y. Pada garis lurus, turunan pertama dari x dan y adalah konstanta. Sehingga untuk memperoleh suatu tampilan dengan ketelitian tinggi, suatu garis dapat dibangkitkan dengan menambah nilai x dan y masing-masing sebesar x dan y. 28

29 Kondisi ideal ini sukar dicapai, karenanya pendekatan yang mungkin dilakukan adalah berdasarkan piksel-piksel yang bisa dialamati/dicapai atau melalui penambahan atau pengurangan nilai x dan y dengan suatu besaran dan membulatkannya ke nilai integer terdekat. 29

30 Algoritma bresenham tidak menggunakan pembulatan nilai real seperti DDA, melainkan penambahan nilai integer untuk membentuk garis Pada setiap iterasi algoritma bresenham, salah satu posisi (x atau y) diubah nilainya dengan 1,apabila x diubah, y bisa diubah ataupun tetap tergantung dari nilai e (ketelitian) begitupun sebaliknya Nilai ketelitian adl jarak antara garis sesungguhnya dengan pixel yg dihidupkan dan diukur tegak lurus thd sumbu yg mengalami kecendrungan pertambahan lebih banyak Algoritma pembentukan garis bresenham : 1. Tentukan dua titik yang akan dihubungkan 2. Tentukan salah satu titik sebagai awal yaitu(x0,y0) dan titik lainnya sebagai titik akhir(x1,y1). 3. Hitung dx,dy 4. Hitung nilai e = 2*dy-dx 6. Untuk setiap integer mulai dari 1 sampai dx, bangkitkan pixel mulai dari x0,y0 kemudian cek nilai e, if e>0 then y= y+1 dan e=e+(2*dy-2*dx) else e=e+2*dy dan x=x+1

31 Algoritma Bresenham - Pixel selanjutnya? - Algoritma Bresenhma memilih titik terdekat dari actual path - Setiap sampling akan diinkremen menjadi 1 atau 0. 31

32 Kondisi awal :Jika m < 1, maka m bernilai positif Bresenham melakukan inkremen 1 untuk x dan 0 atau 1 untuk y. Jika current pixel (xk,yk) Dimanakah pixel berikutnya akan di-plot, apakah di (xk+1, yk+1), (xk+1, yk), atau (xk, yk+1)? 32

33 33

34 Tentukan nilai parameter keputusan, pk: 34

35 Algoritma Bresenham untuk m < 1: 1. Input 2 endpoints, simpan endpoints kiri sebagai (x0, y0). 2. Panggil frame buffer (plot titik pertama) 3. Hitung konstanta x, y, 2 y, 2 y 2 x dan nilai awal parameter keputusan p0= 2 y x 35

36 Algoritma Bresenham untuk m < 1: 4. Pada setiap xk sepanjang garis, dimulai dari k=0, ujilah : Jika pk< 0, maka plot(xk+1, yk) dan pk+1= pk+ 2 y Jika tidak maka plot (xk+1, yk+1) dan pk+1= pk+ 2 y -2 x 5. Ulangi tahap 4 xkali

37 Latihan : Hitunglah posisi piksel hingga membentuk sebuah garis yang menghubungkan titik (12,10) dan (17,14)! Jawab : 1.(x0, y0) =(12, 10) 2. x =5, y = 4, 2 y =8, 2 y 2 x = -2 3.p0= 2 y x = 3 37

38 Ada 2 metode pembangkitan karakter 1. metode titik (bitmap method) 2. metode goresan (stroke method) Bitmap Stroke

39 Bitmap karakter digambarkan sebagai array 2 dimensi dengan ukuran bervariasi, setiap elemen array dianggap sebuah pixel yang bisa dihidupmatikan Stroke Karakter dianggap sbg kumpulan segmen garis yang dihubungkan pada tempat tertentu keuntungannya: karakter dapat dengan mudah diresize tanpa mengurangi kualitasnya

40 Geometri