Bentuk Primitif - · PDF fileJawaban Latihan a. 8 10 b ... yMenghitung cepat koordinat banyak...
42
Esther Wibowo - [email protected] Bentuk Primitif
Transcript of Bentuk Primitif - · PDF fileJawaban Latihan a. 8 10 b ... yMenghitung cepat koordinat banyak...
Bentuk PrimitifPoint - TitikLine - GarisShape/Polygon - Bentuk bangunText - Teks
TitikDirepresentasikan dengan koordinat (x,y)Biasanya tidak tampil sendiriMenjadi bagian dari bentuk yang lain
GarisDidefinisikan oleh 2 titik atau lebih.Line : Garis lurusPolyline : sambungan beberapa garisCurve : kurva
CURVEPOLYLINELINE
Persamaan Garis (1)
12
12
1
1
xxyy
xxyy
−−
=−−
X
Y
X1 X2
Y1
Y2 bmxy +=
12
12
xxyym
−−
=
11 mxyb −=
(x,y)
Persamaan Garis (2)m = slope (kemiringan)b = perpotongan dengan sumbu Y bila x1=0
absisx
ordinaty
originO (0,0)
b
m
x
y
LatihanDiketahui dua titik yang dilalui garis lurus : (2,1) dan (6,7). Cari koordinat y dalam garis tersebut di titik-titik x berikut:a. 8b. 10c. 50d. -4e. -8f. -10
LatihanDiketahui dua titik yang dilalui garis lurus : (2,1) dan (6,7). Cari koordinat y dalam garis tersebut di titik-titik x berikut:a. 7b. 10c. 50d. -3e. -7f. -10
Jawaban Latihan
a. 8 10b. 1013c. 5073d. -4 -8e. -8 -14f. -10 -17
Menghitung cepatkoordinat banyak titikdalam suatu garisdengan mencaridahulu konstanta m dan b.Dalam soal:(x1,y1) = (2,1) (x2,y2) = (6,7)m=1.5 dan b=-2
X Y
Line segment Segmen garis
x1 x2
y1
y2
Segmen garis dinyatakan dengan kedua titikujungnya
12
12
xxyym
−−
=
11 mxyb −=
Panjang Segmen Garis
x1 x2
y1
y2
p1
p2
A
212
212
2 )yy()xx(L −+−=
212
212 )()( yyxxL −+−=
Panjang segmen garis L
Dua titik ujung p1(x1,y1) dan p2(x2, y2)
Garis sejajar (paralel)
11 bxmy +⋅=
O
22 bxmy +⋅=
21 mm =
Garis tegaklurus
11 bxmy +⋅=
O
22 bxmy +⋅=
21
1m
m −=
Harga m
m = 0
m = 1
m = -1
m < 1
m > 1
Jarak antara Titik dan Garis
y=m1x+b
p(xp,yp)
Jarak antara Titik dan Garis
y=m1x+b
y=m2x+b
p(xp,yp)
q(xq,yq)
Citra Garis dalam Raster
Bentuk Bangun
Beberapa garis sambung-menyambung yang memiliki titik awal dan titik akhir yang sama.Self-overlapping : memiliki sisi berpotonganNon-convex : ada sisi yang berada di dalam areaConvex : semua sisi di luar area bentuk bangun
SELF-OVERLAPPING CONVEXNON-CONVEX(CONCAVE)
Convex atau Concave?
Beberapa Jenis Polygon
SQUARE ELIPSE COMPLEXPOLYGON
Operasi Bentuk Bangun (1)UNIONmenggabungkan area kedua bentuk bangunINTERSECTmenampilkan area yang berpotongan, terdapatdalam dua area bentuk bangunDIFFERENCEmenghilangkan area 2 beserta yang area 1 yang berpotongan dengan area 2SYMMETRICAL DIFFERENCEmenghilangkan area yang berpotongan
Operasi Bentuk Bangun (2)
UNION INTERSECT DIFFERENCE SYMMETRICDIFFERENCE
Pencitraan Bentuk BangunOutline - (tebal) garis luarFill - berisi (warna)
OUTLINE FILL
Atribut OutlineAtribut : pengontrol penampilan objek primitifAtribut outline mis: width - lebar, style - gaya, color - warna
LINE WIDTH 15 pt
LINE STYLE DOT, DASH
LINE COLOR BLUE
WarnaColor Space : referensi warna, mis: RGB, HSV, HLS, CMYK.Color Channel : komponen dari color space, mis: RGB memiliki 3 color channels yaitu Red, Green, Blue.RGB paling banyak digunakan dalamprogramming - cocok dengan hardwareTiap channel RGB dinyatakan dengan nilai 0-255, mis: warna putih = (255,255,255)
Contoh Color Space (1)
RGB CMYKBerdasar sinar Berdasar cat di
kertas putih
Contoh Color Space (2)
HSVHue - Saturation - Value
Filling PolygonMengisi bentuk persegi panjang tidak sulit: tentukan nilai x di kedua tepi lalu set area diantaranya dengan warna yang diinginkan.Bagaimana dengan concave polygon?
Filling Convex & Concave PolygonLangkah algoritma pengisian:
Cari perpotongan scanline dengan semua tepipolygon.Urutkan perpotongan berdasar kenaikan koordinatx.Isi interior dari polygon dengan odd-parity rule: nilaiawal “genap” - tiap menemui koordinat perpotonganberubah nilai menjadi “ganjil” - isi interior saatparity bernilai “ganjil”, jangan isi saat parity bernilai“genap”.
Odd-Parity Rule
scanline
Algoritma Lingkaran & Elips
0bayax),( 222222 =−+= byxF
-a a
-b
b
X
Y
TeksAtribut teks mis:
Style/font - jenis huruf: Arial, Times, HelveticaAppearance - tampilan: roman, bold, italic, underlined, strikeout dll.
Size - besar: 20pt, 24pt, 32ptSpace - spasi: antar karakter, antar baris, dll.Angle - sudut kemiringan: horizontal, vertikal, kemiringan tertentuColor - warna
Tampilan Raster dari Teks
ORIGINAL ITALIC BOLD
AliasingBentuk primitif yang ditampilkan di layar memilikikekurangan : jaggies/staircasing.Hasil konversi scan dengan nilai 0 atau 1.Teknik mengurangi atau menghilangkan jaggies = ANTI-aliasing
Tampilan Aliasing
Tampilan Antialiasing
Metode Antialiasing (1)Teknik Menaikkan ResolusiGaris nampak lebih baik tapi belum bagus.
Metode Antialiasing (2)Teknik Unweighted Area SamplingBesar area perpotongan garis dengan piksel = intensitas piksel
Intensitas piksel di tengah garis seharusnya lebih besar daripadaintensitas piksel di ujung garis. Adakah teknik yang lebih baik?
Metode Antialiasing (3)Teknik Weighted Area SamplingArea di dekat titik tengah bentuk bangunintensitas piksel lebih tinggi.Makin jauh area dari titik tengah, intensitas makinrendah.
