Processing - Arisgunaryati's Blog | Be the best, whoever ... menjalankan tugas seperti yang kita inginkan. tutorial ini akan memfokuskan pada pemrograman dalam konteks membuat bentuk

Processing

BahasadanLingkunganPemrogramanGrafisInteraktifWidiantoNugroho|http://widiantonugroho.comTutorialreleasedate:2012‐07‐03

WidiantoNugroho,DynamicComposition,variabledimension,2008

Processing:BahasadanLingkunganPemrogramanGrafisInteraktif

WidiantoNugroho|http://widiantonugroho.com 2

Daftar Isi

BentukdanKomposisi...................................................................................................................5Overview.......................................................................................................................................................5Kontekspemrograman...........................................................................................................................................5Formattutorial...........................................................................................................................................................5Instalasi .........................................................................................................................................................................5

Lingkungan1...............................................................................................................................................5Open,Save ....................................................................................................................................................................6Run ..................................................................................................................................................................................6Sketchbook ..................................................................................................................................................................6

Struktur1 .....................................................................................................................................................7Komentar......................................................................................................................................................................8Pernyataan...................................................................................................................................................................9Sistemkoordinat(DimensiX,Y,Z).................................................................................................................11

Bentuk1..................................................................................................................................................... 11point(titik) ............................................................................................................................................................... 11line(garis).................................................................................................................................................................12rect................................................................................................................................................................................13ellipse,ellipseMode...............................................................................................................................................13Kurva ...........................................................................................................................................................................14[LatihanBK00‐BK03].........................................................................................................................................15

Data1 .......................................................................................................................................................... 15Variabel ......................................................................................................................................................................15Tipedata ....................................................................................................................................................................16[LatihanBK04‐BK06].........................................................................................................................................16

Kontrol1.................................................................................................................................................... 16for..................................................................................................................................................................................16[LatihanBK07‐BK09].........................................................................................................................................18

Bentuk2..................................................................................................................................................... 18BeginShape&EndShape.....................................................................................................................................18LINES,LINE_STRIP,LINE_LOOP,TRIANGLES,QUADS,POLYGON,danlain‐lain ....................... 21[LatihanBK10‐BK12].........................................................................................................................................22

Struktur2 .................................................................................................................................................. 22Setup&Draw........................................................................................................................................................... 22Method........................................................................................................................................................................24Parameter..................................................................................................................................................................24[LatihanBK13‐BK15].........................................................................................................................................24

Lingkungan2............................................................................................................................................ 24Mengekspordandokumentasi......................................................................................................................... 24

WaktudanGerak.......................................................................................................................... 25Kontrol2.................................................................................................................................................... 25If.....................................................................................................................................................................................25If&Else.......................................................................................................................................................................26[LatihanWG00‐WG01] ......................................................................................................................................27

Gerak1 ....................................................................................................................................................... 27Membatasilayar .....................................................................................................................................................27Mengubaharah ....................................................................................................................................................... 27



[LatihanWG02‐WG04] ......................................................................................................................................28Kalkulasi1................................................................................................................................................. 28Derajat&Radian ....................................................................................................................................................28SinusandKosinus..................................................................................................................................................29[LatihanWG05‐WG06] ......................................................................................................................................30

Transformasi1 ........................................................................................................................................ 30Translate....................................................................................................................................................................30Rotate ..........................................................................................................................................................................32Scale .............................................................................................................................................................................32Push&Pop................................................................................................................................................................ 33[LatihanWG11‐WG12] ......................................................................................................................................35

Presentasi:Pelanting............................................................................................................................. 35GerakdanRespon ........................................................................................................................ 36Masukan1 ................................................................................................................................................. 36mouseX,mouseY ....................................................................................................................................................36mousePressed ......................................................................................................................................................... 37[LatihanGR00‐GR02].........................................................................................................................................37

Masukan2 ................................................................................................................................................. 38mousePressed()...................................................................................................................................................... 38mouseReleased()....................................................................................................................................................39mouseMoved() ........................................................................................................................................................ 40mouseDragged().....................................................................................................................................................41[LatihanGR05‐GR06].........................................................................................................................................41

GUI1 ............................................................................................................................................................ 42Rollover ......................................................................................................................................................................42Button .........................................................................................................................................................................43[LatihanGR09‐GR10].........................................................................................................................................45

Masukan3 ................................................................................................................................................. 45keyPressed................................................................................................................................................................ 45key ................................................................................................................................................................................46keyPressed() ............................................................................................................................................................ 46keyReleased() .......................................................................................................................................................... 47[LatihanGR11‐GR12].........................................................................................................................................48



Daftar Gambar Gambar1LingkunganPemrogramanProcessing _________________________________________________________________ 5Gambar2Membukasketsa _________________________________________________________________________________________ 6Gambar3Menjalankanprogramyangandabuat ________________________________________________________________ 6Gambar4SketchbookdiaksesmelaluiWindowsExplorer ________________________________________________________ 7Gambar5SistemKoordinatProcessing ___________________________________________________________________________11 Kredit Gambar dan kode untuk contoh-contoh program diambil dari Processing Reference.



BentukdanKomposisi

Overview

KontekspemrogramanMemprogramadalahprosesmembuatlangkah‐langkahuntukdieksekusiolehkomputeragarmenjalankantugassepertiyangkitainginkan.tutorialiniakanmemfokuskanpadapemrogramandalamkonteksmembuatbentukrupadankomposisi,waktudangerak,sertabentukruparesponsif.

FormattutorialtutorialiniakanmenggunakansoftwareProcessingsebagaialatuntukmewujudkanbentukrupadankomposisi,waktudangerak,sertabentukruparesponsif.Tutorialdibawakandenganpenyajianmateridandisertaidenganlatihan‐latihan.

InstalasiSebelummelakukaninstalasiandaharusmendapatkanterlebihdahulusoftwareProcessing.BilabelummendapatkannyaandadapatmendownloadnyadialamatURL:http://www.processing.org/download/index.htmlUntukmenginstalandaekstrakfiledistribusisoftwareProcessingdalambentukZIP.AndadapatmengekstrakfileZIPtersebutkehomedirektorianda(padaWindowsdifolder“MyDocuments”).Setelahandamengekstraknyamasuklahkedirektoritargetyangtelahberisifile‐fileeksekutabeldanfilelainnya.Jalankanlahprocessing.exeuntukmemulaiProcessing.

