Lingkungan Pengembangan Processing

IDE (Integrated Development Environment) atau lingkungan pengembangan dari software

Processing diperlihatkan seperti pada Gambar 1. Saat tulisan ini dibuat, versi terbaru yang
dirilis adalah Processing 3.0.1. Ini adalah versi awal dari Processing 3. IDE Processing cukup
mudah dipahami. Tidak terdapat menu-menu yang sifatnya rumit dan sulit untuk dipahami.
Bagian-bagian utama dari IDE Processing adalah sebagai berikut:

Bagian Toolbar adalah bagian dimana tombol-tombol kontrol ditempatkan. Pada bagian
ini, tombol Debug, Step, Continue dan Stop ditempatkan.

IDE processing.png

Gambar 1. IDE Processing 3

Bagian Tabs adalah tempat dimana file yang terdiri dari banyak sketch ditempatkan. Ada
kalanya bagian-bagian tertentu dari program perlu ditulis secara terpisah dari program
utamanya. Program utama dan program pendukung dapat ditulis secara terpisah dengan
sistem multi tab.

Area Text Editor adalah tempat dimana kita akan menuliskan program kita.

Message Area merupakan tempat dimana berbagai pesan dari Processing dikeluarkan,
misalnya terjadi error.

Bagian Console merupakan area tempat ditampilkannya output-output program dalam

bentuk console, misalnya menampilkan hasil perhitungan, data-data berupa numerik dan
string, serta data komunikasi secara serial.

Memulai Pemrograman Pertama

Bukalah program Processing, dan ketikkan sintaks berikut pada Text Editor:
ellipse(50, 52, 90, 90);

Maksud dari skrip tersebut adalah buatlah objek elips dengan titik pusat berada pada 50 piksel
dari kiri, 52 piksel dari atas, lebar elips sebesar 90 piksel dan tinggi elips juga sebesar 90 piksel.
Kliklah tombol Debug ()dan amatilah hasilnya. Jika skrip pemrograman benar, maka akan
tampil jendela baru seperti pada Gambar 2.
gambar 2 pemrograman processing pertama.png

Gambar 2. Tampilan hasil program membuat elips

Jika terjadi kesalahan, misalnya tidak menuliskan tanda semikolon (titik koma) di akhir skrip,
maka akan muncul pesan error pada Message Area, seperti yang diperlihatkan pada Gambar 3.

gambar 3 processing error.png

Gambar 3. Salah satu pesan error : tidak menuliskan tanda semicolon di akhir skrip

Mari kita kembangkan program kita agar menjadi lebih menarik. Ketiklah skrip berikut dan
amatilah hasilnya.
void setup(){
size(500, 300);
smooth();
}
void draw(){
ellipse(mouseX, mouseY, 90, 90);
if (mousePressed) {
fill(200);
}
else {
fill(255);
}
}

Maksud program tersebut adalah sebagai berikut. void setup() adalah bagian dimana kita akan
menuliskan inisiasi awal dari program kita. void setup() akan dieksekusi hanya sekali. Pada
bagian ini, kita akan membuat sebuah layar dengan ukuran 500 x 300 piksel. Fungsi smooth
menampilkan gambar yang halus (anti aliasing).
Selanjutnya, program utama akan dituliskan pada void draw(). Bagian ini adalah berisi
kumpulan skrip yang akan dieksekusi secara terus-menerus, sampai tombol Stop ditekan. Di
dalam fungsi void draw(), kita membuat sebuah objek elips dengan ukuran 90 x 90 piksel.
Karena pengaruh fungsi mouseX dan mouseY, maka posisi elips akan mengikuti posisi mouse.
Jika mause ditekan, maka elips akan berubah warna menjadi abu-abu.. Jika sebaliknya, maka
akan warna elips akan putih. Warna elips dikontrol oleh fungsi fill. Dalam fungsi fill, kita dapat
memasukkan nilai keabuan (dari 0 sampai 255). Nilai 0 akan sepenuhnya menghasilkan warna
hitam, dan 255 menghasilkan putih. Nilai antara 0 dan 255 menghasilkan warna keabuan.
Tekanlah tombol Debug. Amatilah hasilnya. Gerakkanlah mouse dan klik kanan mouse untuk
melihat perubahan warna pada elips.

gambar 4 processing contoh.png

Gambar 4. Contoh tampilan hasil program pada Contoh 2-2

Konversi Hasil Desain Processing

Ada kalanya kita ingin menjalankan sketch tanpa perlu membuka Processing lagi. Atau, kita
ingin membagikan hasil karya kita dengan yang lain. Untuk merealisasikan hal ini, kita dapat
mengeksport hasil kerja kita. Caranya, pilihlah menu File Export Application , atau cukup
menekan tombol Ctrl+Shift+E. Selanjutnya akan muncul jendela Export Options. Pilihlah
sesuai dengan Sistem Operasi yang digunakan, dan selanjutnya tekan tombol Export. Pada
sistem operasi Windows, file yang dihasilkan berformat .exe. File ini secara default akan
diletakkan di \Documents\Processing\NamaFile\versiWindows
Penulisan NamaFile dan versiWindows pada tautan di atas tergantung dari nama file yang kita
tulis, serta versi Windows (32 atau 64-bit).

Gambar 5 Processing konversi.png

Gambar 5. Opsi dalam melakukan eksport sketch

Konsep Piksel
Suatu karya menarik dapat diawali dari sebuah objek yang sederhana. Dengan konsep karya yang
menarik, sebuah objek dapat dipadupadankan dengan objek yang lain. Selanjutnya, objek-objek
ini dapat dibuatkan animasi. Lebih jauh lagi, objek-objek selain dapat dianimasikan, objek-objek
ini dapat berinteraksi dengan lingkungan di luar komputer.
Menggambar pada layar komputer sama halnya dengan menggambar pada kertas. Kita harus
memulai suatu objek dari suatu sudut atau titik tertentu pada bidang kerja. Pada layar komputer,
elemen-elemen terkecil pembentuk bidang kerja dikenal sebagai piksel. Piksel ini dapat
diilustrasikan seperti grid kertas kotak.
Posisi dari tiap-tiap kotak ditentukan oleh koordinat x dan y-nya. Pada Processing, koordinat-x
adalah jarak dari sisi kiri jendela display (Display Window), dan koordinat-y adalah jarak dari
sisi atas jendela display.

