You are on page 1of 48

Processing

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

int atau float: koordinat x dari point


int atau float: koordinat y dari point
int atau float: koordinat z dari point

Mengembalikannilai:tidak
Penggunaan:Webdanaplikasi
WidiantoNugroho|http://widiantonugroho.com

11

Processing:BahasadanLingkunganPemrogramanGrafisInteraktif

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);

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:

koordinat x dari segi empat


koordinat y dari segi empat
lebar dari segi empat
tinggi dari segi empat

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:

koordinat x dari elips


koordinat y dari elips
lebar dari elips
tinggi dari elips

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

CORNER, CORNERS, CENTER, atau RADIUS.

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);
}

for(int i=0; i<80; i=i+5) {


line(30, i, 80, i);
}

WidiantoNugroho|http://widiantonugroho.com

16

Processing:BahasadanLingkunganPemrogramanGrafisInteraktif

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);
}
}

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

pernyataan dieksekusi sekali ketika memulai loop


bila tes menhasilkan true, pernyataan dieksekusi
dieksekusi pada bagian akhir dari tiap pengulangan
kumpulan pernyataan yang dieksekusi setiap saat selama loop

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

LINES, LINE_STRIP, LINE_LOOP, TRIANGLES, TRIANGLE_STRIP, QUADS,


QUAD_STRIP, POLYGON

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

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);
}

Deskripsi
Secarakontinumengeksekusibarisbariskodeyangdimuatdidalamblokdraw()
sampaidenganprogramdihentikan.Fungsidraw()digunakanberhubunagndengan
setup().Lamanyadraw()mengeksekusidalamtiaipdetikbisadikontrolmenggunakan
fungsidelay()danfungsiframerate().

Sintaks
draw() {
pernyataan
}

Parameter
pernyataan

Urutan pernyataan yang dieksekusi berulangkali

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

ekspresi valid yang akan dievaluasi apakah bernilai true atau


false
satu atau lebih pernyataan yang akan dieksekusi

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 );
}
}

for(int i = 5; i < 95;


if(i < 35) {
line( 30, i, 80, i
} else if (i < 65) {
line( 20, i, 90, i
} else {
line( 0, i, 100, 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

ekspresi valid yang akan dievaluasi apakah bernilai true atau


satu atau lebih pernyataan yang akan dieksekusi

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

int atau float

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

int atau float

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

float: sudut dihitung dalam radian (PI s/d -PI)

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

float: sudut dihitung dalam radian (PI s/d -PI)

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, -50);


rect(0, 0, 55, 55);

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

int atau float: translasi kanan/kiri


int atau float: translasi atas/bawah
int atau float: translasi maju/mundur

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

float: sudut rotasi atau putaran ditentukan dalam radian

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);

rect(30, 20, 50, 50);


scale(0.5, 1.3);

WidiantoNugroho|http://widiantonugroho.com

32

Processing:BahasadanLingkunganPemrogramanGrafisInteraktif

rect(30, 20, 50, 50);

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

} 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;
}
}

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