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 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(x1,y1 dan x2,y2) akan dibuat sebuah garis lurus, kita dapat menentukan nilai “m' dan “b” dengan persamaan berikut:
m = (y2-y1)/(x2-x1) b = y1 – m . x1 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 (x1,y1) dan titik akhir (x2,y2). 3. Hitung dx=x2-x1, dan dy= y2-y1.
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=x1 dan y=y1. 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(x1,y1) dan titik lainnya sebagai titik akhir(x2,y2). 3. Hitung dx, dy, 2dx dan 2dy - 2dx 4. Hitung parameter fungsi keputusan p0 = 2 dy - dx 5. Untuk setiap xk sepanjang jalur garis, dimulai dengan k=0, Bila pk < 0, maka titik selanjutnya adalah (xk+1,yk), dan pk+1=pk+2dy Bila tidak, maka titik selanjutnya adalah(xk+1, yk+1), dan pk+1=pk+2dy-2dx. 6. Ulangi langkah nomor 5 untuk menentukan posisi pixel selanjutnya, sampai x=x2 dan y=y2.
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 (xxc) + (y-yc)2 = R2 dan rumus parametrik x = xc + R cos t, y = yc + 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. 2
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(xc,yc) kemudian diperoleh (x0,y0)=(0,r) 2. Hitung nilai dari parameter P0 = (5/4) - r 3. Tentukan nilai awal k=0, untuk setiap posisi xk berlaku sebagai berikut: jika Pk < 0, maka titik selanjutnya adalah (xk+1 , yk) dan Pk+1 = Pk + 2 xk+1+1 jika tidak, maka selanjutnya adalah(xk+1 , yk-1), dan Pk+1 = Pk + 2xk+1 + 1 - 2yk+1 ,
Dimana 2xk+1 = 2xk + 2 dan 2yk+1 = 2yk - 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 (xc,yc) dan tentukan nilai koordinat: x = x + xc , y = y + yc 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 P0=1- r =1 – 10 = - 9, Koordinat titk awal adalah (x,r) = (0,8)
K
0 1 2 3 4 5
Pk
(Xk+1 ,Yk+1)
7 4 1 6 3 2
(0,8) (1,8) (2,8) (3,7) (4,7) (5.6) (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
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
Display Lists
Vertex Buffers
Hardware not present
Let app determine
Development
Cache geometry System emulation 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 glVertex2i(x,y);
Arti Lokasi titik berada di (x,y)
glVertex2f(x,y);
Lokasi titik berada di (x,y)
glVertex3i(x,y,z);
Lokasi titik berada di (x,y,z)
glVertex3f(x,y,z);
Lokasi titik berada di (x,y,z)
glClearColour(R, G, B, );
Warna latar belakang
Keterangan Tipe argumennya adalah integer dan 2 dimensi yaitu x dan y Tipe argumennya adalah float dan 2 dimensi yaitu x dan y Tipe argumennya adalah integer dan 2 dimensi yaitu x, y dan z Tipe argumennya adalah float dan 2 dimensi yaitu x, y dan z Empat komponen warna yaitu Red, Green, Blue dan alpha
glColor3f(R, G, B);
Warna latar muka (pena)
glColor4f(R, G, B);
Warna latar muka (pena)
glPointSize(k);
Ukuran titik k piksel
glBegin(GL_POINTS);
Titik
glBegin(GL_LINES);
Garis
glBegin(GL_LINE_STRIP);
Poligaris
glBegin(GL_LINE_LOOP);
Poligaris tertutup (polygon)
glBegin(GL_TRIANGLES);
Segitiga
glBegin(GL_TRIANGLE_STRIP);
Segitiga
glBegin(GL_TRIANGLE_FAN);
Segitiga
glBegin(GL_QUADS);
Segiempat
glBegin(GL_QUAD_STRIP);
Segiempat
glBegin(GL_POLYGON);
Poligon
glBegin(GL_LINE_STIPPLE); glBegin(GL_POLY_STIPPLE);
Garis putus-putus Poligon dengan tertentu Segiempat siku-siku
glRect(GLint x1, GLint GLint x2, GLint y2); glEnd( );
y1,
Akhir perintah OpenGL
pola
Tiga komponen warna yaitu Red, Green dan Blue Empat komponen warna yaitu Red, Green, Blue dan alpha Besar kecilnya ukuran titik tergantung pada k (integer) Objek primitive (lihat gambar 2.2) Objek primitive (lihat gambar 2.2) Objek primitive (lihat gambar 2.2) Objek primitive (lihat gambar 2.2) Objek primitive (lihat gambar 2.2) Objek primitive (lihat gambar 2.2) Objek primitive (lihat gambar 2.2) Objek primitive (lihat gambar 2.2) Objek primitive (lihat gambar 2.2) Objek primitive (lihat gambar 2.2) Objek primitive Objek primitive Objek primitive dan ukuran segiempat ditentukan oleh dua titik yaitu (x1,y1) dan (x2,y2) -
Gambar 2.5.1 Contoh-contoh Objek Primitif
Perintah tranformasi pada OpenGL adalah o Translasi – glTranslated o Skala – glScaled o Putar atau rotasi – glRotated Tabel 2.5.3 Format Fungsi OpenGL Suffix B S I F D Ub Us Ui
Tipe data Integer 8-bit Integer 16-bit Integer 32-bit Floating 32-bit Floating 64-bit unsigned 8-bit unsigned 16-bit unsigned 32-bit
C atau C++ signed char Short int atau long Float Double unsigned char unsigned short unsigned int atau long
unsigned
OpenGL GLbyte GLshort GLint, GLsizei GLfloat, GLclampf GLdouble, GLclampd GLubyte, GLboolean GLushort 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.
