Kegiatan Belajar 1 : Pengantar Grafika Komputer A. Tujuan Pombolajaran ‘Setelah mengut kegatan belsjor 1 in esata dat dnarapkan dapat 1. Meal stud! teratur pesera dilat dapat mengaraisis peranan grafka komputer di beroaga idan. Melalui dstusi peserta dklat dapat menggembarkan peranan_grafka omputer dalam berbagalbidang, “7 Memahani pangsrian gratia Korputar 2. Mencontonkan penerapan gratka Komputer dalam berbagalbidang 1, Pa fan Grafika Komputer Graika komputer (computer graphics) merupakan salah satu ima Informatika yang mempelaja pembuatan dan manipulas! gambar dongan komputer atau secara digtal. Sohingga di dalam grafka komputer akan dibanas teknitcteknik menggambar. Salah satu bidang ‘Somua perintah OpenGL menggunakan awalan gl dikutl dengan huruf kapital pada sotiap Kata mombontuk nama porintah (sobagal contah glClearColor). Untuk mendefinsikan Konstanta diawall dengan GL, dengan menggunakan huruf kapital dan garis bawah untuk ‘memisankan kata (seperti GL_POLY_STIPPLE). Terkadang beberapa hhuruf dan angka ditambaicen pada akhir perintah (seperti 3f pada lVertex31). Dalam hal ini angka 3 menunjukkan berapa banyak argumen yang harus ada pada porintah tersebut dan akhiran hurt { ‘menunjukkan Jenis datanya yatu floating. Sebagal contoh pada dua perintan berkut int alVertex3i(,0.2) alVertex34(10, 0.0, -20} adalah sama yaits melstakkan tk layer pada koordinat dan 2 = -2, perbedaannya yaity pada perintah pertama monspesifiaskan tik dengan tipe data integer 32-bit, sedangkan yang kedua dengan tipe dala single precision floating poi.Beberapa perintan OpenGL menambahkan perintan huruf akhir v yang menunukkan bahwa perintah tersebut menggunakan pointer ke arrayivekior. Di bawah ini contoh perbedaannya, float color_arrayiJ={10,0.9.0.0) alColrat(1.0.0.0.0.0) lColr3tv{color_aray) [Langkah-langkah install LWJGL ke dalam IDE NetBeans 1. Ph LijghXX2lp_ yang tereesia dengan men-download le LMIGL teal oaldownioad.oho 2 Unduh Ljgldocs-XX2ip, Javadoc Iwjgl untuk dl Netbeans (Drokomendaskan) 3. Unduh Lwiglsource-XXzip, source code iol untuk ol Netbsans (irekomendasikan) 4. Undul) Lwighapplet2XxX2ip jka ingin menggunakan Java Applet dengan Lwgl 5. Ekstak Fle LwigIXXalp dan Lwjgheource-xXzlp kecual Lwighdocs: XXaip. 2) Cara tnstaas UWL NetBeans Berkut ahap-tahapistalas| LWUGL d NetBeans: 1 Buka Netbeans 2. Klik New Project, pith Jave Applestion > Next“Tulls Project Name donga TutofalWGL ik Toals > Libraries main manu 3. lk Tombol New Library4, Berkan nama ibrar dengan LIVIGL atau LWJGLXCX ‘5. Pastkan Library sudah pin Sekarang pith tb Classpath unt rmonambahcan brary torbaru dan Komudian Klik tombol Add LIAR Folder,6, Porgi ke folder ekstrak LWGLXX.2ip dan folder Jar. Wigan, Imjguijr, dan jinputjor merupakan fle jar yang harus Anda pill. Anda dapat memiih lebih dar + fle dengan menahan tombol Ct pada Keyboard 7. Pith Tab Sources, kemusian Kk Addl JARIFoler. Por) ke foler eksrak Liglsource XX2ip dan Hk folder sc, kemusian pl folder generated dan javaLwig-docs x20 9. Kk OK Selesl Library sudan ctambahkan ke dalam Netbeans. 19) Menambanka ibvary LG ke dalam ibeary apis Bria in thaptahap menamban library LWGL: 4 ka Netbeans, 2. lk kanan pada Libraries aptkasikemudian ph Ad Library.SEES OC wee VT 4. Konfigurasi VM dengan cara kik Kanan pada Tutorial IW dan pilih Properties)5. Selesaioes ‘Struktur dasar OpenGL dan LWJGL ke dalam IDE NetBeans org. 2uygl LnICabecep sons org.au)gl spat Mouser ocg.tual opera? Disptayted public lags opentit ( G3lBegin (Gh LINE L09#})//2bjek sare ivertex2d (200, 20017 17 tooedinat dan y saivertex2a(€00, 32517 anbeaors asc giesuent Dispiay-cetDLeplaytiods (nev Dtzpleysode (800, 600): Display. setPol2acrecn (tala)Dispiay-update() , OpenGL bl ~ new epentia() cyt bisa)? oggee.getogge: Weiajaz1 class. gettane }).Log (Level. SEVERE, Latinan T. OpenGL (Open Graphics Library) bersfat Open-Source, mult platform dan multilanguage adalah sebuah program aplkasi interface untuk mendifnisixan euatu objek ya 2, Fungs! dasar dari OpenGL adalahOpenGL (Open Graphics Library) adalah sebuah program aplkasi Interface yang cigunakan untuk mendefnisixan komputer gris 2D dan 30. Program lintas-platform API ini umumnya dianggap ketetapan stander dalam industri komputer dalam interaksi dengan komputer grafis 20 dan Juga telah monjadi alat yang basa untuk digunakan dongan graf 30.0penGL adalah suatu spefkasl grafk yang low-level yang ‘menyediakan fungs untuk pembuatan grat printf termasuk tik, gars, dan lingkaran. OpenGL digunakan untuk _keperluan-keperluan emrograman grfis.OpenGL bersifat Open-Source, multi-platform dan ‘multi-language serta digunakan mandefnisixan suaty objek, bak objek 2 dimensi maupun objok 3 dimensi Lightweight Java Game Library (LIWGL) merupakan salah satu jonis game engine yang berjalan dengan dasar bahasa java (open source dan ‘ree). Game engine sendiri merupakan perangkat lunak yang digunakan knusus dalam pembuatan video game. Sintaks perintah OpenGL mengikutiaturan penulisan dari library dimana ‘ngs! tersebut berasal, format penulisan fungsi OpenGL adalah ‘Semua periniah OpenGL menggunakan awalan gl dikuti dengan huruf kapital pada setiap kata mombentuk nama perintah (sebagai contoh lClearColer, G. Kunci Jawaban 1. Objek 2 densi dan abek 3 amen 2. Mengeluarkan Kole perintah Khususfrafi) atau executable ke sistom operasiKegiatan Belajar 3: Objek Primi A. Tujuan Pembelajaran ‘Setelah menghkut Kegatanbelaja in pesera dat dharapkan dapat 1. Molaui éskusi poserta diktat monganaisis output primi gratka komputor untuk membuat obj. 2. Melallprakthum peserta lat membuatkede program beraasarkan algoritna pembertukan gars dan lingkaran. B. Indikator Pencapaian Kompetensi 1. Monecapkan periniah-pertah dasar OpenGL. untuk menggambar primi objek 2. Menuls kode program sesualalgrima pembentukan gars dan ingkaran . Uraian Materi 4, Primitit Objek Primibves merupakan geomet sederhana (basle) seper tk (points), gars (ines) dan bangunan dua dimens. Dalam grafka komputer porghasian cra rmenggunakan primitive grafk dasar, primi ini memudahkan untur merender atau menggambar pada layar monitor sebagaimena penggunean pereamaan ‘geomet sederhana. Conth primitive grafka dasarantara lain: ti, gris, kurva, fl ares dan tex. Objk kompleks dapat cibust dengan kombinasi dan primve Ini Misakan, Polgars atau yang dapat ddefniskan sebagal urtan gars ras yang saling terhubung. Secera unum algorima gras miki persamaan yaitu bbagaimana_menampikan asl. Objek kompleks dapat dbust_ dengan ‘mengkombinasikan bentuk-bentuk primitive. 2, Titk dan GarisPembentukan tk dikukan dengan mengkonversi sua posi sik Koordinat dengan program aplikas! ke dalam sustu operas tetentu menggunakn output Random-scan (vektor ) sistem menyimpan instnuksi pembertukan tk pada splay Ist dan ili Kcordinat monentukan posisl pancaran electron ke arah lapisanfosfor pada layer. Garis elbuat dengan menentukan posi tk aantara ‘tk awal dan akhir dari suatu gars. Untuk monggamba tk (pin) sigunakan | petirtan pointy) eimana nla x dan y adalah Koordinat pada lar. 3, Membuat THik dan Garis Untuk menggambr tik (point) digunakan perntan pointy) dimana nial x dan Y Adalah koorsinat pada layar, Sedangkan untuk membuat gare digunakan petintan Inos(ety x2y2). Persamaan garis menurut koordinat Cartesian adalah, y [2x maka sty ‘bila dak maka stop = [x nila fy. 5) Mitung penambanan koordinat piel yaltu XLIncrement = Ax / step dan y_increment = Ay / sep. 6) Koordinat selanjutrya (x4 Incerement, yy_increment 7) Posisi pixel pada layer ditentukan dengan pembulatan nila koordinas|tersobut £8) Ulangl step 6 dan 7 untuk menentukan posts! pixel selanjutnya, sampai_x=%1 dan y Contot Untuk —menggambarkanalgorima ODA dalam pembentukan suatu gris yang menghubungkan tk (5.8) dan (10.9), portama-tama ditontukan dx dan dy, omudian dicari step untuk mendapatkan x increment dan y_increment x= x1 x0= 10525 yo 29-524 selanjutnya hitung dan bandingkan nila absolutrya. loxl=5 layl= 4 arena [Ax] > [ay|, maka step = [Ax = 5, maka diperoleh 55 vine = 4/5 = 0.8 “Tabel 2 Data algorima ODAx |x Y__|_ Reund(x), rounety) CS) os} 38 wa 75 wy zs] ta en zs fz To) 7 z Tas} 70 3 z 7 3 5 > [a7 18 18 | + Algoritma Bressenham Prosecur untuk menggambar Kembali garis. dengan membulatkan nilai x atau y kebilangan integer membutubkan waktu, serla variable xy dan m ‘merupakan bilangan real Karena kemiringan merupakan rial pecanan, Bressenham mengembangkan algosima lasik yang lebih menark, Karena harya menggunakan Perhitungan matematika dengan bilangan integer. Dengan demikian tidak perlu membulatkan isi posts seliap pixel setap waklu. Algoma gars Bressenhem disebut juga midpoint ne algorthm adalah algorimaonversi penambanan nial integer yang juga dapat iadaptasi untuk menggambar sebuah lingkaran. Langkah-langkah untuk membentuk garismenurut algortma ii adalah 41) Tentukan dua titk yang akan dinubungkan dalam pembentukan gari. 2) Tetukan salah satu ttk cisebelah kiti sebagai tk wal (x, yo) dan tk lainnya sebagai tk akhir (x y) 3) Hitung Ax, Ay, A2x, dan 2ay— 20x. 2by- bx. '5) Untuk setiap 1m sepanjang jalur gars, dimulai 4) Hitung parameter po dengan k= 0 + il px Membuat Garis Ghtnettatnisre GMvectewe tage, 130 glind (7 a Eom. public static vols asin stesngl) ssge) | ‘LOGGER. 109 (Level SEVERE, x.toStringi), 2x) y esnety | , private void creste() cheane iiucubeceptton Display. xetDisplaytode ew Dispsayods DISPLAY MIDT%, private void cunt) | private void deatroy() (E, LatihanTugasBustlah kode program agar dapat menampikan sepert sreenshoot datas éengan menggunakan fungS-fungs prime crewing dengan ketentuan sebagai bert ‘Ukuran Window -DisplayMod(800, 600) Fungsi saiBegn(GL_LINE_{.00P}, Tit awa -alVeriex20200, 200) Primitives merupakan geomet sederhana (basi) seper tk (points), gars (lines) dan bangunan dua dens. Dalam gratka komputer ponghasian cra rmenggunakan primitive grafik dasar, primi ini memudahkan untur merender tau menggembar pada layar monitor sebageimana penggunasn persama cometh sedemana. Pembentukan lk diskukan dengan mengkonversi sua posi tik Koordinal Gengan program apis! ke dalam suatu operas tetertu menggunakan output Random-ean (vektor) system menyimpan Insuks! pembentukan tke pada splay lst dan ili Kcordinal menontukan possi pancaran slocron ke arah lapisanfosfor pada layer. Garis cioust dengan menentukan posisiitk éanaratk awal dan akhir dari suatu gars. Untuk manggambar tk (pint) digunakan rnc pointy) dimana ela x dan y adalah koordint pada lyar Untuk menggambar tk (point) eigunakan peitah pointy) ciara rial x dan ¥ adalah koordinat pada layar. Sedangkan untuk membuat gars digunakan etna neste yt x22). . Kunel Jawaban smpore org. Iujgh{nput Keyboard: nport org. jo1. spend Display? smport org. nJg) opengl iaplaytode gtegia (Ge Lin L099) givervexza200, 328) ivertexzae00, £5097gicolor3att, &, 0}2 Displey.eetDtapleyote new Displayade(590, 600)) Ween nay-createtl Seite 0? flctearCoter(0.06, 1.06, 1.06, 2.08% tac eitode (2 PROIEETION imuchaateiet oluaceiode (2 HoDEVIER) pubis vosd suni) &26 (oieptay.tevietbie()) | Feiss public void destroy | public static void neia(steinat] azgel | pieseategrs ech (igdeLExcertion =x)Kegiatan Belajar 4 : Pemodelan Objek 2 Dimensi A. Tujuan Pembelajaran ‘Soelah manga kegiatanbelojar 4 in peserta aka harapkan dapat 1 Mota diskus posorta skit dapat mengaralisa pomodelanobjok 2 Dimons melalui ransformas! geomet 2. Malu praktium peseca dlklt dapat membust kode program dengan ‘monggunakan operasi transfermasi geomentitranslas, penskalaan dan B. Indikator Pencapaian Kompetensi 1. Menerapkan operas transformasi geomet ranslas,penskalaan, dan roles 2, Menuli kode program untuk memedelkan cbjk 2 dimen mela proses ©. Uralan Mater! GGrafka Komputer merupakan bidang yang menark minal banyak orang Salah sub baglan dar grafka Komputer adalah pemodlan obek (objoct penskalaan, dan rota ‘modoting). Dalam pemodetan objok dua cimensi (20), cidapati borbagal objok dapat dimodlkan menunt Kondil ‘erent, objak yang cimadelkan tu pers imodfikasl. Pemodiikasian bk inv dapat allskukan dengan melakukan berbagal operas fangs! atau operas! ansformas geomet, Transforms in dapat berupa transformasi dasar ataupun gabungan ari berbagai transformasi geomet, Contoh transforma! geomet adalah transla, pponskalaan, pularan (las), sheaing dan gabungan. Transformas! ini cknal éengan transformas) fine, Pada dasamya, transformasi ini adalah ‘momindonkan abjk tanpa mecusak bent,41 efins Obek raf 2 Dienst Pada sub topk inl peseta akan mempelajan objek grafk 2 dimensi dan ponerapannya dalam aplixasi soderhana. + Titk20 ‘Titk 20 mempunya 2 nil, yait x dan y yang mony ‘don verikal dr tk pusatsumbu koornat (0.0) + Paling Polyine adalah suatu feng yang cigunakan unk menggambarkan objek 20 yang sudah defiskan ai depen, cimana setap tik pads abjek mula horizontal tk ke 0,4, 2.3... dhubungkan dengan gals lus sehingga membentak ra tert, 2, Pengenalan Operas! Transformasi Geomets! Pada sub topk ini akan dipelolari Opsrasi Transformasi Geometii dan penerapannya dalam aplkasl sederhana, 2.1 Operas! Translasi TTransformasi tanslasimerupakan sustu operasi yang menyebebhan perpindahan objok 20 dari satu tompat ko tempat yang ain. Perubahan Ini berlaku dalam ara yang sejajr dengan sumbu X dan sumbu ¥. WAN a2 \’ wa > Fl Gambar 3 Prosestranslas! aust obek ‘Translasidakukan dengan penambahan transas pata suaty tk Koordnal engan translation vector, yatu (ty). dimana te adalah transas! menurat ssumbu x dan ty adalah translasi menurut sumbu y. Koordinat baru tik yang diansasi dapat ciproleh dengan monggunakan eumusoh (xy) = hast eben rns yeyey, (2.7) ek bar hat wanes ‘ranslas| adalah transtormasi dengan bentuk yang tetap, memindabican cbjek apa adanya, Setap tik dari objek akan avanslasixan dengan besaran yang sama.Oalam operai transis, setiap tie pada suatu ents yang ivanslasi bergerak dalam jarak yang sama, Pergerakan tersebut dapat batik dalam arah sumbu X seja, atau dalam arah sumbu Y saa tau keduanya, 22 Operas Rotasi Rotasi rinya bempuar. Kotha sual benuk venda sengoja dlputar maka perl di tentukan pusat dan bosar sudut putar. sedangkan transla adalah pergeseran. Benda yang telah berpindah dani pusatrya erat! mengalam’ peigesoran, yaity apakan dia bergorak maj mundus ‘ataupun menuju ke atas bawahRotas! berbeda dengan translas|karena penuoshan possi pada translasi tdak mengacu pada suatu tik tertentu ‘eistimewaan dari oiasi adalah jarak antara WX pusat dengan masing- ‘masing baglan dari obyok yang diputar akan seal tian, seberapa jaun ‘bun obyok tu dputa ‘Gambar 4 Prosesrtas dar suv objek Pada sebuah game yang menggunakan graf vektor dan gratk bitmap, ‘otasi dan translasi sangat <) putuhkan, Kita bea menggunakan source code yang treed yal: 4 alTrarsate (xy, 2) sigunakan untuk merubah tk posis| aval sumbu koordinat menuju poss yang dtentskan sosual oordnat xy, dan 2.+ ofRotatet (angle, x,y, 2). digunakan unk memutar suatu bidang pada suduttortntu (angle), 2.3 Operas Sal Penskalaan adalah sustu operasi yang membuat suatu objek beruoah ukurannya baik menjadi mengecl taupun membessr secara seragam atau tidak seragam torgantung pada fakor pnskalaan (scaling factor yal (sx) yang diberkan. sx adalah ‘aktorpenskalaan menurutsumbu x dan sy faktor ponskatnan menurut sumbuy. Koordna baru dperten dengan y sy C7) =k sotlah disk Nil tetin dari 1 monyebabkan objok diperbesar, sebalarya bla nil leh ool dar 1, maka objek akan lperecl. Bila (sxsy) mempunya! nisi yang sama, maka skaladigebut dongan uniform sealing vat tA ee Gamba 5 Proses skala dri stu bjee Peritah yang terakhir ya giScalefeh(TYPEx,TYPEy,TYPEz) cigurakan Untuk mengalkan martks. yang sedang aki dongan matrks yang memperbesar, memperkeci! atau merafieksitan objek. Masing-masing ootinat x y, 2 da setap tik pada obek dkalkan dengan argumen x,y, 2 Peritah giScato merupakan satu-satunya perntah tansformasi modeling yang mongubah ukuran bok. Jka nila yang dlberkanlabin basar dar 1.0 ‘maka bjek akan diperbesar, jka all yang cbrkan kurang dar 1.0 maka abjek akan dperkec, dan jka nile yang dberkan negatf, maka objok akan Airtleksikan (cicerminkan).Momouat perseg! Kemudion hast ‘ranslasigeser) sobesar $0 terhadap sumbu Y adalah persegi parjang {dengan wama kuning dan di translas(geser) sebssar 180 terhadap sumbu X dan 90 tethadap sumbu ¥ adalah perseg!panjang wama be panjang dengan wama _merahSgiceisese(, Oy 11? Public void create() throws uMucLbxception ¢ Diepiay-seedLsplaywoge tw Diapiayode 600, 609))2 Bispiayleresteg? vous snitaniy Geaidentiye dituaerloyo ; While, (Display. teCiovstequested() 6 Teybour {ekeybown (eyboardeR6¥ ESCAPED) | tssssel? rensert)? yb etset : ? ter }oon) > Rolash Membuat persegiparjang dengan wama merah. Kemudian has rolasi(ipular) sobesar 15 darajat adalah porsogi pariang dengan wama suring dan dl oias(ipuar) Kemal sebosar -48 derjat adalah persog panjang wama biSiceisrsa, By 0) pustasrset)) Givereen2eTa00, 30017 //LUtdk Ait bawah Givescon2#(200, 3001) //Citik hanae bamah Diaplay-sevoisplaytose new Dispisyaose (S00, €00))7 Disglay esttullsctoeatdeise) Bisplaylectitle "erates Actas"); {opens - pesieeth i); ‘qiieable (ci DEPTH TEST);SiisadeseityOr "Meyboandl LefeyDown eybocn MEY B0EKIE)) “ Peivate void updated) 4 Public static void masn(steseg{l azg2) | catch EnveLEAcepton ex) , > Skala Memuatpersegi paniang dengan warna merah. Kemulan has ssebosar x= 2, dan y>2 adalah meniad pers! paniang dengan warn binyGHGS, TT THETS eT Ea 200); //titix karen atas Public vold conste() theaws UAIGLERCHpE on Display.creste(): oo Tiopenti. 1 gibisebie toy oer tisthy siisebie (ol LTGHtTNe) Sisceimiode (ch PROJECTION) SiMatrsaMoce el, MODELYEENY 7 Siissaidere sty Os weategy Snaros } ater 2 Bieeiay-opsatads ) Public void desroy) | Wouse. destroy?E.Latihan / Tugas 1. Buallah apikas sederhana Objok 2 Dimensisepert gambar dbawah in F. Rangkuman ran salah ransformasi dengan bentuk yang ttap, mamindahkan objek ‘apa adarya. Setap Uk dari objek akan dranslasikan dengan bbesaran_yang samaDalam operasi translasi, setap ik pada suatu entias yang ranslas! bergerak dalam jarak yang sama. Pergerakan tersebut dapat erly dalam aran sumbu X saa, au dalam arah smb ¥ saa ata Kedar, Rotasl arinya berputar, Katka suaty bentue benda sangaia diputar maka etl di tentukan pusat dan besar sudut puta sedangkan translae adalah potgeseran. Benda yang telah borpindah dari pusainya berarti mongalamipergeseran, yatt apakan dia bergerak maj mundur ataupun menuiu ke ates bawah. Penskalaan adalah sual operasi yang membuat suatu obyek berubah cranny bak menjadi mengecl staupun membesar secara seragam atau ‘iak seragam tergantung paca fktor penskalnan (scaling factor) ya (sx-y) yang diberkan. sx adalah flor ponskalaan merurut sumbu x dan sy faktor penskalaan menurat sumbu y. G. Kunci Jaw: Jewaban No 1 pore javesutileogging.tevels org.tw}gl input souser snport static org.tu)gl.opens! ct32.¥ public void eran public void zendect |spade (GL MODELVER) buaeseattine()? pobnse void wustsegtesaath | Lineswsst crianate giverv@or tigen /4.0f, Resant + 9.06 / A.08h2 17 et color te violas Of / 4,06, height * 3.08 / 4.06)2 or / Aue, might / 0812 Hope reaizeci) gictesrcsior (0.06, 1.08, 1-06, 1.067sniMateode (2_PROsECTION, niesonat ee) ni2semmatecet): public void sunt) ( SE (Display-seviesbiet)| betse | J catch (IsterruptedEnception ex) § Disptay update) eypoeed.doatoy()