Lingkungan1LingkunganPemrogramanProcessingterdiridaritekseditorterintegrasidanjendelatampilanuntukmenampilkanprogram.Jikatombol"run"ditekan,programakanmengkompilasidanberjalandijendelagrafis(jendelatampilan).Darijendelalingkuganutama,bisamenjalankan,menghentikan,menyimpan,membuka,danmengeksportfile.

Gambar1LingkunganPemrogramanProcessing



Open,SaveUntukmembukaprogramyangandabuatpadamenugunakanFileOpen.Andakemudiandapatmembrowsemenudropdown.

Gambar2Membukasketsa

Untukmenyimpanhasilperkerjaan:FileSave(shortcut:Ctrl+S)

RunUntukmenjalankanprogramyangtelahkitatulisklik‐lahtombolsepertiyangditunjukkanolehgambarberikut.SelainituandadapatmenggunakanshortcutdenganmenekantombolCtrl+Rpadakeyboard.

Gambar3Menjalankanprogramyangandabuat

SketchbookBukusketsa(sketchbook)andaadalahdirektorisketchbookdibawahdirektoriprocessingdikomputeranda.Dalamdirektorisketchbooktersebutterdapatduasub



direktoriyaitudirektoridefaulttempatmenyimpanhasilpekerjaananda,dandirektoriexamplestempatmenaruhcontoh‐contohyangdapatandapelajari.

Gambar4SketchbookdiaksesmelaluiWindowsExplorer

DarilingkunganpemrogramanProcessingandadapatmengaksesdirektorisketcbookdenganmelaluimenuFileOpen(perhatikangambar2diatas,tentangmembukasketsa).

Struktur1Strukturdasarprogramditulisdengannotasisebagaiberikut:

tipe-kembalian nama-fungsi(deklarasi parameter) { deklarasi; pernyataan; }

Tipekembalianmenentukantipenilaiyangakandikembalikanbilafungsidijalankanapakahberupabilangandengantipedatatertentuatautidakmengembalikannilai.Namafungsiterkaitdenganaturanpenamaandimanaadaaturanmengenaikarakterapasajayangdapatdigunakandanpenamaanfungsiyangharusdihindarikarenamerupakankatakunci.Deklarasiparameteradalahparameterapasajayangakandijalankanolehfungsi.Deklarasiparameterbisakosongatautidakadaparameter.Pernyataan(statement)digunakanuntukmelakukansuatutindakan.Pernyataandeklarasidigunakanuntukmemperkenalkannamavariabelataupunpengenalyanglainbesertatipedatanya.DalamProcessingstrukturprogramdapatdibuatdalamtigatingkatkompleksitas:ModeStatik,ModeAktif,anddanModeJava.



ModeStatikModeStatikdigunakanuntukmembuatgambarstatik.Contohberikutmenggambarsebuahsegiempatkuningdilayar.

size(200, 200); background(255); noStroke(); fill(255, 204, 0); rect(30, 20, 50, 50);

ModeAktifModeAktifmenyediakanbagiansetup()opsionalyangakanberjalanketikaprogrammulaiberjalan.Bagiandraw()akanberjalanselamanyasampaiprogamdihentikan.Contohinimenggambarsegiempatyangmengikutiposisimouse(disimpandalamvariabelmouseXdanmouseY).Perhatikanbahwapanggilankemethodbackground()terletakdisetup()karenahanyadiperlukansekali.

void setup() { size(200, 200); rectMode(CENTER); noStroke(); fill(255, 204, 0); } void draw() { background(255); rect(width-mouseX, height-mouseY, 50, 50); rect(mouseX, mouseY, 50, 50); }

ModeJavaModeJavaadalahyangpalingfleksibel,namuntidaktersediasampaidenganrilisProcessing1.0Beta.ModeinimemungkinkanmenulisprogramJavasecaralengkapdidalamLingkuganProcessing.Contohinisamadengandiatas,namunditulisdalamstyleJava:

public class MyDemo extends BApplet { void setup() { size(200, 200); background(255); rectMode(CENTER); noStroke(); fill(255, 204, 0); } void draw() { rect(width-mouseX, height-mouseY, 50, 50); rect(mouseX, mouseY, 50, 50); } }

KomentarKomentarmerupakanbagianyangpentingdalamprogram.Kehadirannyasangatmembantupemrogrammaupunoranglaindalammemahamiprogram,karenaberupa



penjelasan‐penjelasanmengenaiprogramataubagian‐bagiandariprogram.Dalamhalinipenjelasannyabisaberupa:

• Tujuanataufungsiprogram• Saatprogramdibuatataudirevisi• Keterangan‐keteranganlaintentangkegunaandarisejumlahpernyataandalam

program.

PernyataanPernyataan(statement)digunakanuntukmelakukansuatutindakan.Terdapatberbagaimacampernyataan,diantaranya:

PernyataanUngkapan.Pernyataanungkapanmerupakanbentukpernyataanyangpalingumumdipakai.Pernyataaniniterdiridarisebuahungkapandandiakhiridengantitik‐koma(;).Biasanyapernyataanungkapaniniberupapenugasannilaiterhadapvariabelataupemanggilanfungsi.

PernyataanDeklarasi/definisiPernyataaninidigunakanuntukmemperkenalkannamavariabelataupunpengenalyanglainbesertatipedatanya.

PernyataanNolPernyataannolataupernyataankosongadalahpernyataanyangberisititik‐komasaja.Perintahinitidakmelaksanakanapa‐apa.Tetapikehadirannyakadang‐kadangdiperlukan.Misalnyapadakaidahsuatupernyataanyangmemerlukanpernyataanlain,padahalpernyataanlaintersebuttidakdiperlukan.

PernyataanMajemukPernyataanmajemukseringkalidisebutdenganistilahblok.Yangdimaksudkanpernyataaniniadalahnolatausejumlahpernyataanyangberadadidalamkurungkurawal.

PernyataanBerkondisi:ifdanswitchPernyataanifdapatdipakaiuntukmengambilkeputusanberdasarkansuatukondisi.Pernyataanswitchadalahpernyataanyangdigunakanuntukmenjalankansalahsatupernyataandaribeberapakemungkinanpernyataan,berdasarkannilaidarisebuahungkapandannilaipenyeleksi.Secarasingkatnyapernyataaninimerupakanpernyataanpilihanberganda.

