Professional Documents
Culture Documents
BahasadanLingkunganPemrogramanGrafisInteraktif
WidiantoNugroho|http://widiantonugroho.com
Tutorialreleasedate:20120703
WidiantoNugroho,DynamicComposition,variabledimension,2008
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Daftar Isi
BentukdanKomposisi...................................................................................................................5
Overview.......................................................................................................................................................5
Kontekspemrograman...........................................................................................................................................5
Formattutorial...........................................................................................................................................................5
Instalasi .........................................................................................................................................................................5
Lingkungan1...............................................................................................................................................5
Open,Save ....................................................................................................................................................................6
Run ..................................................................................................................................................................................6
Sketchbook ..................................................................................................................................................................6
Struktur1 .....................................................................................................................................................7
Komentar......................................................................................................................................................................8
Pernyataan...................................................................................................................................................................9
Sistemkoordinat(DimensiX,Y,Z)................................................................................................................. 11
Bentuk1..................................................................................................................................................... 11
point(titik) ............................................................................................................................................................... 11
line(garis)................................................................................................................................................................. 12
rect................................................................................................................................................................................ 13
ellipse,ellipseMode............................................................................................................................................... 13
Kurva ........................................................................................................................................................................... 14
[LatihanBK00BK03]......................................................................................................................................... 15
Data1 .......................................................................................................................................................... 15
Variabel ...................................................................................................................................................................... 15
Tipedata .................................................................................................................................................................... 16
[LatihanBK04BK06]......................................................................................................................................... 16
Kontrol1.................................................................................................................................................... 16
for.................................................................................................................................................................................. 16
[LatihanBK07BK09]......................................................................................................................................... 18
Bentuk2..................................................................................................................................................... 18
BeginShape&EndShape ..................................................................................................................................... 18
LINES,LINE_STRIP,LINE_LOOP,TRIANGLES,QUADS,POLYGON,danlainlain ....................... 21
[LatihanBK10BK12]......................................................................................................................................... 22
Struktur2 .................................................................................................................................................. 22
Setup&Draw ........................................................................................................................................................... 22
Method........................................................................................................................................................................ 24
Parameter.................................................................................................................................................................. 24
[LatihanBK13BK15]......................................................................................................................................... 24
Lingkungan2............................................................................................................................................ 24
Mengekspordandokumentasi......................................................................................................................... 24
WaktudanGerak.......................................................................................................................... 25
Kontrol2.................................................................................................................................................... 25
If..................................................................................................................................................................................... 25
If&Else....................................................................................................................................................................... 26
[LatihanWG00WG01]...................................................................................................................................... 27
Gerak1 ....................................................................................................................................................... 27
Membatasilayar ..................................................................................................................................................... 27
Mengubaharah ....................................................................................................................................................... 27
WidiantoNugroho|http://widiantonugroho.com
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
[LatihanWG02WG04]...................................................................................................................................... 28
Kalkulasi1................................................................................................................................................. 28
Derajat&Radian .................................................................................................................................................... 28
SinusandKosinus.................................................................................................................................................. 29
[LatihanWG05WG06]...................................................................................................................................... 30
Transformasi1 ........................................................................................................................................ 30
Translate.................................................................................................................................................................... 30
Rotate .......................................................................................................................................................................... 32
Scale ............................................................................................................................................................................. 32
Push&Pop................................................................................................................................................................ 33
[LatihanWG11WG12]...................................................................................................................................... 35
Presentasi:Pelanting............................................................................................................................. 35
GerakdanRespon ........................................................................................................................ 36
Masukan1 ................................................................................................................................................. 36
mouseX,mouseY .................................................................................................................................................... 36
mousePressed ......................................................................................................................................................... 37
[LatihanGR00GR02]......................................................................................................................................... 37
Masukan2 ................................................................................................................................................. 38
mousePressed()...................................................................................................................................................... 38
mouseReleased().................................................................................................................................................... 39
mouseMoved() ........................................................................................................................................................ 40
mouseDragged()..................................................................................................................................................... 41
[LatihanGR05GR06]......................................................................................................................................... 41
GUI1 ............................................................................................................................................................ 42
Rollover ...................................................................................................................................................................... 42
Button ......................................................................................................................................................................... 43
[LatihanGR09GR10]......................................................................................................................................... 45
Masukan3 ................................................................................................................................................. 45
keyPressed................................................................................................................................................................ 45
key ................................................................................................................................................................................ 46
keyPressed() ............................................................................................................................................................ 46
keyReleased().......................................................................................................................................................... 47
[LatihanGR11GR12]......................................................................................................................................... 48
WidiantoNugroho|http://widiantonugroho.com
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Daftar Gambar
Gambar1LingkunganPemrogramanProcessing _________________________________________________________________ 5
Gambar2Membukasketsa _________________________________________________________________________________________ 6
Gambar3Menjalankanprogramyangandabuat ________________________________________________________________ 6
Gambar4SketchbookdiaksesmelaluiWindowsExplorer ________________________________________________________ 7
Gambar5SistemKoordinatProcessing ___________________________________________________________________________ 11
Kredit
Gambar dan kode untuk contoh-contoh program diambil dari Processing Reference.
WidiantoNugroho|http://widiantonugroho.com
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
BentukdanKomposisi
Overview
Kontekspemrograman
Memprogramadalahprosesmembuatlangkahlangkahuntukdieksekusiolehkomputer
agarmenjalankantugassepertiyangkitainginkan.tutorialiniakanmemfokuskanpada
pemrogramandalamkonteksmembuatbentukrupadankomposisi,waktudangerak,
sertabentukruparesponsif.
Formattutorial
tutorialiniakanmenggunakansoftwareProcessingsebagaialatuntukmewujudkan
bentukrupadankomposisi,waktudangerak,sertabentukruparesponsif.Tutorial
dibawakandenganpenyajianmateridandisertaidenganlatihanlatihan.
Instalasi
Sebelummelakukaninstalasiandaharusmendapatkanterlebihdahulusoftware
Processing.BilabelummendapatkannyaandadapatmendownloadnyadialamatURL:
http://www.processing.org/download/index.html
UntukmenginstalandaekstrakfiledistribusisoftwareProcessingdalambentukZIP.
AndadapatmengekstrakfileZIPtersebutkehomedirektorianda(padaWindowsdi
folderMyDocuments).Setelahandamengekstraknyamasuklahkedirektoritarget
yangtelahberisifilefileeksekutabeldanfilelainnya.Jalankanlahprocessing.exeuntuk
memulaiProcessing.
Lingkungan1
LingkunganPemrogramanProcessingterdiridaritekseditorterintegrasidanjendela
tampilanuntukmenampilkanprogram.Jikatombol"run"ditekan,programakan
mengkompilasidanberjalandijendelagrafis(jendelatampilan).Darijendelalingkugan
utama,bisamenjalankan,menghentikan,menyimpan,membuka,danmengeksportfile.
Gambar1LingkunganPemrogramanProcessing
WidiantoNugroho|http://widiantonugroho.com
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Open,Save
UntukmembukaprogramyangandabuatpadamenugunakanFileOpen.Anda
kemudiandapatmembrowsemenudropdown.
Gambar2Membukasketsa
Untukmenyimpanhasilperkerjaan:FileSave(shortcut:Ctrl+S)
Run
Untukmenjalankanprogramyangtelahkitatuliskliklahtombolsepertiyang
ditunjukkanolehgambarberikut.Selainituandadapatmenggunakanshortcutdengan
menekantombolCtrl+Rpadakeyboard.
Gambar3Menjalankanprogramyangandabuat
Sketchbook
Bukusketsa(sketchbook)andaadalahdirektorisketchbookdibawahdirektori
processingdikomputeranda.Dalamdirektorisketchbooktersebutterdapatduasub
WidiantoNugroho|http://widiantonugroho.com
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
direktoriyaitudirektoridefaulttempatmenyimpanhasilpekerjaananda,dandirektori
examplestempatmenaruhcontohcontohyangdapatandapelajari.
Gambar4SketchbookdiaksesmelaluiWindowsExplorer
DarilingkunganpemrogramanProcessingandadapatmengaksesdirektorisketcbook
denganmelaluimenuFileOpen(perhatikangambar2diatas,tentangmembuka
sketsa).
Struktur1
Strukturdasarprogramditulisdengannotasisebagaiberikut:
tipe-kembalian nama-fungsi(deklarasi parameter)
{
deklarasi;
pernyataan;
}
Tipekembalianmenentukantipenilaiyangakandikembalikanbilafungsidijalankan
apakahberupabilangandengantipedatatertentuatautidakmengembalikannilai.
Namafungsiterkaitdenganaturanpenamaandimanaadaaturanmengenaikarakter
apasajayangdapatdigunakandanpenamaanfungsiyangharusdihindarikarena
merupakankatakunci.
Deklarasiparameteradalahparameterapasajayangakandijalankanolehfungsi.
Deklarasiparameterbisakosongatautidakadaparameter.
Pernyataan(statement)digunakanuntukmelakukansuatutindakan.Pernyataan
deklarasidigunakanuntukmemperkenalkannamavariabelataupunpengenalyanglain
besertatipedatanya.
DalamProcessingstrukturprogramdapatdibuatdalamtigatingkatkompleksitas:Mode
Statik,ModeAktif,anddanModeJava.
WidiantoNugroho|http://widiantonugroho.com
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
ModeStatik
ModeStatikdigunakanuntukmembuatgambarstatik.Contohberikutmenggambar
sebuahsegiempatkuningdilayar.
size(200, 200);
background(255);
noStroke();
fill(255, 204, 0);
rect(30, 20, 50, 50);
ModeAktif
ModeAktifmenyediakanbagiansetup()opsionalyangakanberjalanketikaprogram
mulaiberjalan.Bagiandraw()akanberjalanselamanyasampaiprogamdihentikan.
Contohinimenggambarsegiempatyangmengikutiposisimouse(disimpandalam
variabelmouseXdanmouseY).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);
}
ModeJava
ModeJavaadalahyangpalingfleksibel,namuntidaktersediasampaidenganrilis
Processing1.0Beta.ModeinimemungkinkanmenulisprogramJavasecaralengkapdi
dalamLingkuganProcessing.
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);
}
}
Komentar
Komentarmerupakanbagianyangpentingdalamprogram.Kehadirannyasangat
membantupemrogrammaupunoranglaindalammemahamiprogram,karenaberupa
WidiantoNugroho|http://widiantonugroho.com
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
penjelasanpenjelasanmengenaiprogramataubagianbagiandariprogram.Dalamhal
inipenjelasannyabisaberupa:
Tujuanataufungsiprogram
Saatprogramdibuatataudirevisi
Keteranganketeranganlaintentangkegunaandarisejumlahpernyataandalam
program.
Pernyataan
Pernyataan(statement)digunakanuntukmelakukansuatutindakan.Terdapatberbagai
macampernyataan,diantaranya:
PernyataanUngkapan.
Pernyataanungkapanmerupakanbentukpernyataanyangpalingumumdipakai.
Pernyataaniniterdiridarisebuahungkapandandiakhiridengantitikkoma(;).
Biasanyapernyataanungkapaniniberupapenugasannilaiterhadapvariabelatau
pemanggilanfungsi.
PernyataanDeklarasi/definisi
Pernyataaninidigunakanuntukmemperkenalkannamavariabelataupunpengenal
yanglainbesertatipedatanya.
PernyataanNol
Pernyataannolataupernyataankosongadalahpernyataanyangberisititikkomasaja.
Perintahinitidakmelaksanakanapaapa.Tetapikehadirannyakadangkadang
diperlukan.Misalnyapadakaidahsuatupernyataanyangmemerlukanpernyataanlain,
padahalpernyataanlaintersebuttidakdiperlukan.
PernyataanMajemuk
Pernyataanmajemukseringkalidisebutdenganistilahblok.Yangdimaksudkan
pernyataaniniadalahnolatausejumlahpernyataanyangberadadidalamkurung
kurawal.
PernyataanBerkondisi:ifdanswitch
Pernyataanifdapatdipakaiuntukmengambilkeputusanberdasarkansuatukondisi.
Pernyataanswitchadalahpernyataanyangdigunakanuntukmenjalankansalahsatu
pernyataandaribeberapakemungkinanpernyataan,berdasarkannilaidarisebuah
ungkapandannilaipenyeleksi.Secarasingkatnyapernyataaninimerupakanpernyataan
pilihanberganda.
PernyataanPengulangan:dowhile,whiledanfor
Pernyataanwhilemerupakansalahsatupernyataanyangbergunauntukmemproses
suatupernyataanataubeberapapernyataanbeberapakali.Pernyataando-whilejuga
bergunauntukmengulangiproses.Pernyataanforjugabergunauntukmengulang
pengeksekusianterhadapsatuatausejumlahpernyataan.
Pernyataanyangberhubungandenganpernyataanpengulangan:breakdan
continue
Pernyataanbreakdigunakanpadapernyataanswitch,for,whiledando-while.
Kegunaannyayaituuntukmemekasakeluardaripernyataanpernyataanitu.Pernyataan
WidiantoNugroho|http://widiantonugroho.com
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
continuedipakaiuntukmengarahkaneksekusikeputaranatauiterasiberikutnyapada
pernyataanpengulangan.
WidiantoNugroho|http://widiantonugroho.com
10
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Sistemkoordinat(DimensiX,Y,Z)
Processingmenggunakansistemkoordinatkartesiandengantitikasalterletakdisudut
kiriatas.Bilaprogramberukuranlebar320pikseldanlebar240piksel,makakoordinat
[0,0]terletakdikiriatasdankoordinat[320,240]terletakdikananbawah.
Gambar5SistemKoordinatProcessing
Bentuk1
point(titik)
Nama:point()
point(30,
point(85,
point(85,
point(30,
20);
20);
75);
75);
Deskripsi
Pointatautitikadalahkoordinatdalamruang.DalamProcessing,pointmemilikidimensi
satupiksel.Parameterpertamaadalahnilaihorizontaldaripoint,nilaikeduaadalah
nilaivertikaldaripoint,dannilaiopsionalketigaadalahnilaikedalaman.
Sintaks
point(x1, y1);
point(x1, y1, z1);
Parameter
x1
y1
z1
Mengembalikannilai:tidak
Penggunaan:Webdanaplikasi
WidiantoNugroho|http://widiantonugroho.com
11
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Perintahterkait:beginshape()
line(garis)
Nama:line()
line(30, 20, 85, 75);
Deskripsi
lineadalahgarislangsungantaraduapoint.Versiline()denganempatparameter
menggambargarisdalambidangXYdenganZ=0.Versidenganenamparameter
memungkinkangarisditempatkandimanasajadidalamruangXYZ.Untukmewarnai
garis,gunakanfungsistroke().Sebuahgaristidakdapatdiisiwarna,dengandemikian
methodfill()tidakdapatmempengaruhiwarnagaris.Garisdigambardenganlebarsatu
piksel.
Sintaks
line(x1, y1, x2, y2);
line(x1, y1, z1, x2, y2, z2);
Parameter
x1
y1
z1
x2
y2
z2
int
int
int
int
int
int
atau
atau
atau
atau
atau
atau
float:
float:
float:
float:
float:
float:
koordinat
koordinat
koordinat
koordinat
koordinat
koordinat
x
y
z
x
y
z
dari
dari
dari
dari
dari
dari
titik
titik
titik
titik
titik
titik
pertama
pertama
pertama
kedua
kedua
kedua
Mengembalikannilai:tidak
Penggunaan:Webdanaplikasi
Perintahterkait:beginShape()
WidiantoNugroho|http://widiantonugroho.com
12
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
rect
Nama:rect()
rect(30, 20, 55, 55);
Deskripsi
Menggambarrectangleatausegiempatdilayar.Sebuahsegiempatadalahbentukyang
memilikiempatsisidansetiapsisimempunyaisudut90derajat.Duaparameter
pertamamengesetletak,yangketigamengesetlebar,yangkeempatmengesettinggi.
TitikasaldapatdiubahdenganmenggunakanfungsirectMode().
Sintaks
rect(x, y, lebar, tinggi);
Parameter
x
y
lebar
tinggi
int
int
int
int
atau
atau
atau
atau
float:
float:
float:
float:
Mengembalikannilai:tidak
Penggunaan:Webdanaplikasi
ellipse,ellipseMode
Nama:ellipse()
ellipse(30, 20, 55, 55);
Deskripsi
Menggambarellipse(oval)ataubentuklonjongpadajendeladisplay.Sebuahellipse
denganlebardantinggiyangsamaadalahsebuahlingkaran.Duaparameterpertama
mengesetletak,yangketigamengesetlebar,danyangkeempatmnegesettinggi.Titik
asaldapatdiubahdenganfungsiellipseMode().
Sintaks
ellipse(x, y, lebar, tinggi);
WidiantoNugroho|http://widiantonugroho.com
13
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Parameter
x
y
width
height
int
int
int
int
atau
atau
atau
atau
float:
float:
float:
float:
Mengembalikannilai:tidak
Penggunaan:Webdanaplikasi
Nama:ellipseMode()
ellipseMode(CENTER);
ellipse(35, 35, 50, 50);
ellipseMode(CORNER);
fill(102);
ellipse(35, 35, 50, 50);
Deskripsi
TitikasaldariellipsedapatdiubahdenganfungsiellipseMode().modedefaultdari
ellipsemodeadalahellipseMode(CORNER),yangmenentukantitikasalellipseterletak
disisikiriatasbataskotakyangmembentukellipse.Memanggilfungsi
ellipseMode(CENTER_DIAMETER)akanmenggambarbentukellipsedaripusatellips.
Parameterharusditulisdengan"HURUFBESAR"semuanyakarenaProcessingadalah
bahasacasesensitiveataumembedakanhurufbesardanhurufkecil.
Sintaks
ellipseMode(MODE);
Parameter
MODE
Mengembalikannilai:Tidak
Penggunaan:Webdanaplikasi
Perintahterkait:ellipse()
Kurva
Nama:curve()
curve(10, 26, 83, 24, 83, 61, 25, 65);
WidiantoNugroho|http://widiantonugroho.com
14
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Deskripsi
Menggambargariskurvadilayar.Parameterpertamadankeduamenentukantitik
pertamadarikurva,duaparameterterakhirmenentukantitikkeduadarikurva.
Parameterparameterditengahmengesetbentukdarikurva.Fungsitambahan
curveMode()memberikankontrolpadakualitasvisualdarikurva.Fungsicurve()adalah
sebuahimplementasidariCatmullRomsplines.
Sintaks
curve(x1, y1, x2, y2, x3, y3, x4, y4);
Parameter
x1
y1
x2
y2
x3
y3
x4
y4
int
int
int
int
int
int
int
int
atau
atau
atau
atau
atau
atau
atau
atau
float:
float:
float:
float:
float:
float:
float:
float:
koordinat
koordinat
koordinat
koordinat
koordinat
koordinat
koordinat
koordinat
x
y
x
y
x
y
x
y
dari
dari
dari
dari
dari
dari
dari
dari
titik
titik
titik
titik
titik
titik
titik
titik
pertama
pertama
kedua
kedua
ketiga
ketiga
keempat
keempat
Mengembalikannilai:Tidak
Penggunaan:Webdanaplikasi
[LatihanBK00BK03]
BK00 Gambarlahtigatitik
BK01 Gambarlahlimagaris
BK02 Gambarlahsebuahsegiempat
BK03 Gambarlahtigaellips
Data1
Variabel
Variabelmerupakankomponenpentingpadapemrograman.Variabeldigunakandalam
programuntukmenyimpansuatunilai,dannilaiyangadapadanyadapatdiubahselama
eksekusiprogramberlangsung.
Bentukpendefinisianvariabel:
tipe daftar_variabel;
Contoh:
int jumlah;
float harga_per_unit, total_harga;
WidiantoNugroho|http://widiantonugroho.com
15
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Tipedata
Secarainternal,semuadatadidalamkomputerdigitalmoderndisimpansebagai
bilanganbinernolatausatu.Databiasanyamerepresentasikaninformasidalamdunia
nyatasepertinama,rekeningbank,danlainsebagainya,dandatabinertingkatrendah
(lowlevel)diatursedemikianrupaolehbahasapemrogamanmenjadikonsepkonsep
tingkattinggi(nama,rekeningbank,danlainsebagainya).
Secarapraktek,tipedatadigunakanuntukmemberinamaataulabelbagisuatunilai
atauoperasiyangbisadilakukanolehnilaitersebut.Tipedatadapatdiklasifikasikan
menurutkategorikategorisebagaiberikut:
Tipedataprimitif,merupakantipedatapalingsederhanasepertiintegerdan
bilanganfloatingpoint,
Tipedatabentukan,tipeyangdibentukdaritipedasar,sepertitipedataabstrak,
Subtipeatautipeturunan,
Tipedatafungsi,contohnyafungsibiner,
Tipedataobyek,contohnyavariabeltipe,
Tipedatakelas(class),contohnyaobyekdalambahasapemrogramandengan
metodeberorientasiobyek,
Danlainsebagainya.
[LatihanBK04BK06]
BK04 Kendalikanduagarismenggunakansatuvariabel
BK05 Kendalikantigagarismenggunakansatuvariabel
BK06 Kendalikanduabentukmenggunakanduavariabel
Kontrol1
for
Nama:for()
for(int i=0; i<40; i=i+1) {
line(30, i, 80, i);
}
WidiantoNugroho|http://widiantonugroho.com
16
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Deskripsi
Mengontrolurutanpengulangan/loop.Strukturfor()terdiridaritigabagian:init,test,
danupdate.Tiapbagiantersebutharusdipisahkanolehtitikkoma";".Loopakan
berlanjutsampaidengantestbernilaifalse.Ketikafor()dieksekusi,terjadieventberikut:
1. Statementinitdieksekusi
2. Testdievaluasiapakahmenghasilkantrueataufalse
3. Bilatestmenghasilkantrue,lanjutkankestep4.Bilatestmenghasilkan,loncatke
step6
4. Eksekusipernyataandidalamblok
5. Eksekusipernyataanupdatedankembalikestep2
6. Keluardariloop.
Sintaks
for(init; test; update) {
pernyataan
}
Parameter
init
test
update
pernyataan
Penggunaan:Webdanaplikasi
Perintahterkait:while()
WidiantoNugroho|http://widiantonugroho.com
17
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
[LatihanBK07BK09]
BK07 Buatlahsebuahpolaberlapismenggunakanloop
BK08 Gambarlahpolayangberbedamenggunakanloopyangsama
BK09 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);
WidiantoNugroho|http://widiantonugroho.com
18
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
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();
WidiantoNugroho|http://widiantonugroho.com
19
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
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();
Deskripsi
MenggunakanfungsifungsibeginShape()danendShape()memungkinkanmembuat
bentukyanglebihkompleks.FungsibeginShape()mulaimerekamverteksdarisebuah
bentukdanfungsiendShape()menghentikanrekaman.FungsibeginShape()
memerlukansebuahparameteryangmemberitahutipebentukyangakandibuatdari
verteksverteksyangada.ParameteruntukbeginShape()adalahLINES,LINE_STRIP,
LINE_LOOP,TRIANGLES,TRIANGLE_STRIP,QUADS,QUAD_STRIP,danPOLYGON.
SesudahmemanggilfungsibeginShape(),serangkaianfungsivertex()harus
mengikutinya.Untukmenghentikanmenggambarbentuk,panggilfungsiendShape().
Fungsivertex()denganduaparametermenentukansebuahlokasidalam2Ddanfungsi
vertex()dengantigaparametermenentukansebuahlokasidalam3D.Tiapbentukakan
diberigarispinggirdenganwarnadarifungsistroke()dandiisiwarnadenganfungsi
fill().
Sintaks
beginShape(MODE);
Parameter
MODE
LINES, LINE_STRIP, LINE_LOOP, TRIANGLES, TRIANGLE_STRIP, QUADS,
QUAD_STRIP, POLYGON
Mengembalikannilai:Tidak
Penggunaan:Webdanaplikasi
WidiantoNugroho|http://widiantonugroho.com
20
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Perintahterkait:
endShape()
vertex()
curveVertex()
bezierVertex()
Nama:endShape()
beginShape(LINE_STRIP);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();
Deskripsi
FungsiendShape()adalahpasangandarifungsibeginShape()danhanyabisadipanggil
sesudahbeginShape().Ketikaendshape()dipanggil,semuadatagambaryang
didefinisikansejaksebelumnyamemanggilbeginShape()dituliskedalamimagebuffer.
Sintaks
beginShape();
Mengembalikannilai:Tidak
Penggunaan:Webdanaplikasi
Perintahterkait:beginShape()
LINES,LINE_STRIP,LINE_LOOP,TRIANGLES,QUADS,POLYGON,dan
lainlain
Nama:LINES,LINE_STRIP,LINE_LOOP,TRIANGLES,QUADS,POLYGON
ContohlihatbeginShape().
Deskripsi
LINES,LINE_STRIP,LINE_LOOP,TRIANGLES,TRIANGLE_STRIP,QUADS,QUAD_STRIP,
danPOLYGONadalahParameteruntukbeginShape().Denganmenggunakanfungsi
fungsibeginShape()danendShape()memungkinkanmembuatbentukyanglebih
kompleks.FungsibeginShape()mulaimerekamverteksdarisebuahbentukdanfungsi
endShape()menghentikanrekaman.FungsibeginShape()memerlukansebuah
parameteryangmemberitahutipebentukyangakandibuatdariverteksverteksyang
ada.SesudahmemanggilfungsibeginShape(),serangkaianfungsivertex()harus
mengikutinya.Untukmenghentikanmenggambarbentuk,panggilfungsiendShape().
Fungsivertex()denganduaparametermenentukansebuahlokasidalam2Ddanfungsi
vertex()dengantigaparametermenentukansebuahlokasidalam3D.Tiapbentukakan
diberigarispinggirdenganwarnadarifungsistroke()dandiisiwarnadenganfungsi
fill().
WidiantoNugroho|http://widiantonugroho.com
21
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Sintaks
beginShape(MODE)
Parameter
MODE
Mengembalikannilai:Tidak
Penggunaan:Webdanaplikasi
Perintahterkait:
beginShape()
endShape()
vertex()
curveVertex()
bezierVertex()
[LatihanBK10BK12]
BK10 DenganmenggunakanbeginShape()danendShape(),buatlahsebuahprogram
yangmengekspresikanideperubahandengantidaklebihdari5baris
BK11 DenganmenggunakanbeginShape()danendShape(),buatlahsebuahprogram
yangmengekspresikanideharmonidengantidaklebihdari5baris
BK12 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);
}
Deskripsi
Fungsiyangdipanggilsekaliketikaprogtammulaiberjalan.Digunakanuntuk
menentukanpropertipropertilingkunganawalsepertiukuranlayar,warna
background,memuatgambar,dsb.sebelumdraw()mulaimengeksekusidan
menggambarimagekelayar.Variabelvariabelyangdideklarasikandidalamsetup
setup()tidakdapatdiaksesdalamdraw().Bilasebuahprogrammemanggilfungsi
setup()makaiaakanjugaakanmemanggildraw().
WidiantoNugroho|http://widiantonugroho.com
22
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Sintaks
void setup() {
pernyataan
}
Parameter
pernyataan
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);
}
Deskripsi
Secarakontinumengeksekusibarisbariskodeyangdimuatdidalamblokdraw()
sampaidenganprogramdihentikan.Fungsidraw()digunakanberhubunagndengan
setup().Lamanyadraw()mengeksekusidalamtiaipdetikbisadikontrolmenggunakan
fungsidelay()danfungsiframerate().
Sintaks
draw() {
pernyataan
}
Parameter
pernyataan
Mengembalikannilai:Tidak
Penggunaan:Webdanaplikasi
Perintahterkait:setup()
WidiantoNugroho|http://widiantonugroho.com
23
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Method
Methodadalahfungsiyangdidefinisikandidalamclassyangmengoperasikaninstans
instansdariclasstersebut.
Methodterkaitdengankonseppemrogramanberorientasiobjek.Instrukturakan
menjelaskansecarasingklattentangkonseppemrogramanberorientasiobjek.
Parameter
Umumnyafungsimenerimamasukanyangdisebutargumenatauparameter.Masukan
iniselanjutnyadiprosesolehfungsi.Hasilakhirberupasebuahnilaiyangdisebutnilai
balik.
Contoh,kalauterdapatpernyataan:
kap = toupper(huruf);
maka:
hurufadalahargumenbagifungsitoupper()
toupper()memberikannilaibalik(berupahurufkapitaldarihuruf)kevariabel
kap.
[LatihanBK13BK15]
BK13 Buatlahsebuahmethoddengansatuparameterdansecaravisual
mendemonstrasikannya
BK14 Buatlahsebuahmethoduntukmenggambarsegitigadansecaravisual
mendemonstrasikanfleksibilitasnya
BK15 Buatlahsebuahmethoddengantigaparameterataulebihdansecaravisual
mendemonstrasikanfleksibilitasnya
Lingkungan2
Mengekspordandokumentasi
Andadapatmengeksporhasilpekerjaanandakedalamformatyangdapatdiakses
melaluiWeb.CaranyadenganmenggunakanmenuFileEksporttoWeb.Selainitu
andadapatmenggunakanshortcutdenganmenekantombolCtrl+Epadakeyboard.
WidiantoNugroho|http://widiantonugroho.com
24
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
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);
}
Deskripsi
Memungkinkanprogramuntukmembuatkeputusantentangkodemanayangakan
dieksekusi.Bilaevalusiekspresimenghasilkantrue,pernyataanyangterdapatdidalam
blokdieksekusidanbilaekspresimenghasilkanfalsepernyataantidakakandieksekusi.
Sintaks
if(ekspresi) {
pernyataan
}
Parameter
Ekspresi
pernyataan
Penggunaan:Webdanaplikasi
Perintahterkait:else
WidiantoNugroho|http://widiantonugroho.com
25
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
If&Else
Nama:else
for(int i = 5; i < 95; i += 5) {
if(i < 35) {
line( 30, i, 80, i );
} else {
line( 20, i, 90, i );
}
}
i += 5) {
);
);
);
Deskripsi
Memperluasstrukturif()membuatprogrammemilihantaraduaataulebihblokkode.
Menentukansebuahblokkodedieksekusibilaif()bernilaifalse.
Sintaks
if(ekspresi) {
pernyataan
} else {
pernyataan
}
if(ekspresi) {
pernyataan
} else if(ekspresi) {
pernyataan
} else {
pernyataan
}
Parameter
ekspresi
false
statements
WidiantoNugroho|http://widiantonugroho.com
26
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Penggunaan:Webdanaplikasi
Perintahterkait:if()
[LatihanWG00WG01]
WG00 Gunakanmethodif()untukmembuatduapolayangberbedadidalamprogram
yangsama
WG01 Gunakanmethodif()danelse()untukmembuattigapolayangberbedadidalam
programyangsama
Gerak1
Membatasilayar
Caramembatasilayardapatdilihatpadapotonganprogramberikut:
if(x < 0) {
x = 1;
}
if(x > width) {
x = width-1;
}
if(y < 0) {
y = 1;
}
if(y > height) {
y = height-1;
}
Mengubaharah
Caramengubaharahdapatdilihatpadapotonganprogramberikut:
// 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;
}
}
WidiantoNugroho|http://widiantonugroho.com
27
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
[LatihanWG02WG04]
WG02 Gerakkansebuahelemenvisualdilayar.Ketikamenghilangdiujunglayar,
gerakkankembalikedalambingkai
WG03 Gerakkansebuahelemenvisualdilayar.Ketikamenyentuhujunglayar,balikkan
arahnya
WG04 Ubahkecepatandarigeraksebuahbentukketikabentuktersebutmemasuki
wilayahyangberbedadilayar
Kalkulasi1
Derajat&Radian
Nama:degrees()
float rad = PI/4;
float deg = degrees(rad);
println(rad + " radian sama dengan " + deg + " derajat");
Deskripsi
Mengubahnilairadiankenilaiyangsamadalamderajat.Radiandansudutadalahdua
caramenghitungsesuatuyangsama.Terdapat360derajatdalamsebuahlingkarandan
juga2*PIradiandalamsebuahlingkaran.Contoh,90=PI/2=1.5707964.Semua
methodtrigonometridalamProcessingmengharuskansemuaparameterdihitungdalam
radian.
Sintaks
degrees(sudut);
Parameter
sudut
Mengembalikannilai:float
Penggunaan:Webdanaplikasi
Perintahterkait:radians()
Nama:radians()
float deg = 45.0;
float rad = radians(deg);
println(deg + " derajat sama dengan " + rad + " radian");
Deskripsi
Mengubahnilaiderajatkenilaiyangsamadalamradian.Radiandansudutadalahdua
caramenghitungsesuatuyangsama.Terdapat360derajatdalamsebuahlingkarandan
juga2*PIradiandalamsebuahlingkaran.Contoh,90=PI/2=1.5707964.Semua
methodtrigonometridalamProcessingmengharuskansemuaparameterdihitungdalam
radian.
WidiantoNugroho|http://widiantonugroho.com
28
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Sintaks
radians(sudut)
Parameter
sudut
Mengembalikannilai:float
Penggunaan:Webdanaplikasi
Perintahterkait: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;
}
Deskripsi
Menghitungsinusdarisuatusudut.Fungsisin()menerimanilaiparametersudutdalam
radian(nilaiantara0dan6.28).Nilaidikembalikandalamrentangdari1sampai
dengan1.
Sintaks
sin(rad);
Parameter
rad
Mengembalikannilai:float
Penggunaan:Webdanalikasi
Perintahterkait:
cos()
tan()
atan2()
radians()
WidiantoNugroho|http://widiantonugroho.com
29
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
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;
}
Deskripsi
Menghitungcosinusdarisuatusudut.Fungsicos()menerimanilaiparametersudut
dalamradian(nilaiantara0dan6.28).Nilaidikembalikandalamrentangdari1sampai
dengan1.
Sintaks
cos(rad);
Parameter
rad
Mengembalikannilai:float
Penggunaan:Webdanaplikasi
Perintahterkait:
sin()
tan()
atan2()
radians()
[LatihanWG05WG06]
WG05 Buatlahsebuahanimasidinamismenggunakanmethodcos()sebagaipenghasil
gerakan
WG06 Buatlahsebuahanimasidinamismenggunakanmethodsin()dancos()sebagai
penghasilgerakan
Transformasi1
Translate
Nama:translate()
translate(30, 20);
rect(0, 0, 55, 55);
WidiantoNugroho|http://widiantonugroho.com
30
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
translate(30, 20);
rect(0, 0, 55, 55);
translate(14, 14);
rect(0, 0, 55, 55);
Deskripsi
Menentukanjarakuntukmemindahkanobjekdidalamruang.Parameterxmenentukan
translasikanan/kiri,parameterymenentukantranslasinaik/turun,danparameterz
menentukantranslasimaju/mundurdarilayar.Secarateknis,translate()mengalikan
matrikstransformasipadasaatinidenganmatrikstranslasi.
Sintaks
translate(x, y);
translate(x, y, z);
Parameter
x
y
z
Mengembalikannilai:Tidak
Penggunaan:Webdanaplikasi
Perintahterkait:
rotate()
rotateX()
rotateY()
rotateZ()
scale()
push()
pop()
WidiantoNugroho|http://widiantonugroho.com
31
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Rotate
Nama:rotate()
translate(width/2, height/2);
rotate(PI/3.0);
rect(-26, -26, 52, 52);
Deskripsi
Memutarobjeksebanyakyangditentukanolehparametersudut.Objekselaludirotasidi
sekitarposisirelatifnyaketitikawal.Bilanganpositifmemutarobjekberlawananarah
jarumjam.Secarateknis,rotate()mengalikanmatrikstransformasidenganmatriks
perkalian.
Sintaks
rotate(sudut);
Parameter
sudut
Mengembalikannilai:Tidak
Penggunaan:Webdanaplikasi
Perintahterkait:
rotateX()
rotateY()
rotateZ()
translate()
scale()
push()
pop()
Scale
Nama:scale()
rect(30, 20, 50, 50);
scale(0.5);
rect(30, 20, 50, 50);
WidiantoNugroho|http://widiantonugroho.com
32
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Deskripsi
Menambahdanmengurangiukurandariobjekdenganmemperbesardanmengerutkan
verteks.Nilaiscaleditentukanolehpersentasedesimal.Memanggilfungsiscale(2.0)
akanmenambahbesarukuransuatubentuksebesarduaratuspersen.Objekselalu
diskalakandariasalrelatifnyakesistemkoordinat.
Sintaks
scale(ukuran);
scale(x, y);
scale(x, y, z);
Parameter
ukuran
x
y
z
float:
float:
float:
float:
persentase
persentase
persentase
persentase
untuk
untuk
untuk
untuk
menskalakan
menskalakan
menskalakan
menskalakan
objek
objek dalam sumbu "x"
objek dalam sumbu "y"
objek dalam sumbu "z"
Mengembalikannilai:Tidak
Penggunaan:Webdanaplikasi
Perintahterkait:
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
WidiantoNugroho|http://widiantonugroho.com
33
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Deskripsi
Pushadalahmendorongtransformasimatrikskeatastumpukanmatriks(matrixstack).
Memahamipush()danpop()memerlukanpemahamanakankonsepmatrixstack.Fungsi
push()menyimpansistemkoordinatsaatinikedalamtumpukandanpop()
mengembalikankesemulasistemkoordinatsebelumnya.push()danpop()digunakan
dalamkaitandenganmetodetransformasilainnyadanbisadilekatkanuntuk
mengontroljangkauandaritransformasi.
Sintaks
push();
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
Deskripsi
Popsadalahmemunculkantransformasimatrikskeluardaritumpukanmatriks(matrix
stack).Memahamipush()danpop()memerlukanpemahamanakankonsepmatrixstack.
Fungsipush()menyimpansistemkoordinatsaatinikedalamtumpukandanpop()
mengembalikankesemulasistemkoordinatsebelumnya.push()danpop()digunakan
dalamkaitandenganmetodetransformasilainnyadanbisadilekatkanuntuk
mengontroljangkauandaritransformasi.
WidiantoNugroho|http://widiantonugroho.com
34
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Sintaks
pop();
Mengembalikannilai:Tidak
Penggunaan:Webdanaplikasi
Perintahterkait:push()
[LatihanWG11WG12]
WG11 Gunakanmethodrotate()untukmengekspresikanidekeseimbangan
WG12 Gunakanmethodscale()untukmengekspresikanidekeseimbangan
Presentasi:Pelanting
Instrukturakanmempresentasikanprogramyangmendemonstrasikanpelantingatau
pantulan.
WidiantoNugroho|http://widiantonugroho.com
35
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
GerakdanRespon
Masukan1
mouseX,mouseY
Nama:mouseX
void draw()
{
line(mouseX, 20, mouseX, 80);
}
Deskripsi
VariabelsistemmouseXselalumemuatkoordinathorizontaldarimouse.
Sintaks
mouseX
Penggunaan:Webdanaplikasi
Perintahterkait:
mouseY
pmouseX
pmouseY
mousePressed
mousePressed()
mouseReleased()
mouseMoved()
mouseDragged()
Nama:mouseY
void draw()
{
line(20, mouseY, 80, mouseY);
}
Deskripsi
VariabelsistemmouseYselalumemuatkoordinatvertikaldarimouse.
Sintaks
mouseY
Penggunaan:Webdanaplikasi
Perintahterkait:
WidiantoNugroho|http://widiantonugroho.com
36
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
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);
}
Deskripsi
Processingsecaraotomatismemantauapakahtombolmouseditekanatautidak
(memantautombolkirimousepadamousedengantombollebhdarisatu).Nilaidari
variablesistemmousePressedadalahtruebilatombolditekan(pressed)danfalsebila
tomboltidakditekan.
Penggunaan:Webdanaplikasi
Perintahterkait:
mouseX
mouseY
pmouseX
pmouseY
mousePressed()
mouseReleased()
mouseMoved()
mouseDragged()
[LatihanGR00GR02]
GR00 Gambarlahsebuahelemenvisualyangbergerakberhubungandenganmouse
GR01 Gambarlahduaelemenvisualyangmasingmasingbergerakberhubungan
denganmousedengancarayangberbeda
GR02 Gambarlahsebuahelemenvisualyangbergerakberhubungandenganmouse,
tetapidenganhubunganyangberbedaketikamousediklik
WidiantoNugroho|http://widiantonugroho.com
37
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
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;
}
}
Deskripsi
FungsimousePressed()dipanggiltiapkalitombolmouseditekan.Ketikamenggunakan
mousedengantombollebihadrisatu,hanyatombolkiriyangterdeteksi.
Sintaks
mousePressed()
Mengembalikannilai:Tidak
Penggunaan:Webdanaplikasi
Perintahterkait:
mouseX
mouseY
pmouseX
pmouseY
mousePressed
mouseReleased()
mouseMoved()
mouseDragged()
WidiantoNugroho|http://widiantonugroho.com
38
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
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;
}
}
Deskripsi
FungsimouseReleased()dipanggiltiapkalitombolmousedilepaskanatautidakditekan.
Ketikamenggunakanmousedengantombollebihdarisatu,hanyatombolkiriyang
terdeteksi.
Sintaks
mouseReleased()
Mengembalikannilai:Tidak
Penggunaan:Webdanaplikasi
Perintahterkait:
mouseX
mouseY
pmouseX
pmouseY
mousePressed
mousePressed()
mouseMoved()
mouseDragged()
WidiantoNugroho|http://widiantonugroho.com
39
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
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;
}
}
Deskripsi
FungsimouseMoved()dipanggiltiapkalimousebergerakdantombolmousetidak
ditekan.
Sintaks
mouseMoved()
Mengembalikannilai:Tidak
Penggunaan:Webdanaplikasi
Perintahterkait:
mouseX
mouseY
pmouseX
pmouseY
mousePressed
mousePressed()
mouseReleased()
mouseDragged()
WidiantoNugroho|http://widiantonugroho.com
40
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
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;
}
}
Deskripsi
Dipanggiltiapkalimousebergerakdantombolditekan.Ketikamenggunakanmouse
dengantombollebihadrisatu,hanyatombolkiriyangterdeteksi.
Sintaks
mouseDragged()
Mengembalikannilai:Tidak
Penggunaan:Webdanaplikasi
Perintahterkait:
mouseX
mouseY
pmouseX
pmouseY
mousePressed
mousePressed()
mouseReleased()
mouseMoved()
[LatihanGR05GR06]
GR05 Buatsebuaheventyangdimulaiketikamousediklikdanberakhirketikaklik
mousedilepas
GR06 Buatlahsebuahgambarresponsifyangberkelakuanberbedaketikamouse
bergerakdanmouseditarik
WidiantoNugroho|http://widiantonugroho.com
41
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
GUI1
Rollover
Contohberikutinimendemonstrasikanrollover.Warnaakanberubahbilamouse
melaluiobyek.
// 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
int
int
int
rectX, rectY;
circleX, circleY;
rectSize = 50;
circleSize = 53;
//
//
//
//
Position
Position
Diameter
Diameter
of
of
of
of
square button
circle button
rect
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;
WidiantoNugroho|http://widiantonugroho.com
42
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Button
Contohberikutinimendemonstrasikanbuttonatautombol.
// 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;
WidiantoNugroho|http://widiantonugroho.com
43
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
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 {
WidiantoNugroho|http://widiantonugroho.com
44
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
return false;
[LatihanGR09GR10]
GR09 Ubahlahwarnadarisegiempatketikamousemelewatipermukaannya
GR10 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);
}
Deskripsi
SistemvariablebooleankeyPressedbernilaitruebilasalahsatukunciditekandan
bernilaifalsebilatidakadakunciyangditekan.
Sintaks
keyPressed
Penggunaan:Webdanaplikasi
Perintahterkait:
key
keyCode
keyPressed()
keyReleased()
WidiantoNugroho|http://widiantonugroho.com
45
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
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);
}
Deskripsi
Variabelsistemkeyselalumemuatnilaidarikunciyangsaatiniditekanpadakeyboard.
Sintaks
key
Penggunaan:Webdanaplikasi
Perintahterkait:
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;
}
}
Deskripsi
FungsikeyPressed()dipanggiltiapkalisembarangkunciditekan.Sebagaiaturanumum,
tidakadayangdigambardidalamblokkeyPressed().
WidiantoNugroho|http://widiantonugroho.com
46
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
Sintaks
void keyPressed() {
pernyataan
}
Mengembalikannilai:Tidak
Penggunaan:Webdanaplikasi
Perintahterkait:
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;
}
}
Deskripsi
FungsikeyReleased()dipanggiltiapkalisebuahkuncidilepaskan.Sebagaiaturanumum,
tidakadayangdigambardidalamblokkeyReleased().
Sintaks
void keyReleased() {
pernyataan
}
Mengembalikannilai:Tidak
Penggunaan:Webdanaplikasi
Perintahterkait:
keyPressed
key
keyCode
keyPressed()
WidiantoNugroho|http://widiantonugroho.com
47
Processing:BahasadanLingkunganPemrogramanGrafisInteraktif
[LatihanGR11GR12]
GR11 Ungkapkansebuahelemenyangtersembunyiuntukmelengkapisebuahgambar
ketikatombolspacebardiklik
GR12 Buatlahsebuahlandscapeabstrakresponsifyangdikendalikanolehkeyboard.
Tulislahinstruksisebagaikomentardidalamkode
WidiantoNugroho|http://widiantonugroho.com
48