SISTEM KOORDINAT DAN BENTUK DASAR GEOMETRI (OUTPUT PRIMITIF)

  SISTEM KOORDINAT DAN BENTUK DASAR GEOMETRI (OUTPUT PRIMITIF) ¹ Teknologi Display

• Cathode Ray Tubes (CRT)
• Liquid Crystal Display (LCD)
2 Elektron ditembakkan dari satu atau lebih
• Kemudian medan magnet yang ada di dalam
• Medan magnet tersebut dihasilkan oleh
• Untuk membentuk gambar, sinar tersebut
• Pancaran Elektron bergerak baris per baris dari atas ke
• Pancaran Elektron diarahkan hanya ke bagian layar dimana gambar dibuat
• Random-scan hanya membuat gambar dengan satu garis
• Definisi gambar disimpan dalam memori yang disebut refresh buffer atau frame buffer.
• Setiap titik pada layar disebut pixel / pel yaitu picture element.
• Refreshing rate memiliki nilai 60 s/d 80 frame per detik.
• Horizontal retrace adalah kembalinya scan ke bagian kiri layar setelah refreshing tiap scan line.
• Vertical retrace adalah kembalinya scan ke atas setelah selesai satu frame.
⁵ Random Scan Display

  electron gun

  tabung akan mendefleksi dan mengatur intensitas pancaran sinar elektron ke tiap pixel pada permukaan tabung dan akan membentuk gambar di monitor

  kumparan yang diatur oleh sebuah rangkaian elektronik khusus yang ada di sekitar leher tabung

  bergerak horisontal dari kiri ke kanan (raster) ³ CRT ⁴ Raster Scan Display

  bawah

  pada suatu saat • Refreshing rate tergantung jumlah garis.

• Definisi gambar disimpan dlm satu blok perintah line drawing disebut refresh display file / display list / display program / refresh buffer.
• Random-scan display menghasilkan gambar yang lebih

  halus dibandingkan dengan raster-scan, karena pancaran elektron langsung mengikuti jalur pada garis. ⁶

  7 ⁸ LCD Sistem Koordinat

• Menggunakan kristal cair untuk menampilkan

  gambar

• Koordinat nyata
• Terdiri dari 2 bagian utama : backlight dan kristal

  cair

• Koordinat sistem (koordinat cartesian)
>Backlight mirip seperti neon dengan warna p
• Kristal cair berfungsi untuk menyaring cahaya • Koordinat tampilan / layar

  backlight menjadi warna-warna tertentu dengan cara mengubah sudut dari kristal cair

• Sudut kristal cair tersebut berubah akibat

  tegangan listrik

  9 ¹⁰ Koordinat Cartesian Koordinat Nyata

• Adalah koordinat yang pada saat itu objek yang

  Setiap titik ditentukan

  bersangkutan berada, misal koordinat sebuah kursi

  lokasinya melalui

  tergantung dari letak kursi itu ada dimana, bagaimana

  pasangan nilai x dan y letaknya.

• nilai koordinat x

  bertambah positif dari kiri ke kanan dan nilai y bertambah positif dari bawah ke atas

  11 ¹² Koordinat Layar Koordinat Layar

• Arah sumbu koordinat layar berkebalikan dengan

  yang digunakan di koordinat kartesian

• Pada layar komputer sumbu x bertambah positif ke

  kanan dan sumbu y bertambah positif ke bawah

  sebuah titik pada koordinat cartesian digambar ulang ke layar komputer maka secara visual lokasi titik tersebut akan berubah

  Output Primitif

• Output primitif adalah struktur dasar geometri yang paling sederhana dari gambar grafika komputer.
• Titik dan garis adalah contoh dari output primitif yang dapat digunakan untuk membentuk gambar.
• misalnya lingkaran, kerucut, permukaan berbentuk
• Titik • Garis • Polyline • Polygon
¹⁴
• unsur gambar atau representasi sebuah titik terkecil dalam sebuah gambar grafis.
• akronim bahasa Inggris Picture Element yang disingkat menjadi Pixel.
• Monitor ribuan piksel yang terbagi dalam baris-baris dan kolom-kolom.
• Jumlah piksel yang terdapat dalam sebuah monitor dapat
• mengkonversi sebuah

  persegi, kurva dan permukaan berbentuk lengkung, warna area dan karakter, dan lain-lain ¹³ Menggambar Elemen Geometri

  koordinat tunggal yang diberikan oleh sebuah program aplikasi dalam suatu operasi tertentu dengan menggunakan peralatan output, sebagai contoh monitor ¹⁵ Pixel

  kita ketahui dari resolusinya. Resolusi maksimum yang disediakan oleh monitor adalah 1024x768, maka jumlah pixel yang ada dalam layar monitor tersebut adalah 786432 piksel.