PernyataanPengulangan:do‐while,whiledanforPernyataanwhilemerupakansalahsatupernyataanyangbergunauntukmemprosessuatupernyataanataubeberapapernyataanbeberapakali.Pernyataando-whilejugabergunauntukmengulangiproses.Pernyataanforjugabergunauntukmengulangpengeksekusianterhadapsatuatausejumlahpernyataan.

Pernyataanyangberhubungandenganpernyataanpengulangan:breakdancontinuePernyataanbreakdigunakanpadapernyataanswitch,for,whiledando-while.Kegunaannyayaituuntukmemekasakeluardaripernyataan‐pernyataanitu.Pernyataan



continuedipakaiuntukmengarahkaneksekusikeputaranatauiterasiberikutnyapadapernyataanpengulangan.



Sistemkoordinat(DimensiX,Y,Z)Processingmenggunakansistemkoordinatkartesiandengantitikasalterletakdisudutkiri‐atas.Bilaprogramberukuranlebar320pikseldanlebar240piksel,makakoordinat[0,0]terletakdikiri‐atasdankoordinat[320,240]terletakdikananbawah.

Gambar5SistemKoordinatProcessing

Bentuk1

point(titik)

Nama:point()point(30, 20); point(85, 20); point(85, 75); point(30, 75);

DeskripsiPointatautitikadalahkoordinatdalamruang.DalamProcessing,pointmemilikidimensisatupiksel.Parameterpertamaadalahnilaihorizontaldaripoint,nilaikeduaadalahnilaivertikaldaripoint,dannilaiopsionalketigaadalahnilaikedalaman.

Sintakspoint(x1, y1); point(x1, y1, z1);

Parameterx1 int atau float: koordinat x dari point y1 int atau float: koordinat y dari point z1 int atau float: koordinat z dari point

Mengembalikannilai:tidakPenggunaan:Webdanaplikasi



Perintahterkait:beginshape()

line(garis)

Nama:line()line(30, 20, 85, 75);

line(30, 20, 85, 20); stroke(126); line(85, 20, 85, 75); stroke(255); line(85, 75, 30, 75);

Deskripsilineadalahgarislangsungantaraduapoint.Versiline()denganempatparametermenggambargarisdalambidangXYdenganZ=0.VersidenganenamparametermemungkinkangarisditempatkandimanasajadidalamruangXYZ.Untukmewarnaigaris,gunakanfungsistroke().Sebuahgaristidakdapatdiisiwarna,dengandemikianmethodfill()tidakdapatmempengaruhiwarnagaris.Garisdigambardenganlebarsatupiksel.

Sintaksline(x1, y1, x2, y2); line(x1, y1, z1, x2, y2, z2);

Parameterx1 int atau float: koordinat x dari titik pertama y1 int atau float: koordinat y dari titik pertama z1 int atau float: koordinat z dari titik pertama x2 int atau float: koordinat x dari titik kedua y2 int atau float: koordinat y dari titik kedua z2 int atau float: koordinat z dari titik kedua

Mengembalikannilai:tidakPenggunaan:WebdanaplikasiPerintahterkait:beginShape()



rect

Nama:rect()rect(30, 20, 55, 55);

DeskripsiMenggambarrectangleatausegiempatdilayar.Sebuahsegiempatadalahbentukyangmemilikiempatsisidansetiapsisimempunyaisudut90derajat.Duaparameterpertamamengesetletak,yangketigamengesetlebar,yangkeempatmengesettinggi.TitikasaldapatdiubahdenganmenggunakanfungsirectMode().

Sintaksrect(x, y, lebar, tinggi);

Parameterx int atau float: koordinat x dari segi empat y int atau float: koordinat y dari segi empat lebar int atau float: lebar dari segi empat tinggi int atau float: tinggi dari segi empat


ellipse,ellipseMode

Nama:ellipse()ellipse(30, 20, 55, 55);

DeskripsiMenggambarellipse(oval)ataubentuklonjongpadajendeladisplay.Sebuahellipsedenganlebardantinggiyangsamaadalahsebuahlingkaran.Duaparameterpertamamengesetletak,yangketigamengesetlebar,danyangkeempatmnegesettinggi.TitikasaldapatdiubahdenganfungsiellipseMode().

Sintaksellipse(x, y, lebar, tinggi);



Parameterx int atau float: koordinat x dari elips y int atau float: koordinat y dari elips width int atau float: lebar dari elips height int atau float: tinggi dari elips


Nama:ellipseMode()ellipseMode(CENTER); ellipse(35, 35, 50, 50); ellipseMode(CORNER); fill(102); ellipse(35, 35, 50, 50);

DeskripsiTitikasaldariellipsedapatdiubahdenganfungsiellipseMode().modedefaultdariellipsemodeadalahellipseMode(CORNER),yangmenentukantitikasalellipseterletakdisisikiriatasbataskotakyangmembentukellipse.MemanggilfungsiellipseMode(CENTER_DIAMETER)akanmenggambarbentukellipsedaripusatellips.Parameterharusditulisdengan"HURUFBESAR"semuanyakarenaProcessingadalahbahasacasesensitiveataumembedakanhurufbesardanhurufkecil.

SintaksellipseMode(MODE);

ParameterMODE CORNER, CORNERS, CENTER, atau RADIUS.

Mengembalikannilai:TidakPenggunaan:WebdanaplikasiPerintahterkait:ellipse()

Kurva

Nama:curve()curve(10, 26, 83, 24, 83, 61, 25, 65);



DeskripsiMenggambargariskurvadilayar.Parameterpertamadankeduamenentukantitikpertamadarikurva,duaparameterterakhirmenentukantitikkeduadarikurva.Parameter‐parameterditengahmengesetbentukdarikurva.FungsitambahancurveMode()memberikankontrolpadakualitasvisualdarikurva.Fungsicurve()adalahsebuahimplementasidariCatmull‐Romsplines.

Sintakscurve(x1, y1, x2, y2, x3, y3, x4, y4);

Parameterx1 int atau float: koordinat x dari titik pertama y1 int atau float: koordinat y dari titik pertama x2 int atau float: koordinat x dari titik kedua y2 int atau float: koordinat y dari titik kedua x3 int atau float: koordinat x dari titik ketiga y3 int atau float: koordinat y dari titik ketiga x4 int atau float: koordinat x dari titik keempat y4 int atau float: koordinat y dari titik keempat

