BELAJAR

PROCESSING

BAB I
 1

MEMULAI PEMROGRAMAN PROCESSING

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:
a. Bagian Toolbar adalah bagian dimana tombol-tombol kontrol ditempatkan.
Pada bagian ini, tombol Debug, Step, Continue dan Stop ditempatkan.

Gambar 1. IDE Processing 3

b. 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.
c. Area Text Editor adalah tempat dimana kita akan menuliskan program kita.
d. Message Area merupakan tempat dimana berbagai pesan dari Processing
dikeluarkan, misalnya terjadi error.
 2

e. 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. 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. 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(){
 3

 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. Contoh tampilan hasil program pada Contoh 2-2

Konversi Hasil Desain Processing

 4

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 aExport
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. Opsi dalam melakukan eksport sketch

BAB II
 5

DASAR MENGGAMBAR OBJEK PADA PROCESSING

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.

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 kanan-bawah 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

 6

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

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

Menggambar banyak titik

1 size(200, 100);
2 point(50, 50);
3 point(50, 80);
4 point(80, 50);
5 point(80, 80);

Menggambar Objek-objek Dasar

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

Contoh-contoh Pemrograman Objek Dasar

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

Processing Menggambar dua Garis

 8

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

Menggambar Gabungan Objek-objek Dasar

Gabungan objek dasar
1 size(280, 180);
2 rect(10, 10, 200, 50);
3 quad(10, 60, 210, 60, 260, 110, 60, 110);
4 rect(60, 110, 200, 50);
5 quad(10, 60, 60, 110, 60, 160, 10, 110);
6 line(10, 10, 60, 110);
7 triangle(210, 10, 260, 110, 210, 60);

processing Gabungan ellips

1 size (400, 200);
2 ellipse(200, -150, 480, 480);
3 ellipse(200, 130, 80, 80);
4 ellipse(230, 150, 30, 30);
5 ellipse(300, 180, 121, 121);

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
1 size(620, 140);
2 arc(15, 60, 100, 100, 0, HALF_PI);
3 arc(150, 60, 100, 100, 0, PI + HALF_PI);
4 arc(270, 60, 100, 100, HALF_PI, 3.14);
5 arc(360, 60, 100, 100, HALF_PI, 3.14, PIE);
6 arc(450, 60, 100, 100, HALF_PI, 3.14, CHORD);
7 arc(500, 60, 100, 100, HALF_PI, 3.14, OPEN);
8 arc(550, 60, 100, 100, 1.57, 7);

Menggambar busur mungkin menjadi lebih rumit daripada objek dasar yang lain. Dua
masukan pertama dari fungsi ellipse() menunjukkan posisi pusat elips. Masukan
 9

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 2p, dengan nilai p = 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 Busur Dalam Derajat
1 size(340, 120);
2 arc(15, 60, 100, 100, radians(0), radians(90));
3 arc(150, 60, 100, 100, radians(45), radians(180));
4 arc(270, 60, 100, 100, radians(180), radians(450));

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
1 size(220, 360);
2 fill(255, 0, 0);
3 strokeWeight(5);
4  beginShape();
5 vertex(20, 300);
6 vertex(20, 70);
7 vertex(150, 70);
8 vertex(150, 30);
9 vertex(200, 90);
10 vertex(150, 150);
11 vertex(150, 110);
12 vertex(60, 110);
13 vertex(60, 300);
14 vertex(20, 300);
15 endShape();

BAB III
 10

MENGATUR PROPERTI OBJEK PADA PROCESSING

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()
1 size(160, 120);
2 smooth();
3 ellipse(80, 60, 90, 90);
Contoh: Menggunakan fungsi noSmooth()
1 size(160, 120);
2 noSmooth();
3 ellipse(80, 60, 90, 90);

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()
1 size(460, 120);
2 strokeWeight(1);
3 ellipse(60, 60, 80, 80);
4  strokeWeight(5);
5 ellipse(170, 60, 80, 80);
6  strokeWeight(10);
7 ellipse(280, 60, 80, 80);
8  strokeWeight(15);
9 ellipse(390, 60, 80, 80);

Fungsi strokeJoin()
 11

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()
1 size(420, 170);
2 strokeWeight(15);
3  
4 strokeJoin(MITER);
5 rect(60, 40, 80, 80);
6  
7 strokeJoin(BEVEL);
8 rect(170, 40, 80, 80);
9  
10 strokeJoin(ROUND);
11 rect(280, 40, 80, 80);

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()
1 size(230, 150);
2 strokeWeight(15);
3  
4 strokeCap(ROUND);
5 line(40, 30, 80, 100);
6  
7 strokeCap(SQUARE);
8 line(90, 30, 130, 100);
9  
10 strokeCap(PROJECT);
11 line(140, 30, 180, 100);

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

Fungsi stroke()
 12

Fungsi ini berguna untuk mengatur warna garis dari objek yang akan digambar.
Gunakanlah fungsi noStroke() untuk menonaktifkan fungsi ini.
Contoh: Menggunakan fungsi stroke()
1 size(440, 120);
2 strokeWeight(10);
3  
4 // dalam skala keabuan
5 stroke(100);
6 rect(30, 30, 60, 60);
7  
8 // dalam format RGB
9 stroke(200, 50, 80);
10 rect(110, 30, 60, 60);
11  
12 // dalam format heksa
13 stroke(#292CD3);
14 rect(190, 30, 60, 60);
15  
16 // penulisan lain format heksa
17 stroke(0xFFD152BA);
18 rect(270, 30, 60, 60);
19  
20 // tanpa stroke
21 noStroke();
22 rect(350, 30, 60, 60);

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
1 size(380, 270);
2 noStroke();
3 fill(150);
4 ellipse(170, -30, 210, 210);
5 fill(250);
6 ellipse(0, 270, 480, 480);
7 fill(80);
8 ellipse(282, 115, 160, 160);

Nilai masukan dari fungsi fill() dapat berupa warna keabuan (0 sampai 255), atau
menggunakan format RGB maupun HSV. Kombinasi dari fungsi fill() strokeWeight()
 13

dan stroke() juga dapat dilakukan untuk menghasilkan objek yang bervariasi.
Amatilah contoh berikut:
Contoh: Menggunakan fungsi fill() format RGB
1 ize(400, 370);
2 smooth();
3 stroke(50);
4 strokeWeight(8);
5  
6 fill(255, 80, 120);
7 ellipse(170, 180, 300, 300);
8  
9 fill(217, 127, 229);
10 ellipse(170, 180, 200, 200);
11  
12 fill(255, 200, 100);
13 ellipse(70, 60, 80, 80);
14  
15 fill(60, 150, 200);
16 ellipse(300, 200, 150, 150);
17  
18 fill(210, 240, 24);
19 ellipse(100, 300, 100, 100);

Untuk memudahkan dalam pemilihan warna, gunakanlah jendela Color Selector.

Carilah di Tools a Color Selector...
 14

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()
1 size(380, 270);
2 background(255, 204, 0);
3 noStroke();
4  
5 fill(180);
6 ellipse(170, -30, 210, 210);
7  
8 fill(250);
9 ellipse(0, 270, 480, 480);
10  
11 fill(40);
12 ellipse(282, 115, 160, 160);
 15

BAB IV
MENGGUNAKAN VARIABEL DAN FUNGSI PADA PEMROGRAMAN
PROCESSING

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
1 size(480, 200);
2 int x = 60;
3 int y = 100;
4 int d = 90;
5 ellipse(x, y, d, d+10);
6 ellipse(x+120, y, d, d+20);
7 ellipse(x+240, y, d, d+40);
8 ellipse(x+360, y, d, d+60);

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:
 16

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:
1 for (insialisasi; cek; perbarui) {
2   pernyataan
3 }
Ilustrasi fungsi for ditunjukkan pada gambar berikut:
 17

Contoh: Menggunakan fungsi for [1]

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

Contoh : Menggunakan fungsi for [2]

1 size(480, 120);
2 strokeWeight(2);
3 for (int i = 20; i < 600; i += 20) {
4   line(i, 0, i - i/5, 80);
5   line(i - i/5, 80, i*1.2, 120);
6 }
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 size(480, 120);
2 noStroke();
3 for (int y = 0; y <= height; y += 40) {
4  for (int x = 0; x <= width; x += 40) {
5   fill(220);
6   ellipse(x, y, 40, 40);
7   fill(#FA0844);
8   ellipse(x+20, y+20, 40, 40);
9  }
10 }
 18

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:
1 while (ekspresi) {
2   pernyataan
3 }
Selagi ekspresi bernilai benar, maka pernyataan di dalam kalang while akan
dieksesksi terus-menerus. Ilustrasi fungsi while ditunjukkan pada gambar berikut:

Contoh: Menggunakan fungsi while

1 size(300, 300);
2 strokeWeight(2);
3 int i = 0;
4  
5 while (i <= 0.4*height){ 
6   line(0, i, i, i+i*1.5);
7   line(i, i+i*1.5, i+i*1.5, 0);
8   i = i + 10;
9 }

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.
 19

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()
1 void setup(){
2  println("Ini dieksekusi hanya sekali");
3 }
4  
5 void draw(){
6  print("Ini dieksekusi berkali-kali: ");
7  println(frameCount);
8 }
Lihatlah hasilnya pada jendela Console:

Ini dieksekusi hanya sekali

Ini dieksekusi berkali-kali: 1
Ini dieksekusi berkali-kali: 2
Ini dieksekusi berkali-kali: 3
Ini dieksekusi berkali-kali: 4
Ini dieksekusi berkali-kali: 5
Ini dieksekusi berkali-kali: 6
Ini dieksekusi berkali-kali: 7
 20

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
1 void setup(){
2   println("Mencari nilai diameter dari input luas...");
3   cariDiameter(100);
4   cariDiameter(200);
5 }
6  
7  
8 void cariDiameter(int luasLingkaran){
9   float d = 2*sqrt(luasLingkaran/3.14);
10   println("Diameter lingkaran = " + d);
11 }
Amatilah hasilnya pada jendela Console, seperti berikut ini:
Mencari nilai diameter dari input luas...
Diameter lingkaran = 11.286653
Diameter lingkaran = 15.961738
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
1 float diameter;
2  
3 void setup(){
4   size(300, 200); 
5  
6   diameter =  cariDiameter(5000);
7   ellipse(80, 100, diameter, diameter);
8  
 21

9   diameter =  cariDiameter(10000);
10   ellipse(200, 100, diameter, diameter);
11 }
12  
13 float cariDiameter(int luasLingkaran){
14   float d = 2*sqrt(luasLingkaran/3.14);
15   return d;
16 }
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
1 float diameter = 0;
2 int luas = 0;
3  
4 void setup(){
5   size(400, 300);
6   strokeWeight(3);   
7 }
8  
9 void draw(){
10   background(204);
11   luas = luas + 2000;
12   diameter = cariDiameter(luas);
13   if (luas >= 40000){
14     luas = 0;
15   }
16   ellipse(200, 150, diameter, diameter);
17   delay(200);
18 }
19  
20 float cariDiameter(int luasLingkaran){
21   float d = 2*sqrt(luasLingkaran/3.14);
22   return d;
23 }

Contoh: Membuat karakter ulat menggunakan fungsi

1 void setup(){
2  size(580, 360);
3 }
4  
5 void draw(){
6  background(204);
7  ulat(0, 0);
8  ulat(100, 150);
9  ulat(300, 40);
 22

10 }
11  
12 void ulat(int x, int y){
13   pushMatrix();
14   translate(x, y);
15   
16   //segmen badan 1
17   fill (#03480F);
18   ellipse(200, 80, 70, 30);
19    
20   //segmen badan 2
21   fill (#109026);
22   ellipse(180, 80, 70, 60);
23    
24   //segmen badan 3
25   fill (#20B239);
26   ellipse(160, 100, 70, 100);
27    
28   //segmen badan 4
29   fill (#109026);
30   ellipse(120, 120, 80, 80);
31    
32   // segmen badan 5
33   fill (#20B239);
34   ellipse(100, 100, 100, 120);
35    
36   //muka
37   fill (#3AD627);
38   ellipse(90, 75, 110, 80);
39    
40   //mata kanan
41   fill(0);
42   ellipse(100, 70, 15, 20);
43    
44   //mata kiri
45   ellipse(70, 65, 15, 20);
46   popMatrix();
47 }
Pada program di atas, karakter ulat dimunculkan sebanyak tiga kali dengan posisi
yang berbeda-beda. 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.
 23

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()
1 void setup(){
2  size(580, 360);
3 }
4  void draw(){
5  background(204);
6  ulat(0, 0, 1.0);
7  ulat(100, 150, 1.2);
8  ulat(300, 40, 0.5);
9  ulat(350, 90, 0.7);
10 }
11  void ulat(int x, int y, float s){
12   pushMatrix();
13   translate(x, y);
14   scale(s);
15  
16   //segmen badan 1
17   fill (#03480F);
18   ellipse(200, 80, 70, 30);
19  
20   //segmen badan 2
21   fill (#109026);
22   ellipse(180, 80, 70, 60);
23    
24   //segmen badan 3
25   fill (#20B239);
26   ellipse(160, 100, 70, 100);
27    
28   //segmen badan 4
29   fill (#109026);
30   ellipse(120, 120, 80, 80);
31    // segmen badan 5
32   fill (#20B239);
33   ellipse(100, 100, 100, 120);
34    //muka
35   fill (#3AD627);
36   ellipse(90, 75, 110, 80);
37     //mata kanan
38   fill(0);
39   ellipse(100, 70, 15, 20);
40     //mata kiri
41   ellipse(70, 65, 15, 20);
42   popMatrix();
 24

43
}

BAB V
MENYERTAKAN GAMBAR DAN TULISAN PADA PEMROGRAMAN
PROCESSING

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.

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
 25

1 PImage gambar;
2 void setup(){
3   size(740, 380);
4   gambar = loadImage("jagannath.jpg");
5 }
6  void draw(){
7   image(gambar, 0, 0);
8 }

Contoh berikut digunakan untuk menampilkan gambar lebih dari satu pada jendela
Display:
Contoh: Menampilkan Gambar Lebih dari Satu
1 PImage gambar1;
2 PImage gambar2;
3  void setup(){
4   size(850, 330);
5   gambar1 = loadImage("Koala.jpg");
6   gambar2 = loadImage("Penguins.jpg");
7 }
8  void draw(){
9   image(gambar1, 10, 10);
10   image(gambar2, 430, 10);
11 }

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.
 26

Selanjutnya, ketiklah contoh skrip program berikut dan amatilah hasilnya:

Contoh: Menampilkan Tulisan
1 PFont tulisan;
2  
3 void setup() {
4   size(500, 150);
5   smooth();
6   tulisan = loadFont("AGaramondPro-Italic-48.vlw");
7   textFont(tulisan);
8 }
9  
10 void draw() {
11   background(0);
12   textSize(36);
13   text("Robotics and Embedded Systems", 25, 60);
14   textSize(18);
15   text("Robotics and Embedded Systems", 27, 90);
16 }
 27

BAB VI
MEMAINKAN MUSIK (LAGU) PADA PEMROGRAMAN PROCESSING

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
1 import ddf.minim.*;
2  
3 AudioPlayer lagu;
4 Minim minim;
5  
6 void setup()
7 {
8   minim = new Minim(this);
9   lagu = minim.loadFile("Gagal Bersembunyi - The Rain.mp3");
10   lagu.play();
11 }
12  
13 void draw()
14 {
15 }
16  
17 void stop()
18 {
19   lagu.close();
20   minim.stop();
21   super.stop();
 28

22 }
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
1 import ddf.minim.*;
2  
3 AudioPlayer lagu;
4 Minim minim;
5  
6 void setup()
7 {
8   size(500, 200);
9   minim = new Minim(this);
10   lagu = minim.loadFile("Gagal Bersembunyi - The Rain.mp3");
11   lagu.play();
12 }
13  
14 void draw()
15 {
16   background(0);
17   stroke(255);
18   for(int i = 0; i < lagu.bufferSize() - 1; i++)
19   {
20     line(i, 100 + lagu.right.get(i)*50, i+1, 100 + lagu.right.get(i+1)*50);
21   }
22 }
23  
24 void stop()
25 {
26   lagu.close();
27   minim.stop();
28   super.stop();
29 }

Referensi
Minim Library Developer
Website: http://code.compartmental.net/tools/minim/quickstart/
 29

BAB VII
MEMBUAT ANIMASI PADA PEMROGRAMAN PROCESSING

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
1 //inisialisasi posisi-x
2 int nilaiX = 40;
3 //inisialisasi posisi-y
4 int nilaiY = 40;
5 //inisialisasi arah-x
6 int arahX = 3;
7 //inisialisasi arah-y
8 int arahY = 3;                    
9  
10 void setup()
11 {
12   // buat layar 500 x 300 px
13   size(500, 300); 
14 }
15  
16 void draw ()
17 {
18   // hapus gambar lama dan ganti dgn yg baru
19   background(0);
20   // buat lingkaran berwarna hijau
21   fill(0, 255, 0);
22   // lingkaran tanpa garis
23   noStroke();
24   // gambar lingkaran
25   ellipse(nilaiX, nilaiY, 40, 40);  
26   // update posisi baru-x
27   nilaiX = nilaiX + arahX; 
28   // cek jika bola membentur dinding kanan-kiri
29   if (nilaiX>width-20 || nilaiX<20) 
30   {
31     // jika membentur, balikkan arah x
32     arahX = arahX*-1;               
33   }
 30

34   // update posisi baru-y

35   nilaiY = nilaiY + arahY;               
36   // cek jika bola membentur dinding atas-bawah
37   if (nilaiY>height-20 || nilaiY<20)
38   {
39     // jika membentur, balikkan arah y
40     arahY = arahY*-1;               
41   }
42 }
Processing animasi Bola.png
 31

BAB VIII
MENGHUBUNGKAN PROCESSING DENGAN ARDUINO

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:

Contoh: Melacak serial port

1 import processing.serial.*;
2 Serial portKu;
3      void setup()
4 {   
5   size(200,200);
6   println(Serial.list());
7 }
Maka, akan diperoleh contoh hasil berikut pada jendela konsol:
 32

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
1 void setup()
2 {
3    Serial.begin(9600);
4 }
5  
6 void loop()
7 {
8    Serial.println("Hallo Dunia!!!");
9    delay(200);
10 }
Pada sisi Processing, ketiklah skrip berikut:
Contoh: Kode Processing - Menerima String
1 import processing.serial.*;
2 Serial portSerial; 
3 String stringKu;
4  
5 void setup(){
6   String namaPort = Serial.list()[3];
7   portSerial = new Serial(this, namaPort, 9600);
8 }
9  
10 void draw()
11 {
12   if ( portSerial.available() > 0)
13   { 
14     stringKu = portSerial.readStringUntil('\n');        
15   }
16  println(stringKu);
17  delay(100);
18 }
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
 33

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
1 import processing.serial.*;
2 Serial portSerial; 
3 String stringKu;
4  
5 void setup(){  
6   portSerial = new Serial(this, "COM33", 9600);
7 }
8  
9 void draw()
10 {
11   if ( portSerial.available() > 0)
12   { 
13     stringKu = portSerial.readStringUntil('\n');        
14   }
15  println(stringKu);
16  delay(100);
17 }
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
1 char val;
2 int ledPin = 13;
3  
4 void setup() {
5    pinMode(ledPin, OUTPUT);
6    Serial.begin(9600);
7 }
8  
9 void loop() {
10    if (Serial.available())
11    {
12      val = Serial.read();
13    }
14    if (val == '1')
15    {
 34

16      digitalWrite(ledPin, HIGH);
17    } else {
18      digitalWrite(ledPin, LOW);
19    }
20    delay(10);
21 }
Pada Processing, ketiklah skrip berikut:
Contoh: Kode Processing - Mengirim Data
1 import processing.serial.*;
2 Serial portSerial; 
3  
4 void setup(){
5   size(200,200);   
6   portSerial = new Serial(this, "COM33", 9600);
7 }
8  
9  
10 void draw() {
11   background(204);
12   if (mousePressed == true)
13   {                          
14    portSerial.write('1');        
15    background(255, 0, 0); 
16   } else
17   {                          
18   portSerial.write('0');         
19   }  
20 }
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
 35

1 const int analogInPin = A0;

2 int nilaiSensor = 0;       
3 int nilaiOutput = 0;       
4  
5 void setup() { 
6   Serial.begin(9600);
7 }
8  
9 void loop() {
10   nilaiSensor = analogRead(analogInPin);           
11   nilaiOutput = map(nilaiSensor, 0, 1023, 0, 255); 
12   Serial.write(nilaiOutput);  
13   delay(30);                    
14 }
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
1 import processing.serial.*;
2 Serial portKu;
3  
4 void setup(){ 
5   portKu = new Serial(this, "COM33", 9600);
6 }
7  
8 void draw(){
9 while (portKu.available() > 0)  {
10     int inByte = portKu.read();
11     println(inByte);
12   }
13 }
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
1 const int analogInPin = A0;
2 int sensorValue = 0;       
3  
4 void setup() { 
5   Serial.begin(9600);
6 }
7  
8 void loop() {
9   sensorValue = analogRead(analogInPin);           
10   Serial.println(sensorValue);  
11   delay(30);                    
12 }
 36

Pada Processing, ketiklah skrip berikut:

Contoh: Kode Processing - Menerima Data dan Menambilkan Grafik
1 import processing.serial.*;
2  
3 Serial portSerial;       
4 int xPos = 1;        
5 float inByte = 0;
6  
7 void setup () {
8   size(400, 300);
9   portSerial = new Serial(this, "COM33", 9600);
10   portSerial.bufferUntil('\n');
11   background(0);
12 }
13 void draw () {
14   stroke(127, 34, 255);
15   line(xPos, height, xPos, height - inByte);
16   if (xPos >= width) {
17     xPos = 0;
18     background(0);
19   } else {   
20     xPos++;
21   }
22   delay(10);
23 }
24  
25  
26 void serialEvent (Serial myPort) {
27   String inString = myPort.readStringUntil('\n');
28   if (inString != null) {   
29     inString = trim(inString);
30     inByte = float(inString);
31     println(inByte);
32     inByte = map(inByte, 0, 1023, 0, height);
33   }
34 }
 37

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
1 const int analogInPin = A0;
2 int nilaiSensor = 0;       
3 int nilaiOutput = 0;       
4  
5 void setup() { 
6   Serial.begin(9600);
7 }
8  
9 void loop() {
10   nilaiSensor = analogRead(analogInPin);           
11   nilaiOutput = map(nilaiSensor, 0, 1023, 0, 255); 
12   Serial.write(nilaiOutput);  
13   delay(30);                    
14 }
Pada Processing, ketiklah skrip berikut:
Contoh: Kode Processing - Menerima data untuk mengatur elips
1 import processing.serial.*;
2 Serial portKu;
3 int inByte;
4  
5 void setup(){ 
6   size(400, 400);
7   portKu = new Serial(this, "COM33", 9600);
8 }
9  
10 void draw(){
11   background(204);
12   while (portKu.available() > 0)  {
13     inByte = portKu.read();   
 38

14     println(inByte);                 
15   }
16  
17   //atur elips sesuai nilai sensor
18   ellipse(200, 200, inByte, inByte); 
19   delay(100);
20 }

Kita juga dapat mengatur warna yang kita inginkan. Modifikasilah program
Processing kita sebelumnya.
Contoh: Kode Processing - Mengatur warna dan diameter elips
1 import processing.serial.*;
2 Serial portKu;
3 int inByte;
4  
5 void setup(){ 
6   size(400, 400);
7   portKu = new Serial(this, "COM33", 9600);
8 }
9  
10 void draw(){
11   background(204);
12   while (portKu.available() > 0)  {
13     inByte = portKu.read();   
14     println(inByte);                 
15   }
16  
17   //atur warna ellips
18   Fill(inByte, 100, 100);
19   //atur elips sesuai nilai sensor
20   ellipse(200, 200, inByte, inByte); 
21   delay(100);
22 }