• Semakin tinggi jumlah piksel yang tersedia dalam monitor,
• Garis dibuat dengan menentukan posisi titik

  semakin tajam gambar yang mampu ditampilkan oleh monitor tersebut. ¹⁶ Garis

  diantara titik awal dan akhir dari suatu garis, yaitu (x1,y1) dan (x2,y2). ¹⁷ Persamaan Garis Lurus ¹⁸ Secara umum garis lurus dinyatakan dalam persamaan : y = m x + c dimana : m adalah gradient dan c adalah konstanta. Bila garis melalui titik ( x ₁ , y ₁ ) dan titik ( x ₂ , y ₂ ) maka gradien m dihitung menggunakan persamaan

  1

  2

  1

  2 x x y y m

    

  19 ²⁰ Bentuk Garis Bentuk Garis

• Cenderung tegak
• Cenderung mendatar

  Gradien bernilai m > 1 Gradien bernilai 0 < m < 1

• Pixel bertambah 1
• pada sumbu y dan Pixel bertambah 1 bertambah sebesar pada sumbu x dan 1/m pixel pada sumbu bertambah sebesar m x pixel pada sumbu y

  21 ²² Bentuk Garis Polyline o

• Miring 45

  Menghubungkan tiap titik dengan garis lurus sehingga menjadi kurva terbuka

• Gradien bernilai m = 1
• Pixel bertambah 1

  pada sumbu x dan bertambah sebesar 1 pixel pada sumbu y

  Contoh Polyline

  23 ²⁴ Algoritma DDA Polygon

  (Digital Diferential Analyzer )

• Sama dengan polyline hanya membentuk
• DDA adalah algoritma pembentuk garis yang sederhana

  kurva tertutup

• Dibuat menggunakan titik awal (x ^{1 , y 1 ) dan titik akhir (x 2 ,}

  y ^{2 ).}

• Setiap koordinat titik (x k , y k ) yang membentuk garis

  diperoleh dari perhitungan, kemudian hasil perhitungan dikonversikan menjadi nilai integer.

  Contoh Polygon

  25 ²⁶ Algoritma DDA Algoritma DDA (Digital Diferential Analyzer ) (Digital Diferential Analyzer )

  langkah-langkah pembentukan garis berdasarkan algoritma

  5. Hitung penambahan koordinat piksel dengan DDA: persamaan: 1. Tentukan dua titik yang akan dihubungkan dalam

   x_increment = dx / step pembentukan garis. y_increment = dy / step

  2. Tentukan salah satunya sebagai titik awal (x ^{1 , y 1 ) dan}

  6. Koordinat selanjutnya : yang lain sebagai titik akhir (x ^{2 , y 2 ).}

   x = x + x_increment y = y + y_increment

  3. Hitung : dx = x − x dan dy = y − y _{2 1 2 1}

  7. Lakukan pembulatan

  4. Tentukan step, dengan ketentuan berikut:

  8. Ulangi point 6 dan 7 untuk menentukan posisi piksel

• bila |dx| > |dy| maka step = |dx| berikutnya sampai x = x dan y = y .
₂ 2<
• bila tidak, maka step = |dy|

  27 ²⁸ Contoh Algoritma DDA Contoh Algoritma DDA

• Iterasi ke-2: (x,y) = (3;1,67)
• Diketahui 2 buah titik Jawab: Iterasi ke-1: (x,y) = (
• A(2,1) dan titik B(8,5) bila

  x+x_inc = 3 + 1 = 4

• Titik awal (x ^{1 , y 1 ) = A(2,1) x+x_inc = 2 + 1 = 3}

  titik A sebagai titik awal _{2 , y 2 ) = B(8,5) y+y_inc = 1 + 0,67 = 1,67} • y+y_inc = 1,67 + 0,67 = 2,34

