processing - arisgunaryati's blog | be the best, whoever ... menjalankan tugas seperti yang...
TRANSCRIPT
Processing
BahasadanLingkunganPemrogramanGrafisInteraktifWidiantoNugroho|http://widiantonugroho.comTutorialreleasedate:2012‐07‐03
WidiantoNugroho,DynamicComposition,variabledimension,2008
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 2
Daftar Isi
BentukdanKomposisi...................................................................................................................5Overview.......................................................................................................................................................5Kontekspemrograman...........................................................................................................................................5Formattutorial...........................................................................................................................................................5Instalasi .........................................................................................................................................................................5
Lingkungan1...............................................................................................................................................5Open,Save ....................................................................................................................................................................6Run ..................................................................................................................................................................................6Sketchbook ..................................................................................................................................................................6
Struktur1 .....................................................................................................................................................7Komentar......................................................................................................................................................................8Pernyataan...................................................................................................................................................................9Sistemkoordinat(DimensiX,Y,Z).................................................................................................................11
Bentuk1..................................................................................................................................................... 11point(titik) ............................................................................................................................................................... 11line(garis).................................................................................................................................................................12rect................................................................................................................................................................................13ellipse,ellipseMode...............................................................................................................................................13Kurva ...........................................................................................................................................................................14[LatihanBK00‐BK03].........................................................................................................................................15
Data1 .......................................................................................................................................................... 15Variabel ......................................................................................................................................................................15Tipedata ....................................................................................................................................................................16[LatihanBK04‐BK06].........................................................................................................................................16
Kontrol1.................................................................................................................................................... 16for..................................................................................................................................................................................16[LatihanBK07‐BK09].........................................................................................................................................18
Bentuk2..................................................................................................................................................... 18BeginShape&EndShape.....................................................................................................................................18LINES,LINE_STRIP,LINE_LOOP,TRIANGLES,QUADS,POLYGON,danlain‐lain ....................... 21[LatihanBK10‐BK12].........................................................................................................................................22
Struktur2 .................................................................................................................................................. 22Setup&Draw........................................................................................................................................................... 22Method........................................................................................................................................................................24Parameter..................................................................................................................................................................24[LatihanBK13‐BK15].........................................................................................................................................24
Lingkungan2............................................................................................................................................ 24Mengekspordandokumentasi......................................................................................................................... 24
WaktudanGerak.......................................................................................................................... 25Kontrol2.................................................................................................................................................... 25If.....................................................................................................................................................................................25If&Else.......................................................................................................................................................................26[LatihanWG00‐WG01] ......................................................................................................................................27
Gerak1 ....................................................................................................................................................... 27Membatasilayar .....................................................................................................................................................27Mengubaharah ....................................................................................................................................................... 27
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 3
[LatihanWG02‐WG04] ......................................................................................................................................28Kalkulasi1................................................................................................................................................. 28Derajat&Radian ....................................................................................................................................................28SinusandKosinus..................................................................................................................................................29[LatihanWG05‐WG06] ......................................................................................................................................30
Transformasi1 ........................................................................................................................................ 30Translate....................................................................................................................................................................30Rotate ..........................................................................................................................................................................32Scale .............................................................................................................................................................................32Push&Pop................................................................................................................................................................ 33[LatihanWG11‐WG12] ......................................................................................................................................35
Presentasi:Pelanting............................................................................................................................. 35GerakdanRespon ........................................................................................................................ 36Masukan1 ................................................................................................................................................. 36mouseX,mouseY ....................................................................................................................................................36mousePressed ......................................................................................................................................................... 37[LatihanGR00‐GR02].........................................................................................................................................37
Masukan2 ................................................................................................................................................. 38mousePressed()...................................................................................................................................................... 38mouseReleased()....................................................................................................................................................39mouseMoved() ........................................................................................................................................................ 40mouseDragged().....................................................................................................................................................41[LatihanGR05‐GR06].........................................................................................................................................41
GUI1 ............................................................................................................................................................ 42Rollover ......................................................................................................................................................................42Button .........................................................................................................................................................................43[LatihanGR09‐GR10].........................................................................................................................................45
Masukan3 ................................................................................................................................................. 45keyPressed................................................................................................................................................................ 45key ................................................................................................................................................................................46keyPressed() ............................................................................................................................................................ 46keyReleased() .......................................................................................................................................................... 47[LatihanGR11‐GR12].........................................................................................................................................48
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 4
Daftar Gambar Gambar1LingkunganPemrogramanProcessing _________________________________________________________________ 5Gambar2Membukasketsa _________________________________________________________________________________________ 6Gambar3Menjalankanprogramyangandabuat ________________________________________________________________ 6Gambar4SketchbookdiaksesmelaluiWindowsExplorer ________________________________________________________ 7Gambar5SistemKoordinatProcessing ___________________________________________________________________________11 Kredit Gambar dan kode untuk contoh-contoh program diambil dari Processing Reference.
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 5
BentukdanKomposisi
Overview
KontekspemrogramanMemprogramadalahprosesmembuatlangkah‐langkahuntukdieksekusiolehkomputeragarmenjalankantugassepertiyangkitainginkan.tutorialiniakanmemfokuskanpadapemrogramandalamkonteksmembuatbentukrupadankomposisi,waktudangerak,sertabentukruparesponsif.
FormattutorialtutorialiniakanmenggunakansoftwareProcessingsebagaialatuntukmewujudkanbentukrupadankomposisi,waktudangerak,sertabentukruparesponsif.Tutorialdibawakandenganpenyajianmateridandisertaidenganlatihan‐latihan.
InstalasiSebelummelakukaninstalasiandaharusmendapatkanterlebihdahulusoftwareProcessing.BilabelummendapatkannyaandadapatmendownloadnyadialamatURL:http://www.processing.org/download/index.htmlUntukmenginstalandaekstrakfiledistribusisoftwareProcessingdalambentukZIP.AndadapatmengekstrakfileZIPtersebutkehomedirektorianda(padaWindowsdifolder“MyDocuments”).Setelahandamengekstraknyamasuklahkedirektoritargetyangtelahberisifile‐fileeksekutabeldanfilelainnya.Jalankanlahprocessing.exeuntukmemulaiProcessing.
Lingkungan1LingkunganPemrogramanProcessingterdiridaritekseditorterintegrasidanjendelatampilanuntukmenampilkanprogram.Jikatombol"run"ditekan,programakanmengkompilasidanberjalandijendelagrafis(jendelatampilan).Darijendelalingkuganutama,bisamenjalankan,menghentikan,menyimpan,membuka,danmengeksportfile.
Gambar1LingkunganPemrogramanProcessing
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 6
Open,SaveUntukmembukaprogramyangandabuatpadamenugunakanFileOpen.Andakemudiandapatmembrowsemenudropdown.
Gambar2Membukasketsa
Untukmenyimpanhasilperkerjaan:FileSave(shortcut:Ctrl+S)
RunUntukmenjalankanprogramyangtelahkitatulisklik‐lahtombolsepertiyangditunjukkanolehgambarberikut.SelainituandadapatmenggunakanshortcutdenganmenekantombolCtrl+Rpadakeyboard.
Gambar3Menjalankanprogramyangandabuat
SketchbookBukusketsa(sketchbook)andaadalahdirektorisketchbookdibawahdirektoriprocessingdikomputeranda.Dalamdirektorisketchbooktersebutterdapatduasub
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 7
direktoriyaitudirektoridefaulttempatmenyimpanhasilpekerjaananda,dandirektoriexamplestempatmenaruhcontoh‐contohyangdapatandapelajari.
Gambar4SketchbookdiaksesmelaluiWindowsExplorer
DarilingkunganpemrogramanProcessingandadapatmengaksesdirektorisketcbookdenganmelaluimenuFileOpen(perhatikangambar2diatas,tentangmembukasketsa).
Struktur1Strukturdasarprogramditulisdengannotasisebagaiberikut:
tipe-kembalian nama-fungsi(deklarasi parameter) { deklarasi; pernyataan; }
Tipekembalianmenentukantipenilaiyangakandikembalikanbilafungsidijalankanapakahberupabilangandengantipedatatertentuatautidakmengembalikannilai.Namafungsiterkaitdenganaturanpenamaandimanaadaaturanmengenaikarakterapasajayangdapatdigunakandanpenamaanfungsiyangharusdihindarikarenamerupakankatakunci.Deklarasiparameteradalahparameterapasajayangakandijalankanolehfungsi.Deklarasiparameterbisakosongatautidakadaparameter.Pernyataan(statement)digunakanuntukmelakukansuatutindakan.Pernyataandeklarasidigunakanuntukmemperkenalkannamavariabelataupunpengenalyanglainbesertatipedatanya.DalamProcessingstrukturprogramdapatdibuatdalamtigatingkatkompleksitas:ModeStatik,ModeAktif,anddanModeJava.
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 8
ModeStatikModeStatikdigunakanuntukmembuatgambarstatik.Contohberikutmenggambarsebuahsegiempatkuningdilayar.
size(200, 200); background(255); noStroke(); fill(255, 204, 0); rect(30, 20, 50, 50);
ModeAktifModeAktifmenyediakanbagiansetup()opsionalyangakanberjalanketikaprogrammulaiberjalan.Bagiandraw()akanberjalanselamanyasampaiprogamdihentikan.Contohinimenggambarsegiempatyangmengikutiposisimouse(disimpandalamvariabelmouseXdanmouseY).Perhatikanbahwapanggilankemethodbackground()terletakdisetup()karenahanyadiperlukansekali.
void setup() { size(200, 200); rectMode(CENTER); noStroke(); fill(255, 204, 0); } void draw() { background(255); rect(width-mouseX, height-mouseY, 50, 50); rect(mouseX, mouseY, 50, 50); }
ModeJavaModeJavaadalahyangpalingfleksibel,namuntidaktersediasampaidenganrilisProcessing1.0Beta.ModeinimemungkinkanmenulisprogramJavasecaralengkapdidalamLingkuganProcessing.Contohinisamadengandiatas,namunditulisdalamstyleJava:
public class MyDemo extends BApplet { void setup() { size(200, 200); background(255); rectMode(CENTER); noStroke(); fill(255, 204, 0); } void draw() { rect(width-mouseX, height-mouseY, 50, 50); rect(mouseX, mouseY, 50, 50); } }
KomentarKomentarmerupakanbagianyangpentingdalamprogram.Kehadirannyasangatmembantupemrogrammaupunoranglaindalammemahamiprogram,karenaberupa
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 9
penjelasan‐penjelasanmengenaiprogramataubagian‐bagiandariprogram.Dalamhalinipenjelasannyabisaberupa:
• Tujuanataufungsiprogram• Saatprogramdibuatataudirevisi• Keterangan‐keteranganlaintentangkegunaandarisejumlahpernyataandalam
program.
PernyataanPernyataan(statement)digunakanuntukmelakukansuatutindakan.Terdapatberbagaimacampernyataan,diantaranya:
PernyataanUngkapan.Pernyataanungkapanmerupakanbentukpernyataanyangpalingumumdipakai.Pernyataaniniterdiridarisebuahungkapandandiakhiridengantitik‐koma(;).Biasanyapernyataanungkapaniniberupapenugasannilaiterhadapvariabelataupemanggilanfungsi.
PernyataanDeklarasi/definisiPernyataaninidigunakanuntukmemperkenalkannamavariabelataupunpengenalyanglainbesertatipedatanya.
PernyataanNolPernyataannolataupernyataankosongadalahpernyataanyangberisititik‐komasaja.Perintahinitidakmelaksanakanapa‐apa.Tetapikehadirannyakadang‐kadangdiperlukan.Misalnyapadakaidahsuatupernyataanyangmemerlukanpernyataanlain,padahalpernyataanlaintersebuttidakdiperlukan.
PernyataanMajemukPernyataanmajemukseringkalidisebutdenganistilahblok.Yangdimaksudkanpernyataaniniadalahnolatausejumlahpernyataanyangberadadidalamkurungkurawal.
PernyataanBerkondisi:ifdanswitchPernyataanifdapatdipakaiuntukmengambilkeputusanberdasarkansuatukondisi.Pernyataanswitchadalahpernyataanyangdigunakanuntukmenjalankansalahsatupernyataandaribeberapakemungkinanpernyataan,berdasarkannilaidarisebuahungkapandannilaipenyeleksi.Secarasingkatnyapernyataaninimerupakanpernyataanpilihanberganda.
PernyataanPengulangan:do‐while,whiledanforPernyataanwhilemerupakansalahsatupernyataanyangbergunauntukmemprosessuatupernyataanataubeberapapernyataanbeberapakali.Pernyataando-whilejugabergunauntukmengulangiproses.Pernyataanforjugabergunauntukmengulangpengeksekusianterhadapsatuatausejumlahpernyataan.
Pernyataanyangberhubungandenganpernyataanpengulangan:breakdancontinuePernyataanbreakdigunakanpadapernyataanswitch,for,whiledando-while.Kegunaannyayaituuntukmemekasakeluardaripernyataan‐pernyataanitu.Pernyataan
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 10
continuedipakaiuntukmengarahkaneksekusikeputaranatauiterasiberikutnyapadapernyataanpengulangan.
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 11
Sistemkoordinat(DimensiX,Y,Z)Processingmenggunakansistemkoordinatkartesiandengantitikasalterletakdisudutkiri‐atas.Bilaprogramberukuranlebar320pikseldanlebar240piksel,makakoordinat[0,0]terletakdikiri‐atasdankoordinat[320,240]terletakdikananbawah.
Gambar5SistemKoordinatProcessing
Bentuk1
point(titik)
Nama:point()point(30, 20); point(85, 20); point(85, 75); point(30, 75);
DeskripsiPointatautitikadalahkoordinatdalamruang.DalamProcessing,pointmemilikidimensisatupiksel.Parameterpertamaadalahnilaihorizontaldaripoint,nilaikeduaadalahnilaivertikaldaripoint,dannilaiopsionalketigaadalahnilaikedalaman.
Sintakspoint(x1, y1); point(x1, y1, z1);
Parameterx1 int atau float: koordinat x dari point y1 int atau float: koordinat y dari point z1 int atau float: koordinat z dari point
Mengembalikannilai:tidakPenggunaan:Webdanaplikasi
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 12
Perintahterkait:beginshape()
line(garis)
Nama:line()line(30, 20, 85, 75);
line(30, 20, 85, 20); stroke(126); line(85, 20, 85, 75); stroke(255); line(85, 75, 30, 75);
Deskripsilineadalahgarislangsungantaraduapoint.Versiline()denganempatparametermenggambargarisdalambidangXYdenganZ=0.VersidenganenamparametermemungkinkangarisditempatkandimanasajadidalamruangXYZ.Untukmewarnaigaris,gunakanfungsistroke().Sebuahgaristidakdapatdiisiwarna,dengandemikianmethodfill()tidakdapatmempengaruhiwarnagaris.Garisdigambardenganlebarsatupiksel.
Sintaksline(x1, y1, x2, y2); line(x1, y1, z1, x2, y2, z2);
Parameterx1 int atau float: koordinat x dari titik pertama y1 int atau float: koordinat y dari titik pertama z1 int atau float: koordinat z dari titik pertama x2 int atau float: koordinat x dari titik kedua y2 int atau float: koordinat y dari titik kedua z2 int atau float: koordinat z dari titik kedua
Mengembalikannilai:tidakPenggunaan:WebdanaplikasiPerintahterkait:beginShape()
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 13
rect
Nama:rect()rect(30, 20, 55, 55);
DeskripsiMenggambarrectangleatausegiempatdilayar.Sebuahsegiempatadalahbentukyangmemilikiempatsisidansetiapsisimempunyaisudut90derajat.Duaparameterpertamamengesetletak,yangketigamengesetlebar,yangkeempatmengesettinggi.TitikasaldapatdiubahdenganmenggunakanfungsirectMode().
Sintaksrect(x, y, lebar, tinggi);
Parameterx int atau float: koordinat x dari segi empat y int atau float: koordinat y dari segi empat lebar int atau float: lebar dari segi empat tinggi int atau float: tinggi dari segi empat
Mengembalikannilai:tidakPenggunaan:Webdanaplikasi
ellipse,ellipseMode
Nama:ellipse()ellipse(30, 20, 55, 55);
DeskripsiMenggambarellipse(oval)ataubentuklonjongpadajendeladisplay.Sebuahellipsedenganlebardantinggiyangsamaadalahsebuahlingkaran.Duaparameterpertamamengesetletak,yangketigamengesetlebar,danyangkeempatmnegesettinggi.TitikasaldapatdiubahdenganfungsiellipseMode().
Sintaksellipse(x, y, lebar, tinggi);
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 14
Parameterx int atau float: koordinat x dari elips y int atau float: koordinat y dari elips width int atau float: lebar dari elips height int atau float: tinggi dari elips
Mengembalikannilai:tidakPenggunaan:Webdanaplikasi
Nama:ellipseMode()ellipseMode(CENTER); ellipse(35, 35, 50, 50); ellipseMode(CORNER); fill(102); ellipse(35, 35, 50, 50);
DeskripsiTitikasaldariellipsedapatdiubahdenganfungsiellipseMode().modedefaultdariellipsemodeadalahellipseMode(CORNER),yangmenentukantitikasalellipseterletakdisisikiriatasbataskotakyangmembentukellipse.MemanggilfungsiellipseMode(CENTER_DIAMETER)akanmenggambarbentukellipsedaripusatellips.Parameterharusditulisdengan"HURUFBESAR"semuanyakarenaProcessingadalahbahasacasesensitiveataumembedakanhurufbesardanhurufkecil.
SintaksellipseMode(MODE);
ParameterMODE CORNER, CORNERS, CENTER, atau RADIUS.
Mengembalikannilai:TidakPenggunaan:WebdanaplikasiPerintahterkait:ellipse()
Kurva
Nama:curve()curve(10, 26, 83, 24, 83, 61, 25, 65);
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 15
DeskripsiMenggambargariskurvadilayar.Parameterpertamadankeduamenentukantitikpertamadarikurva,duaparameterterakhirmenentukantitikkeduadarikurva.Parameter‐parameterditengahmengesetbentukdarikurva.FungsitambahancurveMode()memberikankontrolpadakualitasvisualdarikurva.Fungsicurve()adalahsebuahimplementasidariCatmull‐Romsplines.
Sintakscurve(x1, y1, x2, y2, x3, y3, x4, y4);
Parameterx1 int atau float: koordinat x dari titik pertama y1 int atau float: koordinat y dari titik pertama x2 int atau float: koordinat x dari titik kedua y2 int atau float: koordinat y dari titik kedua x3 int atau float: koordinat x dari titik ketiga y3 int atau float: koordinat y dari titik ketiga x4 int atau float: koordinat x dari titik keempat y4 int atau float: koordinat y dari titik keempat
Mengembalikannilai:TidakPenggunaan:Webdanaplikasi
[LatihanBK00‐BK03]BK00 GambarlahtigatitikBK01 GambarlahlimagarisBK02 GambarlahsebuahsegiempatBK03 Gambarlahtigaellips
Data1
VariabelVariabelmerupakankomponenpentingpadapemrograman.Variabeldigunakandalamprogramuntukmenyimpansuatunilai,dannilaiyangadapadanyadapatdiubahselamaeksekusiprogramberlangsung.Bentukpendefinisianvariabel:
tipe daftar_variabel;
Contoh:int jumlah; float harga_per_unit, total_harga;
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 16
TipedataSecarainternal,semuadatadidalamkomputerdigitalmoderndisimpansebagaibilanganbinernolatausatu.Databiasanyamerepresentasikaninformasidalamdunianyatasepertinama,rekeningbank,danlainsebagainya,dandatabinertingkatrendah(lowlevel)diatursedemikianrupaolehbahasapemrogamanmenjadikonsep‐konseptingkattinggi(nama,rekeningbank,danlainsebagainya).Secarapraktek,tipedatadigunakanuntukmemberinamaataulabelbagisuatunilaiatauoperasiyangbisadilakukanolehnilaitersebut.Tipedatadapatdiklasifikasikanmenurutkategori‐kategorisebagaiberikut:
• Tipedataprimitif,merupakantipedatapalingsederhanasepertiintegerdanbilanganfloatingpoint,
• Tipedatabentukan,tipeyangdibentukdaritipedasar,sepertitipedataabstrak,• Sub‐tipeatautipeturunan,• Tipedatafungsi,contohnyafungsibiner,• Tipedataobyek,contohnyavariabeltipe,• Tipedatakelas(class),contohnyaobyekdalambahasapemrogramandengan
metodeberorientasiobyek,• Danlainsebagainya.
[LatihanBK04‐BK06]BK04 KendalikanduagarismenggunakansatuvariabelBK05 KendalikantigagarismenggunakansatuvariabelBK06 Kendalikanduabentukmenggunakanduavariabel
Kontrol1
for
Nama:for()for(int i=0; i<40; i=i+1) { line(30, i, 80, i); }
for(int i=0; i<80; i=i+5) { line(30, i, 80, i); }
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 17
for(int i=40; i<80; i=i+5) { line(30, i, 80, i); }
for(int i=30; i<80; i=i+5) { for(int j=0; j<80; j=j+5) { point(i, j); } }
DeskripsiMengontrolurutanpengulangan/loop.Strukturfor()terdiridaritigabagian:init,test,danupdate.Tiapbagiantersebutharusdipisahkanolehtitik‐koma";".Loopakanberlanjutsampaidengantestbernilaifalse.Ketikafor()dieksekusi,terjadieventberikut:
1. Statementinitdieksekusi2. Testdievaluasiapakahmenghasilkantrueataufalse3. Bilatestmenghasilkantrue,lanjutkankestep4.Bilatestmenghasilkan,loncatke
step64. Eksekusipernyataandidalamblok5. Eksekusipernyataanupdatedankembalikestep26. Keluardariloop.
Sintaksfor(init; test; update) { pernyataan }
Parameterinit pernyataan dieksekusi sekali ketika memulai loop test bila tes menhasilkan true, pernyataan dieksekusi update dieksekusi pada bagian akhir dari tiap pengulangan pernyataan kumpulan pernyataan yang dieksekusi setiap saat selama loop
Penggunaan:WebdanaplikasiPerintahterkait:while()
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 18
[LatihanBK07‐BK09]BK07 BuatlahsebuahpolaberlapismenggunakanloopBK08 GambarlahpolayangberbedamenggunakanloopyangsamaBK09 Gambarlahpolayangberbedamenggunakandualoopbaru
Bentuk2
BeginShape&EndShape
Nama:beginShape()beginShape(POINTS); vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); endShape();
beginShape(LINES); vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); endShape();
beginShape(LINE_STRIP); vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); endShape();
beginShape(LINE_LOOP); vertex(30, 20);
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 19
vertex(85, 20); vertex(85, 75); vertex(30, 75); endShape();
beginShape(TRIANGLES); vertex(30, 75); vertex(40, 20); vertex(50, 75); vertex(60, 20); vertex(70, 75); vertex(80, 20); vertex(90, 75); endShape();
beginShape(TRIANGLE_STRIP); vertex(30, 75); vertex(40, 20); vertex(50, 75); vertex(60, 20); vertex(70, 75); vertex(80, 20); vertex(90, 75); endShape();
beginShape(QUADS); vertex(30, 20); vertex(30, 75); vertex(50, 75); vertex(50, 20); vertex(65, 20); vertex(65, 75); vertex(85, 75); vertex(85, 20); endShape();
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 20
beginShape(QUAD_STRIP); vertex(30, 20); vertex(30, 75); vertex(50, 75); vertex(50, 20); vertex(65, 20); vertex(65, 75); vertex(85, 75); vertex(85, 20); endShape();
beginShape(POLYGON); vertex(20, 20); vertex(40, 20); vertex(40, 40); vertex(60, 40); vertex(60, 60); vertex(20, 60); endShape();
DeskripsiMenggunakanfungsi‐fungsibeginShape()danendShape()memungkinkanmembuatbentukyanglebihkompleks.FungsibeginShape()mulaimerekamverteksdarisebuahbentukdanfungsiendShape()menghentikanrekaman.FungsibeginShape()memerlukansebuahparameteryangmemberitahutipebentukyangakandibuatdariverteks‐verteksyangada.ParameteruntukbeginShape()adalahLINES,LINE_STRIP,LINE_LOOP,TRIANGLES,TRIANGLE_STRIP,QUADS,QUAD_STRIP,danPOLYGON.SesudahmemanggilfungsibeginShape(),serangkaianfungsivertex()harusmengikutinya.Untukmenghentikanmenggambarbentuk,panggilfungsiendShape().Fungsivertex()denganduaparametermenentukansebuahlokasidalam2Ddanfungsivertex()dengantigaparametermenentukansebuahlokasidalam3D.Tiapbentukakandiberigarispinggirdenganwarnadarifungsistroke()dandiisiwarnadenganfungsifill().
SintaksbeginShape(MODE);
ParameterMODE LINES, LINE_STRIP, LINE_LOOP, TRIANGLES, TRIANGLE_STRIP, QUADS, QUAD_STRIP, POLYGON
Mengembalikannilai:TidakPenggunaan:Webdanaplikasi
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 21
Perintahterkait:endShape() vertex() curveVertex() bezierVertex()
Nama:endShape()beginShape(LINE_STRIP); vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); endShape();
DeskripsiFungsiendShape()adalahpasangandarifungsibeginShape()danhanyabisadipanggilsesudahbeginShape().Ketikaendshape()dipanggil,semuadatagambaryangdidefinisikansejaksebelumnyamemanggilbeginShape()dituliskedalamimagebuffer.
SintaksbeginShape();
Mengembalikannilai:TidakPenggunaan:WebdanaplikasiPerintahterkait:beginShape()
LINES,LINE_STRIP,LINE_LOOP,TRIANGLES,QUADS,POLYGON,danlain‐lain
Nama:LINES,LINE_STRIP,LINE_LOOP,TRIANGLES,QUADS,POLYGONContohlihatbeginShape().
DeskripsiLINES,LINE_STRIP,LINE_LOOP,TRIANGLES,TRIANGLE_STRIP,QUADS,QUAD_STRIP,danPOLYGONadalahParameteruntukbeginShape().Denganmenggunakanfungsi‐fungsibeginShape()danendShape()memungkinkanmembuatbentukyanglebihkompleks.FungsibeginShape()mulaimerekamverteksdarisebuahbentukdanfungsiendShape()menghentikanrekaman.FungsibeginShape()memerlukansebuahparameteryangmemberitahutipebentukyangakandibuatdariverteks‐verteksyangada.SesudahmemanggilfungsibeginShape(),serangkaianfungsivertex()harusmengikutinya.Untukmenghentikanmenggambarbentuk,panggilfungsiendShape().Fungsivertex()denganduaparametermenentukansebuahlokasidalam2Ddanfungsivertex()dengantigaparametermenentukansebuahlokasidalam3D.Tiapbentukakandiberigarispinggirdenganwarnadarifungsistroke()dandiisiwarnadenganfungsifill().
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 22
SintaksbeginShape(MODE)
ParameterMODE LINES, LINE_STRIP, LINE_LOOP, TRIANGLES, TRIANGLE_STRIP, QUADS, QUAD_STRIP, POLYGON
Mengembalikannilai:TidakPenggunaan:WebdanaplikasiPerintahterkait:
beginShape() endShape() vertex() curveVertex() bezierVertex()
[LatihanBK10‐BK12]BK10 DenganmenggunakanbeginShape()danendShape(),buatlahsebuahprogram
yangmengekspresikanide“perubahan”dengantidaklebihdari5barisBK11 DenganmenggunakanbeginShape()danendShape(),buatlahsebuahprogram
yangmengekspresikanide“harmoni”dengantidaklebihdari5barisBK12 BuatlahsebuahgambaryangberbedadariBK11,tetapimenggunakandata
verteksyangsama
Struktur2
Setup&Draw
Nama:setup()void setup() { size(200, 200); noStroke(); fill(102); } int a = 0; void draw() { background(0); rect(a++%width, 10, 2, 80); }
DeskripsiFungsiyangdipanggilsekaliketikaprogtammulaiberjalan.Digunakanuntukmenentukanproperti‐propertilingkunganawalsepertiukuranlayar,warnabackground,memuatgambar,dsb.sebelumdraw()mulaimengeksekusidanmenggambarimagekelayar.Variabel‐variabelyangdideklarasikandidalamsetupsetup()tidakdapatdiaksesdalamdraw().Bilasebuahprogrammemanggilfungsisetup()makaiaakanjugaakanmemanggildraw().
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 23
Sintaksvoid setup() { pernyataan }
Parameterpernyataan pernyataan yang valid
Mengembalikannilai:Penggunaan:Perintahterkait:
Nama:draw()void setup() { size(200, 200); noStroke(); } int a = 0; void draw() { background(0); fill(a); a = a + 1; if (a > width) { a = 0; } rect(a, 0, 2, 200); }
DeskripsiSecarakontinumengeksekusibaris‐bariskodeyangdimuatdidalamblokdraw()sampaidenganprogramdihentikan.Fungsidraw()digunakanberhubunagndengansetup().Lamanyadraw()mengeksekusidalamtiaipdetikbisadikontrolmenggunakanfungsidelay()danfungsiframerate().
Sintaksdraw() { pernyataan }
Parameterpernyataan Urutan pernyataan yang dieksekusi berulangkali
Mengembalikannilai:TidakPenggunaan:WebdanaplikasiPerintahterkait:setup()
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 24
MethodMethodadalahfungsiyangdidefinisikandidalamclassyangmengoperasikaninstans‐instansdariclasstersebut.Methodterkaitdengankonseppemrogramanberorientasiobjek.Instrukturakanmenjelaskansecarasingklattentangkonseppemrogramanberorientasiobjek.
ParameterUmumnyafungsimenerimamasukanyangdisebutargumenatauparameter.Masukaniniselanjutnyadiprosesolehfungsi.Hasilakhirberupasebuahnilaiyangdisebutnilaibalik.Contoh,kalauterdapatpernyataan:
kap = toupper(huruf);
maka:• hurufadalahargumenbagifungsitoupper()• toupper()memberikannilaibalik(berupahurufkapitaldarihuruf)kevariabel
kap.
[LatihanBK13‐BK15]BK13 Buatlahsebuahmethoddengansatuparameterdansecaravisual
mendemonstrasikannyaBK14 Buatlahsebuahmethoduntukmenggambarsegitigadansecaravisual
mendemonstrasikanfleksibilitasnyaBK15 Buatlahsebuahmethoddengantigaparameterataulebihdansecaravisual
mendemonstrasikanfleksibilitasnya
Lingkungan2
MengekspordandokumentasiAndadapatmengeksporhasilpekerjaanandakedalamformatyangdapatdiaksesmelaluiWeb.CaranyadenganmenggunakanmenuFileEksporttoWeb.SelainituandadapatmenggunakanshortcutdenganmenekantombolCtrl+Epadakeyboard.
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 25
WaktudanGerak
Kontrol2
If
Nama:if()for(int i=5; i<height; i+=5) { stroke(255); // Mengeset warna putih if(i < 35) { // Jika "i" kurang dari "35"... stroke(0); // ...set warna menjadi putih } line(30, i, 80, i); }
DeskripsiMemungkinkanprogramuntukmembuatkeputusantentangkodemanayangakandieksekusi.Bilaevalusiekspresimenghasilkantrue,pernyataanyangterdapatdidalamblokdieksekusidanbilaekspresimenghasilkanfalsepernyataantidakakandieksekusi.
Sintaksif(ekspresi) { pernyataan }
ParameterEkspresi ekspresi valid yang akan dievaluasi apakah bernilai true atau
false pernyataan satu atau lebih pernyataan yang akan dieksekusi
Penggunaan:WebdanaplikasiPerintahterkait:else
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 26
If&Else
Nama:elsefor(int i = 5; i < 95; i += 5) { if(i < 35) { line( 30, i, 80, i ); } else { line( 20, i, 90, i ); } }
for(int i = 5; i < 95; i += 5) { if(i < 35) { line( 30, i, 80, i ); } else if (i < 65) { line( 20, i, 90, i ); } else { line( 0, i, 100, i ); } }
DeskripsiMemperluasstrukturif()membuatprogrammemilihantaraduaataulebihblokkode.Menentukansebuahblokkodedieksekusibilaif()bernilaifalse.
Sintaksif(ekspresi) { pernyataan } else { pernyataan } if(ekspresi) { pernyataan } else if(ekspresi) { pernyataan } else { pernyataan }
Parameterekspresi ekspresi valid yang akan dievaluasi apakah bernilai true atau false statements satu atau lebih pernyataan yang akan dieksekusi
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 27
Penggunaan:WebdanaplikasiPerintahterkait:if()
[LatihanWG00‐WG01]WG00Gunakanmethodif()untukmembuatduapolayangberbedadidalamprogram
yangsamaWG01Gunakanmethodif()danelse()untukmembuattigapolayangberbedadidalam
programyangsama
Gerak1
MembatasilayarCaramembatasilayardapatdilihatpadapotonganprogramberikut:
if(x < 0) { x = 1; } if(x > width) { x = width-1; } if(y < 0) { y = 1; } if(y > height) { y = height-1; }
MengubaharahCaramengubaharahdapatdilihatpadapotonganprogramberikut:
// Update posisi dari raut void gerak() { xpos += ( xspeed * x_arah ); ypos += ( yspeed * y_arah ); // Mengetes apakah raut melebihi batas layar // Bila melebihi, balikkan arahnya dengan mengalikan arahnya dengan -1 if (xpos < 0) { x_arah *= -1; } if (xpos > width-size) { x_arah *= -1; } if (ypos < 0) { y_arah *= -1; } if (ypos > height-size) { y_arah *= -1; } }
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 28
[LatihanWG02‐WG04]WG02Gerakkansebuahelemenvisualdilayar.Ketikamenghilangdiujunglayar,
gerakkankembalikedalambingkaiWG03Gerakkansebuahelemenvisualdilayar.Ketikamenyentuhujunglayar,balikkan
arahnyaWG04Ubahkecepatandarigeraksebuahbentukketikabentuktersebutmemasuki
wilayahyangberbedadilayar
Kalkulasi1
Derajat&Radian
Nama:degrees()float rad = PI/4; float deg = degrees(rad); println(rad + " radian sama dengan " + deg + " derajat");
DeskripsiMengubahnilairadiankenilaiyangsamadalamderajat.Radiandansudutadalahduacaramenghitungsesuatuyangsama.Terdapat360derajatdalamsebuahlingkarandanjuga2*PIradiandalamsebuahlingkaran.Contoh,90°=PI/2=1.5707964.SemuamethodtrigonometridalamProcessingmengharuskansemuaparameterdihitungdalamradian.
Sintaksdegrees(sudut);
Parametersudut int atau float
Mengembalikannilai:floatPenggunaan:WebdanaplikasiPerintahterkait:radians()
Nama:radians()float deg = 45.0; float rad = radians(deg); println(deg + " derajat sama dengan " + rad + " radian");
DeskripsiMengubahnilaiderajatkenilaiyangsamadalamradian.Radiandansudutadalahduacaramenghitungsesuatuyangsama.Terdapat360derajatdalamsebuahlingkarandanjuga2*PIradiandalamsebuahlingkaran.Contoh,90°=PI/2=1.5707964.SemuamethodtrigonometridalamProcessingmengharuskansemuaparameterdihitungdalamradian.
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 29
Sintaksradians(sudut)
Parametersudut int atau float
Mengembalikannilai:floatPenggunaan:WebdanaplikasiPerintahterkait:degrees()
SinusandKosinus
Nama:sin()float a = 0.0; float inc = TWO_PI/25.0; for(int i=0; i<100; i=i+4) { line(i, 50, i, 50+sin(a)*40.0); a = a + inc; }
DeskripsiMenghitungsinusdarisuatusudut.Fungsisin()menerimanilaiparametersudutdalamradian(nilaiantara0dan6.28).Nilaidikembalikandalamrentangdari‐1sampaidengan1.
Sintakssin(rad);
Parameterrad float: sudut dihitung dalam radian (PI s/d -PI)
Mengembalikannilai:floatPenggunaan:WebdanalikasiPerintahterkait:
cos() tan() atan2() radians()
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 30
Nama:cos()float a = 0.0; float inc = TWO_PI/25.0; for(int i=0; i<100; i=i+4) { line(i, 50, i, 50+cos(a)*40.0); a = a + inc; }
DeskripsiMenghitungcosinusdarisuatusudut.Fungsicos()menerimanilaiparametersudutdalamradian(nilaiantara0dan6.28).Nilaidikembalikandalamrentangdari‐1sampaidengan1.
Sintakscos(rad);
Parameterrad float: sudut dihitung dalam radian (PI s/d -PI)
Mengembalikannilai:floatPenggunaan:WebdanaplikasiPerintahterkait:
sin() tan() atan2() radians()
[LatihanWG05‐WG06]WG05Buatlahsebuahanimasidinamismenggunakanmethodcos()sebagaipenghasil
gerakanWG06Buatlahsebuahanimasidinamismenggunakanmethodsin()dancos()sebagai
penghasilgerakan
Transformasi1
Translate
Nama:translate()translate(30, 20); rect(0, 0, 55, 55);
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 31
translate(30, 20, -50); rect(0, 0, 55, 55);
translate(30, 20); rect(0, 0, 55, 55); translate(14, 14); rect(0, 0, 55, 55);
DeskripsiMenentukanjarakuntukmemindahkanobjekdidalamruang.Parameterxmenentukantranslasikanan/kiri,parameterymenentukantranslasinaik/turun,danparameterzmenentukantranslasimaju/mundurdarilayar.Secarateknis,translate()mengalikanmatrikstransformasipadasaatinidenganmatrikstranslasi.
Sintakstranslate(x, y); translate(x, y, z);
Parameterx int atau float: translasi kanan/kiri y int atau float: translasi atas/bawah z int atau float: translasi maju/mundur
Mengembalikannilai:TidakPenggunaan:WebdanaplikasiPerintahterkait:
rotate() rotateX() rotateY() rotateZ() scale() push() pop()
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 32
Rotate
Nama:rotate()translate(width/2, height/2); rotate(PI/3.0); rect(-26, -26, 52, 52);
DeskripsiMemutarobjeksebanyakyangditentukanolehparametersudut.Objekselaludirotasidisekitarposisirelatifnyaketitikawal.Bilanganpositifmemutarobjekberlawananarahjarumjam.Secarateknis,rotate()mengalikanmatrikstransformasidenganmatriksperkalian.
Sintaksrotate(sudut);
Parametersudut float: sudut rotasi atau putaran ditentukan dalam radian
Mengembalikannilai:TidakPenggunaan:WebdanaplikasiPerintahterkait:
rotateX() rotateY() rotateZ() translate() scale() push() pop()
Scale
Nama:scale()rect(30, 20, 50, 50); scale(0.5); rect(30, 20, 50, 50);
rect(30, 20, 50, 50); scale(0.5, 1.3);
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 33
rect(30, 20, 50, 50);
DeskripsiMenambahdanmengurangiukurandariobjekdenganmemperbesardanmengerutkanverteks.Nilaiscaleditentukanolehpersentasedesimal.Memanggilfungsiscale(2.0)akanmenambahbesarukuransuatubentuksebesarduaratuspersen.Objekselaludiskalakandariasalrelatifnyakesistemkoordinat.
Sintaksscale(ukuran); scale(x, y); scale(x, y, z);
Parameterukuran float: persentase untuk menskalakan objek x float: persentase untuk menskalakan objek dalam sumbu "x" y float: persentase untuk menskalakan objek dalam sumbu "y" z float: persentase untuk menskalakan objek dalam sumbu "z"
Mengembalikannilai:TidakPenggunaan:WebdanaplikasiPerintahterkait:
translate() rotate() rotateX() rotateY() rotateZ() scale() push() pop()
Push&Pop
Nama:push()rect(0, 0, 50, 50); //Segi empat putih push(); translate(30, 20); fill(0); rect(0, 0, 50, 50); //Segi empat hitam pop(); fill(102); rect(15, 10, 50, 50); //Segi empat abu-abu
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 34
DeskripsiPushadalahmendorongtransformasimatrikskeatastumpukanmatriks(matrixstack).Memahamipush()danpop()memerlukanpemahamanakankonsepmatrixstack.Fungsipush()menyimpansistemkoordinatsaatinikedalamtumpukandanpop()mengembalikankesemulasistemkoordinatsebelumnya.push()danpop()digunakandalamkaitandenganmetodetransformasilainnyadanbisadilekatkanuntukmengontroljangkauandaritransformasi.
Sintakspush();
Mengembalikannilai:Penggunaan:Perintahterkait:
pop() translate() rotate() rotateX() rotateY() rotateZ()
Nama:pop()rect(0, 0, 50, 50); //White rectangle push(); translate(30, 20); fill(0); rect(0, 0, 50, 50); //Black rectangle pop(); fill(102); rect(15, 10, 50, 50); //Gray rectangle
DeskripsiPopsadalahmemunculkantransformasimatrikskeluardaritumpukanmatriks(matrixstack).Memahamipush()danpop()memerlukanpemahamanakankonsepmatrixstack.Fungsipush()menyimpansistemkoordinatsaatinikedalamtumpukandanpop()mengembalikankesemulasistemkoordinatsebelumnya.push()danpop()digunakandalamkaitandenganmetodetransformasilainnyadanbisadilekatkanuntukmengontroljangkauandaritransformasi.
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 35
Sintakspop();
Mengembalikannilai:TidakPenggunaan:WebdanaplikasiPerintahterkait:push()
[LatihanWG11‐WG12]WG11Gunakanmethodrotate()untukmengekspresikanide“keseimbangan”WG12Gunakanmethodscale()untukmengekspresikanide“keseimbangan”
Presentasi:PelantingInstrukturakanmempresentasikanprogramyangmendemonstrasikanpelantingataupantulan.
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 36
GerakdanRespon
Masukan1
mouseX,mouseY
Nama:mouseXvoid draw() { line(mouseX, 20, mouseX, 80); }
DeskripsiVariabelsistemmouseXselalumemuatkoordinathorizontaldarimouse.
SintaksmouseX
Penggunaan:WebdanaplikasiPerintahterkait:
mouseY pmouseX pmouseY mousePressed mousePressed() mouseReleased() mouseMoved() mouseDragged()
Nama:mouseYvoid draw() { line(20, mouseY, 80, mouseY); }
DeskripsiVariabelsistemmouseYselalumemuatkoordinatvertikaldarimouse.
SintaksmouseY
Penggunaan:WebdanaplikasiPerintahterkait:
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 37
mouseX pmouseX pmouseY mousePressed mousePressed() mouseReleased() mouseMoved() mouseDragged()
mousePressed
Nama:mousePressed// Klik pada gambar untuk mengubah // warna dari kotak void draw() { if (mousePressed == true) { fill(0); } else { fill(255); } rect(25, 25, 50, 50); }
DeskripsiProcessingsecaraotomatismemantauapakahtombolmouseditekanatautidak(memantautombolkirimousepadamousedengantombollebhdarisatu).NilaidarivariablesistemmousePressedadalahtruebilatombolditekan(pressed)danfalsebilatomboltidakditekan.Penggunaan:WebdanaplikasiPerintahterkait:
mouseX mouseY pmouseX pmouseY mousePressed() mouseReleased() mouseMoved() mouseDragged()
[LatihanGR00‐GR02]GR00 GambarlahsebuahelemenvisualyangbergerakberhubungandenganmouseGR01 Gambarlahduaelemenvisualyangmasing‐masingbergerakberhubungan
denganmousedengancarayangberbedaGR02 Gambarlahsebuahelemenvisualyangbergerakberhubungandenganmouse,
tetapidenganhubunganyangberbedaketikamousediklik
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 38
Masukan2
mousePressed()
Nama:mousePressed()// Klik pada gambar untuk mengubah // warna dari kotak int value = 0; void draw() { fill(value); rect(25, 25, 50, 50); } void mousePressed() { if(value == 0) { value = 255; } else { value = 0; } }
DeskripsiFungsimousePressed()dipanggiltiapkalitombolmouseditekan.Ketikamenggunakanmousedengantombollebihadrisatu,hanyatombolkiriyangterdeteksi.
SintaksmousePressed()
Mengembalikannilai:TidakPenggunaan:WebdanaplikasiPerintahterkait:
mouseX mouseY pmouseX pmouseY mousePressed mouseReleased() mouseMoved() mouseDragged()
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 39
mouseReleased()
Nama:mouseReleased()// Klik pada gambar untuk mengubah // warna dari kotak int value = 0; void draw() { fill(value); rect(25, 25, 50, 50); } void mouseReleased() { if(value == 0) { value = 255; } else { value = 0; } }
DeskripsiFungsimouseReleased()dipanggiltiapkalitombolmousedilepaskanatautidakditekan.Ketikamenggunakanmousedengantombollebihdarisatu,hanyatombolkiriyangterdeteksi.
SintaksmouseReleased()
Mengembalikannilai:TidakPenggunaan:WebdanaplikasiPerintahterkait:
mouseX mouseY pmouseX pmouseY mousePressed mousePressed() mouseMoved() mouseDragged()
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 40
mouseMoved()
Nama:mouseMoved()// Klik pada gambar untuk mengubah // warna dari kotak int value = 0; void draw() { fill(value); rect(25, 25, 50, 50); } void mouseMoved() { value = value + 5; if (value > 255) { value = 0; } }
DeskripsiFungsimouseMoved()dipanggiltiapkalimousebergerakdantombolmousetidakditekan.
SintaksmouseMoved()
Mengembalikannilai:TidakPenggunaan:WebdanaplikasiPerintahterkait:
mouseX mouseY pmouseX pmouseY mousePressed mousePressed() mouseReleased() mouseDragged()
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 41
mouseDragged()
Nama:mouseDragged()// Tarik (klik dan tahan) mouse anda melalui gambar // untuk mengubah warna dari kotak int value = 0; void draw() { fill(value); rect(25, 25, 50, 50); } void mouseDragged() { value = value + 5; if (value > 255) { value = 0; } }
DeskripsiDipanggiltiapkalimousebergerakdantombolditekan.Ketikamenggunakanmousedengantombollebihadrisatu,hanyatombolkiriyangterdeteksi.
SintaksmouseDragged()
Mengembalikannilai:TidakPenggunaan:WebdanaplikasiPerintahterkait:
mouseX mouseY pmouseX pmouseY mousePressed mousePressed() mouseReleased() mouseMoved()
[LatihanGR05‐GR06]GR05 Buatsebuaheventyangdimulaiketikamousediklikdanberakhirketikaklik
mousedilepasGR06 Buatlahsebuahgambarresponsifyangberkelakuanberbedaketikamouse
bergerakdanmouseditarik
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 42
GUI1
RolloverContohberikutinimendemonstrasikanrollover.Warnaakanberubahbilamousemelaluiobyek.
// Rollover // by REAS <http://www.groupc.net> // Roll over the colored squares in the center of the image // to change the color of the outside rectangle // Updated 09 February 2003 // Created 21 August 2002 int rectX, rectY; // Position of square button int circleX, circleY; // Position of circle button int rectSize = 50; // Diameter of rect int circleSize = 53; // Diameter of circle color rectColor; color circleColor; color baseColor; boolean rectOver = false; boolean circleOver = false; void setup() { size(200, 200); rectColor = color(204, 153, 0); circleColor = color(102, 153, 0); baseColor = color(102, 102, 102); circleX = width/2+circleSize/2+10; circleY = height/2; rectX = width/2-rectSize-10; rectY = height/2-rectSize/2; ellipseMode(CENTER); } void draw() { update(mouseX, mouseY); noStroke(); if (rectOver) { background(rectColor); } else if (circleOver) { background(circleColor); } else { background(baseColor); } stroke(255); fill(rectColor); rect(rectX, rectY, rectSize, rectSize); fill(circleColor); ellipse(circleX, circleY, circleSize, circleSize); } void update(int x, int y) { if( overCircle(circleX, circleY, circleSize) ) { circleOver = true; rectOver = false;
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 43
} else if ( overRect(rectX, rectY, rectSize, rectSize) ) { rectOver = true; circleOver = false; } else { circleOver = rectOver = false; } } boolean overRect(int x, int y, int width, int height) { if (mouseX >= x && mouseX <= x+width && mouseY >= y && mouseY <= y+height) { return true; } else { return false; } } boolean overCircle(int x, int y, int diameter) { float disX = x - mouseX; float disY = y - mouseY; if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) { return true; } else { return false; } }
ButtonContohberikutinimendemonstrasikanbuttonatautombol.
// Button // by REAS <http://www.groupc.net> // Click on one of the colored squares in the // center of the image to change the color of // the outside rectangle // Updated 09 February 2003 // Created 21 August 2002 int rectX, rectY; // Position of square button int circleX, circleY; // Position of circle button int rectSize = 50; // Diameter of rect int circleSize = 53; // Diameter of circle color rectColor, circleColor, baseColor; color rectHighlight, circleHighlight; color currentColor; boolean rectOver = false; boolean circleOver = false; void setup() { size(200, 200); rectColor = color(204, 153, 0); rectHighlight = color(255, 204, 0); circleColor = color(102, 153, 0); circleHighlight = color(153, 204, 0); baseColor = color(102, 102, 102); currentColor = baseColor; circleX = width/2+circleSize/2+10;
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 44
circleY = height/2; rectX = width/2-rectSize-10; rectY = height/2-rectSize/2; ellipseMode(CENTER_DIAMETER); } void draw() { update(mouseX, mouseY); background(currentColor); stroke(255); if(rectOver) { fill(rectHighlight); } else { fill(rectColor); } rect(rectX, rectY, rectSize, rectSize); if(circleOver) { fill(circleHighlight); } else { fill(circleColor); } ellipse(circleX, circleY, circleSize, circleSize); } void update(int x, int y) { if( overCircle(circleX, circleY, circleSize) ) { circleOver = true; rectOver = false; } else if ( overRect(rectX, rectY, rectSize, rectSize) ) { rectOver = true; circleOver = false; } else { circleOver = rectOver = false; } } void mousePressed() { if(circleOver) { currentColor = circleColor; } if(rectOver) { currentColor = rectColor; } } boolean overRect(int x, int y, int width, int height) { if (mouseX >= x && mouseX <= x+width && mouseY >= y && mouseY <= y+height) { return true; } else { return false; } } boolean overCircle(int x, int y, int diameter) { float disX = x - mouseX; float disY = y - mouseY; if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) { return true; } else {
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 45
return false; } }
[LatihanGR09‐GR10]GR09 UbahlahwarnadarisegiempatketikamousemelewatipermukaannyaGR10 Piculahsebuaheventketikamousemenggelindingdiataslingkaran
Masukan3
keyPressed
Nama:keyPressed// Klik pada gambar untuk memberi fokus // dan tekan sembarang kunci void draw() { if (keyPressed == true) { fill(0); } else { fill(255); } rect(25, 25, 50, 50); }
DeskripsiSistemvariablebooleankeyPressedbernilaitruebilasalahsatukunciditekandanbernilaifalsebilatidakadakunciyangditekan.
SintakskeyPressed
Penggunaan:WebdanaplikasiPerintahterkait:
key keyCode keyPressed() keyReleased()
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 46
key
Nama:key// Klik pada window untuk memberi fokus // dan tekan kunci 'B' pada keyboard void draw() { if(keyPressed) { if (key == 'b' || key == 'B') { fill(0); } } else { fill(255); } rect(25, 25, 50, 50); }
DeskripsiVariabelsistemkeyselalumemuatnilaidarikunciyangsaatiniditekanpadakeyboard.
Sintakskey
Penggunaan:WebdanaplikasiPerintahterkait:
keyPressed keyCode keyPressed() keyReleased()
keyPressed()
Nama:// klik pada gambar untuk memberi fokus, // dan tekan sembarang kunci int value = 0; void draw() { fill(value); rect(25, 25, 50, 50); } void keyPressed() { if(value == 0) { value = 255; } else { value = 0; } }
DeskripsiFungsikeyPressed()dipanggiltiapkalisembarangkunciditekan.Sebagaiaturanumum,tidakadayangdigambardidalamblokkeyPressed().
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 47
Sintaksvoid keyPressed() { pernyataan }
Mengembalikannilai:TidakPenggunaan:WebdanaplikasiPerintahterkait:
keyPressed key keyCode keyReleased()
keyReleased()
Nama:keyReleased()// Klik pada gambar untuk memberi fokus, // dan tekan sembarang kunci int value = 0; void draw() { fill(value); rect(25, 25, 50, 50); } void keyReleased() { if(value == 0) { value = 255; } else { value = 0; } }
DeskripsiFungsikeyReleased()dipanggiltiapkalisebuahkuncidilepaskan.Sebagaiaturanumum,tidakadayangdigambardidalamblokkeyReleased().
Sintaksvoid keyReleased() { pernyataan }
Mengembalikannilai:TidakPenggunaan:WebdanaplikasiPerintahterkait:
keyPressed key keyCode keyPressed()
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com 48
[LatihanGR11‐GR12]GR11 Ungkapkansebuahelemenyangtersembunyiuntukmelengkapisebuahgambar
ketikatombolspacebardiklikGR12 Buatlahsebuahlandscapeabstrakresponsifyangdikendalikanolehkeyboard.
Tulislahinstruksisebagaikomentardidalamkode