BAB II PRIMITIF GRAFIK

BAB II PRIMITIF GRAFIK

2.1 ELEMEN GAMBAR UNTUK MENCIPTAKAN GAMBAR DALAM KOMPUTER

Penghasilan citra pada grafika komputer menggunakan primitif grafik dasar. Primitif ini memudahkan untuk merender (menggambar pada layar monitor) sebagaimana penggunaan persamaan geometrik sederhana.

Contoh primitif grafik dasar (Gambar 2.1) adalah : o Titik

o Garis, Segiempat

o Kurva, Lingkaran, ellipse, kurva bezier, kurva lainnya o Fill area

o Text

Gambar 2.1 Primitif Grafik.

Objek kompleks dapat dibuat dengan kombinasi dari primitif ini. Adapun contoh grafik primitif yang lain adalah :

o Poligaris yaitu urutan garis lurus yang saling terhubung.

o Teks adalah bentuk bahasa tulisan dengan simbol-simbol tertentu. Teks merupakan kumpulan lebih dari dua karakter.

o Citra raster adalah gambar yang dibuat dengan piksel yang membedakan bayangan dan warna. Citra raster disimpan dalam komputer sebagai larik bernilai numerik. Larik tersebut dikenal sebagai piksel map atau bitmap. Ada tiga cara untuk menghasilkan citra grafik yaitu Citra didisain dengan tangan, Citra yang didapat dari perhitungan dan Citra yang discan. Pemaparan citra raster dinyatakan oleh piksel dengan video displays (Cathod-ray Tube CRT), flat panel dispalys (LCD), hardcopy (printer laser, dot matrix printers, ink-jet printers). Contoh proses pemaparan permukaan adalah citra yang ditangkap lalu disimpan di frame buffer, kemudian digunakan untuk mewarnai sebuah titik pada permukaan pemapar. Selanjutnya proses scan di CRT. Frame buffer adalah matriks 2 dimensi yang mewakili piksel pada pemapar. Ukuran matriks harus cukup untuk menyimpan kedalam warna pemapar untuk semua piksel. Sebagai contoh pemapar (monitor) berresolusi 1280 x 1024 mempunya kedalaman warna 24 bit (~16 juta warna) membutuhkan ruang simpan sekitar 4 Mb.

o Piksel dan Bitmap. Jumlah bit yang digunakan untuk mewakili warna/bayangan dari masin-masing piksel (picture element = pixel). 4 bit/piksel = 24 = 16 level abu-abu.

2.2 OUTPUT PRIMITIF GRAFIK

1. TITIK

Titik dalam Grafika Komputer bisa didefinisikan sebagai suatu posisi tertentu dalam

suatu sistem koordinat. Sistem koordinat yang dipakai bisa Polar Coordinates atau

Cartesian Coordinates. Biasanya dalam pemrograman grafis, yang paling umum

digunakan adalah Cartesian Coordinates.

Dalam Cartesian Coordinates, titik didefinisikan sebagai kombinasi dua bilangan yang

menentukan posisi tersebut dalam koordinat x dan y (2D)

Ada 2 definisi koordinat dalam komputer terutama dalam Sistem Operasi Windows, yaitu

Screen Coordinate, dan Cartesian Coordinate, keduanya sering membingungkan.

Prinsipnya, karena monitor didesain untuk menggambar dari atas ke bawah, maka

sumbu y pada Screen Coordinates dan Cartesian Coordinates berbeda arah, untuk

Screen Coordinates, sumbu Y arahnya ke bawah, sedangkan pada Cartesian

Coordinates, sumbu Y arahnya ke atas. Biasanya dalam rendering pipeline, hal yang

terakhir dilakukan adalah mengkonversi Cartesian Coordinates ke Screen Coordinates.

2. Garis

Umumnya persamaan garis lurus pada koordinat kartesius diwujudkan dalam

persamaan garis : y=m.x+b

jika dimisalkan pada dua titik(x

1

,y

1

dan x

2

,y

2

) akan dibuat sebuah garis lurus, kita dapat

