Bentuk Primitif. Esther Wibowo -

Transkripsi

1 Bentuk Primitif Esther Wibowo - [email protected]

2 Bentuk Primitif Point - Titik Line - Garis Shape/Polygon - Bentuk bangun Text - Teks

3 Titik Direpresentasikan dengan koordinat (x,y) Biasanya tidak tampil sendiri Menjadi bagian dari bentuk yang lain

4 Garis Didefinisikan oleh 2 titik atau lebih. Line : Garis lurus Polyline : sambungan beberapa garis Curve : kurva LINE POLYLINE CURVE

5 Persamaan Garis (1) x x y y x x y y = X Y X1 X2 Y1 Y2 b mx y + = x x y y m = y 1 mx 1 b = (x,y)

6 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

7 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

8 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

9 Jawaban Latihan a. X 8 Y 10 b c d e f 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

10 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

11 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 x1) + ( y2 1) y 1 p 1 A x 1 x 2

12 Garis sejajar (paralel) m = m 1 2 y = m x + b 1 1 y = m x + b 2 2 O

13 Garis tegaklurus 1 y = m x + b 1 1 m 1 = m 2 y = m x + b 2 2 O

14 Harga m m > 1 m = 1 m < 1 m = 0 m = -1

15 Jarak antara Titik dan Garis p(x p,y p ) y=m 1 x+b

16 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

17 Citra Garis dalam Raster

18 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

19 Convex atau Concave?

20 Beberapa Jenis Polygon SQUARE ELIPSE COMPLEX POLYGON

21 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

22 Operasi Bentuk Bangun (2) UNION INTERSECT DIFFERENCE SYMMETRIC DIFFERENCE

23 Pencitraan Bentuk Bangun Outline - (tebal) garis luar Fill - berisi (warna) OUTLINE FILL

24 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

25 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)

26 Contoh Color Space (1) RGB Berdasar sinar CMYK Berdasar cat di kertas putih

27 Contoh Color Space (2) HSV Hue - Saturation - Value

28 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?

29 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.

30 scanline Odd-Parity Rule

31 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

32 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

33 Tampilan Raster dari Teks ORIGINAL ITALIC BOLD

34 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

35 Tampilan Aliasing

36 Tampilan Antialiasing

37 Metode Antialiasing (1) Teknik Menaikkan Resolusi Garis nampak lebih baik tapi belum bagus.

38 Metode Antialiasing (2) Teknik Unweighted Area Sampling Besar area perpotongan garis dengan piksel = intensitas piksel

39 Intensitas piksel di tengah garis seharusnya lebih besar daripada intensitas piksel di ujung garis. Adakah teknik yang lebih baik?

40 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.

41

42