Mengembalikannilai:TidakPenggunaan:Webdanaplikasi

[LatihanBK00‐BK03]BK00 GambarlahtigatitikBK01 GambarlahlimagarisBK02 GambarlahsebuahsegiempatBK03 Gambarlahtigaellips

Data1

VariabelVariabelmerupakankomponenpentingpadapemrograman.Variabeldigunakandalamprogramuntukmenyimpansuatunilai,dannilaiyangadapadanyadapatdiubahselamaeksekusiprogramberlangsung.Bentukpendefinisianvariabel:

tipe daftar_variabel;

Contoh:int jumlah; float harga_per_unit, total_harga;



TipedataSecarainternal,semuadatadidalamkomputerdigitalmoderndisimpansebagaibilanganbinernolatausatu.Databiasanyamerepresentasikaninformasidalamdunianyatasepertinama,rekeningbank,danlainsebagainya,dandatabinertingkatrendah(lowlevel)diatursedemikianrupaolehbahasapemrogamanmenjadikonsep‐konseptingkattinggi(nama,rekeningbank,danlainsebagainya).Secarapraktek,tipedatadigunakanuntukmemberinamaataulabelbagisuatunilaiatauoperasiyangbisadilakukanolehnilaitersebut.Tipedatadapatdiklasifikasikanmenurutkategori‐kategorisebagaiberikut:

• Tipedataprimitif,merupakantipedatapalingsederhanasepertiintegerdanbilanganfloatingpoint,

• Tipedatabentukan,tipeyangdibentukdaritipedasar,sepertitipedataabstrak,• Sub‐tipeatautipeturunan,• Tipedatafungsi,contohnyafungsibiner,• Tipedataobyek,contohnyavariabeltipe,• Tipedatakelas(class),contohnyaobyekdalambahasapemrogramandengan

metodeberorientasiobyek,• Danlainsebagainya.

[LatihanBK04‐BK06]BK04 KendalikanduagarismenggunakansatuvariabelBK05 KendalikantigagarismenggunakansatuvariabelBK06 Kendalikanduabentukmenggunakanduavariabel

Kontrol1

for

Nama:for()for(int i=0; i<40; i=i+1) { line(30, i, 80, i); }

for(int i=0; i<80; i=i+5) { line(30, i, 80, i); }



for(int i=40; i<80; i=i+5) { line(30, i, 80, i); }

for(int i=30; i<80; i=i+5) { for(int j=0; j<80; j=j+5) { point(i, j); } }

DeskripsiMengontrolurutanpengulangan/loop.Strukturfor()terdiridaritigabagian:init,test,danupdate.Tiapbagiantersebutharusdipisahkanolehtitik‐koma";".Loopakanberlanjutsampaidengantestbernilaifalse.Ketikafor()dieksekusi,terjadieventberikut:

1. Statementinitdieksekusi2. Testdievaluasiapakahmenghasilkantrueataufalse3. Bilatestmenghasilkantrue,lanjutkankestep4.Bilatestmenghasilkan,loncatke

step64. Eksekusipernyataandidalamblok5. Eksekusipernyataanupdatedankembalikestep26. Keluardariloop.

Sintaksfor(init; test; update) { pernyataan }

Parameterinit pernyataan dieksekusi sekali ketika memulai loop test bila tes menhasilkan true, pernyataan dieksekusi update dieksekusi pada bagian akhir dari tiap pengulangan pernyataan kumpulan pernyataan yang dieksekusi setiap saat selama loop

Penggunaan:WebdanaplikasiPerintahterkait:while()



[LatihanBK07‐BK09]BK07 BuatlahsebuahpolaberlapismenggunakanloopBK08 GambarlahpolayangberbedamenggunakanloopyangsamaBK09 Gambarlahpolayangberbedamenggunakandualoopbaru

Bentuk2

BeginShape&EndShape

Nama:beginShape()beginShape(POINTS); vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); endShape();

beginShape(LINES); vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); endShape();

beginShape(LINE_STRIP); vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); endShape();

beginShape(LINE_LOOP); vertex(30, 20);



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



beginShape(QUAD_STRIP); vertex(30, 20); vertex(30, 75); vertex(50, 75); vertex(50, 20); vertex(65, 20); vertex(65, 75); vertex(85, 75); vertex(85, 20); endShape();

beginShape(POLYGON); vertex(20, 20); vertex(40, 20); vertex(40, 40); vertex(60, 40); vertex(60, 60); vertex(20, 60); endShape();

DeskripsiMenggunakanfungsi‐fungsibeginShape()danendShape()memungkinkanmembuatbentukyanglebihkompleks.FungsibeginShape()mulaimerekamverteksdarisebuahbentukdanfungsiendShape()menghentikanrekaman.FungsibeginShape()memerlukansebuahparameteryangmemberitahutipebentukyangakandibuatdariverteks‐verteksyangada.ParameteruntukbeginShape()adalahLINES,LINE_STRIP,LINE_LOOP,TRIANGLES,TRIANGLE_STRIP,QUADS,QUAD_STRIP,danPOLYGON.SesudahmemanggilfungsibeginShape(),serangkaianfungsivertex()harusmengikutinya.Untukmenghentikanmenggambarbentuk,panggilfungsiendShape().Fungsivertex()denganduaparametermenentukansebuahlokasidalam2Ddanfungsivertex()dengantigaparametermenentukansebuahlokasidalam3D.Tiapbentukakandiberigarispinggirdenganwarnadarifungsistroke()dandiisiwarnadenganfungsifill().

SintaksbeginShape(MODE);

ParameterMODE LINES, LINE_STRIP, LINE_LOOP, TRIANGLES, TRIANGLE_STRIP, QUADS, QUAD_STRIP, POLYGON

Mengembalikannilai:TidakPenggunaan:Webdanaplikasi



Perintahterkait:endShape() vertex() curveVertex() bezierVertex()

Nama:endShape()beginShape(LINE_STRIP); vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); endShape();

DeskripsiFungsiendShape()adalahpasangandarifungsibeginShape()danhanyabisadipanggilsesudahbeginShape().Ketikaendshape()dipanggil,semuadatagambaryangdidefinisikansejaksebelumnyamemanggilbeginShape()dituliskedalamimagebuffer.

SintaksbeginShape();

