Output Attribute

Primitive Drawing
Dosen : Herriyance, S.T., M.Kom
Fitri Aulia F Nst (191401034)
Arian Syah Putra (191401076)
Kevin Sinaga (191401109)
Apa itu Primitive Drawing ?
Primitive Drawing
Primitive Drawing merupakan penggambaran bentuk dasar dalam
komputer grafis. Bentuk dasar ini meliputi titik (point) , garis (line),
atau gabungan beberapa titik maupun garis yang menghasilkan
sebuah bentuk (polygon).
Apa itu Output Primitive ?
 Output primitive berarti aksi dasar yang dapat dilakukan oleh
graphical device
 Primitive adalah fungsi geometris sederhana yang digunakan
untuk menghasilkan Grafika Komputer yang berbeda
Output Primitive Dasar
 Point Position (pixels)
 Lines
 Line Drawing Algorithms
 Circle and Ellipse generating
algorithms
 Filled area primitive
 Character Attribute
 Text Attribute
Attribute
Attribute
Atribut merupakan unsur atau pelengkap yang dimiliki oleh sebuah
primitive yang merepresentasikan bagaimana primitive tersebut akan
ditampilkan.

Contoh :
Atribut dari sebuah point = ukuran (size/pixel) dan warna (color)
Atribut dari sebuah line = ketebalan (width), tipe (type), dan warna (color)
Point / Pixel (Titik)
 Elemen terkecil dari sebuah gambar
 Penentuan lokasi tertentu dari sebuah titik
menggunakan kordinat x dan y
 Titik memiliki dua atribut : Ukuran dan Warna
Pixel (Dot) Posisi
 Size of pixel = Ukuran pixel di tampilan layar (x,y), Warna

 Point atau titik merupakan primitive fundamental dalam

sebuah grafika komputer.
 Setiap bentuk dalam grafika komputer dibentuk dari
titik.
Attribute of Point

Point Attribute Size Attribute Size & Color

Line (Garis)
 Fungsi Line digunakan untuk menghasilkan garis lurus
diantara dua titik

 Fungsi line menyediakan garis lurus dengan 2 titik lokasi

▪ Garis lurus memiliki tiga atribut dasar yaitu :

1. Line Width

2. Line Color
Garis (Line)  Posisi
3. Line type (x1,y1,x2,y2), Warna,
Thickness, Pattern

Dalam beberapa kelompok grafik, garis dapat ditampilkan

dengan menggunakan “selected pen” atau “brush”.
▪ Ketebalan default pada tiap kali penggambaran
garis adalah 1 pixel Line Width
▪ Jika kita ingin menambah ketebalan, maka kita
harus menggabungkan line baru dengan line
sebelumnya
▪ Fungsi penambahan warna pada line
Line Color
▪ Solid line
▪ Dash line
Line Type
▪ Dotted line
▪ Dashdot line
▪ Opsi dalam pen dan brush dapat berupa bentuk,
ukuran, serta pola. Pen & Brush
Algoritma Pembentukan Garis
Diantaranya :

1. Algoritma Garis DDA

2. Algortma Garis Bresenham
 Persamaan garis menurut koordinat Cartesian adalah : y = m.x+b
 Dimana :
 m adalah slope (kemiringan) dari garis yang dibentuk oleh dua titik yaitu (x1,y1)
dan (x2,y2).

 Untuk penambahan x sepanjang garis yaitu dx akan mendapatkan

penambahan y sebesar : y = m.x
1. Algoritma Garis DDA (Digital Deferential
Analyzer)
 DDA adalah algoritma pembentukan garis berdasarkan perhitungan x dan y,

 menggunakan rumus “y = m.x” . Garis dibuat dengan menentukan dua endpoint

yaitu titik awal dan titik akhir.

 Setiap koordinat titik yang membentuk garis diperoleh dari perhitungan,

