Esther Wibowo - esther.visual@gmail · Contoh Color Space (1) RGB CMYK. Berdasar sinar. Berdasar...
Transcript of Esther Wibowo - esther.visual@gmail · Contoh Color Space (1) RGB CMYK. Berdasar sinar. Berdasar...
Esther Wibowo - [email protected]
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
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
SELF-OVERLAPPING
CONVEXNON-CONVEX(CONCAVE)
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
Convex atau Concave?
Beberapa Jenis Polygon
SQUARE ELIPSE COMPLEXPOLYGON
Operasi Bentuk Bangun (1)UNIONmenggabungkan area kedua bentuk bangunINTERSECTmenampilkan area yang berpotongan, terdapat dalam 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 dalam programming - cocok dengan hardwareTiap channel RGB dinyatakan dengan nilai 0-255, mis: warna putih = (255,255,255)
Contoh Color Space (1)
RGB CMYK
Berdasar sinar
Berdasar cat di kertas putih
Contoh Color Space (2)
HSV
Hue - Saturation - Value
Filling PolygonMengisi bentuk persegi panjang tidak sulit: tentukan nilai x di kedua tepi lalu set area di antaranya dengan warna yang diinginkan.Bagaimana dengan concave polygon?
Filling Convex & Concave PolygonLangkah algoritma pengisian:
Cari perpotongan scanline dengan semua tepi polygon.Urutkan perpotongan berdasar kenaikan koordinat x.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
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 memiliki kekurangan : 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 daripada intensitas piksel di ujung garis. Adakah teknik yang lebih baik?
Metode Antialiasing (3)Teknik Weighted Area Sampling
Area di dekat titik tengah bentuk bangun intensitas piksel lebih tinggi.Makin jauh area dari titik tengah, intensitas makin rendah.