Esther Wibowo - esther.visual@gmail.com

Bentuk Primitif

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.