Bentuk Primitif 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)
y = mx + b
Y2 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
Latihan y Diketahui dua titik yang dilalui garis lurus : (2,1)
dan (6,7). y Cari koordinat y dalam garis tersebut di titik-titik x berikut: a. 8 b. 10 c. 50 d. -4 e. -8 f.
-10
Latihan y Diketahui dua titik yang dilalui garis lurus : (2,1)
dan (6,7). y Cari koordinat y dalam garis tersebut di titik-titik x berikut: a. 7 b. 10 c. 50 d. -3 e. -7 f.
-10
Jawaban Latihan y Menghitung cepat a.X 8
Y 10
b. 1013
5073 d. -4 e. -8 f. -10 c.
-8 -14 -17
koordinat banyak titik dalam suatu garis dengan mencari dahulu konstanta m dan b. y Dalam soal: (x1,y1) = (2,1) (x2,y2) = (6,7) y m=1.5 dan b=-2
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
L2 = ( x 2 − x1 ) 2 + ( y 2 − y1 ) 2
p2 y2
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
SELF-OVERLAPPING
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 0-255, 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.