menentukan nilai “m' dan “b” dengan persamaan berikut:

m = (y

2

-y

1

)/(x

2

-x

1

)

b = y

1

– m . x

1

algoritma untuk menggambar garis pada komputer didasarkan pada dua persamaan di

atas. dimana m adalah gradien atau kemiringan garis tersebut.

1. Algoritma digital differential analyzer ( DDA ),

Prinsip algoritma ini adalah mengambil nilai integer terdekat dengan jalur garis

berdasarkan atas sebuah titik yang telah ditentukan sebelumnya (titik awal garis).

Algoritma pembentukan garis DDA:

1.Tentukan dua titik yang akan dihubungkan dalam pembentukan garis.

2.Tentukan salah satu titik sebagai awal (x

1

,y

1

) dan titik akhir (x

2

,y

2

).

4. Tentukan langkah, yaitu dengan cara jarak maksimum jumlah penambahan nilai x

maupun nilai y, dengan cara:

Jika nilai absolut dari dx lebih besar dari absolut dy, maka langkah = absolut dari dx.

Jika tidak maka langkah= absolut dari dy

5. Hitung penambahan koordinat pixel yaitu x_increment=dx/langkah, dan

y_increment=dy/langkah

6. Koordinat selanjutnya (x+x_increment, y+y_increment)

7. Posisi pixel pada layar ditentukan dengan pembulatan nilai koordinat tersebut.

8. Ulangi nomor 6 dan 7 untuk menentukan posisi pixel selanjutnya,sampai x=x

1

dan

y=y

1

.

Contoh Prosedur DDA:

procedure drawLine(xstart,ystart,xend,yend:integer); var step,k:integer;dx,dy:real;x_inc,y_inc,x,y:real; begin

dx:=xend-xstart;dy:=yend-ystart; x:=xstart;y:=ystart;

if abs(dx) > abs(dy) then step:=round(abs(dx))else step:=round(abs(dy)); x_inc:=dx/step;

y_inc:=dy/step;

putPixel(round(x),round(y),warna); for k:=1 to step do begin

x:=x+x_inc; y:=y+y_inc;

putPixel(round(x),round(y),warna); end;

end;

2. Algoritma garis Bressenham

Tidak seperti Algoritma DDA, Algoritma Bressenham tidak membulatkan nilai posisi

pixel setiap waktu. Algoritma Bressenham hanya menggunakan penambahan nilai

integer yang juga dapat diadaptasi untuk menggambar lingkaran.

Berikut ini langkah langkah untuk membentuk garis menurut algoritma Bressenham :

1. Tentukan dua titik yang akan dihubungkan

2. Tentukan salah satu titik di sebelah kiri sebagai titik awal yaitu(x

1

,y

1

) dan titik lainnya

sebagai titik akhir(x

2

,y

2

).

3. Hitung dx, dy, 2dx dan 2dy - 2dx

4. Hitung parameter fungsi keputusan p

0

= 2 dy - dx

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

Bila p

k

< 0, maka titik selanjutnya adalah (x

k

+1,y

k

), dan p

k+1

=p

k

+2dy

Bila tidak, maka titik selanjutnya adalah(x

k

+1, y

k

+1), dan

pk+1

=p

k

+2dy-2dx.

6. Ulangi langkah nomor 5 untuk menentukan posisi pixel selanjutnya, sampai x=x

2

dan

Contoh Prosedur algoritma Bressenham :

procedure DrawBressLine(xa,ya,xb,yb:integer); var dx,p,dy,xEnd,x,y :integer; begin dx:= abs(xb-xa); dy:= abs(yb-ya); p:=2*dy-dx; if xa > xb then begin x:=xb; y:=yb; xEnd:=xa; end else begin x:=xa; y:=ya; xEnd:=xb; end; putPixel(x,y,warna); while x < xEnd do begin x:=x+1; if p < 0 then p:=p+2*dy else begin y:=y+1; p:=p+2*dy-2*dx); end; putPixel(x,y,warna); end; end;

3. Algoritma Pembentuk Lingkaran