• Titik akhir (x

  dan titik B sebagai titik

• Koordinat selanjutnya : (x,y) =
• dx = x ^{2 − x 1 = 8 −2 = 6}

  akhir, maka buatlah garis (4; 2,34)

• Koordinat selanjutnya :
• dy = y − y = 5 − 1 = 4
_{2 1} yang menghubungkan titik

  Pembulatan (4; 2,34) ≈ (4,2). • (x,y) = (3; 1,67)

• tersebut dengan Karena: |dx| &gt; |dy|, maka

  Gambar titik (4,2)

• Pembulatan (3; 1,67) ≈

  menggunakan algoritma step = |dx| = 6 (3,2). Gambar titik (3,2) DDA.

• x_inc = dx / step = 6/6 = 1
• y_inc = dy / step = 4/6 =0,67

  29 ³⁰ Contoh Algoritma DDA Contoh Algoritma DDA

• Iterasi ke-3: (x,y) = (4; Iterasi ke-4: (x,y) = (5; 3,01) Iterasi ke-5: (x,y) = (6; Iterasi ke-6: (x,y) = (7;

  2,34) 3,68) 4,35)

  x +x_inc = 5 + 1 = 6

• A • • x A +x_inc = 4 + 1 = 5 x
• ^{A +x_inc = 6 + 1 = 7 x A +x_inc = 7 + 1 = 8}
• y A +y_inc = 3,01 + 0,67 =3,68
• y ^{A +y_inc = 2,34 +0,67=3,01 y A +y_inc = 3,68 + 0,67 =}
• Koordinat selanjutnya : (x,y)
• 4,35 y +y_inc = 4,35 + 0,67 = ^A
• Koordinat selanjutnya : (x,y) = (6; 3,68)

  5,02

• = (5; 3,01)

  Koordinat selanjutnya : Pembulatan (6; 3,68) ≈ •

• (x,y) = (7; 4,35) Koordinat selanjutnya :

  Pembulatan (5; 3,01) ≈ • (6,4). Gambar titik (6,4) (x,y) = (8; 5,02)

  (5,3). Gambar titik (5,3) Pembulatan (7; 4,35) ≈ • Pembulatan (8; 5,02) ≈ • (7,4). Gambar titik (7,4) (8,5). Gambar titik (8,5)

  31 ³² Algoritma DDA Contoh Algoritma DDA

  (Digital Diferential Analyzer )

• Karena x = x ^{2 = 8, maka}

  Kelebihan Algoritma DDA

  iterasi dihentikan,

• Algoritma DDA baik digunakan untuk kemiringan garis m

  sehingga diperoleh titik- &gt; 1. titik pembentuk garis sebagai berikut: (2,1), (3,2), (4,2), (5,3), (6,4),

  Kelemahan Algoritma DDA (7,4) dan (8,5).

• Prosedur untuk menggambar garis masih menggunakan

  fungsi pembulatan x maupun y, sehingga memerlukan waktu.

• variabel x, y maupun m memerlukan bilangan real karena kemiringan merupakan nilai pecahan.

  33 ³⁵ Latihan Algoritma Garis Bresenham 1.

  Diketahui 2 buah titik

  2. Titik Awal A(1,1) dan titik A(10,10) dan titik

• akhir B(5,4) Dikembangkan oleh J.E.Bressenham

  B(17,16) bila titik A

• 3. Titik Awal A(15,15) dan Algoritma garis Bressenham disebut juga Midpoint Line sebagai titik awal dan Algorithm.

  titik akhir B(27,25) titik B sebagai titik akhir,

• Algoritma temuannya tidak lagi menggunakan floating

  4. Titik Awal A(5,5) dan titik tentukan titik-titik antara

  point arihtmetic, sehingga tidak perlu membulatkan nilai

  yang menghubungkan akhir B(20,18) posisi piksel setiap waktu dan dalam pengulangan titik A dan titik B

  5. Titik Awal A(20,20) dan (looping) hanya menggunakan pengoperasian sehingga membentuk titik akhir B(32,30) incremental. garis AB dengan menggunakan algoritma DDA!

  36 ³⁷ Langkah-Langkah Algoritma Bresenham Contoh Algoritma Bressenham

  Langkah-langkah pembentukan garis berdasarkan algoritma

• Diketahui 2 buah titik A(2,1) dan titik B(8,5) bila titik A

  Bressenham adalah:

  sebagai titik awal dan titik B sebagai titik akhir, maka

  1. Tentukan dua titik yang akan dihubungkan dalam pembentukan

  buatlah garis yang menghubungkan titik tersebut dengan garis.

  2. Tentukan salah satu sebagai titik awal (x , y ) dan titik akhir (x , menggunakan algoritma Bressenham. _{1 1 2}

• y ^{2 ).}

  Jawab:

  3. Hitung dx, dy, 2dy dan 2dy - 2dx _o • Titik awal (x , y ) = A(2,1) dan Titik akhir (x ^{1 , y 1 ) = B(8,5)}

  4. Hitung parameter : p = 2dy - dx _k • dx = x − x = 8 −2 = 6 dan dy = y − y = 5 − 1 = 4 _{1 1}

  5. Untuk setiap x sepanjang jalur garis, dimulai dengan k=0

• bila p &lt; 0 maka titik selanjutnya adalah:
_{k k k k} ^k

  2.dx = 2.6 = 12 ; 2.dy = 2.4 = 8

  (x +1, y ) dan p +1 = p + 2dy

  2dy − 2dx = 8 − 12 = −4 •

• bila tidak, titik selanjutnya adalah: _{o − dx = 8 − 6 = 2}

   = 2.dy (x k +1, y k +1) dan p k +1 = p k + 2dy

• p
• – 2dx

  6. Ulangi nomor 5 untuk menentukan posisi pixel berikutnya, sampai x = x atau y = y . _{1 1}

Contoh Algoritma Bressenham

• Iterasi ke-3 ( k = 2):
• Iterasi ke-1 ( k = 0):
• Titik awal = (2,1)
• Po = 2 &gt; 0, maka titik selanjutnya adalah
• x = 2 + 1 = 3 dan y = 1 + 1 = 2,
• koordinat selanjutnya : (3,2)
• p
₁ = p + 2dy – 2dx = 2 − 4 = &mi
• Titik awal = (4,2)

  = 6 &gt; 0, maka titik selanjutnya adalah

• P
2<
• x = 4 + 1 = 5 dan y = 2 + 1 = 3,
• koordinat selanjutnya : (5,3)
• p ^{3 = p 2 + 2dy – 2dx = 6 − 4 = 2}
• Iterasi ke-4 ( k = 3):
• Titik awal = (5,3)
• P
₃ = 2 &gt; 0, maka titik selanjutnya a
• Iterasi ke-2 ( k = 1):
• Titik awal = (3,2)
• P ^{1 = −2 &lt; 0, maka titik selanjutnya adalah}
• x = 3 + 1 = 4 dan y = 2, koordinat selanjutnya : (4,2)
• p
₂ = p ₁ + 2dy = −2 + 8 = 6 ³⁸ Contoh Algoritma Bress>x = 5 + 1 = 6 dan y = 3 + 1
• koordinat selanjutnya : (6,4)
• p ^{4 = p 3 + 2dy – 2dx = 2 − 4 = −2}
³⁹ Contoh Algoritma Bress
• Iterasi ke-5 ( k = 4):
• Titik awal = (6,4)
• P ^{4 = −2 &lt; 0, maka titik selanjutnya adalah}
• x = 6 + 1 = 7 dan y = 4, koordinat selanjutnya : (7,4)
• p
₅ = p ₄ + 2dy = −2 +
• Karena x = x ^{2 = 8, maka iterasi dihentikan, sehingga}

  diperoleh titik-titik penyusun garis sebagai berikut: (2,1), (3,2), (4,2), (5,3), (6,4), (7,4) dan (8,5). ⁴¹ Latihan

• Iterasi ke-6 ( k = 5):
• Titik awal = (7,4)

  = 6 &gt; 0, maka titik selanjutnya adalah

• P
5<
• x = 7 + 1 = 8 dan y = 4 + 1 = 5, koordinat

  selanjutnya : (8,5) ⁴⁰ Contoh Algoritma Bressenham

• Diketahui 2 buah titik A(2,1) dan titik B(4,7) bila titik A

  sebagai titik awal dan titik B sebagai titik akhir, maka buatlah garis yang menghubungkan titik tersebut dengan menggunakan algoritma Bressenham. ⁴²