kemudian dikonversikan menjadi nilai integer.
1. Tentukan dua titik yang akan dihubungkan.
2. Tentukan salah satu titik sebagai titik awal (x0,y0) dan
titik akhir (x1,y1).
Langkah-langkah
3. Hitung x = x1-x0 dan y = y1-y0. pembentukan
4. Tentukan step, yaitu jarak maksimum jumlah menurut algoritma
penambahan nilai x maupun nilai y dengan cara : DDA
1. bila nilai |y| > |x| maka step = nilai|y|.
2. bila tidak maka step = |x|.
5. Hitung penambahan koordinat pixel yaitu x_increment
= |x|/step dan y_increment=|y|/step.
6. Koordinat selanjutnya di dapat dari  (x+x_incerement ,
y+y_increment).
7. Posisi pixel pada layer ditentukan dengan pembulatan
nilai koordinasi yang terdapat pada gbr selanjutnya.
Ulangi step 6 dan 7 untuk menentukan posisi pixel
selanjutnya, sampai x=x1 dan y = y1 .
Untuk menggambarkan algoritma DDA dalam pembentukan suatu garis yang
menghubungkan titik (10,10) dan (17,16), pertama-tama ditentukan dx dan dy,
kemudian dicari step untuk mendapatkan x_increment dan y_increment.

x = x1 - x0 = 17-10 = 7

y = y1 - y0 = 16 -10 = 6

Selanjutnya hitung dan bandingkan nilai absolutnya.

| x| = 7

| y| = 6

Karena | x| > | y|, maka step = | x| = 7, maka diperoleh :

x_inc = 7/7= 1

y_inc = 6/7 = 0,86

Tabel Perhitungan
2. Algoritma Garis Bresenham
 Prosedur untuk menggambar kembali garis dengan membulatkan nilai x atau y
kebilangan integer membutuhkan waktu, serta variable x,y dan m merupakan
bilangan real karena kemiringan merupakan nilai pecahan.

 Bressenham mengembangkan algoritma klasik yang lebih menarik, karena hanya

menggunakan perhitungan matematika dengan bilangan integer.

 Dengan demikian tidak perlu membulatkan nilai posisi setiap pixel setiap waktu.
 Algoritma garis Bressenhem disebut juga midpoint line algorithm adalah algoritma
konversi penambahan nilai integer yang juga dapat diadaptasi untuk menggambar
sebuah lingkaran.
1. Tentukan dua titik yang akan dihubungkan dalam
pembentukan garis.
2. Tetukan salah satu titik disebelah kiri sebagai
titik awal (x0,y0) dan titik lainnya sebagai titik Membentuk Garis
akhir (x1,y1 ).
Menurut Algoritma
3. Hitung x,y,2x, dan 2y-2x. Bresenham
4. Hitung parameter p0 = 2y-x.
5. Untuk setiap xk sepanjang jalur garis, dimulai
dengan k = 0
6. bila pk<0 maka titik selanjutnya (xk+1,yk) dan
pk+1 = pk+2y bila tidak maka titik selanjutnya
adalah (xk+1,yk+1)dan pk+1=pk+2y-2x.
7. Ulangi langkah nomor 5 untuk menentukan
posisi pixel selanjutnya, sampai x = x1 dan y =
yk.
Untuk menggambarkan algoritma Bressenham dalam
pembentukan suatu garis yang menghubungkan titik
(10,10) dan (17,16), pertama-tama ditentukan bahwa titik
(10,10) berada disebelah kiri merupakan titik awal,
sedangkan (17,16) merupakan titik akhir.

Jawab :
Contoh Kasus
Posisi yang membentuk garis dapat ditentukan dengan
perhitungan sebagai berikut :

▪ x = x1 - x0 dan y= y1 - y0

▪ x=7 dan y=6

▪ parameter p0 = 2y-x

▪ p0 = 5

▪ increment

▪ 2y = 12 2y – 2x = -2
k Pk (xk+1 , yk+1)

(10,10)
0 5 (11,11) Tabel Perhitungan
1 3 (12,12)
2 1 (13,13)
3 -1 (14,13)
4 11 (15,14)
5 9 (16,15)
6 7 (17,16)
Lingkaran & Ellipse
▪ Lingkaran (Circle)  Pusat(x,y),
Radius, Warna, Thickness, Pattern

▪ Ellipse  Pusat(x,y), Radius

Horisonal/Vertikal, Warna,
Thickness, Pattern
Algoritma Lingkaran
 Pada umumnya, lingkaran digunakan sebagai komponen dari suatu gambar
 Prosedur untuk menampilkan lingkaran dan elips dibuat dengan persamaan
dasar dari lingkaran
 x2+y2=r2

 Lingkaran adalah kumpulan dari titik-titik yang memiliki jarak dari titik pusat yang
sama untuk semua titik
 Lingkaran dibuat dengan menggambarkan seperempat lingkaran, karena bagian
lain dapat dibuat sebagai bagian yang simetris
 Penambahan x dapat dilakukan dari 0 ke r sebesar unit step, yaitu
