Output Primitif


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

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



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
Grafika Komputer  Page 5



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
X
Y
Koordinat layar pada OS.
Windows
Grafika Komputer  Page 8
0,0
640,480

Dalam implementasinya koordinat tampilan/layar
bisa dikatakan sebagai VIEWPORT yaitu area di
layar monitor yang menunjukkan dimana WINDOW
akan ditampilkan
Grafika Komputer  Page 10
Grafika Komputer  Page 11
 Untuk memetakan sebuah titik di window ke titik di
viewport digunakan rumus :
Grafika Komputer  Page 12
13





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)



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



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




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

Untuk menggambarkan garis seperti gambar
di atas, diperlukan pixel aktif.
18

Parameter pixel address yang membentuk
garispada layar adalah :
19

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
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
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


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


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


1.
2.
3.
4.
5.
6.
7.
8.
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
Tentukan dua titik yang akan dihubungkan utk pembentukan garis
Tentukan salah satu titik sebagai awal (x0,y0) dan yang lain sebagai
titik akhir (x1,y1)
Hitung dx=x1-x0 dan dy=y1-y0
Tentukan step untuk titik x dan y
- if abs(dx) > abs(dy), step= dx else step= dy
Hitung penambahan koordinat pixel
- x_increment = dx/step
- y_increment = dy/step
Koordinat selanjutnya (x+x_inc, y+y_inc)
Posisi pixel pada layar merupakan pembulatan dari nilai koor pixel
Ulangi langkah 6 & 7 sampai x=x1 dan y=y1


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
m
y
y 2- y 1
,m
x
x2 - x1
27



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

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




1.
2.
3.
4.
6.
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 :
Tentukan dua titik yang akan dihubungkan
Tentukan salah satu titik sebagai awal yaitu(x0,y0) dan titik lainnya sebagai titik
akhir(x1,y1).
Hitung dx,dy
Hitung nilai e = 2*dy-dx
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

Algoritma Bresenham
- Pixel selanjutnya ?
- Algoritma Bresenhma memilih titik
terdekat dari actual path
- Setiap sampling akan diinkremen
menjadi 1 atau 0.
31




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

Tentukan nilai parameter keputusan, pk:
34

Algoritma Bresenham untuk |m| < 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
1.
35
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
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

Ada 2 metode pembangkitan karakter
1. metode titik (bitmap method)
2. metode goresan (stroke method)
Bitmap
Stroke

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

Geometri