Secara umum prosedur pembentuk lingkaran dapat dibuat dengan rumus dasar

(x-x

c

)

2

+ (y-y

c

)

2

= R

2

dan rumus parametrik x = x

c

+ R cos t, y = y

c

+ R sin t. Terdapat

beberapa cara untuk membentuk suatu lingkaran namun tidak efisien. Lingkaran dapat

dibuat dengan menggambarkan seperempat lingkaran karena bagian lain dapat dibuat

sebagai bagian yang simetris.

a. Algoritma Simetris delapan titik

Pada algoritma ini pembuatan lingkaran 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 sebenarnya hanya diperlukan untuk

menghitung segmen 45’ dalama menentukan lingkaran selengkapnya. Dengan titik

pusat lingkaran tertentu, delapan titik simetris dapat ditampilkan dengan prosedur

Circle Point Sebagai berikut:

procedure CirclePoints(x, y, value:integer); begin putPixel(x,y,value); putPixel(-x,y,value); putPixel(x,-y,value); putPixel(-x,-y,value); putPixel(y,x,value); putPixel(-y,x,value); putPixel(y,-x,value); putPixel(-y,-x,value); end;

b. Algoritma Lingkaran Midpoint

Algoritma Lingkaran Midpoint juga disebut algoritma lingkaran Bressenham.

Bressenham mengembangkan generator lingkaran yang cukup efisien. Algoritma yang

digunakan membentuk semua titik berdasarkan titik pusat dengan penambahan semua

jalur sekeliling lingkaran. Algoritma ini diturunkan dari algoritma Midpoint untuk

pembentukan garis. Dalam hal ini hanya diperhatikan bagian 45’ dari suatu lingkaran,

yaitu kuadran kedua dari x = 0 ke x=R/√2, dan menggunakan CirclePoints untuk

menampilkan titik dari seluruh lingkaran.

Langkah langkah untuk membentuk lingkaran algoritma Circle Midpoint:

1. Tentukan radius r dengan titk pusat lingkaran(x

c

,y

c

) kemudian diperoleh

(x

0

,y

0

)=(0,r)

2. Hitung nilai dari parameter P

0

= (5/4) - r

3. Tentukan nilai awal k=0, untuk setiap posisi x

k

berlaku sebagai berikut:

jika P

k

< 0, maka titik selanjutnya adalah (x

k+1

,

y

k

) dan P

k+1

= P

k

+ 2 x

k+1

+1

jika tidak, maka selanjutnya adalah(x

k+1

,

,

y

k-1

), dan P

k+1

= P

k

+ 2x

k+1

+ 1 - 2y

k+1

Dimana 2x

k+1

= 2x

k

+ 2 dan 2y

k+1

= 2y

k

- 2

4. Tentukan titik simetris pada ketujuh kuadran yang lain

5. Gerakkan setiap posisi pixel(x,y) pada garis melingkar dari lingkaran dengan titik

pusat (x

c

,y

c

) dan tentukan nilai koordinat:

x = x + x

c

,

y = y + y

c

6.Ulangi langkah ke 3 sampai 5, sehingga x >= y

Contoh algoritma lingkaran midpoint

Untuk menggambarkan algoritma Bressenham dalam pembentukan suatu lingkaran

dengan titik pusat (0,0) dan radius 10, perhitungan berdasarkan pada kuadran dari

kuadran pertama di mana x=0 sampai x=y. Nilai parameter dapat ditentukan dengan

P

0

=1- r =1 – 10 = - 9, Koordinat titk awal adalah (x,r) = (0,8)

K

P

k

(X

k+1

,Y

k+1

)

(0,8)

0

7

(1,8)

1

4

(2,8)

2

1

(3,7)

3

6

(4,7)

4

3

(5.6)

5

2

(6,5)

2.3 PEMROGRAMAN GRAFIKA KOMPUTER

Ada tiga komponen untuk kerangka kerja aplikasi grafika komputer, yaitu : o Model aplikasi

o Program aplikasi o Sistem grafik

