Esther Wibowo -
[email protected]
Bentuk Primitif y Point - Titik y Line - Garis y Shape/Polygon - Bentuk bangun y Text - Teks
Titik y Direpresentasikan dengan koordinat (x,y) y Biasanya tidak tampil sendiri y Menjadi bagian dari bentuk yang lain
Garis y Didefinisikan oleh 2 titik atau lebih. y Line : Garis lurus y Polyline : sambungan beberapa garis y Curve : kurva
LINE
POLYLINE
CURVE
Persamaan Garis (1)
y − y1 y2 − y1 = x − x1 x2 − x1
Y (x,y) Y2
y = mx + b
Y1
y 2 − y1 m= x 2 − x1 X1
X2
X
b = y1 − mx 1
Persamaan Garis (2) y m = slope (kemiringan) y b = perpotongan dengan sumbu Y bila x1=0 ordinat y
m
Uy
Ux
b O (0,0) origin
absis x
Line segment Segmen garis y Segmen garis dinyatakan dengan kedua titik
ujungnya
y 2 − y1 m= x 2 − x1
y2
b = y1 − mx 1 y1
x1
x2
Panjang Segmen Garis y Dua titik ujung p1(x1,y1) dan p2(x2, y2) Panjang segmen garis L p2
y2
L2 = ( x 2 − x1 ) 2 + ( y 2 − y1 ) 2 L = ( x2 − x1 ) 2 + ( y2 − y1 ) 2
y1
p1
A
x1
x2
Garis sejajar (paralel) m1 = m2 y = m1 ⋅ x + b1 y = m2 ⋅ x + b2 O
Garis tegaklurus
1 m1 = − m2
y = m1 ⋅ x + b1
y = m2 ⋅ x + b2 O
Harga m m>1
m=1
m<1 m=0
m = -1
Jarak antara Titik dan Garis
p(xp,yp)
y=m1x+b
Jarak antara Titik dan Garis y=m2x+b p(xp,yp)
q(xq,yq)
y=m1x+b
Citra Garis dalam Raster
Bentuk Bangun y Beberapa garis sambung-menyambung yang
memiliki titik awal dan titik akhir yang sama. y Self-overlapping : memiliki sisi berpotongan y Non-convex : ada sisi yang berada di dalam area y Convex : semua sisi di luar area bentuk bangun
SELFOVERLAPPING
NON-CONVEX (CONCAVE)
CONVEX
Convex atau Concave?
Beberapa Jenis Polygon
SQUARE
ELIPSE
COMPLEX POLYGON
Operasi Bentuk Bangun (1) y UNION
menggabungkan area kedua bentuk bangun y INTERSECT menampilkan area yang berpotongan, terdapat dalam dua area bentuk bangun y DIFFERENCE menghilangkan area 2 beserta yang area 1 yang berpotongan dengan area 2 y SYMMETRICAL DIFFERENCE menghilangkan area yang berpotongan
Operasi Bentuk Bangun (2)
UNION
INTERSECT
DIFFERENCE
SYMMETRIC DIFFERENCE
Pencitraan Bentuk Bangun y Outline - (tebal) garis luar y Fill - berisi (warna)
OUTLINE
FILL
Atribut Outline y Atribut : pengontrol penampilan objek primitif y Atribut outline mis: width - lebar, style - gaya,
color - warna
LINE WIDTH 15 pt
LINE STYLE DOT, DASH
LINE COLOR BLUE
Warna y Color Space : referensi warna, mis: RGB,
HSV, HLS, CMYK. y Color Channel : komponen dari color space, mis: RGB memiliki 3 color channels yaitu Red, Green, Blue. y RGB paling banyak digunakan dalam programming - cocok dengan hardware y Tiap channel RGB dinyatakan dengan nilai 0255, mis: warna putih = (255,255,255)
Contoh Color Space (1)
RGB Berdasar sinar
CMYK Berdasar cat di kertas putih
Contoh Color Space (2)
HSV Hue - Saturation - Value
Filling Polygon y Mengisi bentuk persegi panjang tidak sulit:
tentukan nilai x di kedua tepi lalu set area di antaranya dengan warna yang diinginkan. y Bagaimana dengan concave polygon?
Filling Convex & Concave Polygon y Langkah algoritma pengisian: y Cari perpotongan scanline dengan semua tepi polygon. y Urutkan perpotongan berdasar kenaikan koordinat x. y Isi interior dari polygon dengan odd-parity rule: nilai awal “genap” - tiap menemui koordinat perpotongan berubah nilai menjadi “ganjil” - isi interior saat parity bernilai “ganjil”, jangan isi saat parity bernilai “genap”.
Odd-Parity Rule scanline
Algoritma Lingkaran & Elips F ( x, y ) = b x + a y − a b = 0 2
2
2
2
2
2
X b
a
-a -b
Y
Teks y Atribut teks mis: y Style/font - jenis huruf: Arial, Times, Helvetica y Appearance - tampilan: roman, bold, italic, underlined, strikeout dll. y Size - besar: 20pt, 24pt,
32pt
y Space - spasi: antar karakter, antar baris, dll. y Angle - sudut kemiringan: horizontal, vertikal,
kemiringan tertentu y Color - warna
Tampilan Raster dari Teks
ORIGINAL
ITALIC
BOLD
Aliasing y Bentuk primitif yang ditampilkan di layar
memiliki kekurangan : jaggies/staircasing. y Hasil konversi scan dengan nilai 0 atau 1. y Teknik mengurangi atau menghilangkan jaggies = ANTI-aliasing
Tampilan Aliasing
Tampilan Antialiasing
Metode Antialiasing (1) y Teknik Menaikkan Resolusi y Garis nampak lebih baik tapi belum bagus.
Metode Antialiasing (2) y Teknik Unweighted Area Sampling y Besar area perpotongan garis dengan piksel =
intensitas piksel
Intensitas piksel di tengah garis seharusnya lebih besar daripada intensitas piksel di ujung garis. Adakah teknik yang lebih baik?
Metode Antialiasing (3) y Teknik Weighted Area Sampling y Area di dekat titik tengah bentuk bangun Æ
intensitas piksel lebih tinggi. y Makin jauh area dari titik tengah, intensitas makin rendah.