konsep piksel.png

Amatilah di atas. Pada Gambar tersebut, piksel (0,0) diawali dari sisi kiri-atas, dan akan berakhir
pada sisi kanan-bawah. Indeks dimulai dari 0, bukan dari 1. Misal, jika kita memiliki layar
berukuran 200 x 300 piksel, maka sudut kiri-atas memiliki koordinat (0,0), dan sudut kananbawah memiliki koordinat (199 x 299). Pada ukuran 200 x 300 piksel, nilai 200 menyatakan
Lebar layar, sedangkan nilai 300 menyatakan Tinggi layar.

Menampilkan Jendela Kerja

Jendela kerja dapat dibentuk dengan fungsi size(). Fungsi ini terdiri dari dua masukan, yaitu nilai
piksel untuk lebar dan nilai piksel untuk tinggi.
Membuat Jendela Kerja
1

size(80,100);

Processing jendela kerja.png

Menggambar Titik
Titik dapat digambar menggunakan fungsi point(). Masukkan fungsi ini adalah nilai koodinat.
Dengan demikian, fungsi point() hanya berukuran 1 piksel.
size(200, 100);
point(50, 60);

Menggambar Titik

Processing menggambar titik.png

Menggambar banyak titik

size(200,
point(50,
point(50,
point(80,
point(80,

100);
50);
80);
50);
80);

Processing menggambar banyak titik.png

Menggambar Objek-objek Dasar

Beberapa objek dasar yang dapat dibentuk diantaranya garis, elips, kotak, segitiga dan busur.
Amatilah rangkumannya seperti pada Tabel berikut.

Processing menggambar objek dasar.png

Contoh-contoh Pemrograman Objek Dasar

Menggambar garis
Menggambar Garis
size(250, 150);
line(10, 10, 200, 100);

Processing Menggambar Garis.png

Processing Menggambar dua Garis

1 size(250, 150);
2 line(10, 10, 200, 100);
3 line(200, 100, 230, 50);

Processing Menggambar dua Garis.png

Menggambar Gabungan Objek-objek Dasar

Gabungan objek dasar
size(280, 180);
rect(10, 10, 200, 50);
quad(10, 60, 210, 60, 260, 110, 60, 110);
rect(60, 110, 200, 50);
quad(10, 60, 60, 110, 60, 160, 10, 110);
line(10, 10, 60, 110);
triangle(210, 10, 260, 110, 210, 60);

Processing gabungan objek dasar.png

processing Gabungan ellips

size (400, 200);
ellipse(200, -150, 480, 480);
ellipse(200, 130, 80, 80);
ellipse(230, 150, 30, 30);
ellipse(300, 180, 121, 121);

Processing gabungan objek ellips.png

Amatilah bahwa titik pusat atau titik awal dari suatu objek dapat dibuat di luar koordinat layar
tanpa mengalami error. Demikian pula ketika ukuran hasil objek melebihi ukuran layar. Amati
pula bahwa objek yang dibuat belakangan (skrip berada lebih di bawah) akan menumpuk objek
sebelumnya (skrip berada lebih di atas). Dengan kata lain, komputer akan mengeksekusi skrip
dari atas dan berurutan akan bergerak ke bawah.
Processing Menggambar Busur

size(620, 140);
arc(15, 60, 100, 100, 0, HALF_PI);
arc(150, 60, 100, 100, 0, PI + HALF_PI);
arc(270, 60, 100, 100, HALF_PI, 3.14);
arc(360, 60, 100, 100, HALF_PI, 3.14, PIE);
arc(450, 60, 100, 100, HALF_PI, 3.14, CHORD);
arc(500, 60, 100, 100, HALF_PI, 3.14, OPEN);
arc(550, 60, 100, 100, 1.57, 7);

Processing menggambar busur.png

Menggambar busur mungkin menjadi lebih rumit daripada objek dasar yang lain. Dua masukan
pertama dari fungsi ellipse() menunjukkan posisi pusat elips. Masukan ketiga dan keempat
menunjukkan lebar dan tinggi busur. Masukkan kelima dan keenam menandakan sudut dimulai
dan diakhirinya perputaran busur. Sudut ini memiliki satuan radian, dan bukan dalam
derajat. Sudut radian bergerak dari 0 sampai 2, dengan nilai = 3,14. Nilai-nilai PI,
QUARTER_PI, HALF_PI, dan TWO_PI dapat digunakan untuk menggantikan satuan 180o,
45o, 90o, dan 360o.
Masukan fungsi arc() yang terakhir adalah mode busur. Mode PIE akan membentuk juring yang
melalui titik pusat busur. Mode CORD akan menghubungkan titik-titik busur secara langsung
tanpa melalui pusat elips. Mode OPEN sama dengan CORD, namun tidak terdapat garis yang
menghubungkan titik-titik busur.
Selain dalam radian, busur juga dapat dibuat dalam derajat, namun perlu dikonversi
menggunakan fungsi radians().
Processing Bususr Dalam Derajat
size(340, 120);
arc(15, 60, 100, 100, radians(0), radians(90));
arc(150, 60, 100, 100, radians(45), radians(180));
arc(270, 60, 100, 100, radians(180), radians(450));

Processing busur dalam derajat.png

Membentuk Berbagai Jenis Objek