Sekarang telah banyak beredar di pasaran aplikasi pengembang cepat (Rapid Development Applications / RAD) seperti Delphi, Borland C++, Visual C++ dan Visual Basic. RAD ini memudahkan dalam pembuatan antarmuka, form, tombol, dan lain-lain sehingga dapat membantu percepatan dalam pembuatan program aplikasi grafik karena kode yang kompleks untuk pembuatan antarmuka, form, tombol, dan lain-lain sudah tidak perlu dibuat lagi. RAD juga langsung memudahkan pemrograman Windows

2.4 TRANSFORMASI

Menurut Suyoto (2003), transformasi adalah memindahkan objek tanpa merusak bentuk. Contoh transforamsi adalah transisi, penskalaan, putaran/rotasi, balikan, shearing dan gabungan. Tujuan transformasi adalah

o Merubah atau menyesuaikan komposisi pemandangan o Memudahkan membuat objek yang simetris

o Melihat objek dari sudut pandang yang berbeda

o Memindahkan satu atau beberapa objek dari satu tempat ke tempat laein. Ini biasa dipakai untuk animasi computer

Untuk dapat menggunakan transformasi dengan baik maka diperlukan pengetahuan operasi matrisk dan vector

Operasi matriks:

o Penambahan dan pengurangan o Perkalian

o Determianan o Transpos

o Kebalikan (inverse) Operasi vektor

o Penambahan dan pengurangan o Perkalian titik (dot product) o Perkalian silang (cross product)

2.5 OpenGL