Mengembalikannilai:TidakPenggunaan:WebdanaplikasiPerintahterkait:beginShape()

LINES,LINE_STRIP,LINE_LOOP,TRIANGLES,QUADS,POLYGON,danlain‐lain

Nama:LINES,LINE_STRIP,LINE_LOOP,TRIANGLES,QUADS,POLYGONContohlihatbeginShape().

DeskripsiLINES,LINE_STRIP,LINE_LOOP,TRIANGLES,TRIANGLE_STRIP,QUADS,QUAD_STRIP,danPOLYGONadalahParameteruntukbeginShape().Denganmenggunakanfungsi‐fungsibeginShape()danendShape()memungkinkanmembuatbentukyanglebihkompleks.FungsibeginShape()mulaimerekamverteksdarisebuahbentukdanfungsiendShape()menghentikanrekaman.FungsibeginShape()memerlukansebuahparameteryangmemberitahutipebentukyangakandibuatdariverteks‐verteksyangada.SesudahmemanggilfungsibeginShape(),serangkaianfungsivertex()harusmengikutinya.Untukmenghentikanmenggambarbentuk,panggilfungsiendShape().Fungsivertex()denganduaparametermenentukansebuahlokasidalam2Ddanfungsivertex()dengantigaparametermenentukansebuahlokasidalam3D.Tiapbentukakandiberigarispinggirdenganwarnadarifungsistroke()dandiisiwarnadenganfungsifill().



SintaksbeginShape(MODE)

ParameterMODE LINES, LINE_STRIP, LINE_LOOP, TRIANGLES, TRIANGLE_STRIP, QUADS, QUAD_STRIP, POLYGON

Mengembalikannilai:TidakPenggunaan:WebdanaplikasiPerintahterkait:

beginShape() endShape() vertex() curveVertex() bezierVertex()

[LatihanBK10‐BK12]BK10 DenganmenggunakanbeginShape()danendShape(),buatlahsebuahprogram

yangmengekspresikanide“perubahan”dengantidaklebihdari5barisBK11 DenganmenggunakanbeginShape()danendShape(),buatlahsebuahprogram

yangmengekspresikanide“harmoni”dengantidaklebihdari5barisBK12 BuatlahsebuahgambaryangberbedadariBK11,tetapimenggunakandata

verteksyangsama

Struktur2

Setup&Draw

Nama:setup()void setup() { size(200, 200); noStroke(); fill(102); } int a = 0; void draw() { background(0); rect(a++%width, 10, 2, 80); }

DeskripsiFungsiyangdipanggilsekaliketikaprogtammulaiberjalan.Digunakanuntukmenentukanproperti‐propertilingkunganawalsepertiukuranlayar,warnabackground,memuatgambar,dsb.sebelumdraw()mulaimengeksekusidanmenggambarimagekelayar.Variabel‐variabelyangdideklarasikandidalamsetupsetup()tidakdapatdiaksesdalamdraw().Bilasebuahprogrammemanggilfungsisetup()makaiaakanjugaakanmemanggildraw().



Sintaksvoid setup() { pernyataan }

Parameterpernyataan pernyataan yang valid

Mengembalikannilai:Penggunaan:Perintahterkait:

Nama:draw()void setup() { size(200, 200); noStroke(); } int a = 0; void draw() { background(0); fill(a); a = a + 1; if (a > width) { a = 0; } rect(a, 0, 2, 200); }

DeskripsiSecarakontinumengeksekusibaris‐bariskodeyangdimuatdidalamblokdraw()sampaidenganprogramdihentikan.Fungsidraw()digunakanberhubunagndengansetup().Lamanyadraw()mengeksekusidalamtiaipdetikbisadikontrolmenggunakanfungsidelay()danfungsiframerate().

Sintaksdraw() { pernyataan }

Parameterpernyataan Urutan pernyataan yang dieksekusi berulangkali

Mengembalikannilai:TidakPenggunaan:WebdanaplikasiPerintahterkait:setup()



MethodMethodadalahfungsiyangdidefinisikandidalamclassyangmengoperasikaninstans‐instansdariclasstersebut.Methodterkaitdengankonseppemrogramanberorientasiobjek.Instrukturakanmenjelaskansecarasingklattentangkonseppemrogramanberorientasiobjek.

ParameterUmumnyafungsimenerimamasukanyangdisebutargumenatauparameter.Masukaniniselanjutnyadiprosesolehfungsi.Hasilakhirberupasebuahnilaiyangdisebutnilaibalik.Contoh,kalauterdapatpernyataan:

kap = toupper(huruf);

maka:• hurufadalahargumenbagifungsitoupper()• toupper()memberikannilaibalik(berupahurufkapitaldarihuruf)kevariabel

kap.

[LatihanBK13‐BK15]BK13 Buatlahsebuahmethoddengansatuparameterdansecaravisual

mendemonstrasikannyaBK14 Buatlahsebuahmethoduntukmenggambarsegitigadansecaravisual

mendemonstrasikanfleksibilitasnyaBK15 Buatlahsebuahmethoddengantigaparameterataulebihdansecaravisual

mendemonstrasikanfleksibilitasnya

Lingkungan2

MengekspordandokumentasiAndadapatmengeksporhasilpekerjaanandakedalamformatyangdapatdiaksesmelaluiWeb.CaranyadenganmenggunakanmenuFileEksporttoWeb.SelainituandadapatmenggunakanshortcutdenganmenekantombolCtrl+Epadakeyboard.



WaktudanGerak

Kontrol2

If