Selain bentuk-bentuk dasar yang telah diuraikan sebelumnya, kita juga dapat membuat objek kita
sendiri menggunakan fungsi vertex(). Awalilah pembuatan objek dengan fungsi beginShape(),
dan akhiri dengan fungsi endShape(). Amatilah contoh berikut:
Menggunakan Fungsi Vertex
size(220, 360);
fill(255, 0, 0);
strokeWeight(5);
beginShape();
vertex(20, 300);
vertex(20, 70);
vertex(150, 70);
vertex(150, 30);
vertex(200, 90);
vertex(150, 150);
vertex(150, 110);
vertex(60, 110);
vertex(60, 300);
vertex(20, 300);
endShape();

Processing menggunakan fungsi vertex.png

Mengatur Properti

Beberapa fungsi seperti smooth(), strokeWeight(), strokeJoin(), dan strokeCap() dapat

digunakan untuk mengatur properti dari objek kita.
Fungsi smooth()

Fungsi smooth() dapat digunakan untuk memperhalus sudut-sudut objek. Secara default, fungsi
ini akan diaktifkan. Untuk menonaktifkan, gunakanlah fungsi noSmooth(). Berbeda dengan
versi sebelumnya, fungsi smooth() pada Processing 3 hanya dideklarasikan sekali saja di awal
program. Fungsi smooth() dan noSmooth() tidak dapat dideklarasikan secara bersamaan di dalam
satu sketch.
Contoh: Menggunakan fungsi smooth()
size(160, 120);
smooth();
ellipse(80, 60, 90, 90);

Contoh: Menggunakan fungsi noSmooth()

size(160, 120);
noSmooth();
ellipse(80, 60, 90, 90);

Processing smooth no smooth.png

Fungsi strokeWeight()

Fungsi ini berguna untuk mengatur ketebalan garis. Secara default, tebal garis dari objek yang
dih=gambar adalah sebesar 1 piksel. Dengan menggunakan fungsi ini, kita dapat mengatur
ketebalan yang kita inginkan.

Contoh: Menggunakan fungsi strokeWeight()

size(460, 120);
strokeWeight(1);

ellipse(60, 60, 80, 80);

strokeWeight(5);
ellipse(170, 60, 80, 80);
strokeWeight(10);
ellipse(280, 60, 80, 80);
strokeWeight(15);
ellipse(390, 60, 80, 80);

Processing Menggunakan fungsi strokeWeight().png

Fungsi strokeJoin()

Fungsi ini digunakan untuk mengatur sudut pertemuan dari dua buah garis. Terdapat tiga jenis
mode, yaitu MITER, BEVEL dan ROUND. Amatilah perbedaannya dengan menggunakan
program berikut:
Contoh: Menggunakan fungsi strokeJoin()
size(420, 170);
strokeWeight(15);
strokeJoin(MITER);
rect(60, 40, 80, 80);
strokeJoin(BEVEL);
rect(170, 40, 80, 80);
strokeJoin(ROUND);
rect(280, 40, 80, 80);

Processing Menggunakan fungsi strokeJoin().png

Fungsi strokeCap()

Fungsi ini digunakan untuk mengatur sudut akhir dari suatu garis. Terdapat tiga jenis mode, yaitu
SUARE, PROJECT dan ROUND. Amatilah perbedaannya dengan menggunakan program
berikut:
Contoh: Menggunakan fungsi strokeCap()
size(230, 150);
strokeWeight(15);
strokeCap(ROUND);
line(40, 30, 80, 100);
strokeCap(SQUARE);
line(90, 30, 130, 100);
strokeCap(PROJECT);
line(140, 30, 180, 100);

Processing Menggunakan fungsi strokeCap().png

Memainkan Warna

Terdapat beberapa fungsi yang dapat digunakan untuk memainkan warna pada objek,
diantaranya stroke(), fill(), dan background().

Fungsi stroke()

