Bentuk Primitif Esther Wibowo - esther.visual@gmail.com
Bentuk Primitif Point - Titik Line - Garis Shape/Polygon - Bentuk bangun Text - Teks
Titik Direpresentasikan dengan koordinat (x,y) Biasanya tidak tampil sendiri Menjadi bagian dari bentuk yang lain
Garis Didefinisikan oleh 2 titik atau lebih. Line : Garis lurus Polyline : sambungan beberapa garis Curve : kurva LINE POLYLINE CURVE
Persamaan Garis (1) 1 2 1 2 1 1 x x y y x x y y = X Y X1 X2 Y1 Y2 b mx y + = 1 2 1 2 x x y y m = y 1 mx 1 b = (x,y)
Persamaan Garis (2) m = slope (kemiringan) b = perpotongan dengan sumbu Y bila x1=0 ordinat y m y x O (0,0) origin b absis x
Latihan Diketahui dua titik yang dilalui garis lurus : (2,1) dan (6,7). Cari koordinat y dalam garis tersebut di titik-titik x berikut: a. 8 b. 10 c. 50 d. -4 e. -8 f. -10
Latihan Diketahui dua titik yang dilalui garis lurus : (2,1) dan (6,7). 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 a. X 8 Y 10 b. 1013 c. 5073 d. -4-8 e. -8-14 f. -10-17 Menghitung cepat koordinat banyak titik dalam suatu garis dengan mencari dahulu konstanta m dan b. Dalam soal: (x1,y1) = (2,1) (x2,y2) = (6,7) m=1.5 dan b=-2
Line segment Segmen garis Segmen garis dinyatakan dengan kedua titik ujungnya y 2 m = y x 2 2 y x 1 1 b = y 1 mx 1 y 1 x 1 x 2
Panjang Segmen Garis Dua titik ujung p1(x1,y1) dan p2(x2, y2) Panjang segmen garis L y 2 p 2 L 2 = (x 2 x 1 ) 2 + (y 2 y 1 ) 2 L = ( x y 2 2 2 x1) + ( y2 1) y 1 p 1 A x 1 x 2
Garis sejajar (paralel) m = m 1 2 y = m x + b 1 1 y = m x + b 2 2 O
Garis tegaklurus 1 y = m x + b 1 1 m 1 = m 2 y = m x + b 2 2 O
Harga m m > 1 m = 1 m < 1 m = 0 m = -1
Jarak antara Titik dan Garis p(x p,y p ) y=m 1 x+b
Jarak antara Titik dan Garis y=m 2 x+b p(x p,y p ) q(x q,y q ) y=m 1 x+b
Citra Garis dalam Raster
Bentuk Bangun Beberapa garis sambung-menyambung yang memiliki titik awal dan titik akhir yang sama. Self-overlapping : memiliki sisi berpotongan Non-convex : ada sisi yang berada di dalam area 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) UNION menggabungkan area kedua bentuk bangun INTERSECT menampilkan area yang berpotongan, terdapat dalam dua area bentuk bangun DIFFERENCE menghilangkan area 2 beserta yang area 1 yang berpotongan dengan area 2 SYMMETRICAL DIFFERENCE menghilangkan area yang berpotongan
Operasi Bentuk Bangun (2) UNION INTERSECT DIFFERENCE SYMMETRIC DIFFERENCE
Pencitraan Bentuk Bangun Outline - (tebal) garis luar Fill - berisi (warna) OUTLINE FILL
Atribut Outline Atribut : pengontrol penampilan objek primitif Atribut outline mis: width - lebar, style - gaya, color - warna LINE WIDTH 15 pt LINE STYLE DOT, DASH LINE COLOR BLUE
Warna Color 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 hardware 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 Mengisi 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 Polygon Langkah 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.
scanline Odd-Parity Rule
Algoritma Lingkaran & Elips F ( x, y) = b 2 x 2 + a 2 y 2 a 2 b 2 = 0 X b -a a Y -b
Teks Atribut teks mis: Style/font - jenis huruf: Arial, Times, Helvetica Appearance - tampilan: roman, bold, italic, underlined, strikeout dll. Size - besar: 20pt, 24pt, 32pt Space - spasi: antar karakter, antar baris, dll. Angle - sudut kemiringan: horizontal, vertikal, kemiringan tertentu Color - warna
Tampilan Raster dari Teks ORIGINAL ITALIC BOLD
Aliasing Bentuk 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 Resolusi Garis nampak lebih baik tapi belum bagus.
Metode Antialiasing (2) Teknik Unweighted Area Sampling 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) Teknik Weighted Area Sampling Area di dekat titik tengah bentuk bangun intensitas piksel lebih tinggi. Makin jauh area dari titik tengah, intensitas makin rendah.