Nama:if()for(int i=5; i<height; i+=5) { stroke(255); // Mengeset warna putih if(i < 35) { // Jika "i" kurang dari "35"... stroke(0); // ...set warna menjadi putih } line(30, i, 80, i); }

DeskripsiMemungkinkanprogramuntukmembuatkeputusantentangkodemanayangakandieksekusi.Bilaevalusiekspresimenghasilkantrue,pernyataanyangterdapatdidalamblokdieksekusidanbilaekspresimenghasilkanfalsepernyataantidakakandieksekusi.

Sintaksif(ekspresi) { pernyataan }

ParameterEkspresi ekspresi valid yang akan dievaluasi apakah bernilai true atau

false pernyataan satu atau lebih pernyataan yang akan dieksekusi

Penggunaan:WebdanaplikasiPerintahterkait:else



If&Else

Nama:elsefor(int i = 5; i < 95; i += 5) { if(i < 35) { line( 30, i, 80, i ); } else { line( 20, i, 90, i ); } }

for(int i = 5; i < 95; i += 5) { if(i < 35) { line( 30, i, 80, i ); } else if (i < 65) { line( 20, i, 90, i ); } else { line( 0, i, 100, i ); } }

DeskripsiMemperluasstrukturif()membuatprogrammemilihantaraduaataulebihblokkode.Menentukansebuahblokkodedieksekusibilaif()bernilaifalse.

Sintaksif(ekspresi) { pernyataan } else { pernyataan } if(ekspresi) { pernyataan } else if(ekspresi) { pernyataan } else { pernyataan }

Parameterekspresi ekspresi valid yang akan dievaluasi apakah bernilai true atau false statements satu atau lebih pernyataan yang akan dieksekusi



Penggunaan:WebdanaplikasiPerintahterkait:if()

[LatihanWG00‐WG01]WG00Gunakanmethodif()untukmembuatduapolayangberbedadidalamprogram

yangsamaWG01Gunakanmethodif()danelse()untukmembuattigapolayangberbedadidalam

programyangsama

Gerak1

MembatasilayarCaramembatasilayardapatdilihatpadapotonganprogramberikut:

if(x < 0) { x = 1; } if(x > width) { x = width-1; } if(y < 0) { y = 1; } if(y > height) { y = height-1; }

MengubaharahCaramengubaharahdapatdilihatpadapotonganprogramberikut:

// Update posisi dari raut void gerak() { xpos += ( xspeed * x_arah ); ypos += ( yspeed * y_arah ); // Mengetes apakah raut melebihi batas layar // Bila melebihi, balikkan arahnya dengan mengalikan arahnya dengan -1 if (xpos < 0) { x_arah *= -1; } if (xpos > width-size) { x_arah *= -1; } if (ypos < 0) { y_arah *= -1; } if (ypos > height-size) { y_arah *= -1; } }



[LatihanWG02‐WG04]WG02Gerakkansebuahelemenvisualdilayar.Ketikamenghilangdiujunglayar,

gerakkankembalikedalambingkaiWG03Gerakkansebuahelemenvisualdilayar.Ketikamenyentuhujunglayar,balikkan

arahnyaWG04Ubahkecepatandarigeraksebuahbentukketikabentuktersebutmemasuki

wilayahyangberbedadilayar

Kalkulasi1

Derajat&Radian

Nama:degrees()float rad = PI/4; float deg = degrees(rad); println(rad + " radian sama dengan " + deg + " derajat");

DeskripsiMengubahnilairadiankenilaiyangsamadalamderajat.Radiandansudutadalahduacaramenghitungsesuatuyangsama.Terdapat360derajatdalamsebuahlingkarandanjuga2*PIradiandalamsebuahlingkaran.Contoh,90°=PI/2=1.5707964.SemuamethodtrigonometridalamProcessingmengharuskansemuaparameterdihitungdalamradian.

Sintaksdegrees(sudut);

Parametersudut int atau float

Mengembalikannilai:floatPenggunaan:WebdanaplikasiPerintahterkait:radians()

Nama:radians()float deg = 45.0; float rad = radians(deg); println(deg + " derajat sama dengan " + rad + " radian");

DeskripsiMengubahnilaiderajatkenilaiyangsamadalamradian.Radiandansudutadalahduacaramenghitungsesuatuyangsama.Terdapat360derajatdalamsebuahlingkarandanjuga2*PIradiandalamsebuahlingkaran.Contoh,90°=PI/2=1.5707964.SemuamethodtrigonometridalamProcessingmengharuskansemuaparameterdihitungdalamradian.



Sintaksradians(sudut)

Parametersudut int atau float

Mengembalikannilai:floatPenggunaan:WebdanaplikasiPerintahterkait:degrees()

SinusandKosinus

Nama:sin()float a = 0.0; float inc = TWO_PI/25.0; for(int i=0; i<100; i=i+4) { line(i, 50, i, 50+sin(a)*40.0); a = a + inc; }

DeskripsiMenghitungsinusdarisuatusudut.Fungsisin()menerimanilaiparametersudutdalamradian(nilaiantara0dan6.28).Nilaidikembalikandalamrentangdari‐1sampaidengan1.

Sintakssin(rad);

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

Mengembalikannilai:floatPenggunaan:WebdanalikasiPerintahterkait:

cos() tan() atan2() radians()



Nama:cos()float a = 0.0; float inc = TWO_PI/25.0; for(int i=0; i<100; i=i+4) { line(i, 50, i, 50+cos(a)*40.0); a = a + inc; }

DeskripsiMenghitungcosinusdarisuatusudut.Fungsicos()menerimanilaiparametersudutdalamradian(nilaiantara0dan6.28).Nilaidikembalikandalamrentangdari‐1sampaidengan1.

Sintakscos(rad);

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

Mengembalikannilai:floatPenggunaan:WebdanaplikasiPerintahterkait:

sin() tan() atan2() radians()

[LatihanWG05‐WG06]WG05Buatlahsebuahanimasidinamismenggunakanmethodcos()sebagaipenghasil

gerakanWG06Buatlahsebuahanimasidinamismenggunakanmethodsin()dancos()sebagai

penghasilgerakan

Transformasi1

Translate

Nama:translate()translate(30, 20); rect(0, 0, 55, 55);



translate(30, 20, -50); rect(0, 0, 55, 55);

translate(30, 20); rect(0, 0, 55, 55); translate(14, 14); rect(0, 0, 55, 55);

DeskripsiMenentukanjarakuntukmemindahkanobjekdidalamruang.Parameterxmenentukantranslasikanan/kiri,parameterymenentukantranslasinaik/turun,danparameterzmenentukantranslasimaju/mundurdarilayar.Secarateknis,translate()mengalikanmatrikstransformasipadasaatinidenganmatrikstranslasi.

Sintakstranslate(x, y); translate(x, y, z);

Parameterx int atau float: translasi kanan/kiri y int atau float: translasi atas/bawah z int atau float: translasi maju/mundur


rotate() rotateX() rotateY() rotateZ() scale() push() pop()



Rotate

Nama:rotate()translate(width/2, height/2); rotate(PI/3.0); rect(-26, -26, 52, 52);

DeskripsiMemutarobjeksebanyakyangditentukanolehparametersudut.Objekselaludirotasidisekitarposisirelatifnyaketitikawal.Bilanganpositifmemutarobjekberlawananarahjarumjam.Secarateknis,rotate()mengalikanmatrikstransformasidenganmatriksperkalian.

Sintaksrotate(sudut);

Parametersudut float: sudut rotasi atau putaran ditentukan dalam radian


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



rect(30, 20, 50, 50);

DeskripsiMenambahdanmengurangiukurandariobjekdenganmemperbesardanmengerutkanverteks.Nilaiscaleditentukanolehpersentasedesimal.Memanggilfungsiscale(2.0)akanmenambahbesarukuransuatubentuksebesarduaratuspersen.Objekselaludiskalakandariasalrelatifnyakesistemkoordinat.

Sintaksscale(ukuran); scale(x, y); scale(x, y, z);

Parameterukuran float: persentase untuk menskalakan objek x float: persentase untuk menskalakan objek dalam sumbu "x" y float: persentase untuk menskalakan objek dalam sumbu "y" z float: persentase untuk menskalakan objek dalam sumbu "z"


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



DeskripsiPushadalahmendorongtransformasimatrikskeatastumpukanmatriks(matrixstack).Memahamipush()danpop()memerlukanpemahamanakankonsepmatrixstack.Fungsipush()menyimpansistemkoordinatsaatinikedalamtumpukandanpop()mengembalikankesemulasistemkoordinatsebelumnya.push()danpop()digunakandalamkaitandenganmetodetransformasilainnyadanbisadilekatkanuntukmengontroljangkauandaritransformasi.

Sintakspush();

Mengembalikannilai:Penggunaan:Perintahterkait:

pop() translate() rotate() rotateX() rotateY() rotateZ()

Nama:pop()rect(0, 0, 50, 50); //White rectangle push(); translate(30, 20); fill(0); rect(0, 0, 50, 50); //Black rectangle pop(); fill(102); rect(15, 10, 50, 50); //Gray rectangle

DeskripsiPopsadalahmemunculkantransformasimatrikskeluardaritumpukanmatriks(matrixstack).Memahamipush()danpop()memerlukanpemahamanakankonsepmatrixstack.Fungsipush()menyimpansistemkoordinatsaatinikedalamtumpukandanpop()mengembalikankesemulasistemkoordinatsebelumnya.push()danpop()digunakandalamkaitandenganmetodetransformasilainnyadanbisadilekatkanuntukmengontroljangkauandaritransformasi.



Sintakspop();

Mengembalikannilai:TidakPenggunaan:WebdanaplikasiPerintahterkait:push()

[LatihanWG11‐WG12]WG11Gunakanmethodrotate()untukmengekspresikanide“keseimbangan”WG12Gunakanmethodscale()untukmengekspresikanide“keseimbangan”

Presentasi:PelantingInstrukturakanmempresentasikanprogramyangmendemonstrasikanpelantingataupantulan.



GerakdanRespon

Masukan1

mouseX,mouseY

Nama:mouseXvoid draw() { line(mouseX, 20, mouseX, 80); }

DeskripsiVariabelsistemmouseXselalumemuatkoordinathorizontaldarimouse.

SintaksmouseX

Penggunaan:WebdanaplikasiPerintahterkait:

mouseY pmouseX pmouseY mousePressed mousePressed() mouseReleased() mouseMoved() mouseDragged()

Nama:mouseYvoid draw() { line(20, mouseY, 80, mouseY); }

DeskripsiVariabelsistemmouseYselalumemuatkoordinatvertikaldarimouse.

SintaksmouseY




mouseX pmouseX pmouseY mousePressed mousePressed() mouseReleased() mouseMoved() mouseDragged()

mousePressed

Nama:mousePressed// Klik pada gambar untuk mengubah // warna dari kotak void draw() { if (mousePressed == true) { fill(0); } else { fill(255); } rect(25, 25, 50, 50); }

DeskripsiProcessingsecaraotomatismemantauapakahtombolmouseditekanatautidak(memantautombolkirimousepadamousedengantombollebhdarisatu).NilaidarivariablesistemmousePressedadalahtruebilatombolditekan(pressed)danfalsebilatomboltidakditekan.Penggunaan:WebdanaplikasiPerintahterkait:

mouseX mouseY pmouseX pmouseY mousePressed() mouseReleased() mouseMoved() mouseDragged()

[LatihanGR00‐GR02]GR00 GambarlahsebuahelemenvisualyangbergerakberhubungandenganmouseGR01 Gambarlahduaelemenvisualyangmasing‐masingbergerakberhubungan

denganmousedengancarayangberbedaGR02 Gambarlahsebuahelemenvisualyangbergerakberhubungandenganmouse,

tetapidenganhubunganyangberbedaketikamousediklik



Masukan2

mousePressed()

Nama:mousePressed()// Klik pada gambar untuk mengubah // warna dari kotak int value = 0; void draw() { fill(value); rect(25, 25, 50, 50); } void mousePressed() { if(value == 0) { value = 255; } else { value = 0; } }

DeskripsiFungsimousePressed()dipanggiltiapkalitombolmouseditekan.Ketikamenggunakanmousedengantombollebihadrisatu,hanyatombolkiriyangterdeteksi.

SintaksmousePressed()


mouseX mouseY pmouseX pmouseY mousePressed mouseReleased() mouseMoved() mouseDragged()



mouseReleased()

Nama:mouseReleased()// Klik pada gambar untuk mengubah // warna dari kotak int value = 0; void draw() { fill(value); rect(25, 25, 50, 50); } void mouseReleased() { if(value == 0) { value = 255; } else { value = 0; } }

DeskripsiFungsimouseReleased()dipanggiltiapkalitombolmousedilepaskanatautidakditekan.Ketikamenggunakanmousedengantombollebihdarisatu,hanyatombolkiriyangterdeteksi.

SintaksmouseReleased()


mouseX mouseY pmouseX pmouseY mousePressed mousePressed() mouseMoved() mouseDragged()



mouseMoved()

Nama:mouseMoved()// Klik pada gambar untuk mengubah // warna dari kotak int value = 0; void draw() { fill(value); rect(25, 25, 50, 50); } void mouseMoved() { value = value + 5; if (value > 255) { value = 0; } }

DeskripsiFungsimouseMoved()dipanggiltiapkalimousebergerakdantombolmousetidakditekan.

SintaksmouseMoved()


mouseX mouseY pmouseX pmouseY mousePressed mousePressed() mouseReleased() mouseDragged()



mouseDragged()

Nama:mouseDragged()// Tarik (klik dan tahan) mouse anda melalui gambar // untuk mengubah warna dari kotak int value = 0; void draw() { fill(value); rect(25, 25, 50, 50); } void mouseDragged() { value = value + 5; if (value > 255) { value = 0; } }

DeskripsiDipanggiltiapkalimousebergerakdantombolditekan.Ketikamenggunakanmousedengantombollebihadrisatu,hanyatombolkiriyangterdeteksi.

SintaksmouseDragged()


mouseX mouseY pmouseX pmouseY mousePressed mousePressed() mouseReleased() mouseMoved()

[LatihanGR05‐GR06]GR05 Buatsebuaheventyangdimulaiketikamousediklikdanberakhirketikaklik

mousedilepasGR06 Buatlahsebuahgambarresponsifyangberkelakuanberbedaketikamouse

bergerakdanmouseditarik



GUI1

RolloverContohberikutinimendemonstrasikanrollover.Warnaakanberubahbilamousemelaluiobyek.

// Rollover // by REAS <http://www.groupc.net> // Roll over the colored squares in the center of the image // to change the color of the outside rectangle // Updated 09 February 2003 // Created 21 August 2002 int rectX, rectY; // Position of square button int circleX, circleY; // Position of circle button int rectSize = 50; // Diameter of rect int circleSize = 53; // Diameter of circle color rectColor; color circleColor; color baseColor; boolean rectOver = false; boolean circleOver = false; void setup() { size(200, 200); rectColor = color(204, 153, 0); circleColor = color(102, 153, 0); baseColor = color(102, 102, 102); circleX = width/2+circleSize/2+10; circleY = height/2; rectX = width/2-rectSize-10; rectY = height/2-rectSize/2; ellipseMode(CENTER); } void draw() { update(mouseX, mouseY); noStroke(); if (rectOver) { background(rectColor); } else if (circleOver) { background(circleColor); } else { background(baseColor); } stroke(255); fill(rectColor); rect(rectX, rectY, rectSize, rectSize); fill(circleColor); ellipse(circleX, circleY, circleSize, circleSize); } void update(int x, int y) { if( overCircle(circleX, circleY, circleSize) ) { circleOver = true; rectOver = false;



} else if ( overRect(rectX, rectY, rectSize, rectSize) ) { rectOver = true; circleOver = false; } else { circleOver = rectOver = false; } } boolean overRect(int x, int y, int width, int height) { if (mouseX >= x && mouseX <= x+width && mouseY >= y && mouseY <= y+height) { return true; } else { return false; } } boolean overCircle(int x, int y, int diameter) { float disX = x - mouseX; float disY = y - mouseY; if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) { return true; } else { return false; } }