Fungsi ini berguna untuk mengatur warna garis dari objek yang akan digambar. Gunakanlah
fungsi noStroke() untuk menonaktifkan fungsi ini.
Contoh: Menggunakan fungsi stroke()
size(440, 120);
strokeWeight(10);
// dalam skala keabuan
stroke(100);
rect(30, 30, 60, 60);
// dalam format RGB
stroke(200, 50, 80);
rect(110, 30, 60, 60);
// dalam format heksa
stroke(#292CD3);
rect(190, 30, 60, 60);
// penulisan lain format heksa
stroke(0xFFD152BA);
rect(270, 30, 60, 60);
// tanpa stroke
noStroke();
rect(350, 30, 60, 60);

Processing Menggunakan fungsi stroke().png

Fungsi fill()

Jika fungsi stroke()Fungsi ini digunakan untuk memberi warna pada garis objek kita, maka
fungsi fill() akan mewarnai bagian dalam dari objek kita. Metode pemberian warna pada fungsi
fill() sama dengan fungsi stroke().
Contoh: Menggunakan fungsi fill() skala keabuan
size(380, 270);
noStroke();
fill(150);
ellipse(170, -30, 210, 210);
fill(250);
ellipse(0, 270, 480, 480);
fill(80);
ellipse(282, 115, 160, 160);

Processing Menggunakan fungsi fill() skala keabuan.png

Nilai masukan dari fungsi fill() dapat berupa warna keabuan (0 sampai 255), atau menggunakan
format RGB maupun HSV. Kombinasi dari fungsi fill() strokeWeight() dan stroke() juga dapat
dilakukan untuk menghasilkan objek yang bervariasi. Amatilah contoh berikut:
Contoh: Menggunakan fungsi fill() format RGB

ize(400, 370);
smooth();
stroke(50);
strokeWeight(8);
fill(255, 80, 120);
ellipse(170, 180, 300, 300);
fill(217, 127, 229);
ellipse(170, 180, 200, 200);
fill(255, 200, 100);
ellipse(70, 60, 80, 80);
fill(60, 150, 200);
ellipse(300, 200, 150, 150);
fill(210, 240, 24);
ellipse(100, 300, 100, 100);

Processing Menggunakan fungsi fill() format RGB.png

Untuk memudahkan dalam pemilihan warna, gunakanlah jendela Color Selector. Carilah di Tools
Color Selector

Processing Color Selector.png

Fungsi background()

Jika fungsi background()Fungsi ini digunakan untuk memberi warna latar (background) dari
layar kita. Cara pemberian warna juga serupa dengan fungsi fill() atau stroke(). Amatilah contoh
berikut:
Contoh: Menggunakan fungsi background()
size(380, 270);
background(255, 204, 0);
noStroke();
fill(180);
ellipse(170, -30, 210, 210);
fill(250);
ellipse(0, 270, 480, 480);
fill(40);
ellipse(282, 115, 160, 160);

Processing Menggunakan fungsi background().png

Variabel
Sebuah variabel akan menyimpan suatu nilai bertipe tertentu di dalam memori, dan selanjutnya
nilai ini dapat dipergunakan di bagian lain di dalam program. Salah satu keuntungan
menggunakan variabel adalah efisiensi dalam penulisan skrip program. Dengan menggunakan
variabel, nilai suatu data dapat diubah (di-update) sekali tanpa harus mengubah seluruh data
yang sama di dalam program tersebut. Selain itu, logika pemrograman dapat dibentuk dengan
lebih baik jika menggunakan variabel.
Contoh : Menggunakan variabel
size(480, 200);
int x = 60;
int y = 100;
int d = 90;
ellipse(x, y, d, d+10);
ellipse(x+120, y, d, d+20);
ellipse(x+240, y, d, d+40);
ellipse(x+360, y, d, d+60);

menggunakan Variabel.png

Pada contoh di atas, tipe data yang digunakan adalah int (integer). Tipe data ini digunakan
untuk mendeklarasikan nilai bulat (tanpa mengandung koma). Terdapat berbagai tipe data yang
lain, dan dirangkum pada berikut:

Processing Tabel tipe data.png

Pengulangan

Pengulangan akan mempermudah pekerjaan, terutam jika kita harus menulis skrip program yang
serupa satu-persatu. Pada Processing, pengulangan (iterasi) yang dapat dimanfaatkan adalah
bentuk for dan while.

Fungsi for
Fungsi for memiliki sintaks:
for (insialisasi; cek; perbarui) {
pernyataan
}

Ilustrasi fungsi for ditunjukkan pada gambar berikut:

Processing Diagram Alir kalang for.png

Contoh: Menggunakan fungsi for [1]

size(480, 120);
strokeWeight(5);
for (int i = 20; i < 400; i += 15) {
line(i, 40, i + 60, 80);
}

Processing Menggunakan kalang for [1].png

Contoh : Menggunakan fungsi for [2]

size(480, 120);
strokeWeight(2);
for (int i = 20; i < 600; i += 20) {
line(i, 0, i - i/5, 80);
line(i - i/5, 80, i*1.2, 120);
}

Processing Menggunakan kalang for [2].png

Fungsi for juga bisa dibuat bersarang (nested for). Artinya, terdapat for di dalam for. Iterasi
akan bertambah sesuai dengan ukuran tiap-tiap for.
Contoh: Menggunakan fungsi for bersarang
1
2
3
4
5
6
7
8
9
10

size(480, 120);
noStroke();
for (int y = 0; y <= height; y += 40) {
for (int x = 0; x <= width; x += 40) {
fill(220);
ellipse(x, y, 40, 40);
fill(#FA0844);
ellipse(x+20, y+20, 40, 40);
}
}

Processing Menggunakan kalang for bersarang.png

Fungsi width dan height pada skrip di atas masing-masing menyatakan lebar dan tinggi dari
Display Window kita. dengan demikian, kita tidak perlu mengetikkan berupa nilai angka secara
eksplisit.

Fungsi while
Fungsi while juga merupakan bentuk perulangan, dan memiliki sintaks:
while (ekspresi) {
pernyataan
}

Selagi ekspresi bernilai benar, maka pernyataan di dalam kalang while akan dieksesksi terusmenerus. Ilustrasi fungsi while ditunjukkan pada gambar berikut:
Processing Diagram Alir kalang while.png

Contoh: Menggunakan fungsi while

size(300, 300);
strokeWeight(2);
int i = 0;

while (i <= 0.4*height){

line(0, i, i, i+i*1.5);
line(i, i+i*1.5, i+i*1.5, 0);
i = i + 10;
}

Processing contoh menggunakan while.png

Fungsi
Keberadaan fungsi sangat penting terutama ketika terdapat bagian-bagian dari program yang
sering dipanggil, misalnya rumus matematika, atau pembuatan suatu objek yang rumit, yang
dipanggil berkali-kali.
Sebelum memahami fungsi, kita akan membahas void setup() dan void draw(). Mengapa?
Sebab kita akan menuliskan fungsi ini di luar kedua void ini.

void setup()
void setup() adalah fungsi yang akan dieksekusi hanya sekali oleh program. Pada umumnya,
skrip yang dimasukkan di dalam void setup() adalah fungsi size() (jika tidak, maka Display
Window akan berukuran 100 x 100 piksel), mengatur warna background, mengatur warna garis,
atau memuati gambar maupun huruf. Jika berkomunikasi secara serial dengan peralatan lain di
luar komputer, kita dapat mengatur kecepatan serial di dalam fungsi ini.

void draw()

void draw() adalah fungsi yang akan dieksekusi berkali-kali oleh program, dan baru akan
berhenti ketika Display Window ditutup atau tombol Stop ditekan. Program akan diesekusi dari
skrip paling atas, melewati void setup() dan selanjutnya menuju void draw(). Di dalam void
draw(), program akan berulang. Satu perjalanan dalam mengeksekusi program di dalam void
draw dikenal dengan istilah frame. Secara default, Processing akan mengeksekusi 60 frame
perdetik. Namun, kecepatan ini dapat diatur.
Amatilah contoh program berikut:
Contoh: Menggunakan void setup() dan void draw()
void setup(){
println("Ini dieksekusi hanya sekali");
}
void draw(){
print("Ini dieksekusi berkali-kali: ");
println(frameCount);
}

Lihatlah hasilnya pada jendela Console:

Ini
Ini
Ini
Ini
Ini
Ini
Ini
Ini dieksekusi

dieksekusi
dieksekusi
dieksekusi
dieksekusi
dieksekusi
dieksekusi
dieksekusi
berkali-kali: 7

hanya
berkali-kali:
berkali-kali:
berkali-kali:
berkali-kali:
berkali-kali:
berkali-kali:

sekali
1
2
3
4
5
6

Fungsi print dan println digunakan untuk pengiriman data secara serial. Fungsi ini juga berguna
untuk menampilkan data melalui jendela Console. Fungsi print dan println adalah serupa, namun
println akan menghasilkan baris baru.
Komputer mengeksekusi setiap baris program yang ditulis. Ketika menemui bagian yang
memiliki fungsi, maka komputer akan mencari bagian yang mendefinisikan fungsi tersebut, dan
selanjutnya akan kembali lagi ke bagian sebelumnya.
Amatilah contoh berikut. Pada contoh ini, kita akan mencari nilai dari diameter lingkaran jika
yang diketahui adalah luas dari lingkaran tersebut. Rumus luas lingkaran adalah
L=(1/4)*pi*(D^2). Dengan demikian, diameter lingkaran dapat dicari dengan rumus D =
2*akar(L/pi).

Contoh: Mencari nilai diameter lingkaran jika diketahui luasannya

void setup(){
println("Mencari nilai diameter dari input luas...");
cariDiameter(100);
cariDiameter(200);
}
void cariDiameter(int luasLingkaran){
float d = 2*sqrt(luasLingkaran/3.14);
println("Diameter lingkaran = " + d);
}

Amatilah hasilnya pada jendela Console, seperti berikut ini:

Mencari
nilai
diameter
Diameter
lingkaran
Diameter lingkaran = 15.961738

dari

input
=

luas...
11.286653

Adakalanya kita menginginkan agar fungsi kita memiliki nilai output tertentu. Fungsi void
adalah fungsi yang tidak memiliki nilai balik. Dengan kata lain, fungsi void tidak memiliki nilai
output yang dapat disimpan dalam suatu variabel tertentu. Mari kita modifikasi program kita agar
nilai dari diameter lingkaran dapat kita simpan, dan selanjutnya dapat kita pergunakan untuk
menggambar lingkaran. Amatilah contoh berikut:
Contoh: Fungsi dengan nilai balik
float diameter;
void setup(){
size(300, 200);
diameter = cariDiameter(5000);
ellipse(80, 100, diameter, diameter);

diameter = cariDiameter(10000);
ellipse(200, 100, diameter, diameter);

float cariDiameter(int luasLingkaran){

float d = 2*sqrt(luasLingkaran/3.14);
return d;
}

Processing Fungsi dengan nilai balik.png

Pada contoh di atas, kita menggunakan fungsi return untuk mendapatkan nilai balik dari fungsi
kita, pada kasus ini adalah nilai d (diameter lingkaran). Kata void kita hilangkan, dan diganti
dengan tipe data apa yang kita inginkan (dalam hal ini float).
Contoh: Animasi lingkaran berdasarkan perbedaan diameter
float diameter = 0;
int luas = 0;
void setup(){
size(400, 300);
strokeWeight(3);
}
void draw(){
background(204);
luas = luas + 2000;
diameter = cariDiameter(luas);
if (luas >= 40000){
luas = 0;
}
ellipse(200, 150, diameter, diameter);
delay(200);
}
float cariDiameter(int luasLingkaran){
float d = 2*sqrt(luasLingkaran/3.14);
return d;
}

Processing Animasi lingkaran berdasarkan perbedaan diameter.png

Contoh: Membuat karakter ulat menggunakan fungsi

void setup(){
size(580, 360);
}
void draw(){
background(204);
ulat(0, 0);
ulat(100, 150);
ulat(300, 40);
}
void ulat(int x, int y){
pushMatrix();
translate(x, y);
//segmen badan 1
fill (#03480F);
ellipse(200, 80, 70, 30);
//segmen badan 2
fill (#109026);
ellipse(180, 80, 70, 60);
//segmen badan 3
fill (#20B239);
ellipse(160, 100, 70, 100);
//segmen badan 4
fill (#109026);
ellipse(120, 120, 80, 80);
// segmen badan 5
fill (#20B239);
ellipse(100, 100, 100, 120);
//muka
fill (#3AD627);
ellipse(90, 75, 110, 80);
//mata kanan
fill(0);
ellipse(100, 70, 15, 20);
//mata kiri
ellipse(70, 65, 15, 20);
popMatrix();
}

Membuat karakter ulat menggunakan fungsi.png

Pada program di atas, karakter ulat dimunculkan sebanyak tiga kali dengan posisi yang berbedabeda. Jika kita mengetikkan program yang sama berkali-kali untuk membuat karakter ulat, maka
skrip program kita menjadi sangat panjang. Hal ini tentulah tidak efisien. Oleh karena itu,
penggunaan fungsi menjadi sangat penting untuk kasus ini.
Fungsi translate() pada program di atas digunakan untuk menggeser objek relatif terhadap posisi
(0, 0) pada Display Window. Dengan menggunakan fungsi ini, kita dapat menggeser-geser
posisi karakter yang kita buat secara utuh.
Pada pemrograman berikutnya, kita akan menggunakan fungsi scale(). Dengan menggunakan
fungsi ini, kita dapat memperbesar atau memperkecil karakter yang kita buat. Kita lakukan
modifikasi pada input fungsi, yaitu dari dua input menjadi tiga input. Amatilah program berikut:
Contoh: Menggunakan fungsi scale()
void setup(){
size(580, 360);
}
void draw(){
background(204);
ulat(0, 0, 1.0);
ulat(100, 150, 1.2);
ulat(300, 40, 0.5);
ulat(350, 90, 0.7);
}

void ulat(int x, int y, float s){

pushMatrix();
translate(x, y);
scale(s);
//segmen badan 1
fill (#03480F);
ellipse(200, 80, 70, 30);
//segmen badan 2
fill (#109026);
ellipse(180, 80, 70, 60);
//segmen badan 3
fill (#20B239);
ellipse(160, 100, 70, 100);
//segmen badan 4
fill (#109026);
ellipse(120, 120, 80, 80);
// segmen badan 5
fill (#20B239);
ellipse(100, 100, 100, 120);
//muka
fill (#3AD627);
ellipse(90, 75, 110, 80);
//mata kanan
fill(0);
ellipse(100, 70, 15, 20);
//mata kiri
ellipse(70, 65, 15, 20);
popMatrix();
}

Membuat karakter ulat menggunakan fungsi scale.png

Memasukkan Gambar
Processing dilengkapi dengan fasilitas yang memungkinkan kita dapat memasukkan gambar ke
Display Window. Terdapat tiga langkah yang dapat dilakukan, yaitu sebagai berikut:
1. Import gambar ke folder data sketch
2. Buat variabel PImage untuk menyimpan gambar
3. Load gambar ke dalam variabel dengan fungsi loadImage()

Import File Gambar

Kliklah Sketch Add File , kemudian pilih gambar yang ingin dimasukkan ke dalam sketch.
Setelah memilih, tekanlah tombol Open. Selanjutnya, layar akan kembali ke jendela awal.

Processing Import Gambar.png

Menyertakan File Gambar dalam Skrip Program

Setelah langkah pertama selesai dilakukan, maka langkah kedua dan ketiga dilakukan melalui
skrip program. Amatilah contoh skrip program berikut:
Contoh: Menampilkan Gambar
PImage gambar;
void setup(){
size(740, 380);
gambar = loadImage("jagannath.jpg");

}
void draw(){
image(gambar, 0, 0);
}

Processing Menampilkan gambar tunggal.png

Contoh berikut digunakan untuk menampilkan gambar lebih dari satu pada jendela Display:
PImage gambar1;
PImage gambar2;

Contoh: Menampilkan Gambar Lebih dari Satu

void setup(){
size(850, 330);
gambar1 = loadImage("Koala.jpg");
gambar2 = loadImage("Penguins.jpg");
}
void draw(){
image(gambar1, 10, 10);
image(gambar2, 430, 10);
}

Processing Menampilkan dua gambar.png

Menampilkan Tulisan
Kita dapat menambahkan tulisan pada Display Window kita. Langkah pertama yang harus
dilakukan adalah melakukan konversi salah satu jenis font yang ada di komputer kita menjadi
berformat VLW (Video Linkwell Document). Konversi ini dilakukan untuk mengubah tulisan
menjadi gambar. Untuk melakukan hal ini, carilah Tools Create Fonts.
Selanjutnya, akan muncul jendela Create Font. Pilihlah salah satu font yang ingin digunakan.
Perhatikanlah menentukan ukuran font yang akan digunakan. Semakin besar ukuran tulisan,
maka akan semakin besar pula ukuran file dalam format VLW.
Setelah melakukan konversi, buatlah sebuah variabel PFont yang akan digunakan untuk
menyimpan font kita. Muati (load) font ke variabel menggunakan fungsi loadFont().
Gunakanlah fungsi textFont() untuk melakukan seting terhadap font.

Processing Create Font.png

Selanjutnya, ketiklah contoh skrip program berikut dan amatilah hasilnya:

Contoh: Menampilkan Tulisan
PFont tulisan;
void setup() {
size(500, 150);
smooth();
tulisan = loadFont("AGaramondPro-Italic-48.vlw");
textFont(tulisan);
}
void draw() {
background(0);
textSize(36);
text("Robotics and Embedded Systems", 25, 60);
textSize(18);

text("Robotics and Embedded Systems", 27, 90);

Processing Menampilkan Tulisan.png

Memainkan Musik
Saat ini, Processing telah di support oleh berbagai developer dengan hadirnya berbagai pustaka
(library). Dengan adanya berbagai pustaka ini, pemrograman Processing akan menjadi lebih
menyenangkan. Pada tutorial ini, kita akan memainkan musik dan menampilkan muka
gelombang (waveform) dari musik tersebut. Pustaka yang akan kita gunakan adalah minim. Cek
informasi penggunaan pustaka ini pada tautan berikut.
Pertama, kita harus mengimpor pustaka yang diperlukan, yaitu minim. Bukalah Processing dan
carilah pada Sketch Import Library... Add Library... Minim. Tunggulah beberapa
saat untuk menginstal file tersebut secara online. Sudah tentu, kita membutuhkan koneksi
internet.
Kemudian, pilihlah lagu atau voice yang ingin diputar dengan cara memilih Sketch Add
File Lokasi lagu yang diinginkan
Jika sudah, import-lah pustaka minim kita, dengan memilih Sketch Import Library...
Minim. Jika segala sesuatunya lancar, maka akan muncul import ddf.minim.*; pada bagian atas
layar sketch. Kemudian, ketiklah skrip berikut:
Contoh: Memainkan lagu
import ddf.minim.*;
AudioPlayer lagu;
Minim minim;
void setup()
{
minim = new Minim(this);
lagu = minim.loadFile("Gagal Bersembunyi - The Rain.mp3");
lagu.play();
}
void draw()
{
}

void stop()
{
lagu.close();
minim.stop();
super.stop();
}

Jangan lupa untuk menuliskan judul lagu yang benar pada fungsi minim.loadFile. Jika di
Run, maka lagu akan dimaikan. Menarik, bukan? :)

Memainkan Musik dan Menampilkan Muka Gelombang

Mari kita modifikasi program di atas. Kita akan tambahkan muka gelombang (waveform) sebagai
efek visual agar tampilan menjadi menarik. Ketiklah skrip berikut:
Contoh: Memainkan lagu dan menampilkan waveform-nya
import ddf.minim.*;
AudioPlayer lagu;
Minim minim;
void setup()
{
size(500, 200);
minim = new Minim(this);
lagu = minim.loadFile("Gagal Bersembunyi - The Rain.mp3");
lagu.play();
}
void draw()
{
background(0);
stroke(255);
for(int i = 0; i < lagu.bufferSize() - 1; i++)
{
line(i, 100 + lagu.right.get(i)*50, i+1, 100 + lagu.right.get(i+1)*50);
}
}
void stop()
{
lagu.close();
minim.stop();
super.stop();
}

Processing-menampilkan waveform.png

Membuat Animasi Pemantulan Bola

Pada pertemuan ini, kita akan membuat animasi pemantulan bola. Bukalah program Processing
dan ketiklah skrip di bawah ini. Penjelasan setiap baris telah dituliskan di dalam program.
Contoh: Animasi Pantulan Bola
//inisialisasi posisi-x
int nilaiX = 40;
//inisialisasi posisi-y
int nilaiY = 40;
//inisialisasi arah-x
int arahX = 3;
//inisialisasi arah-y
int arahY = 3;
void setup()
{
// buat layar 500 x 300 px
size(500, 300);
}
void draw ()
{
// hapus gambar lama dan ganti dgn yg baru
background(0);
// buat lingkaran berwarna hijau
fill(0, 255, 0);

// lingkaran tanpa garis

noStroke();
// gambar lingkaran
ellipse(nilaiX, nilaiY, 40, 40);
// update posisi baru-x
nilaiX = nilaiX + arahX;
// cek jika bola membentur dinding
if (nilaiX>width-20 || nilaiX<20)
{
// jika membentur, balikkan arah
arahX = arahX*-1;
}
// update posisi baru-y
nilaiY = nilaiY + arahY;
// cek jika bola membentur dinding
if (nilaiY>height-20 || nilaiY<20)
{
// jika membentur, balikkan arah
arahY = arahY*-1;
}

kanan-kiri
x

atas-bawah
y

Processing animasi Bola.png

Komunikasi Serial Processing-Arduino

Processing dan Arduino berkomunikasi secara Serial memalui port USB. Ketika papan Arduino
telah dikoneksikan dengan komputer melalui kabel USB, maka komputer akan mendeteksi
keberadaan papan Arduino dan memberinya alamat tertentu. Papan yang sama umumnya akan
memiliki alamat port yang sama jika dikoneksikan berulang-kali.
Langkah pertama untuk menghubungkan Processing dan Arduino adalah mengetahui port COM
berapa yang digunakan. Caranya, hubungkanlah papan Arduino ke komputer. Bukalah
Processing dan lakukan import pustaka serial. Sintaks import processing.serial.*; akan secara
otomatis ditambahkan. Ketiklah skrip untuk testing berikut:

Processing - Import Serial.png

Contoh: Melacak serial port

import processing.serial.*;
Serial portKu;
void setup()
{
size(200,200);
println(Serial.list());
}

Maka, akan diperoleh contoh hasil berikut pada jendela konsol:

COM1 COM3 COM29 COM33
Hasil yang ditampilkan pada komputer Anda mungkin berbeda, tergantung nomer port yang
digunakan. Pada komputer penulis, Port Arduino yang digunakan adalah port pada urutan
keempat, yaitu COM33.
Mengirim Data String dari Arduino ke Processing

Bukalah IDE Arduino, lalu ketikkan skrip berikut:

Contoh: Kode Arduino Mengirim String

void setup()
{
Serial.begin(9600);
}
void loop()
{
Serial.println("Hallo Dunia!!!");
delay(200);
}

Pada sisi Processing, ketiklah skrip berikut:

Contoh: Kode Processing - Menerima String
import processing.serial.*;
Serial portSerial;
String stringKu;
void setup(){
String namaPort = Serial.list()[3];
portSerial = new Serial(this, namaPort, 9600);
}
void draw()
{
if ( portSerial.available() > 0)
{
stringKu = portSerial.readStringUntil('\n');
}
println(stringKu);
delay(100);
}

Pada contoh di atas, skrip String namaPort = Serial.list()[3] menandakan bahwa indeks port
yang digunakan adalah port keempat. Mengapa demikian? Amatilah hasil pemrograman
sebelumnya, yaitu sebagai berikut:
COM1 COM3 COM29 COM33
Bahasa Java memulai indeks dari 0. Port COM1 memiliki indeks 0, COM3 memiliki indeks 1,
COM29 memiliki indeks 2, dan COM33 memiliki indeks 3. Karena port yang digunakan Penulis
adalah port COM33, maka indeks yang digunakan adalah 3, seperti yang tertulis pada skrip
String namaPort = Serial.list()[3].
Jika kita mengetahui dengan pasti nomer port Com yang digunakan, kita dapat menuliskan
secara langsung nomer yang digunakan. Amatilah contohnya, sebagai berikut:

Contoh: Kode Processing Menulis Langsung Port COM

import processing.serial.*;
Serial portSerial;
String stringKu;
void setup(){

portSerial = new Serial(this, "COM33", 9600);

}
void draw()
{
if ( portSerial.available() > 0)
{
stringKu = portSerial.readStringUntil('\n');
}
println(stringKu);
delay(100);
}

Mengirim Data dari Processing ke Arduino

Setelah berhasil mengirim data dari Arduino ke Processing, selanjutnya kita balikkan arah
komunikasi. Kita akan mengirim data dari Processing ke Arduino.
Contoh: Kode Arduino Menerima Data
char val;
int ledPin = 13;
void setup() {
pinMode(ledPin, OUTPUT);
Serial.begin(9600);
}
void loop() {
if (Serial.available())
{
val = Serial.read();
}
if (val == '1')
{
digitalWrite(ledPin, HIGH);
} else {
digitalWrite(ledPin, LOW);
}
delay(10);
}

Pada Processing, ketiklah skrip berikut:

Contoh: Kode Processing Mengirim Data
import processing.serial.*;
Serial portSerial;
void setup(){
size(200,200);
portSerial = new Serial(this, "COM33", 9600);
}
void draw() {
background(204);
if (mousePressed == true)
{
portSerial.write('1');
background(255, 0, 0);
} else

{
portSerial.write('0');
}

Tekanlah jendela display menggunakan mouse. Jika ditekan, layar akan berwarna merah dan
LED pada pin 13 akan menyala.
Mengatur Objek Melalui Arduino

Untuk dapat mengatur objek pada Processing melalui Arduino, tipe data yang diterima
Processing haruslah sesuai, misalnya bertipe data int atau float. Kita tidak dapat mengatur objek
jika tipe data yang dikirmkan berupa string. Sintaks print atau println pada Arduino akan
mengirim data ke Processing dalam format ASCII. Format ini tidak cocok jika langsung diambil
tanpa melakukan konversi terlebih dahulu.
Selain print atau println, kita dapat menggunakan fungsi write. Fungsi write akan mengirim
data dalam format byte. Byte yang diterima selanjutnya akan diubah menjadi format int.
Amatilah contoh berikut ini.
Tempatkanlah sebuah potensiometer di pin A0. Pada Arduino, ketiklah skrip berikut:

Contoh: Kode Arduino Mengirim Data Sensor ke Processing

const int analogInPin = A0;
int nilaiSensor = 0;
int nilaiOutput = 0;
void setup() {
Serial.begin(9600);
}
void loop() {
nilaiSensor = analogRead(analogInPin);
nilaiOutput = map(nilaiSensor, 0, 1023, 0, 255);
Serial.write(nilaiOutput);
delay(30);
}

Pada Processing, ketiklah skrip berikut dan amatilah hasilnya pada jendela konsol (ingat,
sesuikan dengan nomer port COM Anda) :
Contoh: Kode Processing Menerima Data Sensor dari Arduino
import processing.serial.*;
Serial portKu;
void setup(){
portKu = new Serial(this, "COM33", 9600);
}
void draw(){

while (portKu.available() > 0) {

int inByte = portKu.read();
println(inByte);
}
}

Selain mengirim secara byte, kita juga dapat mengirim menggunakan format ASCII
menggunakan fungsi println. Mari kita ubah program Arduino dan Processing kita dan
tampilkan grafik hasil pembacaan sensor di pin A0.

Contoh: Kode Arduino Mengirim Data untuk Grafik

const int analogInPin = A0;
int sensorValue = 0;
void setup() {
Serial.begin(9600);
}
void loop() {
sensorValue = analogRead(analogInPin);
Serial.println(sensorValue);
delay(30);
}

Pada Processing, ketiklah skrip berikut:

Contoh: Kode Processing Menerima Data dan Menambilkan Grafik
import processing.serial.*;
Serial portSerial;
int xPos = 1;
float inByte = 0;
void setup () {
size(400, 300);
portSerial = new Serial(this, "COM33", 9600);
portSerial.bufferUntil('\n');
background(0);
}
void draw () {
stroke(127, 34, 255);
line(xPos, height, xPos, height - inByte);
if (xPos >= width) {
xPos = 0;
background(0);
} else {
xPos++;
}
delay(10);
}
void serialEvent (Serial myPort) {
String inString = myPort.readStringUntil('\n');
if (inString != null) {
inString = trim(inString);

inByte = float(inString);
println(inByte);
inByte = map(inByte, 0, 1023, 0, height);

Processing - Menampilkan Grafik.png

Sekarang, mari kita buat objek elips dengan diameter yang dapat diatur sesui dengan nilai
putaran potensiometer yang dibaca oleh Arduino. Letakkanlah potensiometer di pin A0, dan
ketiklah sintaks berikut:
Contoh: Kode Arduino Mengirim Data untuk Mengatur Ellips
const int analogInPin = A0;
int nilaiSensor = 0;
int nilaiOutput = 0;
void setup() {
Serial.begin(9600);
}
void loop() {
nilaiSensor = analogRead(analogInPin);
nilaiOutput = map(nilaiSensor, 0, 1023, 0, 255);
Serial.write(nilaiOutput);
delay(30);
}

Pada Processing, ketiklah skrip berikut:

Contoh: Kode Processing Menerima data untuk mengatur elips

import processing.serial.*;
Serial portKu;
int inByte;
void setup(){
size(400, 400);
portKu = new Serial(this, "COM33", 9600);
}
void draw(){
background(204);
while (portKu.available() > 0) {
inByte = portKu.read();
println(inByte);
}
//atur elips sesuai nilai sensor
ellipse(200, 200, inByte, inByte);
delay(100);
}

Processing - Mengatur Diameter Ellips.png

Kita juga dapat mengatur warna yang kita inginkan. Modifikasilah program Processing kita
sebelumnya.
Contoh: Kode Processing Mengatur warna dan diameter elips
import processing.serial.*;
Serial portKu;
int inByte;
void setup(){
size(400, 400);
portKu = new Serial(this, "COM33", 9600);
}
void draw(){
background(204);

while (portKu.available() > 0) {

inByte = portKu.read();
println(inByte);
}
//atur warna ellips
Fill(inByte, 100, 100);
//atur elips sesuai nilai sensor
ellipse(200, 200, inByte, inByte);
delay(100);
}

Processing - Mengatur Diameter dan Warna Ellips.png