BAB II PRIMITIF GRAFIK

Transkripsi

1 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 masinmasing piksel (picture element = pixel). 4 bit/piksel = 24 = 16 level abu-abu.

2 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 ). 3. Hitung dx=x 2 -x 1, dan dy= y 2 -y 1.

3 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); 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 y=y 2.

4 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; 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); putpixel(x,y,warna); 3. Algoritma Pembentuk Lingkaran Secara umum prosedur pembentuk lingkaran dapat dibuat dengan rumus dasar (xx 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);

5 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 y k+1 Dimana 2x k+1 = 2x k + 2 dan 2y k+1 = 2y k 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)

6 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 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 menunjukkan perbandingan antara OpenGL dengan DirectX. Perbandingan ini didasarkan pada buku OpenGL Game

7 Programming, namun ada beberapa feature yang mungkin sudah ditambahkan pada DirectX versi terbaru. Tabel 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 menunjukkan beberapa contoh perintah yang biasa digunakan pada OpenGL. Tabel 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

8 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 glbegin(gl_lines); Garis Objek primitive (lihat gambar glbegin(gl_line_strip); Poligaris Objek primitive (lihat gambar glbegin(gl_line_loop); Poligaris tertutup (polygon) Objek primitive (lihat gambar glbegin(gl_triangles); Segitiga Objek primitive (lihat gambar glbegin(gl_triangle_strip); Segitiga Objek primitive (lihat gambar glbegin(gl_triangle_fan); Segitiga Objek primitive (lihat gambar glbegin(gl_quads); Segiempat Objek primitive (lihat gambar glbegin(gl_quad_strip); Segiempat Objek primitive (lihat gambar glbegin(gl_polygon); Poligon Objek primitive (lihat gambar glbegin(gl_line_stipple); Garis putus-putus Objek primitive glbegin(gl_poly_stipple); Poligon dengan pola Objek primitive glrect(glint x1, GLint y1, GLint x2, GLint y2); tertentu Segiempat siku-siku glend( ); Akhir perintah OpenGL - Objek primitive dan ukuran segiempat ditentukan oleh dua titik yaitu (x1,y1) dan (x2,y2) Gambar Contoh-contoh Objek Primitif

9 Perintah tranformasi pada OpenGL adalah o Translasi gltranslated o Skala glscaled o Putar atau rotasi glrotated Tabel 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 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.