ButtonContohberikutinimendemonstrasikanbuttonatautombol.

// Button // by REAS <http://www.groupc.net> // Click on one of the colored squares in the // center of the image to change the color of // the outside rectangle // Updated 09 February 2003 // Created 21 August 2002 int rectX, rectY; // Position of square button int circleX, circleY; // Position of circle button int rectSize = 50; // Diameter of rect int circleSize = 53; // Diameter of circle color rectColor, circleColor, baseColor; color rectHighlight, circleHighlight; color currentColor; boolean rectOver = false; boolean circleOver = false; void setup() { size(200, 200); rectColor = color(204, 153, 0); rectHighlight = color(255, 204, 0); circleColor = color(102, 153, 0); circleHighlight = color(153, 204, 0); baseColor = color(102, 102, 102); currentColor = baseColor; circleX = width/2+circleSize/2+10;



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 {



return false; } }

[LatihanGR09‐GR10]GR09 UbahlahwarnadarisegiempatketikamousemelewatipermukaannyaGR10 Piculahsebuaheventketikamousemenggelindingdiataslingkaran

Masukan3

keyPressed

Nama:keyPressed// Klik pada gambar untuk memberi fokus // dan tekan sembarang kunci void draw() { if (keyPressed == true) { fill(0); } else { fill(255); } rect(25, 25, 50, 50); }