OpenGL adalah suatu spefikasi grafik yang low-level yang menyediakan fungsi untuk pembuatan grafik primitif termasuk titik, garis, dan lingkaran. OpenGL digunakan untuk mendefinisikan suatu objek, baik objek 2 dimensi maupun objek 3 dimensi. OpenGL juga merupakan suatu antarmuka pemrograman aplikasi (application programming interface (API) yang tidak tergantung pada piranti dan platform yang digunakan, sehingga OpenGL dapat berjalan pada sistem operasi Windows, UNIX dan sistem operasi lainnya. OpenGL pada awalnya didesain untuk digunakan pada bahasa pemrograman C/C++, namun dalam perkembangannya OpenGL dapat juga digunakan dalam bahasa pemrograman yang lain seperti Java, Tcl, Ada, Visual Basic, Delphi, maupun Fortran. Namun OpenGL di-package secara berbeda-beda sesuai dengan bahasa pemrograman yang digunakan. Oleh karena itu, package OpenGL tersebut dapat di-download pada situs

http://www.opengl.org sesuai dengan bahasa pemrograman yang akan digunakan.

Selain OpenGL ada juga tools/library grafik yang dapat dipergunakan yaitu DirectX. Namun tools ini hanya dapat dipergunakan pada Microsoft Windows. Tabel 2.5.1 menunjukkan perbandingan antara OpenGL dengan DirectX. Perbandingan ini didasarkan pada buku “OpenGL Game

Programming”, namun ada beberapa feature yang mungkin sudah ditambahkan pada DirectX versi terbaru.

Tabel 2.5.1 Perbandingan OpenGL dengan DirectX

Feature OpenGL DirectX

Vertex Blending N/A Yes

Multiple Operating Systems Yes No

Extension Mechanism Yes Yes

Development Multiple member Board Microsoft

Thorough Specification Yes No

Two-sided lighting Yes No

Volume Textures Yes No

Hardware independent Z-buffers Yes No

Accumulation buffers Yes No

Full-screen Antialiasing Yes Yes

Motion Blur Yes Yes

Depth of field Yes Yes

Stereo Rendering Yes No

Point-size/line-width attributes Yes No

Picking Yes No

Parametric curves and surfaces Yes No Cache geometry Display Lists Vertex Buffers System emulation Hardware not present Let app determine

Interface Procedure calls COM

Updates Yearly Yearly

Source Code Sample SDK Implementation

Masing-masing perintah atau fungsi dalam OpenGL mempunyai struktur dan format yang sama. Tabel 2.5.2 menunjukkan beberapa contoh perintah yang biasa digunakan pada OpenGL.

Tabel 2.5.2 Contoh Perintah-perintah dalam OpenGL

Perintah Arti Keterangan

glVertex2i(x,y); Lokasi titik berada di (x,y) Tipe argumennya adalah integer dan 2 dimensi yaitu x dan y

glVertex2f(x,y); Lokasi titik berada di (x,y) Tipe argumennya adalah float dan 2 dimensi yaitu x dan y

glVertex3i(x,y,z); Lokasi titik berada di (x,y,z) Tipe argumennya adalah integer dan 2 dimensi yaitu x, y dan z

glVertex3f(x,y,z); Lokasi titik berada di (x,y,z) Tipe argumennya adalah float dan 2 dimensi yaitu x, y dan z

glClearColour(R, G, B, ); Warna latar belakang Empat komponen warna yaitu Red, Green, Blue dan alpha

glColor3f(R, G, B); Warna latar muka (pena) Tiga komponen warna yaitu Red, Green dan Blue

glColor4f(R, G, B); Warna latar muka (pena) Empat komponen warna yaitu Red, Green, Blue dan alpha

glPointSize(k); Ukuran titik k piksel Besar kecilnya ukuran titik tergantung pada k (integer) glBegin(GL_POINTS); Titik Objek primitive (lihat gambar

2.2)

glBegin(GL_LINES); Garis Objek primitive (lihat gambar 2.2)

glBegin(GL_LINE_STRIP); Poligaris Objek primitive (lihat gambar 2.2)

glBegin(GL_LINE_LOOP); Poligaris tertutup (polygon) Objek primitive (lihat gambar 2.2)

glBegin(GL_TRIANGLES); Segitiga Objek primitive (lihat gambar 2.2)

glBegin(GL_TRIANGLE_STRIP); Segitiga Objek primitive (lihat gambar 2.2)

glBegin(GL_TRIANGLE_FAN); Segitiga Objek primitive (lihat gambar 2.2)

glBegin(GL_QUADS); Segiempat Objek primitive (lihat gambar 2.2)

glBegin(GL_QUAD_STRIP); Segiempat Objek primitive (lihat gambar 2.2)

glBegin(GL_POLYGON); Poligon Objek primitive (lihat gambar 2.2)

glBegin(GL_LINE_STIPPLE); Garis putus-putus Objek primitive glBegin(GL_POLY_STIPPLE); Poligon dengan pola

tertentu Objek primitive glRect(GLint x1, GLint y1,

GLint x2, GLint y2); Segiempat siku-siku Objek primitive dan ukuran segiempat ditentukan oleh dua titik yaitu (x1,y1) dan (x2,y2)

glEnd( ); Akhir perintah OpenGL -

Perintah tranformasi pada OpenGL adalah o Translasi – glTranslated

o Skala – glScaled

o Putar atau rotasi – glRotated

Tabel 2.5.3 Format Fungsi OpenGL

Suffix Tipe data C atau C++ OpenGL

B Integer 8-bit signed char GLbyte

S Integer 16-bit Short GLshort

I Integer 32-bit int atau long GLint, GLsizei F Floating 32-bit Float GLfloat, GLclampf D Floating 64-bit Double GLdouble, GLclampd Ub unsigned 8-bit unsigned char GLubyte, GLboolean Us unsigned 16-bit unsigned short GLushort

Ui unsigned 32-bit unsigned int atau unsigned

long GLuint, GLenum, GLbitfield

2.6 The OpenGL Utility Toolkit (GLUT)

GLUT dapat menyederhanakan implementasi program dengan menggunakan OpenGL. GLUT didesain secara serdehana untuk merender sebuah program yang dibuat dengan OpenGL. Versi GLUT yang ada pada saat ini adalah 3.7.6. GLUT juga mendukung fungsi-fungsi, antara lain:

o Mutiplewindows dalam render window OpenGL. o Memproses kejadian Callback.

o Dapat menerima reaksi dari input (antara lain mouse dan keyboard). o Mempermudah cascading fasilitas menu pop-up.

o Mendukung bitmap dan stroke fonts. o Manajemen windows.