1 BAHAN AJAR GRAFIKA KOMPUTER MMS 2604 / 3 sks Disusun Oleh : DRS. JANOE HENDARTO MKOM. ProgramStudi Il muKomputerJurusanMatematika Fakul tasMatemati kadanIl muPengetahuanAl am Uni versi tasGadjahMada 2006www.digizoneku.comBAB I PENDAHULUAN I.1LATAR BELAKANG Perkembangangrafikakomputermenuntutparapengembangsistemaplikasi grafika komputer untuk dapat mengembangkan suatu informasi yang dilengkapi dengan visualisasi dan animasi, agar dapat lebih mudah dipahami oleh pihak yang menggunakan sistemtersebut.Grafikakomputertelahmenunjukkankemajuanyangpesatdalam pengembangan berbagai aplikasi untuk menghasilkan gambarGrafika komputer digunakan untuk menunjang berbagai bidang dengan teknologi grafikaberbasiskomputer.Penggunaangrafikakomputertelahlamadigunakandalam beberapamacamaplikasi,diantaranyapendidikan,kedokteran,fisika,matematika, multimedia, dan lain-lain. Pada saat ini grafika komputer sudah digunakan pada bidang sains,engineering,kedokteran,bisnis,industri,pemerintahan,seni,hiburan,iklan, pendidikan, dan lain-lain. Olehkarenaitu,sudahsemakinbanyakpulabahasapemrogramanyang dilengkapidengantools/librarypembuatangrafikSalahsatutools/librarypembuatan aplikasigrafikadalahOpenGL(OpenGraphicsLibrary).OpenGL(OpenGraphicsLibrary) adalah suatu spefikasi grafik yang low-level yangmenyediakan fungsi untuk pembuatan grafikprimitiftermasuktitik,garis,danlingkaran.OpenGLdigunakanuntuk mendefinisikan suatu objek, baik objek 2 dimensi maupun objek 3 dimensi.OpenGLjugamerupakansuatuantarmukapemrogramanaplikasi(application programminginterface(API)yangtidaktergantungpadapirantidanplatformyang digunakan,sehinggaOpenGLdapatberjalanpadasistemoperasiWindows,UNIXdan sistemoperasilainnya.OpenGLpadaawalnyadidesainuntukdigunakanpadabahasa pemrogramanC/C++,namundalamperkembangannyaOpenGLdapatjugadigunakan dalambahasapemrogramanyanglainsepertiJava,Tcl,Ada,VisualBasic,Delphi, maupunFortran.NamunOpenGLdi-packagesecaraberbeda-bedasesuaidengan 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. 1.2GRAFIKA KOMPUTER MenurutSuyoto(2003),grafikakomputer(ComputerGraphics)dapatdiartikan sebagai perangkat alat yang terdiri dari hardware dan software untuk membuat gambar, grafikataucitrarealistikuntukseni,gamekomputer,fotodanfilmanimasi.Sistem grafikakomputerdapatdijalankandengankomputerpribadi(PersonalComputer)atau padaworkstation.Grafikakomputersemakinlamasemakinpesatperkembangannya, sehinggadefinisidariGrafikakomputerdapatdiartikansebagaisuatustuditentang bagaimanamenggambar(membuatgrafik)denganmenggunakankomputerdan manipulasinya (merubah sedikit/transformasi/animasi). PengertianGrafikberbedadenganimage/citra,imageadalahgambaryang diperoleh dengan alat pengambil gambar, seperti kamera, scanner, dll. Sedangkan Grafik adalahgambaryangdibuatdengancaratertentu,yaitucarayangadadigrafika komputer. Grafik dan image keduanya termasuk picture/gambar. www.digizoneku.com 41.3PERANAN DAN PENGGUNAAN GRAFIKA KOMPUTER Grafika komputer digunakan diberbagai bidang seni, sains, bisnis, pendidikan dan hiburan. Sebagai contoh : oAntarmukapengguna.SetiapaplikasipadakomputermenggunakanGraphical User Interface (GUI), semua GUI ini menggunakan grafika komputer. oPerpetaan (Cartography). Setiap peta dapat disimpan, dimanipulasi dan dilihat pada komputer. oKesehatan.Grafikakomputertelahdigunakandenganbaikdalamperencanaan maupun pelaksanaan pembedahan. oComputer Aided Design (CAD). Pengguna dapat merancang banyak objek (seperti bagian mekanik) menggunakan grafika komputer. oSistemMultimedia.Grafikakomputermemegangperananyangsangatpenting dalam sistem multimedia. oPresentasigrafikauntukproduksislide.Salahsatubidangpentingdalam grafikakomputerdikenalsebagaipresentasigrafikataugrafikuntukbisnis. Bidang ini berfokus pada bagaimana menghasilkan gambar secara profesional, sering dalambentukslideuntukmenunjukkankelompokpelanggandanmanajemen. Sebagaimana slide sering berisi diagram batang atau diagram pie yang menunjukkan informasi kompleks dalam bentuk yang mudah dipahami dan dimengerti. oSistemPaint.Jenisaplikasieditorgrafisyanglain.Sisteminimemungkinkan penggunaberaksilayaknyasepertipelukisyangmelukisobjekdenganbantuan komputer.oPresentasidatasaintifik.Datasaintifikbiasanyakompleksdanberhubungan antaradatayangsatudenganyanglain.Datasaintifikini,biasanyasusahuntuk divisualisasikan jika hanya dengan menggunakan piranti biasa. oSimulasi/pelatihan.Sisteminimemungkinkanpenggunamenjalankan simulasi/pelatihan tertentu.oAplikasi lain. Misalnya : desain jaringan logika interaktif, desain arsitektur interaktif, desain struktur mekanik, kontrol proses, pemrosesan citra, dan lain sebagainya. Graphics Applications Computer Aided Design (CAD)www.digizoneku.com 51.4SISTEM GRAFIK Display Technologies Cathode Ray Tubes (CRTs) Most common display device today Evacuated glass bottle Extremely high voltage Heating element (filament) Electrons pulled towards anode focusing cylinder Vertical and horizontal deflection plates Beam strikes phosphor coating on front of tube Electron Gun Contains a filament that, when heated, emits a stream of electrons Electrons are focused with an electromagnet into a sharp beam and directed to a specific point of the face of the picture tube The front surface of the picture tube is coated with small phospher dots When the beam hits a phospher dot it glows with a brightness proportional to the strength of the beam and how often it is excited by the beam www.digizoneku.com 6Display Technologies: CRTs Vector Displays Early computer displays: basically an oscilloscope Control X,Y with vertical/horizontal plate voltage Often used intensity as Z Name two disadvantages Just does wireframe Complex scenes visible flicker Display Technologies: CRTs Raster Displays Raster: A rectangular array of points or dots Pixel: One dot or picture element of the raster Scan line: A row of pixels www.digizoneku.com 7Display Technologies: CRTs Raster Displays Black and white television: an oscilloscope with a fixed scan pattern: left to right, top to bottom To paint the screen, computer needs to synchronize with the scanning pattern of raster Solution: special memory to buffer image with scan-out synchronous to the raster.We call this the framebuffer. Display Technologies: CRTs Phosphers Flourescence: Light emitted while the phospher is being struck by electrons Phospherescence: Light emitted once the electron beam is removed Persistence: The time from the removal of the excitation to the moment when phospherescence has decayed to 10% of the initial light output www.digizoneku.com 8Display Technologies: CRTs Raster Displays Frame must be refreshed to draw new images As new pixels are struck by electron beam, others are decaying Electron beam must hit all pixels frequently to eliminate flicker Critical fusion frequency Typically 60 times/sec Varies with intensity, individuals, phospherpersistence, lighting... Display Technologies: CRTs Raster Displays Interlaced Scanning Assume can only scan 30 times / second To reduce flicker, divide frame into two fields of odd and even lines1/30 Sec 1/30 Sec1/60 Sec 1/60 Sec 1/60 Sec 1/60 SecField 1Field 1 Field 2 Field 2FrameFrame www.digizoneku.com 9Display Technologies: CRTs Raster Displays Scanning (left to right, top to bottom) Vertical Sync Pulse: Signals the start of the next field Vertical Retrace: Time needed to get from the bottom of the current field to the top of the next field Horizontal Sync Pulse: Signals the start of the new scan line Horizontal Retrace: The time needed to get from the end of the current scan line to the start of the next scan line Display Technology: Color CRTs Color CRTs are much more complicated Requires manufacturing very precise geometry Uses a pattern of color phosphors on the screen: Why red, green, and blue phosphors?Delta electron gun arrangement In-line electron gun arrangement www.digizoneku.com 10 Display Technology: Color CRTs Color CRTs have Three electron guns A metal shadow mask to differentiate the beams Display Technology: Raster Raster CRT pros: Allows solids, not just wireframes Leverages low-cost CRT technology (i.e., TVs) Bright!Display emits light Cons: Requires screen-size memory array Discreet sampling (pixels) Practical limit on size (call it 40 inches) Bulky Finicky (convergence, warp, etc) www.digizoneku.com 11 BAB IIPRIMITIF GRAFIK 2.1ELEMEN GAMBAR UNTUK MENCIPTAKAN GAMBAR DALAM KOMPUTER Penghasilancitrapadagrafikakomputermenggunakanprimitifgrafikdasar. Primitifinimemudahkanuntukmerender(menggambarpadalayarmonitor) sebagaimana penggunaan persamaan geometrik sederhana. Contoh primitif grafik dasar (Gambar 2.1) adalah : oTitik oGaris, Segiempat oKurva, Lingkaran, ellipse, kurva bezier, kurva lainnya oFill area oText Gambar 2.1 Primitif Grafik. Objekkompleksdapatdibuatdengankombinasidariprimitifini.Adapuncontohgrafik primitif yang lain adalah : oPoligaris yaitu urutan garis lurus yang saling terhubung. oTeks adalah bentuk bahasa tulisan dengan simbol-simbol tertentu. Teks merupakan kumpulan lebih dari dua karakter. oCitra raster adalah gambar yang dibuat dengan piksel yang membedakan bayangan danwarna.Citrarasterdisimpandalamkomputersebagailarikbernilainumerik. Lariktersebutdikenalsebagaipikselmapataubitmap.Adatigacarauntuk menghasilkan citra grafik yaitu Citra didisain dengan tangan, Citra yang didapat dari perhitungandanCitrayangdiscan.Pemaparancitrarasterdinyatakanolehpiksel denganvideodisplays(Cathod-rayTubeCRT),flatpaneldispalys(LCD),hardcopy (printerlaser,dotmatrixprinters,ink-jetprinters).Contohprosespemaparan permukaanadalahcitrayangditangkaplaludisimpandiframebuffer,kemudian digunakanuntukmewarnaisebuahtitikpadapermukaanpemapar.Selanjutnya proses scan di CRT. Frame buffer adalah matriks 2 dimensi yang mewakili piksel pada pemapar.Ukuranmatriksharuscukupuntukmenyimpankedalamwarnapemapar untuksemuapiksel.Sebagaicontohpemapar(monitor)berresolusi1280x1024 mempunyakedalamanwarna24bit(~16jutawarna)membutuhkanruangsimpan sekitar 4 Mb. www.digizoneku.com 12 oPikseldanBitmap.Jumlahbityangdigunakanuntukmewakiliwarna/bayangan dari masin-masing piksel (picture element = pixel). 4 bit/piksel = 24 = 16 level abu-abu II.1INPUT PRIMITIF GRAFIK DAN PIRANTINYA Sebagaimana banyak piranti dan cara untuk pemaparan output grafika komputer, demikian pula untuk piranti inputnya, yaitu : oKeyboards oTombol oMouse oGraphics tablets oJoysticks dan trackballs oKnobs oSpace balls dan data gloves Masing-masinginputinimempunyaicaramasing-masinguntukmengirimkaninputke komputer. Input ini diinterpretasikan oleh aplikasi grafika komputer dan dipresentasikan ke pengguna melalui layar monitor. Data yang diinputkan disebut primitif input. Beberapa primitif input diantaranya sebagai berikut : oTitik oStrings (keyboards, suara) oPilihan (tombol, layar sentuh) oValuators (analogue dial) oLocator (mouse) oAmbil (pemilihan sebagian citra, mouse, lightpen) II.2PEMROGRAMAN GRAFIKA KOMPUTER Ada tiga komponen untuk kerangka kerja aplikasi grafika komputer, yaitu : oModel aplikasi oProgram aplikasi oSistem grafik Sekarangtelahbanyakberedardipasaranaplikasipengembangcepat(Rapid DevelopmentApplications/RAD)sepertiDelphi,BorlandC++,VisualC++danVisual Basic.RADinimemudahkandalampembuatanantarmuka,form,tombol,danlain-lain sehingga dapat membantu percepatan dalam pembuatan program aplikasi grafik karena kodeyangkompleksuntukpembuatanantarmuka,form,tombol,danlain-lainsudah tidak perlu dibuat lagi. RAD juga langsung memudahkan pemrograman Windows II.3TRANSFORMASI Menurut Suyoto (2003), transformasi adalah memindahkan objek tanpa merusak bentuk.Contohtransforamsiadalahtransisi,penskalaan,putaran/rotasi,balikan, shearing dan gabungan. Tujuan transformasi adalah oMerubah atau menyesuaikan komposisi pemandangan oMemudahkan membuat objek yang simetris oMelihat objek dari sudut pandang yang berbeda oMemindahkan satu atau beberapa objek dari satu tempat ke tempat laein. Ini biasa dipakai untuk animasi computer www.digizoneku.com 13 Untukdapatmenggunakantransformasidenganbaikmakadiperlukan pengetahuan operasi matrisk dan vector Operasi matriks: oPenambahan dan pengurangan oPerkalian oDetermianan oTranspos oKebalikan (inverse) Operasi vektor oPenambahan dan pengurangan oPerkalian titik (dot product) oPerkalian silang (cross product) II.4OpenGL OpenGLadalahsuatuspefikasigrafikyanglow-level yangmenyediakanfungsi untuk pembuatan grafik primitif termasuk titik, garis, dan lingkaran. OpenGL digunakan untukmendefinisikansuatuobjek,baikobjek2dimensimaupunobjek3dimensi. OpenGLjugamerupakansuatuantarmukapemrogramanaplikasi(application programminginterface(API)yangtidaktergantungpadapirantidanplatformyang digunakan,sehinggaOpenGLdapatberjalanpadasistemoperasiWindows,UNIXdan sistemoperasilainnya.OpenGLpadaawalnyadidesainuntukdigunakanpadabahasa pemrogramanC/C++,namundalamperkembangannyaOpenGLdapatjugadigunakan dalambahasapemrogramanyanglainsepertiJava,Tcl,Ada,VisualBasic,Delphi, maupunFortran.NamunOpenGLdi-packagesecaraberbeda-bedasesuaidengan 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.SelainOpenGLadajugatools/librarygrafikyangdapatdipergunakanyaitu DirectX. Namun tools ini hanya dapat dipergunakan pada Microsoft Windows. Tabel 2.1 menunjukkan perbandingan antara OpenGL dengan DirectX. Perbandingan ini didasarkan padabukuOpenGLGameProgramming,namunadabeberapafeatureyangmungkin sudah ditambahkan pada DirectX versi terbaru. Tabel 2.1 Perbandingan OpenGL dengan DirectX FeatureOpenGLDirectX Vertex Blending N/AYes Multiple Operating SystemsYesNo Extension MechanismYesYes DevelopmentMultiple member BoardMicrosoft Thorough SpecificationYesNo Two-sided lightingYesNo Volume TexturesYesNo Hardware independent Z-buffersYesNo Accumulation buffersYesNo Full-screen AntialiasingYesYes Motion BlurYesYes Depth of fieldYesYes www.digizoneku.com 14 Stereo RenderingYesNo Point-size/line-width attributesYesNo PickingYesNo Parametric curves and surfacesYesNo Cache geometryDisplay ListsVertex Buffers System emulationHardware not presentLet app determine InterfaceProcedure callsCOM UpdatesYearlyYearly Source CodeSampleSDK Implementation Masing-masingperintahataufungsidalamOpenGLmempunyaistrukturdan formatyangsama.Tabel2.2menunjukkanbeberapacontohperintahyangbiasa digunakan pada OpenGL. Tabel 2.2 Contoh Perintah-perintah dalam OpenGL PerintahArtiKeterangan glVertex2i(x,y);Lokasi titik berada di (x,y)Tipeargumennyaadalah integer dan 2 dimensi yaitu x dan y glVertex2f(x,y);Lokasi titik berada di (x,y)Tipeargumennyaadalah floatdan2dimensiyaitux dan y glVertex3i(x,y,z);Lokasi titik berada di (x,y,z)Tipeargumennyaadalah integerdan2dimensiyaitu x, y dan z glVertex3f(x,y,z);Lokasi titik berada di (x,y,z)Tipeargumennyaadalah float dan 2 dimensi yaitu x, y dan z glClearColour(R, G, B, o);Warna latar belakangEmpatkomponenwarna yaituRed,Green,Bluedan alpha glColor3f(R, G, B);Warna latar muka (pena)Tigakomponenwarnayaitu Red, Green dan Blue glColor4f(R, G, B);Warna latar muka (pena)Empatkomponenwarna yaituRed,Green,Bluedan alpha glPointSize(k);Ukuran titik k pikselBesarkecilnyaukurantitik tergantung pada k (integer) glBegin(GL_POINTS);TitikObjek primitive (lihat gambar 2.2) glBegin(GL_LINES);GarisObjek primitive (lihat gambar 2.2) www.digizoneku.com 15 glBegin(GL_LINE_STRIP);PoligarisObjek primitive (lihat gambar 2.2) glBegin(GL_LINE_LOOP);Poligaris tertutup (polygon)Objek primitive (lihat gambar 2.2) glBegin(GL_TRIANGLES);SegitigaObjek primitive (lihat gambar 2.2) glBegin(GL_TRIANGLE_STRIP);SegitigaObjek primitive (lihat gambar 2.2) glBegin(GL_TRIANGLE_FAN);SegitigaObjek primitive (lihat gambar 2.2) glBegin(GL_QUADS);SegiempatObjek primitive (lihat gambar 2.2) glBegin(GL_QUAD_STRIP);SegiempatObjek primitive (lihat gambar 2.2) glBegin(GL_POLYGON);PoligonObjek primitive (lihat gambar 2.2) glBegin(GL_LINE_STIPPLE);Garis putus-putusObjek primitiveglBegin(GL_POLY_STIPPLE);Poligondenganpola tertentu Objek primitiveglRect(GLintx1,GLinty1, GLint x2, GLint y2); Segiempat siku-sikuObjekprimitivedanukuran segiempatditentukanoleh duatitikyaitu(x1,y1)dan (x2,y2) glEnd( );Akhir perintah OpenGL- Gambar 2.2 Contoh-contoh Objek Primitif Perintah tranformasi pada OpenGL adalah oTranslasi glTranslated oSkala glScaled oPutar atau rotasi glRotated Tabel 2.3 Format Fungsi OpenGL SuffixTipe dataC atau C++OpenGL www.digizoneku.com 16 BInteger 8-bitsigned charGLbyte SInteger 16-bitshortGLshort IInteger 32-bitint atau longGLint, GLsizei FFloating 32-bitfloatGLfloat, GLclampf DFloating 64-bitdoubleGLdouble, GLclampd Ubunsigned 8-bitunsigned charGLubyte, GLboolean Usunsigned16-bit unsigned shortGLushort Uiunsigned32-bit unsignedintatauunsigned long GLuint, GLenum, GLbitfield II.5The OpenGL Utility Toolkit (GLUT) GLUTdapatmenyederhanakanimplementasiprogramdenganmenggunakan 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: oMutiplewindows dalam render window OpenGL. oMemproses kejadian Callback. oDapat menerimareaksi dari input (antara lain mouse dan keyboard). oMempermudah cascading fasilitas menu pop-up. oMendukung bitmap dan stroke fonts. oManajemen windows. BAB IIIGRAFIKA 2D 3.1 Transformasi window to viewport Objek yang akan digambar pada layar biasanya memiliki ukuran yang jauh lebihbesardibandingukuranlayar,sehinggaperludilakukan pemetaan/transformasiyangmemungkinkanobjektersebutbisadigambarpada layar. Meskipundemikian, objek seringkali terlalu rumit untuk ditampilkan pada layardengankoordinatyangsangatterbatas.Sehinggabiasanyakitamemilih bagian tertentudari objek untuk ditampilkan pada layar. Didalam memilih objek yangakanditampilkanbiasanyadibatasiolehsebuahkotakyangdisebutdengan jendela (window). Dalampraktekkitabisamenggunakanseluruhatausebagianlebarlayaruntuk menmpilkanobjekyangberadapadasebuahjendela.Daerahlayaryangdipilih untukmenampilkanobjekyangdimaksuddisebutviewport.Dalamkeadaan normal, viewport akan meliputi seluruh layar lebar. Meskipun demikian, kita bisa memilih bagian tertentu dari layar untuk dijadikan sebuah viewport. 3.2 Manipulasi Gambar/Transformasi Sejumlah objek seringkali mempunyai sifat simetri. Sehingga untuk menggambar seluruh objek, cukup dilaksanakan dengan melakukan manipulasi www.digizoneku.com 17 terhadap objek yang sudah ada, misalnya dengan pencerminan, pergeseran, atau pemutaran objek yang sudah digambar terlebih dahulu.Kita akan mempelajari cara mentransformasikan objek grafis khususnya objek grafis 2D sebagai salah satu cara untuk memanipulasi objek grafis dan sistem koordinat yang dipakaidengan cara yang lebih terorganisir dan efisien. Salah satu contoh penting untuk diketahui adalah pemakaian transformasi jendela ke viewport.Adaduacarauntukmelakukantransformasi,yaitutransformasiobjekdan transformasi kordinat. Pada transformasi objeksemua titik pada sembarang objek akandirubahsesuaidenganaturantertentusementarakordinatnyatetap.Pada transformasisistemkoordinat,objektetaptetapikarenasistemkoordinatnya digantimakakedudukanobjekharusdisesuaikandengankedudukansistem kordinat yangbaru.Jenis-jenis transformasi1.Translasi Sembarangtitikpadabidangxybisadigeserkesembarangtempatdengan menambahkanbesaranpadaabsisxdanordinaty.Translasiadalah transformasidenganbentuktetapmemindahkanobjekapaadanya.Denganmenggunakan persamaan Q = PM + tr, maka hasil pergeseran bisa dinyatakan sbb: (Qx, Qy) = (Px +trx, Py+try) dimana trx adalahvektor translasimenurut sumbu xsedang try adalahvektor translasimenurutsumbuy,danmatrikMbisadikatakansebagaimatrix identitas.Sembarang objek bisa digeser ke posisinya yang baru dengan mengoperasikan persamaandiataspadasetiaptitikdariobjektersebut.Halinikarenasetiap garisdariobjektersebutterdiridarititik-titikyangjumlahnyatakterbatas, makaprosespenggeseranbisaberlangsungsangatlama.Tetapipada kenyataannyakitacukupmenggeserduatitikujungnyasajadankemudian menggandeng dua titik tersebut untuk membentuk garis hasil pergeseran.Contoh translasi: Untukmenggambarkantranslasiobjekyangberupagarisdengankoordinat A(10,10), B(30,10) dengan vektor translasi (10,20) Titik A Qx=Px +trx=10 + 10 =20 Qy=Py + try =10+20=30 Hasil translasi A =(20, 30) Titik B Qx=Px + trx = 30+10 = 40 Qy=Py + try = 10+20 =30 Hasil translasi B =(40, 30) 2.Rotasi Kita bisa memutar objek searah dengan arah perputaran jarum jam(dinyatakan dengan sudut negatif) atau berlawanan arah dengan arah jarum jam(dinyatakan sebagai sudut positif). www.digizoneku.com 18 DenganmenganggapbahwabesarnyasudutputaradalahsamadenganO, maka posisi sebuah titik yang baru adalah: Qx= Pxcos( O)-Pysin( O) Qy= Pxsin( O)+Pycos( O) Dengan menggunakan notasi matrix, maka besaran M bisa dikatakan sbb: M = cos(0) sin(0) -sin(0) cos(0) 3.SkalaPenskalaanadalahprosesuntukmemperbesarataumemperkecilsuatu gambar. Dengan faktor absolut yang lebih besar dari 1, akan diperoleh gambar yanglebihbesardansemakinmenjauhdarititik(0,0).Sebaliknyadengan faktor skalayangmempunyainilai absolutlebihkecill dari 1, akan diperoleh gambar yang lebih kecil dan mendekat ke titik (0,0). DenganmenggunakanpersamaanQ=PM+tr,makahasilpenggeseranbisa dinyatakan sebagai: (Qx, Qy)=(SxPx, SyPy) DenganSxadalahfaktorskalakearahmendatardanSyadalahfaktorskala arah tegak dan ofset vektor tr bernilainol. Dengan menggunakan notasi matrix, maka matrixM bisa dinyatakan sbb: M= (sx 0) (0 sy) PROGRAM TRANSFORMASI Denganmemakaidelphi,Buatlahprogramdengantampilansepertidibawahini. Bila program dijalankan, ada dua pilihan:Jenis transformasi Memutar Jikamemilihtransformasimemutarkitadisuruhmenginputkanbesarsudut yangdimintadankemudianinputkanx1,y1,x2,y2laluklikgambarmaka akantampilgambarpadakotakpaintboxdankliktransformasimakagambar akan memutar sesuai sudut yang diisi. Dan gambar asli tetap nampak. Jenis transformasi Perbesar/perkecil Jika memilih transformasi perbesar/perkecilkita disuruh menginputkan besar skalanyadankemudianinputkanx1,y1,x2,y2laluklikgambarmakaakan tampilgambarpadakotakpaintboxdankliktransformasimakagambarakan tampilsesuai skalayang diisi. www.digizoneku.com 19

programnya adalah sbb: rogram transformasi gambar procedure TForm1.GambarClick(Sender: TObject); begin if ((IsiX1.Text='')or (IsiX2.text='') or (IsiY1.text='' )or (IsiY2.text='')or (IsiX1.Text=' ')or (IsiX2.text=' ') or (IsiY1.text=' ' )or (IsiY2.text=' ')) then MessageDlg('X1, Y1, X2 dan Y2 harus anda isi',mtWarning, [mbOk],0) else with ttk do begin x1 := strtoint(IsiX1.Text); y1 := strtoint(IsiY1.Text); x3 := strtoint(IsiX2.Text); y3 := strtoint(IsiY2.Text); x2 := x3; y2 := y1; x4 := x1; y4 := y3; xn := (x3 + x1) div 2; yn := (y3 + y1) div 2; PaintBox1.Canvas.Brush.Color := claqua; Paintbox1.Canvas.Polygon([Point(x1, y1), Point(x2, y2), point(x3, y3), Point(x4, y4)]); end; end; www.digizoneku.com 20 procedure TForm1.RadioTransformasiClick(Sender: TObject); begin if RadioTransformasi.ItemIndex =0 then begin Label1.Caption := 'Besar Sudut'; pil.caption:='Derajat'; end else begin Label1.Caption := 'Besar Skala'; pil.caption:='Kali'; end; end; { procedure transformasi } procedure TForm1.TransformasiClick(Sender: TObject); var temp : Titik; tet : integer; s, kali : real; lebar, tinggi : integer; begin {transformasi untuk memutar } if ((IsiX1.Text='')or (IsiX2.text='') or (IsiY1.text='' )or (IsiY2.text='')or (IsiX1.Text=' ')or (IsiX2.text=' ') or (IsiY1.text=' ' )or (IsiY2.text=' ') or (IsiPil.text='')or (IsiPil.text=' ') or (RadioTransformasi.ItemIndex=-1)) then MessageDlg('PENGISIAN DATA BELUM LENGKAP',mtWarning, [mbOk],0) else if RadioTransformasi.itemindex = 0 then begin with ttk do begin tet:=strtoint(IsiPil.text); s := tet * pi / 180; temp.x1 := xn + round((x1 - xn)*(cos(s))-(y1 - yn)*(sin(s))); temp.x2 := xn + round((x2 - xn)*(cos(s))-(y2 - yn)*(sin(s))); temp.x3 := xn + round((x3 - xn)*(cos(s))-(y3 - yn)*(sin(s))); temp.x4 := xn + round((x4 - xn)*(cos(s))-(y4 - yn)*(sin(s))); temp.y1 := yn + round((x1 - xn)*(sin(s))+(y1 - yn)*(cos(s))); temp.y2 := yn + round((x2 - xn)*(sin(s))+(y2 - yn)*(cos(s))); temp.y3 := yn + round((x3 - xn)*(sin(s))+(y3 - yn)*(cos(s))); temp.y4 := yn + round((x4 - xn)*(sin(s))+(y4 - yn)*(cos(s))); end; ttk.x1 := temp.x1; ttk.x2 := temp.x2; www.digizoneku.com 21 ttk.x3 := temp.x3; ttk.x4 := temp.x4; ttk.y1 := temp.y1; ttk.y2 := temp.y2; ttk.y3 := temp.y3; ttk.y4 := temp.y4; PaintBox1.Canvas.Brush.Color :=clred; with ttk do Paintbox1.canvas.Polygon([Point(x1, y1), Point(x2, y2), Point(x3, y3), Point(x4, y4)]); end {transformasi untuk memperbesar/memperkecil } else begin kali :=strtofloat(IsiPil.text); with ttk do begin lebar := x3 - x1; tinggi := y3 - y1; x1 := xn - round(lebar/ 2* kali ); x3 := xn + round(lebar/ 2* kali ); y1 := yn - round(tinggi / 2* kali ); y3 := yn + round(tinggi / 2* kali ); x2 := x3; y2 := y1; x4 := x1; y4 := y3; end; PaintBox1.Canvas.Brush.Color := clblue; with ttk do Paintbox1.canvas.Polygon([Point(x1, y1), Point(x2, y2), Point(x3, y3), Point(x4, y4)]); end; end; procedure TForm1.KeluarClick(Sender: TObject); begin Close; end; procedure TForm1.HapusClick(Sender: TObject); begin Paintbox1.Refresh; Label1.caption := 'Pilihan '; IsiPil.text:= ' '; IsiX1.text := ' '; IsiX2.text := ' '; www.digizoneku.com 22 IsiY1.text := ' '; IsiY2.text := ' '; RadioTransformasi.itemindex := -1 ; end; www.digizoneku.comBAB IV GRAFIKA 3D 4.1 Konsep 3 Dimensi 4.1.1Sistem Koordinat 3 Dimensi Secaraumum,sistemkoordinattigadimensidibedakanmenjadidua,yaitu sistemkoordinattangankiridansistemkoordinattangankanan.Sistemkoordinat tangankanandapatdigambarkandengantigabuahjaripadatangankananyang menghadap pengamatyaitujari tengahsebagaisumbu z positif,jari telunjuksebagai sumbuydanibujarisebagaisumbux..Sedangkansistemkoordinattangankiridapatdigambarkandengantigabuahjaripadatangankiridenganpunggungtangan menghadappengamatdenganjaritengahsebagaisumbuznegaaif,jaritelunjuk sebagai sumbu y dan ibu jari sebagai sumbu x.Sistemkoordinattangankananbanyakdigunakanpadapenggambaran geometri.Sebaliknyasistemkoordinattangankiribanyakdigunakanpada peggambaranpadagrafikakomputer.Halitudilakukanagarobjektigadimensi memiliki nilai z positif.Setiaptitikdalamsistemkoordinattigadimensidapatdijelaskanposisinya denganmemberitahuseberapajauh,tingggidanlebardariobjekaslinyayang dtuliskan dalam koordinat-koordinat pada sumbu x, y, dan z. Gambar 4.1 Koordinat Tiga Dimensi 4.1.2Objek 3 Dimensi www.digizoneku.com 10Objektigadimensijelasmemilikibanyakperbedaandenganobjekdua dimensi.Dengankoordinatx,y,zyangdiperlukan,membuatpengerjaanobjektiga dimensimenjadilebihrumit.Dalampembuatannya,diperlukankoordinatuntuk menentukansudutpandangpengamat,kedalamanyangdiperlukan,dantransformasi objek untuk mempermudah pengerjaan. 4.1.3Transformasi Objek 3 Dimensi Metodetransformasiobjektigadimensisangatberbedadenganobjekdua dimensikarenaterdapatsumbuzuntukditambahkansebagaisalahsatuacuanuntuk memperoleh posisi .koordinat baru.4.1.3.1 Translasi (Perpindahan) Dalamtranformasiobjektigadimensi,translasiadalahpemindahansuatutitik dari titik P=(x,y,z) ke posisi P=(x,y,z) (Hearn, 1994) dengan menggunakan operasi matriks : .. Operasi 4.1 Parameter tx, ty, dan tz menjelaskan perpindahan jarak untuk koordinat x, y, dan z. Gambar 4.2 Memindahkan titik dengan translasi vektor T=(tx, ty, tz) Sebuahbanguntigadimensiyangditranslasikandenganvektortertentu,dilakukan dengan memindahkan titik-titik sesuai dengan vektor tersebut. |||||.|

\||||||.|

\|=|||||.|

\|1 1 0 0 01 0 00 1 00 0 11'''zyxtttzyxzyxwww.digizoneku.com 11|||||.|

\||||||.|

\| =|||||.|

\|1 1 0 0 00 1 0 00 0 cos sin0 0 sin cos1'''zyxzyx Gambar 4.3 Memindahkan balok dengan translasi vektor T=(tx, ty, tz) 4.1.3.2 Rotasi MenurutDonaldHearn(1994),untukmerotasikansebuatobjekdiperlukan sumbu rotasi (poros untuk merotasikan objek) dan jumlah rotasi angular. Tidak seperti rotasi pada objek dua dimensi,yang titik putarnya hanya pada sumbux dany, untuk mentransformasikan objek tiga dimensi, titik dapat diletakkan di koodinat x, y, dan z. a)Rotasi dengan zb) Rotasi dengan xc) Rotasi dengan y sebagai sumbu putarsebagai sumbu putarsebagai sumbu putar Gambar 4.4 Rotasi dengan sumbu x, y, zsebagai sumbu putar Rotasi dengan sumbu z sebagai sumbu putar memiliki persamaan matrik : Operasi 4.2 www.digizoneku.com 12|||||.|