DeskripsiSistemvariablebooleankeyPressedbernilaitruebilasalahsatukunciditekandanbernilaifalsebilatidakadakunciyangditekan.

SintakskeyPressed


key keyCode keyPressed() keyReleased()



key

Nama:key// Klik pada window untuk memberi fokus // dan tekan kunci 'B' pada keyboard void draw() { if(keyPressed) { if (key == 'b' || key == 'B') { fill(0); } } else { fill(255); } rect(25, 25, 50, 50); }

DeskripsiVariabelsistemkeyselalumemuatnilaidarikunciyangsaatiniditekanpadakeyboard.

Sintakskey


keyPressed keyCode keyPressed() keyReleased()

keyPressed()

Nama:// klik pada gambar untuk memberi fokus, // dan tekan sembarang kunci int value = 0; void draw() { fill(value); rect(25, 25, 50, 50); } void keyPressed() { if(value == 0) { value = 255; } else { value = 0; } }

DeskripsiFungsikeyPressed()dipanggiltiapkalisembarangkunciditekan.Sebagaiaturanumum,tidakadayangdigambardidalamblokkeyPressed().



Sintaksvoid keyPressed() { pernyataan }


keyPressed key keyCode keyReleased()

keyReleased()

Nama:keyReleased()// Klik pada gambar untuk memberi fokus, // dan tekan sembarang kunci int value = 0; void draw() { fill(value); rect(25, 25, 50, 50); } void keyReleased() { if(value == 0) { value = 255; } else { value = 0; } }

DeskripsiFungsikeyReleased()dipanggiltiapkalisebuahkuncidilepaskan.Sebagaiaturanumum,tidakadayangdigambardidalamblokkeyReleased().

Sintaksvoid keyReleased() { pernyataan }


keyPressed key keyCode keyPressed()



[LatihanGR11‐GR12]GR11 Ungkapkansebuahelemenyangtersembunyiuntukmelengkapisebuahgambar

ketikatombolspacebardiklikGR12 Buatlahsebuahlandscapeabstrakresponsifyangdikendalikanolehkeyboard.

Tulislahinstruksisebagaikomentardidalamkode