esther wibowo - esther.visual@gmail · contoh color space (1) rgb cmyk. berdasar sinar. berdasar...

Esther Wibowo - esther.visual@gmail.com

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.