menambahkan ± y untuk setiap step.
Simetris Delapan Titik
 Proses pembuatan lingkaran dapat dilakukan dengan menentukan satu titik
awal.

 Bila titik awal pada lingkaran (x,y), maka terdapat tiga posisi lain, sehingga dapat
diperoleh delapan titik.

 Dengan demikian, hanya diperlukan untuk menghitung segmen 45 drajat dalam

menentukan lingkaran selengkapnya.
Simetris Delapan Titik
 Delapan titik simetris, yaitu :
 Kuadran I (x,y),(y,x)
 Kuadran II (-x,y),(-y,x)
 Kuadran III (-x,-y),(-y-x)
 Kuadran IV (x,-y),(y,-x)
 Algoritma lingkaran midpoint disebut juga algoritma lingkaran
BRESSENHAM.
 Dalam hal ini hanya diperhatikan bagian 45 derjat dari suatu lingkaran,
yaitu oktan kedua dari x = 0 ke x = R/ 2, dan menggunakan prosedur
circle point untuk menampilkan titik dari seluruh lingkaran.
Simetris Delapan Titik

▪ Fungsi lingkaran menggambarkan posisi midpoint antara pixel yang terdekat

dengan jalur lingkaran setiap step
Curve Attribute
▪ Parameter yang dimiliki atribut kurva adalah sama dengan yang dimiliki oleh
garis. Kita dapat menampilkan kurva dengan variasi warna, ketebalan, pola
dotdash, dan tersedia opsi pen dan brush. Kurva raster dengan berbagai lebar
dapat ditampilkan menggunakan metode rentang piksel horizontal atau vertikal.
Dimana besarnya kemiringan kurva kurang dari 1, kita memplot bentang vertikal;
Dimana besaran kemiringan lebih besar dari 1, kita memplot bentang horizontal.

Kurva  Teratur/Tidak
teratur (Bezier)
Color And Grayscale
Levels
▪ Opsi warna dikode dengan angka bernilai diantara
0 hingga seluruh nilai positif integerDalam system
raster , beberapa pilihan warna tersedia
berdasarkan jumlah dari penyimpanan yang
tersedia dalam tiap pixel dalam frame buffer.Angka
minimum dari warna daoat dilihat dalam skema
dengan 3 bit penyimpanan per pixel, seperti yang Color
terlihat pada table
▪ Untuk monitor yang tidak memiliki kemampuan
dalam merepresentasikan warna, fungsi warna
dapat digunakan dalam program untuk membuat
variasi warna abu-abu atau grayscale untuk
menampilkan primitives. Nilai angka dalam rentang Grayscale
dari 0 sampai 1 dapat digunakan untuk
menspesifikasi level grayscale, dimana selanjutnya
akan dikonversi ke kode biner yang sesuai untuk
disimpan sebagai raster.
Area-fill Attributes
▪ Pilihan untuk mengisi sebuah bentuk berada diantara warna solid atau bentuk
didalam bentuk Atau hanya warna dan bentuk sederhana. Pilihan-pilihan ini dapat
diterapkan dalam polygonSesuai degan yang tersedia dalam package. Sebagai
tambahan, daerah dapat divariasikan Menggunakan brush styles, color, dan
transparency parameters.
Area-fill Attributes
Character Attributes
▪ Tampilan karakter dikontrol oleh atribut seperti font, size, color, dan
orientationAtribut dapat diatur untuk string (text) atau satu karakter.

Character  Type, Slanted,

Thickness, Color, dll
Text Attributes
▪ Ada banyak pilihan mengenai font yang dapat digunakan untuk atribut textText
juga dapat divariasikan dengan garis bawah (underlining styles) berupa solid,
dotted, double.Tersedia juga style bold, italic, dan outline shadow.Pengaturan
warna pada text juga tersedia
▪ Kontrol dari teks warna di atur dari sebuah aplikasi programDimana warna teks
parameter tc yg merinci sebuah kode warnaUkuran karakter dirincikan oleh
printer dengan komposisi dalam point(titik), dimana 1 titik bernilai 0.013837 inci
Pertanyaan

1. Eric (004) = Algoritma garis, perbedaan nya antara kedua nya. Lebih baik digunakan yang mana.

2. Shafira (136) = Output Atribut Primitive digunakan untuk apa, dan contoh aplikasi

3. Ester (115) = Warna ada kodenya, dapat kode darimana??

TERIMA KASIH