\||||||.|

\|=|||||.|

\|1 1 0 0 00 cos sin 00 sin cos 00 0 0 11'''zyxzyx |||||.|

\||||||.|

\|=|||||.|

\|1 1 0 0 00 cos 0 sin0 0 1 00 sin 0 cos1'''zyxzyx rotasi tersebut digambarkan seperti berikut : Rotasi dengan sumbu x sebagai sumbu putar memiliki persamaan matrik : Operasi 4.3 rotasi tersebut digambarkan seperti berikut : Gambar 4.6 Rotasi dengan x sebagai sumbu putar Rotasi dengan sumbu y sebagai sumbu putar memiliki persamaan matrik : Operasi 4.4 Gambar 4.5 Rotasi dengan z sebagai sumbu putar www.digizoneku.com 13|||||.|

\||||||.|

\|=|||||.|

\|1 1 0 0 00 0 00 0 00 0 01'''zyxssszyxzyxrotasi tersebut digambarkan seperti berikut : Gambar 4.7 Rotasi dengan y sebagai sumbu putar 4.1.3.3 Penskalaan Transformasi skala adalah perubahan ukuran suatu objek (Sutopo, dua00dua). Koordinatbarudapatdiperolehdenganmelakukanperkaliannilaikoordinat,yang dijabarkan dalam matrik : Operasi 4.5 Bangun yang telah dilakukan penskalaan seperti pada gambar berikut : Gambar 4.8 Penskalaan bangun tiga dimensi 4.1.4Proyeksi Ada dua macam metode proyeksi yaitu proyeksi paralel dan proyeksi perspektif.www.digizoneku.com 14 4.1.5Proyeksi Paralel Proyeksi paralel adalah pemindahan letak awal koordinat menuju bidang pandang di sepanjang garis paralel (Hearn, 1994), seperti digambarkan pada gambar 4.9 Gambar 4.9 Proyeksi paralel dari suatu objek 4.1.6Proyeksi Perspektif Proyeksi perspektif adalah pemindahan posisi objek menuju bidang pandang melalui garis yang berkumpul menjadi suatu titik yang disebut dengan projection refrence point (pusat proyeksi). (Hearn, 1994). Hal ini digambarkan seperti pada gambar 4.10www.digizoneku.com 15 Gambar 4.10 Proyeksi perspektif dari suatu objek :Proyeksi perspektif mempunyai jarak relatif yaitu antara mata dan bidang pandang. Contoh sederhana proyeksi perspektif dari sebuah titik pada bidang pandang dan mata digambarkan pada gambar 4.11 Gambar 4.11 Proyeksi perspektif dari sebuah titikpada bidang pandang dan mata 4.1.7Viewport Viewport adalah daerah layar yang dipilih untuk menampilkan objek yang dimaksud (Santosa, 1994). Sebelum daerah layar dipilih, gambar dari objek asli biasanya akan memenuhi ukuran layar. Sehingga diperlukan viewport (daerah layar) untuk memetakan gambar tersebut agar dapat tampak sesuai dengan unkuran yang dikehendaki pada layar, seperti ditunjukkan pada gambar 4.12 Gambar 4.12 Viewport pada layar www.digizoneku.com 164.2 OpenGL OpenGL adalah perangkat lunak yang langsung berinteraksi dengan perangkat kerasgrafik.Perangkatiniterdirilebihdari150perintahyangberbedayang digunakanuntukmenggambarkansuatuobjekdanoperasiyangdibutuhkanuntuk membuat aplikasi tiga dimensi yang interkatif. 4.2.1Pembuatan Objek OpenGLdirancangsebagaiperangkatyanginstandantidaktergantungpada sistemoperasidanbahasapemrogramanapapun.Perintahyangterdapatpada OpenGLtetapsamapadasemuasistemoperasikarenaOpenGLtidak mengimplementasikan window khusus untuk merancang suatu objekseperti program visual lainnya. Sebagai gantinya, diharuskan untuk membuat window sendiri menurut sistem operasi yang digunakan dan bahasa pemrograman yang dipakai.Secarasederhana,OpenGLbukanlahbahasapemrogramantingkattinggi, namununtukmembuatsebuahobjekyangrumit,diperlukanbeberapaperintah sederhana untuk membangun perlahan-lahan objek tersebut. 4.2.2Perintah (Command) Perintah pada OpenGL biasanya menggunakan kata depan gl dan huruf kapital untuk kata selanjutnya yang merupakan perintah untuk membuat objek. Misalkan glClearColor. OpenGL juga menggunakan huruf kapital untuk semua huruf dan dibatasi oleh garis bawah (underscore). Misalkan GL_COLOR_BUFFER_BIT. Perintah dalam OpenGL mempunyai bagian-bagian seperti berikut ini: Keterangan : (a)Kata depan yang biasa mengawali perintah dalam OpenGL (b) Perintah dalam OpenGL, biasanya diawali dengan huruf kapital (c)Merupakan akhiran yang berarti perintah ini memiliki tiga parameter (d) Merupakan akhiran yang berarti perintah ini memiliki tipe data floating point www.digizoneku.com 17(e)Tempat untuk menuliskan parameteryang diperlukansesuai denganyang telah ditulis lebih awal OpenGL memiliki tipe data berikut: Kode Jumlah BitTipe Data Tipe Data Pada OpenGL b8byteGLByte s16shortGLShort I32integerGLint atau GLsizei f32floating pointGLfloat atau GLclampf d64double GLdouble atau GLclampz ub8 charGlubyte atau GLboolean us16unsigned integerGLushort ui32 GLuint atau GLenum atau GLbitfield 4.2.3Pembuatan Objek www.digizoneku.com 18Sebelum membuat objek,terlebih dahulu kita lihat contoh kode program OpenGL sederhana berikut : Untuk membuat objek pada OpenGL, diperlukan file-file yang mempunyai library yang berisi prosedur-prosedur yang telah menginisialisasikan kode dalam OpenGL. Selanjutnya, perlu diinisialisasikan window untuk menampilkan objek yang dibuat dengan menggunakan OpenGL. Penginisialisasian window ini tidak menggunakan OpenGL, melainkan memakai bahasa pemrograman pascal dikombinasikan dengan win32api. Namun pada tugas akhir ini, dalam penginisialisasian window akan digunakan GLUT (OpenGL Utility Library). Penjelasan lebih lanjut mengenai GLUT akan dijelaskan setelah pembahasan OpenGL.Setelah penginisialisaian window dilakukan, langkah selanjutnya adalah memeri warna ppada window dengan mengetikkan kode glClearColor (0, 0, 0, 0). Parameter pada glclearcolor ini adalah (red, green, blue, alpha), Program ContohKodeOpenGL; use procedure main(); begin InisialisasikanWindow(); glClearColor (0, 0, 0, 0); glClear (GL_COLOR_BUFFER_BIT); glColor3f (1, 1, 1); glBegin(GL_QUADS); glVertex3f (0.25, 0.25, 0); glVertex3f (0.75, 0.25, 0); glVertex3f (0.75, 0.75, 0); glVertex3f (0.25, 0.75, 0); glEnd(); glFlush(); PerbaharuiWindowDanCekEvent(); end; www.digizoneku.com 19sehingga nantinya berapapun nilai yang kita berikan untuk mengkombinasi nilai RGBA pada parameter glclearcolor akan menjadi background pada window. Setelah pemberian background selesai, langkah selanjutnya adalah dengan mengetikkan perintah glclear(GL_COLOR_BUFFER_BIT), perintah ini dilakukan untuk menghilangkan warna yang ada sebelumnya sehingga objek dengan warna baru dapat ditampilkan. Tanpa mengetikkan perintah ini, maka objek yang telah dibuat tidak dapat ditampilkan. Setelah penginisialiasian tersebut dilakukan, maka mulailah membuat objek 2 atau 3 dimensi. Langkah-langkah untuk membuat objek 2 atau 3 dimensi akan dijelaskan pada subbab setelah ini.Ketika pengkodean untuk membuat objek selesai, maka ditulis perintah glFlush() yang berfungsi untuk menjalankan program OpenGL tanpa harus menunggu perintah berikutnya. Ketika seluruh pembuatan objek selesai dilakukan, harus dilakukan perbaharuan terhadap window dan melakukan event-event lain yang dianggap perlu. 4.2.3.1 Titik Titik pada koordinat 3 dimensi terletak pada posisi x, y, dan z, dapat pula terletak pada posisinya di koordinat 2 dimensi. Secara default, titik digambar dengan ketebalan 1 piksel. Namun hal itu dapat diubah dengan perintah berikut: www.digizoneku.com 20Perintah diatas berfungsi untuk memberi nilai pada lebar piksel yang ukurannya harus berada lebih besar dari 0 dan nilai defaultnya adalah 1. Ukuran titik sama dengan1 berarti ukuran pikel adalah 1x1, begitu juga bila ukuran titik adalah 3, maka ukuran titik tersebut adalah 3x3 piksel, seperti digambarkan pada gambar 4.13 Gambar 4.13Titik dengan ukuran 10 piksel dan 30 piksel Kode program dalam OpenGL dari contoh diatas adalahglBegin(GL_POINTS); glVertex3f(-1,0,0); glend(); glPointSize(10); glBegin(GL_POINTS); glVertex3f(1,1,0); glEnd(); glPointSize(30); glFlush(); 4.2.3.2 Garis Membuat garis pada OpenGL dapat dibuat dengan menentukan letak titik awal dan akhir pada koordinat 3 dimensi (x, y dan z), dapat pula dibuat dengan menentukan posisi titik awal dan akhir pada koordinat 2 dimensi. Garis dapat dibuat dengan glPointSize (size: GLfloat); www.digizoneku.com 21ketebalan dan style yang berbeda, seperti titik-titik, garis-garis, dan gabungan antara keduanya. 4.2.3.2.1Ketebalan GarisKetebalan garis secara default adalah berukuran 1 piksel. Jika ukuran lebar garis adalah 2, maka titik-titikpenyusun garis itu berukuran 2x2 piksel. Ukuran ketebalan pada garis tidak ditentukan selama ukuran tersebut bertype glfloat atau integer. Sintaks untuk menambah ukuran ketebalan garis pada OpenGL adalah Perbandingan antara garis berukuran 1 piksel dengan 2 piksel digambarkan sebagai pada gambar 4.14

glLineWidth (width: GLfloat) www.digizoneku.com 22 Gambar 4.14 Perbandingan Antara 2 Garis dengan Ketebalan Yang Berbeda Kode dalam OpenGL untuk contoh di atas adalahglBegin(GL_LINES); glVertex3f(-1,0,0); glVertex3f(2,0,0); glend(); glLineWidth(2); glBegin(GL_LINES); glVertex3f(-1,1,0); glVertex3f(2,1,0); glEnd(); glLineWidth(6); glFlush(); 4.2.3.2.2Style GarisUntuk membuat style pada garis, seperti garis putus-putus (dashed), titik-titik (dotted), maupun gabungan dari keduanya, digunakan perintah berikut: Perintah di atas mengandung dua parameter, yaitu factor yang bertipe GLint dan pattern yang bertipe Glushort. Argumen pattern akan bernilai 16 bit jika factor bernilai 0 dan 1. Begitu seterusnya, argumen pattern akan bernilai 32 bit jika factor bernilai 2. Style pada garis dapat diproses jika sebelumnya ditulis GL_LINE_STIPPLE pada glEnable(). Contoh garis dengan style tertentu digambarkan pada gambar 4.15 glLineStipple (factor: GLint; pattern: GLushort) www.digizoneku.com 23 Gambar 4.15 Garis Dengan Menggunakan Style Kode dalam OpenGL untuk contoh di atas adalahglEnable(GL_LINE_STIPPLE); glLineStipple(3, 5423); glBegin(GL_LINES); glVertex2f(-1,0); glVertex2f(2,0); glEnd(); glDisable(GL_LINE_STIPPLE); glFlush(); Pada kode di atas diketahui bahwa pembuatan garis dengan style tertentu perlu diawali dengan glEnable(GL_LINE_STIPPLE) dan diakhiri dengan glDisable(GL_LINE_STIPPLE). Perintah glLineStipple(3,5423) mengandung pengertian bahwa parameter factor bernilai 3 dan parameter pattern bernilai 5423. Untuk mengetahui pattern yang dihasilkan, diperoleh dengan mengubah nilai parameter pattern menjadi bilangan biner. Dari contoh diatas diketahui nilai biner dari 5423 adalah 0000101011010000. Jika parameter factor bernilai 1, maka pattern yang www.digizoneku.com 24dimiliki adalah 5 piksel kosong, 1 piksel terisi, 1 piksel kosong,, 2 piksel terisi, 1 piksel kosong, 1 piksel terisi, 1 piksel kosong, 1 piksel terisi, dan 4 piksel kosong. Namun pada contoh diatas parameter factor bernilai 3, maka argumen pattern bernilai 64 bit, berarti nilai pattern yang baru adalah sebagai berikut, 15 piksel kosong, 3 piksel terisi, 3 piksel kosong, 6 piksel terisi, 3 piksel kosong, 3 piksel terisi, 3 piksel kosong, 3 piksel terisi, dan 12 piksel kosong.4.2.3.3 Segitiga Segitiga dibentuk dengan minimal 3 buah titik. Sintaks untuk membuat segitiga pada OpenGL adalah Contoh segitiga digambarkan pada gambar 4.16 Gambar 4.16 Bangun Segitiga Kode dalam OpenGL dari program diatas adalah glBegin(GL_TRIANGLES); glColor3f(1,0,0);glVertex3f(-1,0,0); glColor3f(0,1,0);glVertex3f(0,1,0); glColor3f(0,0,1);glVertex3f(1,0,0); glEnd; glFlush(); glBegin (GL_TRIANGLES); glVertex3f(x1,y1,z1); glVertex3f(x2,y2,z2); glVertex3f(x3,y3,z3); glEnd(); www.digizoneku.com 25 4.2.3.4 Segi Empat Segi empat dibentuk minimal oleh 4 buah titik. Sintaks untuk membuat persegi empat pada OpenGL adalah Contoh kotak yang dibuat dengan menggunakan OpenGL ditunjukkan pada gambar 4.17 Gambar 4.17 Segiempat dalam OpenGL Kode program dalam OpenGL dari gambar 2.16 adalah glClearColor(0,0,0,1); glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_QUADS); glColor3f(1,0,0);glVertex3f(-1,1,0); glColor3f(0,1,0);glVertex3f(-1,0,0); glColor3f(0,0,1);glVertex3f(1,0,0); glVertex3f(1,1,0); glEnd; glFlush(); glBegin (GL_QUADS); glVertex3f(x1,y1,z1); glVertex3f(x2,y2,z2); glVertex3f(x3,y3,z3); glVertex3f(x4,y4,z4); glEnd(); www.digizoneku.com 26 4.2.3.5 Polygon Polygon dapat dibentuk oleh lebih dari 4 buah titik. Sintaks untuk membuat poligon pada OpenGL adalah Contoh Polygon yang dibuat dengan menggunakan OpenGL ditunjukkan pada gambar 2.18 Gambar 2.18 Polygon dalam OpenGL Kode program dalam OpenGL dari gambar 2.18 adalah glcolor3f(0.1686,0.796,0.451); glbegin(gl_POLYGON); glvertex3f(-5,2,0); glvertex3f(1,4,0); glvertex3f(5,-2,0); glvertex3f(3,-5,0);glBegin (GL_POLYGON); glVertex3f(x1,y1,z1); glVertex3f(x2,y2,z2); glVertex3f(x3,y3,z3); glVertex3f(x4,y4,z4); glVertex3f(x5,y5,z5); glEnd(); www.digizoneku.com 27glvertex3f(6,2,0); glend(); glFlush(); 4.2.3.6 Kubus DalamOpenGLtidakadaperintahuntukmembentukkubus,sehinggauntuk membuatnyadiperlukantitik-titikpenyusunsegiempat.Karenakubusterdiridari6 bangunsegiempat,makauntukmmbentukkubuskitaperlumeletakkan24titik dimanamasing-masing4titikakanmembentukbangunsegi4.Kubusyangdibuat dengan OpenGL digambarkan pada gambar 2.19 Gambar 2.19 Kubus yang dibuat dengan OpenGL Kode program dalam OpenGL dari program diatas adalah glBegin(GL_QUADS); glcolor3f{hijau}(0,0.686,0.192); glVertex3f(-1.0, -1.0,1.0); glVertex3f( 1.0, -1.0,1.0);glcolor3f{kuning}(0.929,0.988,0.008); glVertex3f( 1.0,1.0,1.0); glVertex3f(-1.0,1.0,1.0); glcolor3f{ungu}(0.2745,0.0039,0.2745); glVertex3f(-1.0, -1.0, -1.0); glVertex3f(-1.0,1.0, -1.0); glVertex3f( 1.0,1.0, -1.0); glVertex3f( 1.0, -1.0, -1.0); glcolor3f{biru tua}(0.0157,0.047,0.6627); glVertex3f(-1.0,1.0, -1.0); glVertex3f(-1.0,1.0,1.0); glVertex3f( 1.0,1.0,1.0); glVertex3f( 1.0,1.0, -1.0); www.digizoneku.com 28glVertex3f(-1.0, -1.0, -1.0); glVertex3f( 1.0, -1.0, -1.0); glVertex3f( 1.0, -1.0,1.0); glVertex3f(-1.0, -1.0,1.0); glcolor3f{hijau}(0,0.686,0.192); glVertex3f( 1.0, -1.0, -1.0); glVertex3f( 1.0,1.0, -1.0); glVertex3f( 1.0,1.0,1.0); glVertex3f( 1.0, -1.0,1.0); glcolor3f{pink}(0.976,0.604,0.961); glVertex3f(-1.0, -1.0, -1.0); glVertex3f(-1.0, -1.0,1.0); glcolor3f{kuning}(0.929,0.988,0.008); glVertex3f(-1.0,1.0,1.0); glVertex3f(-1.0,1.0, -1.0); glEnd(); glFlush(); Dari kode program diatas dapat diketahui bahwa kubus disusun oleh 6 bangun persegiyangdigunakanuntukmenyusunkubusbagiandepan,belakang,kanan,kiri, atas, dan bawah. 4.2.3.7 Tabung Tabung dibuat dengan memanfaatkan library pada OpenGL yang bernama OpenGL Utility Library (GLU). Dengan GLU, tabung yang apabila dibuat dengan OpenGL tidak dapat langsung dibuat, melainkan harus ditentukan masing-masing titiknya, maka dengan GLU tabung dapat langsung dibuat. Sintaks untuk membuat tabung adalah Untuk membuat objek tabung dengan menggunakan GLU, diperlukan variabel bantu yang bertipe PGLUQuadricObj untuk dideklarasikan sebagai prosedur GLUNewQuadric. Prosedur ini berfungsi untuk memberi tanda bahwa terdapat suatu objek baru yang menggunakan GLU.gluCylinder(qobj: PGLUquadric; jari-jari bawah, jari-jar atas ,tinggi: GLdouble; slices, stacks: GLint); www.digizoneku.com 29Contoh tabung ditunjukkan oleh gambar 2.20

Gambar 2.20 Tabung Kode program dengan OpenGL dari program di atas adalah procedure display; cdecl; var quadratic: PGLUquadricObj; begin glClearColor(0,0,0,1); glClear(GL_COLOR_BUFFER_BIT ); quadratic := gluNewQuadric(); glrotatef(-90,1,0,0); glcolor3f{baby blue}(0.549,0.698,0.996); gluCylinder(quadratic,1,1,2,32,32); glFlush(); end; Pada kode diatas diketahui bahwa variabel quadratic mendeklarasikan prosedure gluNewQuadric. Selanjutnya dilakukan transformasi rotasi sebesar -90 searah sumbu x agar posisi tabung sejajar dengan sumbu y. Objek yang dihasilkan jika digunakan GLU akan searah dengan sumbu z. Dari kode diatas juga diketahui bahwa jari-jari bawah tabung adalah 1, jari-jari atas tabung adalah 1, tinggi tabung adalah 2, slice dan stacknya sebesar 32. 4.2.3.8 Bola Pembuatan bola pada OpenGL juga dibuat dengan menggunakan GLU. Sintaks untuk membuat bola adalah gluSphere(qobj: PGLuquadric; jari-jari: GLdouble; slices, stacks: GLint); www.digizoneku.com 30Contoh bola yang dibuat dengan menggunakan OpenGL ditunjukkan dengan gambar 2.21 Gambar 2.21 Bola Kode program dari pembuatan objek bola adalah procedure display; cdecl; var quadratic: PGLUquadricObj; begin glClearColor(0,0,0,1); glClear(GL_COLOR_BUFFER_BIT ); quadratic := gluNewQuadric(); glrotatef(-90,1,0,0); gluSphere(quadratic,1,32,32); glFlush(); end; Kode program di atas mirip dengan pembuatan tabung pada subbab sebelumnya. Perbedaannya terletak pada perintah untuk membuat bola yaitu gluSphere(quadratic,1,32,32) dimana parameter pertama menunjuk kepada prosedur gluNewQuadric, parameter kedua adalah jari-jari lingkaran, parameter ketiga adalah slice, dan parameter keempat adalah stack. 4.2.4Pewarnaan www.digizoneku.com 31Pada layar komputer yang berwarna, hardware tertentu telah membuat setiap piksel padal layar terbagi menjai 3 warna yaitu merah, hijau dan biru yang bersatu dengan intensitas yang berbeda-beda (Neider, 1997). Inilah yang akhirnya disebut dengan warna RGB (red green blue). Pada OpenGL, setiap piksel menyimpan warna merah, hjau dan biru dengan intensitas yang berbeda. Nilai yang dikandung oleh masing-masing warna tersebut minimal 0 dan maksimal 1. Sintaks untuk menentukan warna pada suatu objek pad OpenGL adalah Contoh pemberian warna pada objek segitiga ditunjukkan pada gambar 2.22 Gambar 2.22 Segitiga Berwarna Merah Kode program pada pembuatan segitiga tersebut adalah glBegin(GL_TRIANGLES); glColor3f(1,0,0); glVertex3f(-1,0,0); glVertex3f(0,1,0); glVertex3f(1,0,0); glEnd; glColor3f (merah, hijau, biru: GLfloat); www.digizoneku.com 32Pewarnaan objek pada OpenGL memungkinkan untuk dibuat berbeda pada setiap titiknya, hasilnya akan diperoleh warna gradasi halus. Contoh pemakaian warna di setiap titik pada bangun segitiga ditunjukkan pada gambar 2.23 Gambar 2.23 Segitiga Dengan Gradasi Warna Kode program pada pembuatan segitiga dengan gradasi warna tersebut adalah glBegin(GL_TRIANGLES); glColor3f(1,0,0);glVertex3f(-1,0,0); glColor3f(0,1,0);glVertex3f(0,1,0); glColor3f(0,0,1);glVertex3f(1,0,0); glEnd; Dari kode diatas dapat dilihat warna yang berbeda pada tiap-tiap titik, namun seperti yang terlihat pada gambar 2.23, gabungan warna ini telah memberi warna gradasi baru yang lebih indah. 4.2.5Transformasi Menurut Neider(1997), transformasi pada OpenGL dibedakan menjadi 3, yaitu translasi, rotasi, dan penskalaan. 4.2.5.1 Translasi Translasi adalah pemindahan suatu titik dari titik P=(x,y,z) ke posisi P=(x,y,z) (Hearn, 1994) Pada OpenGL, translasi biasanya digunakan untuk gltranslatef(x,y,z: GLfloat); www.digizoneku.com 33memindah pusat koordinat ke posisi yang baru. Sintaks untuk mentranslasikan objek pada OpenGL adalah Contoh objek yang ditranslasikan pada OpenGL ditunjukkan dengan gambar 2.24

Gambar 2.24 Posisi Bola Sebelum dan Sesudah Ditranslasikan Kode program dalam OpenGL dari program di atas adalah glbegin(gl_quads); glcolor3f(1,1,1); glvertex3f(-2,0,-2); glvertex3f(-2,0,2); glvertex3f(2,0,2); glvertex3f(2,0,-2); glend(); quadratic:=glunewquadric(); glusphere(quadratic,0.5,32,32); gltranslatef(1,0,1); glusphere(quadratic,0.5,32,32); glFlush(); Dari kode diatas diketahui bahwa posisi bola sebelum ditranslasikan berada pada koorinat (0,0,0). Kemudian posisinya ditranslasikan sepanjang sumbu x sebesar 1 satuan dan sepanjang sumbu z sebesar 1 satuan. Dengan adanya proses pentranslasian tersebut, maka pusat koordinat yang baru berada pada koordinat (1,0,1). 4.2.5.2 Rotasi Untuk merotasikan sebuah objek diperlukan sumbu rotasi (poros untuk merotasikan objek) (Donald Hearn, 1994). Sintaks untuk merotasikan objek pada OpenGL adalah Bola sebelum di- translasi Bola setelah di- translasi gltranslatef(x,y,z: GLfloat); www.digizoneku.com 34 Parameter pertama adalah nilai perputaran sudut. Parameter kedua , ketiga, dan keempat bernilai 1 apabila sumbunya dijadikan sumbu putar. Contoh perotasian objek ditunjukkan pada gambar 2.25 Listing program dari aplikasi diatas adalah quadratic:=glunewquadric(); glucylinder(quadratic,0.25,0.25,1,32,32); gltranslatef(1,0,1); glrotatef(-90,1,0,0); glucylinder(quadratic,0.25,0.25,1,32,32); Pada contoh diatas, diketahui bahwa posisi awal tabung sejajar dengan sumbu z. Namun, setelah dirotasi sebesar -90 dengan sumbu putar x, posisi tabung sejajar dengan sumbu y. Itu menunjukkan bahwa perotasian objek dengan sudut putar positif akan berputar berlawanan dengan arah jarum jam, begitu pula sebaliknya, jika sudut putar bernilai negatif, maka objek akan berputar searah dengan jarum jam. 4.2.5.3 Penskalaan Transformasi skala adalah perubahan ukuran suatu objek (Sutopo, 2002). Sintaks untuk untuk melakukan proses penskalaan dalam OpenGL adalah Gambar 2.25 Tabung Sebelum dan Sesudah Dirotasi Tabung sesudah dirota-si sebesar -90 dengan sumbu putar x Tabung sebelum dirotasi glScalef(x,y,z:glFloat) www.digizoneku.com 35Parameter pertama, kedua, dan ketiga masing-masing menunjukkan nilai skala dari ukuran objek. Apabila parameter tersebut bernilai 1, maka berarti ukuran objek tersebut tetap. Contoh penskalaan ditunjukkan oleh gambar 2.26 Gambar 2.26 Segitiga sebelum dan sesudah proses penskalaan Listing program dari aplikasi diatas adalah gltranslatef(-1.5,0,0); glBegin(GL_TRIANGLES); glColor3f(1,0,0);glVertex3f(-1,0,0); glColor3f(0,1,0);glVertex3f(0,1,0); glColor3f(0,0,1);glVertex3f(1,0,0); glEnd; gltranslatef(2.5,0,0); glscalef(1.5,0.5,1); glBegin(GL_TRIANGLES); glColor3f(1,0,0);glVertex3f(-1,0,0); glColor3f(0,1,0);glVertex3f(0,1,0); glColor3f(0,0,1);glVertex3f(1,0,0); glEnd; glFlush(); 4.2.6Proyeksi Menurut Neide (1997), proyeksi pada OpenGL dibedakan menjadi 2 macam, yaitu proyeksi perspektif dan proyeksi orthogonal. Segitiga setelah u- kuran x-nya ditam- bah dari ukuran aslinya, titik y diku-rangi dari ukuran asli, sedangkan titik z tetap Ukuran Segitiga yang sebenar-nya www.digizoneku.com 364.2.6.1 Proyeksi Perspektif Proyeksi perspektif adalah pemindahan posisi objek menuju bidang pandang melalui garis yang berkumpul menjadi suatu titik yang disebut dengan projection refrence point (pusat proyeksi). (Hearn, 1994). Proyeksi perspektif dalam OpenGL memanfaatkan fasilitas proyeksi perspektif pada GLU. Sintaks untuk melakukan proyeksi perspektif adalah

Dalam penulisan perintah ini, perlu diperhatikan daerah pada objek yang akan dijadikan daerah pandang (Neider, 1997). Misalnya jika jarak mata pada monitor adalah 7,8 maka sudut pandang yang tepat adalah sebesar 90. Untuk lebih memperjelas pemahaman tenang parameter pada gluPerspective, kita lihat gambar 2.27(Neider, 1997) Gambar 2.27Gambar perspektif untuk melihat objek Parameter fovy adalah sudut daerah pandang yang jangkauan nilainya adalah 0 sampai 180 derajat. Parameter aspect adalah perbandingan yang merupakan hasil bagi lebar dan tinggi (width dan height). Parameter zNear dan zFar adalah jarak diatara titik pandang (viewpoint) dan daerah pandang (clipping planes) yang berada di sepanjang sumbu z, nilai dari 2 parameter iniselalu positif.gluPerspective(fovy, aspect, zNear, zFar: GLdouble); www.digizoneku.com 37Contoh pada gambar 2.28 akan membandingkan objek kubus yang dilihat pada perspektif dengan sudut 45 dan 90. (a) Proyeksi Perspektif(b) Proyeksi Perspektif Kubus Dengan Sudut Pandang 45Kubus Dengan Sudut Pandang 90Gambar 2.28Perbandingan 2Sudut Pandang Pada Proyeksi Perspektif Listing program untuk proyeksi perspektif kubus dengan sudut pandang 45 adalah procedure reshape(w,h:integer);cdecl; var ratio:real; begin if h=0 then h:=1; ratio:=1*(w/h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); glViewport(0,0,w,h); gluPerspective(45,ratio,1,1000); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); gluLookAt(-2,2,6,0,0,-1,0,1,0); end; Listing program untuk proyeksi perspektif kubus dengan sudut pandang 90 adalah procedure reshape(w,h:integer);cdecl; var ratio:real; begin if h=0 then h:=1; ratio:=1*(w/h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); glViewport(0,0,w,h); gluPerspective(90,ratio,1,1000); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); gluLookAt(-2,2,6,0,0,-1,0,1,0); end; 4.2.6.2 Proyeksi Orthogonal www.digizoneku.com 38Menurut Neider, dengan menggunakan proyeksi orthogonal, objek akan tampak sama sepert ukuran objek aslinya. Proyeksi ini biasanya digunakan salah satunya untuk desain arsitektur. Sintaks untuk melakukan proyeksi orthogonal adalah

Untuk lebih memperjelas pemahaman tenang parameter pada glOrtho, kita lihat gambar 2.29 (Neider, 1997) Gambar 2.29Ilustrasi Proyeksi Orthogonal Berdasarkan ilustrasi di atas, (left, bottom, -near) dan (right, top, -near) adalah titik yang dekat dngan daerah cliping yang diposisikan di pojok kiri bawah dan pojok atas kanan viewport. Sedangkan (left, bottom, -far) dan (right, top, -far) adalah titik yang jauh dengan daerah clipping. Contoh pada gambar akan membandingkan objek segitiga yang dilihat dengan proyeksi orthogonal. glOrtho (left, right, bottom, top, zNear, zFar: GLdouble); www.digizoneku.com 39 (a) Proyeksi Orthogonal pada nilai(b) Proyeksi Orthogonal dengan nilai parameter left dan right sama dengan 1parameter left dan right sama dengan 3 gambar 2.30Perbandingan Proyeksi Orthogonal dengan Nilai ParameterBerbeda Pada Objek Segitiga dengan Ukuran Yang Sama Listing program untuk proyeksi orthogonal dengan nilai parameter left dan right sama dengan 1 adalah procedure reshape(w,h:integer);cdecl; var ratio:real; begin glMatrixMode(GL_PROJECTION); glLoadIdentity(); glViewport(0,0,w,h); if (w