Processing


Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif



Widianto
Nugroho
|
http://widiantonugroho.com

Tutorial
release
date:
2012‐07‐03


Widianto
Nugroho,
Dynamic
Composition,
variable
dimension,
2008


Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Daftar Isi

Bentuk
dan
Komposisi...................................................................................................................5

Overview.......................................................................................................................................................5

Konteks
pemrograman...........................................................................................................................................5

Format
tutorial...........................................................................................................................................................5

Instalasi .........................................................................................................................................................................5

Lingkungan
1...............................................................................................................................................5

Open,
Save ....................................................................................................................................................................6

Run ..................................................................................................................................................................................6

Sketchbook ..................................................................................................................................................................6

Struktur
1 .....................................................................................................................................................7

Komentar......................................................................................................................................................................8

Pernyataan...................................................................................................................................................................9

Sistem
koordinat
(Dimensi
X,
Y,
Z)................................................................................................................. 11

Bentuk
1..................................................................................................................................................... 11

point
(titik) ............................................................................................................................................................... 11

line
(garis)................................................................................................................................................................. 12

rect................................................................................................................................................................................ 13

ellipse,
ellipseMode............................................................................................................................................... 13

Kurva ........................................................................................................................................................................... 14

[
Latihan
BK00‐BK03
]......................................................................................................................................... 15

Data
1 .......................................................................................................................................................... 15

Variabel ...................................................................................................................................................................... 15

Tipe
data .................................................................................................................................................................... 16

[
Latihan
BK04‐BK06
]......................................................................................................................................... 16

Kontrol
1.................................................................................................................................................... 16

for.................................................................................................................................................................................. 16

[
Latihan
BK07‐BK09
]......................................................................................................................................... 18

Bentuk
2..................................................................................................................................................... 18

BeginShape
&
EndShape ..................................................................................................................................... 18

LINES,
LINE_STRIP,
LINE_LOOP,
TRIANGLES,
QUADS,
POLYGON,
dan
lain‐lain ....................... 21

[
Latihan
BK10‐BK12
]......................................................................................................................................... 22

Struktur
2 .................................................................................................................................................. 22

Setup
&
Draw ........................................................................................................................................................... 22

Method........................................................................................................................................................................ 24

Parameter.................................................................................................................................................................. 24

[
Latihan
BK13‐BK15
]......................................................................................................................................... 24

Lingkungan
2............................................................................................................................................ 24

Mengekspor
dan
dokumentasi......................................................................................................................... 24

Waktu
dan
Gerak.......................................................................................................................... 25

Kontrol
2.................................................................................................................................................... 25

If..................................................................................................................................................................................... 25

If
&
Else....................................................................................................................................................................... 26

[
Latihan
WG00‐WG01
]...................................................................................................................................... 27

Gerak
1 ....................................................................................................................................................... 27

Membatasi
layar ..................................................................................................................................................... 27

Mengubah
arah ....................................................................................................................................................... 27

Widianto
Nugroho
|
http://widiantonugroho.com


2

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


[
Latihan
WG02‐WG04
]...................................................................................................................................... 28

Kalkulasi
1................................................................................................................................................. 28

Derajat
&
Radian .................................................................................................................................................... 28

Sinus
and
Kosinus.................................................................................................................................................. 29

[
Latihan
WG05‐WG06
]...................................................................................................................................... 30

Transformasi
1 ........................................................................................................................................ 30

Translate.................................................................................................................................................................... 30

Rotate .......................................................................................................................................................................... 32

Scale ............................................................................................................................................................................. 32

Push
&
Pop................................................................................................................................................................ 33

[
Latihan
WG11‐WG12
]...................................................................................................................................... 35

Presentasi:
Pelanting............................................................................................................................. 35


Gerak
dan
Respon ........................................................................................................................ 36

Masukan
1 ................................................................................................................................................. 36

mouseX,
mouseY .................................................................................................................................................... 36

mousePressed ......................................................................................................................................................... 37

[
Latihan
GR00‐GR02
]......................................................................................................................................... 37

Masukan
2 ................................................................................................................................................. 38

mousePressed()...................................................................................................................................................... 38

mouseReleased().................................................................................................................................................... 39

mouseMoved() ........................................................................................................................................................ 40

mouseDragged()..................................................................................................................................................... 41

[
Latihan
GR05‐GR06
]......................................................................................................................................... 41

GUI
1 ............................................................................................................................................................ 42

Rollover ...................................................................................................................................................................... 42

Button ......................................................................................................................................................................... 43

[
Latihan
GR09‐GR10
]......................................................................................................................................... 45

Masukan
3 ................................................................................................................................................. 45

keyPressed................................................................................................................................................................ 45

key ................................................................................................................................................................................ 46

keyPressed() ............................................................................................................................................................ 46

keyReleased().......................................................................................................................................................... 47

[
Latihan
GR11‐GR12
]......................................................................................................................................... 48


Widianto
Nugroho
|
http://widiantonugroho.com


3

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Daftar Gambar
Gambar
1
Lingkungan
Pemrograman
Processing _________________________________________________________________ 5

Gambar
2
Membuka
sketsa _________________________________________________________________________________________ 6

Gambar
3
Menjalankan
program
yang
anda
buat ________________________________________________________________ 6

Gambar
4
Sketchbook
diakses
melalui
Windows
Explorer ________________________________________________________ 7

Gambar
5
Sistem
Koordinat
Processing ___________________________________________________________________________ 11


Kredit
Gambar dan kode untuk contoh-contoh program diambil dari Processing Reference.

Widianto
Nugroho
|
http://widiantonugroho.com


4

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Bentuk
dan
Komposisi


Overview

Konteks
pemrograman

Memprogram
adalah
proses
membuat
langkah‐langkah
untuk
dieksekusi
oleh
komputer

agar
menjalankan
tugas
seperti
yang
kita
inginkan.
tutorial
ini
akan
memfokuskan
pada

pemrograman
dalam
konteks
membuat
bentuk
rupa
dan
komposisi,
waktu
dan
gerak,

serta
bentuk
rupa
responsif.


Format
tutorial

tutorial
ini
akan
menggunakan
software
Processing
sebagai
alat
untuk
mewujudkan

bentuk
rupa
dan
komposisi,
waktu
dan
gerak,
serta
bentuk
rupa
responsif.
Tutorial

dibawakan
dengan
penyajian
materi
dan
disertai
dengan
latihan‐latihan.



Instalasi


Sebelum
melakukan
instalasi
anda
harus
mendapatkan
terlebih
dahulu
software

Processing.
Bila
belum
mendapatkannya
anda
dapat
mendownloadnya
di
alamat
URL:

http://www.processing.org/download/index.html


Untuk
menginstal
anda
ekstrak
file
distribusi
software
Processing
dalam
bentuk
ZIP.

Anda
dapat
mengekstrak
file
ZIP
tersebut
ke
home
direktori
anda
(pada
Windows
di

folder
“My
Documents”).
Setelah
anda
mengekstraknya
masuklah
ke
direktori
target

yang
telah
berisi
file‐file
eksekutabel
dan
file
lainnya.
Jalankanlah
processing.exe
untuk

memulai
Processing.


Lingkungan
1


Lingkungan
Pemrograman
Processing
terdiri
dari
teks
editor
terintegrasi
dan
jendela

tampilan
untuk
menampilkan
program.
Jika
tombol
"run"
ditekan,
program
akan

mengkompilasi
dan
berjalan
di
jendela
grafis
(jendela
tampilan).
Dari
jendela
lingkugan

utama,
bisa
menjalankan,
menghentikan,
menyimpan,
membuka,
dan
mengeksport
file.



Gambar
1
Lingkungan
Pemrograman
Processing

Widianto
Nugroho
|
http://widiantonugroho.com


5

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Open,
Save


Untuk
membuka
program
yang
anda
buat
pada
menu
gunakan
File

Open.
Anda

kemudian
dapat
membrowse
menu
dropdown.




Gambar
2
Membuka
sketsa


Untuk
menyimpan
hasil
perkerjaan:
File

Save
(shortcut:
Ctrl+S)


Run

Untuk
menjalankan
program
yang
telah
kita
tulis
klik‐lah
tombol
seperti
yang

ditunjukkan
oleh
gambar
berikut.
Selain
itu
anda
dapat
menggunakan
shortcut
dengan

menekan
tombol
Ctrl+R
pada
keyboard.



Gambar
3
Menjalankan
program
yang
anda
buat


Sketchbook


Buku
sketsa
(sketchbook)
anda
adalah
direktori
sketchbook
di
bawah
direktori

processing
di
komputer
anda.
Dalam
direktori
sketchbook
tersebut
terdapat
dua
sub


Widianto
Nugroho
|
http://widiantonugroho.com


6

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


direktori
yaitu
direktori
default
tempat
menyimpan
hasil
pekerjaan
anda,
dan
direktori

examples
tempat
menaruh
contoh‐contoh
yang
dapat
anda
pelajari.



Gambar
4
Sketchbook
diakses
melalui
Windows
Explorer


Dari
lingkungan
pemrograman
Processing
anda
dapat
mengakses
direktori
sketcbook

dengan
melalui
menu
File

Open
(perhatikan
gambar
2
di
atas,
tentang
membuka

sketsa).


Struktur
1


Struktur
dasar
program
ditulis
dengan
notasi
sebagai
berikut:

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

Tipe
kembalian
menentukan
tipe
nilai
yang
akan
dikembalikan
bila
fungsi
dijalankan

apakah
berupa
bilangan
dengan
tipe
data
tertentu
atau
tidak
mengembalikan
nilai.

Nama
fungsi
terkait
dengan
aturan
penamaan
di
mana
ada
aturan
mengenai
karakter

apa
saja
yang
dapat
digunakan
dan
penamaan
fungsi
yang
harus
dihindari
karena

merupakan
kata
kunci.

Deklarasi
parameter
adalah
parameter
apa
saja
yang
akan
dijalankan
oleh
fungsi.

Deklarasi
parameter
bisa
kosong
atau
tidak
ada
parameter.

Pernyataan
(statement)
digunakan
untuk
melakukan
suatu
tindakan.
Pernyataan

deklarasi
digunakan
untuk
memperkenalkan
nama
variabel
ataupun
pengenal
yang
lain

beserta
tipe
datanya.

Dalam
Processing
struktur
program
dapat
dibuat
dalam
tiga
tingkat
kompleksitas:
Mode

Statik,
Mode
Aktif,
and
dan
Mode
Java.


Widianto
Nugroho
|
http://widiantonugroho.com


7

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Mode
Statik

Mode
Statik
digunakan
untuk
membuat
gambar
statik.
Contoh
berikut
menggambar

sebuah
segi
empat
kuning
di
layar.


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

Mode
Aktif

Mode
Aktif
menyediakan
bagian
setup()
opsional
yang
akan
berjalan
ketika
program

mulai
berjalan.
Bagian
draw()
akan
berjalan
selamanya
sampai
progam
dihentikan.

Contoh
ini
menggambar
segi
empat
yang
mengikuti
posisi
mouse
(disimpan
dalam

variabel
mouseX
dan
mouseY).
Perhatikan
bahwa
panggilan
ke
method
background()

terletak
di
setup()
karena
hanya
diperlukan
sekali.

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

Mode
Java

Mode
Java
adalah
yang
paling
fleksibel,
namun
tidak
tersedia
sampai
dengan
rilis

Processing
1.0
Beta.
Mode
ini
memungkinkan
menulis
program
Java
secara
lengkap
di

dalam
Lingkugan
Processing.

Contoh
ini
sama
dengan
di
atas,
namun
ditulis
dalam
style
Java:


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

Komentar

Komentar
merupakan
bagian
yang
penting
dalam
program.
Kehadirannya
sangat

membantu
pemrogram
maupun
orang
lain
dalam
memahami
program,
karena
berupa

Widianto
Nugroho
|
http://widiantonugroho.com


8

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


penjelasan‐penjelasan
mengenai
program
atau
bagian‐bagian
dari
program.
Dalam
hal

ini
penjelasannya
bisa
berupa:

• Tujuan
atau
fungsi
program

• Saat
program
dibuat
atau
direvisi

• Keterangan‐keterangan
lain
tentang
kegunaan
dari
sejumlah
pernyataan
dalam

program.


Pernyataan


Pernyataan
(statement)
digunakan
untuk
melakukan
suatu
tindakan.
Terdapat
berbagai

macam
pernyataan,
diantaranya:


Pernyataan
Ungkapan.

Pernyataan
ungkapan
merupakan
bentuk
pernyataan
yang
paling
umum
dipakai.

Pernyataan
ini
terdiri
dari
sebuah
ungkapan
dan
diakhiri
dengan
titik‐koma
(;).


Biasanya
pernyataan
ungkapan
ini
berupa
penugasan
nilai
terhadap
variabel
atau

pemanggilan
fungsi.



Pernyataan
Deklarasi/definisi

Pernyataan
ini
digunakan
untuk
memperkenalkan
nama
variabel
ataupun
pengenal

yang
lain
beserta
tipe
datanya.



Pernyataan
Nol

Pernyataan
nol
atau
pernyataan
kosong
adalah
pernyataan
yang
berisi
titik‐koma
saja.

Perintah
ini
tidak
melaksanakan
apa‐apa.
Tetapi
kehadirannya
kadang‐kadang

diperlukan.
Misalnya
pada
kaidah
suatu
pernyataan
yang
memerlukan
pernyataan
lain,

padahal
pernyataan
lain
tersebut
tidak
diperlukan.



Pernyataan
Majemuk

Pernyataan
majemuk
sering
kali
disebut
dengan
istilah
blok.
Yang
dimaksudkan

pernyataan
ini
adalah
nol
atau
sejumlah
pernyataan
yang
berada
di
dalam
kurung

kurawal.



Pernyataan
Berkondisi
:
if
dan
switch

Pernyataan
if
dapat
dipakai
untuk
mengambil
keputusan
berdasarkan
suatu
kondisi.

Pernyataan
switch
adalah
pernyataan
yang
digunakan
untuk
menjalankan
salah
satu

pernyataan
dari
beberapa
kemungkinan
pernyataan,
berdasarkan
nilai
dari
sebuah

ungkapan
dan
nilai
penyeleksi.
Secara
singkatnya
pernyataan
ini
merupakan
pernyataan

pilihan
berganda.


Pernyataan
Pengulangan
:
do‐while,
while
dan
for

Pernyataan
while
merupakan
salah
satu
pernyataan
yang
berguna
untuk
memproses

suatu
pernyataan
atau
beberapa
pernyataan
beberapa
kali.
Pernyataan
do-while
juga

berguna
untuk
mengulangi
proses.
Pernyataan
for
juga
berguna
untuk
mengulang

pengeksekusian
terhadap
satu
atau
sejumlah
pernyataan.


Pernyataan
yang
berhubungan
dengan
pernyataan
pengulangan:
break
dan

continue

Pernyataan
break
digunakan
pada
pernyataan
switch,
for,
while
dan
do-while.

Kegunaannya
yaitu
untuk
memekasa
keluar
dari
pernyataan‐pernyataan
itu.
Pernyataan

Widianto
Nugroho
|
http://widiantonugroho.com


9

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


continue
dipakai
untuk
mengarahkan
eksekusi
ke
putaran
atau
iterasi
berikutnya
pada

pernyataan
pengulangan.


Widianto
Nugroho
|
http://widiantonugroho.com


10

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Sistem
koordinat
(Dimensi
X,
Y,
Z)



Processing
menggunakan
sistem
koordinat
kartesian
dengan
titik
asal
terletak
di
sudut

kiri‐atas.
Bila
program
berukuran
lebar
320
piksel
dan
lebar
240
piksel,
maka
koordinat

[0,
0]
terletak
di
kiri‐atas
dan
koordinat
[320,
240]
terletak
di
kanan
bawah.



Gambar
5
Sistem
Koordinat
Processing


Bentuk
1


point
(titik)

Nama:
point()

point(30,
point(85,
point(85,
point(30,

20);
20);
75);
75);

Deskripsi

Point
atau
titik
adalah
koordinat
dalam
ruang.
Dalam
Processing,
point
memiliki
dimensi

satu
piksel.
Parameter
pertama
adalah
nilai
horizontal
dari
point,
nilai
kedua
adalah

nilai
vertikal
dari
point,
dan
nilai
opsional
ketiga
adalah
nilai
kedalaman.


Sintaks

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

Parameter

x1
y1
z1

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

Mengembalikan
nilai:
tidak

Penggunaan:
Web
dan
aplikasi

Widianto
Nugroho
|
http://widiantonugroho.com


11

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Perintah
terkait:
beginshape()

line
(garis)

Nama:
line()

line(30, 20, 85, 75);


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

Deskripsi

line
adalah
garis
langsung
antara
dua
point.
Versi
line()
dengan
empat
parameter

menggambar
garis
dalam
bidang
XY
dengan
Z=0.
Versi
dengan
enam
parameter

memungkinkan
garis
ditempatkan
dimana
saja
di
dalam
ruang
XYZ.
Untuk
mewarnai

garis,
gunakan
fungsi
stroke().
Sebuah
garis
tidak
dapat
diisi
warna,
dengan
demikian

method
fill()
tidak
dapat
mempengaruhi
warna
garis.
Garis
digambar
dengan
lebar
satu

piksel.


Sintaks

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

Parameter

x1
y1
z1
x2
y2
z2

int
int
int
int
int
int

atau
atau
atau
atau
atau
atau

float:
float:
float:
float:
float:
float:

koordinat
koordinat
koordinat
koordinat
koordinat
koordinat

x
y
z
x
y
z

dari
dari
dari
dari
dari
dari

titik
titik
titik
titik
titik
titik

pertama
pertama
pertama
kedua
kedua
kedua

Mengembalikan
nilai:
tidak

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:
beginShape()


Widianto
Nugroho
|
http://widiantonugroho.com


12

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


rect


Nama:
rect()

rect(30, 20, 55, 55);

Deskripsi

Menggambar
rectangle
atau
segi
empat
di
layar.
Sebuah
segi
empat
adalah
bentuk
yang

memiliki
empat
sisi
dan
setiap
sisi
mempunyai
sudut
90
derajat.
Dua
parameter

pertama
mengeset
letak,
yang
ketiga
mengeset
lebar,
yang
keempat
mengeset
tinggi.

Titik
asal
dapat
diubah
dengan
menggunakan
fungsi
rectMode().


Sintaks

rect(x, y, lebar, tinggi);

Parameter

x
y
lebar
tinggi

int
int
int
int

atau
atau
atau
atau

float:
float:
float:
float:

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

Mengembalikan
nilai:
tidak

Penggunaan:
Web
dan
aplikasi


ellipse,
ellipseMode


Nama:
ellipse()

ellipse(30, 20, 55, 55);

Deskripsi

Menggambar
ellipse
(oval)
atau
bentuk
lonjong
pada
jendela
display.
Sebuah
ellipse

dengan
lebar
dan
tinggi
yang
sama
adalah
sebuah
lingkaran.
Dua
parameter
pertama

mengeset
letak,
yang
ketiga
mengeset
lebar,
dan
yang
keempat
mnegeset
tinggi.
Titik

asal
dapat
diubah
dengan
fungsi
ellipseMode().


Sintaks

ellipse(x, y, lebar, tinggi);

Widianto
Nugroho
|
http://widiantonugroho.com


13

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Parameter

x
y
width
height

int
int
int
int

atau
atau
atau
atau

float:
float:
float:
float:

koordinat x dari elips
koordinat y dari elips
lebar dari elips
tinggi dari elips

Mengembalikan
nilai:
tidak

Penggunaan:
Web
dan
aplikasi


Nama:
ellipseMode()

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

Deskripsi

Titik
asal
dari
ellipse
dapat
diubah
dengan
fungsi
ellipseMode().
mode
default
dari

ellipse
mode
adalah
ellipseMode(CORNER),
yang
menentukan
titik
asal
ellipse
terletak

di
sisi
kiri
atas
batas
kotak
yang
membentuk
ellipse.
Memanggil
fungsi

ellipseMode(CENTER_DIAMETER)
akan
menggambar
bentuk
ellipse
dari
pusat
ellips.

Parameter
harus
ditulis
dengan
"HURUF
BESAR"
semuanya
karena
Processing
adalah

bahasa
case
sensitive
atau
membedakan
huruf
besar
dan
huruf
kecil.


Sintaks

ellipseMode(MODE);

Parameter

MODE

CORNER, CORNERS, CENTER, atau RADIUS.

Mengembalikan
nilai:
Tidak

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:
ellipse()


Kurva

Nama:
curve()

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

Widianto
Nugroho
|
http://widiantonugroho.com


14

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Deskripsi

Menggambar
garis
kurva
di
layar.
Parameter
pertama
dan
kedua
menentukan
titik

pertama
dari
kurva,
dua
parameter
terakhir
menentukan
titik
kedua
dari
kurva.

Parameter‐parameter
di
tengah
mengeset
bentuk
dari
kurva.
Fungsi
tambahan

curveMode()
memberikan
kontrol
pada
kualitas
visual
dari
kurva.
Fungsi
curve()
adalah

sebuah
implementasi
dari
Catmull‐Rom
splines.


Sintaks

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

Parameter

x1
y1
x2
y2
x3
y3
x4
y4

int
int
int
int
int
int
int
int

atau
atau
atau
atau
atau
atau
atau
atau

float:
float:
float:
float:
float:
float:
float:
float:

koordinat
koordinat
koordinat
koordinat
koordinat
koordinat
koordinat
koordinat

x
y
x
y
x
y
x
y

dari
dari
dari
dari
dari
dari
dari
dari

titik
titik
titik
titik
titik
titik
titik
titik

pertama
pertama
kedua
kedua
ketiga
ketiga
keempat
keempat

Mengembalikan
nilai:
Tidak

Penggunaan:
Web
dan
aplikasi



[
Latihan
BK00‐BK03
]



BK00
 Gambarlah
tiga
titik


BK01
 Gambarlah
lima
garis


BK02
 Gambarlah
sebuah
segi
empat


BK03
 Gambarlah
tiga
ellips



Data
1

Variabel


Variabel
merupakan
komponen
penting
pada
pemrograman.
Variabel
digunakan
dalam

program
untuk
menyimpan
suatu
nilai,
dan
nilai
yang
ada
padanya
dapat

diubah
selama

eksekusi
program
berlangsung.

Bentuk
pendefinisian
variabel:

tipe daftar_variabel;

Contoh
:

int jumlah;
float harga_per_unit, total_harga;

Widianto
Nugroho
|
http://widiantonugroho.com


15

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Tipe
data

Secara
internal,
semua
data
di
dalam
komputer
digital
modern
disimpan
sebagai

bilangan
biner
nol
atau
satu.
Data
biasanya
merepresentasikan
informasi
dalam
dunia

nyata
seperti
nama,
rekening
bank,
dan
lain
sebagainya,
dan
data
biner
tingkat
rendah

(low­level)
diatur
sedemikian
rupa
oleh
bahasa
pemrogaman
menjadi
konsep‐konsep

tingkat
tinggi
(nama,
rekening
bank,
dan
lain
sebagainya).

Secara
praktek,
tipe
data
digunakan
untuk
memberi
nama
atau
label
bagi
suatu
nilai

atau
operasi
yang
bisa
dilakukan
oleh
nilai
tersebut.
Tipe
data
dapat
diklasifikasikan

menurut
kategori‐kategori
sebagai
berikut:

• Tipe
data
primitif,
merupakan
tipe
data
paling
sederhana
seperti
integer
dan

bilangan
floating
point,


• Tipe
data
bentukan,
tipe
yang
dibentuk
dari
tipe
dasar,
seperti
tipe
data
abstrak,

• Sub‐tipe
atau
tipe
turunan,

• Tipe
data
fungsi,
contohnya
fungsi
biner,

• Tipe
data
obyek,
contohnya
variabel
tipe,

• Tipe
data
kelas
(class),
contohnya
obyek
dalam
bahasa
pemrograman
dengan

metode
berorientasi
obyek,

• Dan
lain
sebagainya.


[
Latihan
BK04‐BK06
]



BK04
 Kendalikan
dua
garis
menggunakan
satu
variabel


BK05
 Kendalikan
tiga
garis
menggunakan
satu
variabel


BK06
 Kendalikan
dua
bentuk
menggunakan
dua
variabel



Kontrol
1

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

Widianto
Nugroho
|
http://widiantonugroho.com


16

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif



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


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

Deskripsi

Mengontrol
urutan
pengulangan/loop.
Struktur
for()
terdiri
dari
tiga
bagian:
init,
test,

dan
update.
Tiap
bagian
tersebut
harus
dipisahkan
oleh
titik‐koma
";".
Loop
akan

berlanjut
sampai
dengan
test
bernilai
false.
Ketika
for()
dieksekusi,
terjadi
event
berikut:

1. Statement
init
dieksekusi

2. Test
dievaluasi
apakah
menghasilkan
true
atau
false

3. Bila
test
menghasilkan
true,
lanjutkan
ke
step
4.
Bila
test
menghasilkan,
loncat
ke

step
6

4. Eksekusi
pernyataan
di
dalam
blok

5. Eksekusi
pernyataan
update
dan
kembali
ke
step
2

6. Keluar
dari
loop.


Sintaks

for(init; test; update) {
pernyataan
}

Parameter

init
test
update
pernyataan

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

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:
while()

Widianto
Nugroho
|
http://widiantonugroho.com


17

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


[
Latihan
BK07‐BK09
]



BK07
 Buatlah
sebuah
pola
berlapis
menggunakan
loop


BK08
 Gambarlah
pola
yang
berbeda
menggunakan
loop
yang
sama


BK09
 Gambarlah
pola
yang
berbeda
menggunakan
dua
loop
baru



Bentuk
2


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

Widianto
Nugroho
|
http://widiantonugroho.com


18

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


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


Widianto
Nugroho
|
http://widiantonugroho.com


19

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


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


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

Deskripsi

Menggunakan
fungsi‐fungsi
beginShape()
dan
endShape()
memungkinkan
membuat

bentuk
yang
lebih
kompleks.
Fungsi
beginShape()
mulai
merekam
verteks
dari
sebuah

bentuk
dan
fungsi
endShape()
menghentikan
rekaman.
Fungsi
beginShape()

memerlukan
sebuah
parameter
yang
memberitahu
tipe
bentuk
yang
akan
dibuat
dari

verteks‐verteks
yang
ada.
Parameter
untuk
beginShape()
adalah
LINES,
LINE_STRIP,

LINE_LOOP,
TRIANGLES,
TRIANGLE_STRIP,
QUADS,
QUAD_STRIP,
dan
POLYGON.

Sesudah
memanggil
fungsi
beginShape(),
serangkaian
fungsi
vertex()
harus

mengikutinya.
Untuk
menghentikan
menggambar
bentuk,
panggil
fungsi
endShape().

Fungsi
vertex()
dengan
dua
parameter
menentukan
sebuah
lokasi
dalam
2D
dan
fungsi

vertex()
dengan
tiga
parameter
menentukan
sebuah
lokasi
dalam
3D.
Tiap
bentuk
akan

diberi
garis
pinggir
dengan
warna
dari
fungsi
stroke()
dan
diisi
warna
dengan
fungsi

fill().


Sintaks

beginShape(MODE);

Parameter

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

Mengembalikan
nilai:
Tidak

Penggunaan:
Web
dan
aplikasi

Widianto
Nugroho
|
http://widiantonugroho.com


20

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Perintah
terkait:

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

Nama:
endShape()

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

Deskripsi

Fungsi
endShape()
adalah
pasangan
dari
fungsi
beginShape()
dan
hanya
bisa
dipanggil

sesudah
beginShape().
Ketika
endshape()
dipanggil,
semua
data
gambar
yang

didefinisikan
sejak
sebelumnya
memanggil
beginShape()
ditulis
kedalam
image
buffer.


Sintaks

beginShape();

Mengembalikan
nilai:
Tidak

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:
beginShape()

LINES,
LINE_STRIP,
LINE_LOOP,
TRIANGLES,
QUADS,
POLYGON,
dan

lain‐lain

Nama:
LINES,
LINE_STRIP,
LINE_LOOP,
TRIANGLES,
QUADS,
POLYGON

Contoh
lihat
beginShape().


Deskripsi

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

dan
POLYGON
adalah
Parameter
untuk
beginShape().Dengan
menggunakan
fungsi‐
fungsi
beginShape()
dan
endShape()
memungkinkan
membuat
bentuk
yang
lebih

kompleks.
Fungsi
beginShape()
mulai
merekam
verteks
dari
sebuah
bentuk
dan
fungsi

endShape()
menghentikan
rekaman.
Fungsi
beginShape()
memerlukan
sebuah

parameter
yang
memberitahu
tipe
bentuk
yang
akan
dibuat
dari
verteks‐verteks
yang

ada.
Sesudah
memanggil
fungsi
beginShape(),
serangkaian
fungsi
vertex()
harus

mengikutinya.
Untuk
menghentikan
menggambar
bentuk,
panggil
fungsi
endShape().

Fungsi
vertex()
dengan
dua
parameter
menentukan
sebuah
lokasi
dalam
2D
dan
fungsi

vertex()
dengan
tiga
parameter
menentukan
sebuah
lokasi
dalam
3D.
Tiap
bentuk
akan

diberi
garis
pinggir
dengan
warna
dari
fungsi
stroke()
dan
diisi
warna
dengan
fungsi

fill().

Widianto
Nugroho
|
http://widiantonugroho.com


21

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Sintaks

beginShape(MODE)

Parameter

MODE

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

Mengembalikan
nilai:
Tidak

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:

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


[
Latihan
BK10‐BK12
]



BK10
 Dengan
menggunakan
beginShape()
dan
endShape(),
buatlah
sebuah
program

yang
mengekspresikan
ide
“perubahan”
dengan
tidak
lebih
dari
5
baris


BK11
 Dengan
menggunakan
beginShape()
dan
endShape(),
buatlah
sebuah
program

yang
mengekspresikan
ide
“harmoni”
dengan
tidak
lebih
dari
5
baris

BK12
 Buatlah
sebuah
gambar
yang
berbeda
dari
BK11,
tetapi
menggunakan
data

verteks
yang
sama



Struktur
2


Setup
&
Draw

Nama:
setup()

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

Deskripsi

Fungsi
yang
dipanggil
sekali
ketika
progtam
mulai
berjalan.
Digunakan
untuk

menentukan
properti‐properti
lingkungan
awal
seperti
ukuran
layar,
warna

background,
memuat
gambar,
dsb.
sebelum
draw()
mulai
mengeksekusi
dan

menggambar
image
ke
layar.
Variabel‐variabel
yang
dideklarasikan
di
dalam
setup

setup()
tidak
dapat
diakses
dalam
draw().
Bila
sebuah
program
memanggil
fungsi

setup()
maka
ia
akan
juga
akan
memanggil
draw().

Widianto
Nugroho
|
http://widiantonugroho.com


22

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Sintaks

void setup() {
pernyataan
}

Parameter

pernyataan

pernyataan yang valid

Mengembalikan
nilai:

Penggunaan:

Perintah
terkait:


Nama:
draw()

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

Deskripsi

Secara
kontinu
mengeksekusi
baris‐baris
kode
yang
dimuat
di
dalam
blok
draw()

sampai
dengan
program
dihentikan.
Fungsi
draw()
digunakan
berhubunagn
dengan

setup().
Lamanya
draw()
mengeksekusi
dalam
tiaip
detik
bisa
dikontrol
menggunakan

fungsi
delay()
dan
fungsi
framerate().


Sintaks

draw() {
pernyataan
}

Parameter

pernyataan

Urutan pernyataan yang dieksekusi berulangkali

Mengembalikan
nilai:
Tidak

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:
setup()

Widianto
Nugroho
|
http://widiantonugroho.com


23

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Method


Method
adalah
fungsi
yang
didefinisikan
di
dalam
class
yang
mengoperasikan
instans‐
instans
dari
class
tersebut.

Method
terkait
dengan
konsep
pemrograman
berorientasi
objek.
Instruktur
akan

menjelaskan
secara
singklat
tentang
konsep
pemrograman
berorientasi
objek.


Parameter

Umumnya
fungsi
menerima
masukan
yang
disebut
argumen
atau
parameter.
Masukan

ini
selanjutnya
diproses
oleh
fungsi.
Hasil
akhir
berupa
sebuah
nilai
yang
disebut
nilai

balik.

Contoh
,
kalau
terdapat
pernyataan
:

kap = toupper(huruf);

maka:


• huruf
adalah
argumen
bagi
fungsi
toupper()

• toupper()
memberikan
nilai
balik
(berupa
huruf
kapital
dari
huruf)
ke
variabel

kap.


[
Latihan
BK13‐BK15
]



BK13
 Buatlah
sebuah
method
dengan
satu
parameter
dan
secara
visual

mendemonstrasikannya

BK14
 Buatlah
sebuah
method
untuk
menggambar
segi
tiga
dan
secara
visual

mendemonstrasikan
fleksibilitasnya

BK15
 Buatlah
sebuah
method
dengan
tiga
parameter
atau
lebih
dan
secara
visual

mendemonstrasikan
fleksibilitasnya



Lingkungan
2


Mengekspor
dan
dokumentasi



Anda
dapat
mengekspor
hasil
pekerjaan
anda
ke
dalam
format
yang
dapat
diakses

melalui
Web.
Caranya
dengan
menggunakan
menu
File

Eksport
to
Web.
Selain
itu

anda
dapat
menggunakan
shortcut
dengan
menekan
tombol
Ctrl+E
pada
keyboard.


Widianto
Nugroho
|
http://widiantonugroho.com


24

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Waktu
dan
Gerak


Kontrol
2


If

Nama:
if()

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

Deskripsi

Memungkinkan
program
untuk
membuat
keputusan
tentang
kode
mana
yang
akan

dieksekusi.
Bila
evalusi
ekspresi
menghasilkan
true,
pernyataan
yang
terdapat
di
dalam

blok
dieksekusi
dan
bila
ekspresi
menghasilkan
false
pernyataan
tidak
akan
dieksekusi.


Sintaks

if(ekspresi) {
pernyataan
}

Parameter

Ekspresi
pernyataan

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

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:
else

Widianto
Nugroho
|
http://widiantonugroho.com


25

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


If
&
Else


Nama:
else

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


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

i += 5) {
);
);
);

Deskripsi

Memperluas
struktur
if()
membuat
program
memilih
antara
dua
atau
lebih
blok
kode.

Menentukan
sebuah
blok
kode
dieksekusi
bila
if()
bernilai
false.


Sintaks

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

Parameter

ekspresi
false
statements

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

Widianto
Nugroho
|
http://widiantonugroho.com


26

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Penggunaan:
Web
dan
aplikasi

Perintah
terkait:
if()

[
Latihan
WG00‐WG01
]


WG00
 Gunakan
method
if()
untuk
membuat
dua
pola
yang
berbeda
di
dalam
program

yang
sama


WG01
 Gunakan
method
if()
dan
else()
untuk
membuat
tiga
pola
yang
berbeda
di
dalam

program
yang
sama



Gerak
1

Membatasi
layar

Cara
membatasi
layar
dapat
dilihat
pada
potongan
program
berikut:

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

Mengubah
arah

Cara
mengubah
arah
dapat
dilihat
pada
potongan
program
berikut:

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

Widianto
Nugroho
|
http://widiantonugroho.com


27

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


[
Latihan
WG02‐WG04
]



WG02
 Gerakkan
sebuah
elemen
visual
di
layar.
Ketika
menghilang
di
ujung
layar,

gerakkan
kembali
ke
dalam
bingkai


WG03
 Gerakkan
sebuah
elemen
visual
di
layar.
Ketika
menyentuh
ujung
layar,
balikkan

arahnya


WG04
 Ubah
kecepatan
dari
gerak
sebuah
bentuk
ketika
bentuk
tersebut
memasuki

wilayah
yang
berbeda
di
layar



Kalkulasi
1

Derajat
&
Radian

Nama:
degrees()

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

Deskripsi

Mengubah
nilai
radian
ke
nilai
yang
sama
dalam
derajat.
Radian
dan
sudut
adalah
dua

cara
menghitung
sesuatu
yang
sama.
Terdapat
360
derajat
dalam
sebuah
lingkaran
dan

juga
2*PI
radian
dalam
sebuah
lingkaran.
Contoh,
90°
=
PI/2
=
1.5707964.
Semua

method
trigonometri
dalam
Processing
mengharuskan
semua
parameter
dihitung
dalam

radian.


Sintaks

degrees(sudut);

Parameter

sudut

int atau float

Mengembalikan
nilai:
float

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:
radians()

Nama:
radians()

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

Deskripsi

Mengubah
nilai
derajat
ke
nilai
yang
sama
dalam
radian.
Radian
dan
sudut
adalah
dua

cara
menghitung
sesuatu
yang
sama.
Terdapat
360
derajat
dalam
sebuah
lingkaran
dan

juga
2*PI
radian
dalam
sebuah
lingkaran.
Contoh,
90°
=
PI/2
=
1.5707964.
Semua

method
trigonometri
dalam
Processing
mengharuskan
semua
parameter
dihitung
dalam

radian.


Widianto
Nugroho
|
http://widiantonugroho.com


28

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Sintaks

radians(sudut)

Parameter

sudut

int atau float

Mengembalikan
nilai:
float

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:
degrees()


Sinus
and
Kosinus

Nama:
sin()

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

Deskripsi

Menghitung
sinus
dari
suatu
sudut.
Fungsi
sin()
menerima
nilai
parameter
sudut
dalam

radian
(nilai
antara
0
dan
6.28).
Nilai
dikembalikan
dalam
rentang
dari
‐1
sampai

dengan
1.


Sintaks

sin(rad);

Parameter

rad

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

Mengembalikan
nilai:
float

Penggunaan:
Web
dan
alikasi

Perintah
terkait:


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

Widianto
Nugroho
|
http://widiantonugroho.com


29

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Nama:
cos()

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

Deskripsi

Menghitung
cosinus
dari
suatu
sudut.
Fungsi
cos()
menerima
nilai
parameter
sudut

dalam
radian
(nilai
antara
0
dan
6.28).
Nilai
dikembalikan
dalam
rentang
dari
‐1
sampai

dengan
1.


Sintaks

cos(rad);

Parameter

rad

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

Mengembalikan
nilai:
float

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:

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

[
Latihan
WG05‐WG06
]



WG05
 Buatlah
sebuah
animasi
dinamis
menggunakan
method
cos()
sebagai
penghasil

gerakan


WG06
 Buatlah
sebuah
animasi
dinamis
menggunakan
method
sin()
dan
cos()
sebagai

penghasil
gerakan



Transformasi
1

Translate

Nama:
translate()

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

Widianto
Nugroho
|
http://widiantonugroho.com


30

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif



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


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

Deskripsi

Menentukan
jarak
untuk
memindahkan
objek
di
dalam
ruang.
Parameter
x
menentukan

translasi
kanan/kiri,
parameter
y
menentukan
translasi
naik/turun,
dan
parameter
z

menentukan
translasi
maju/mundur
dari
layar.
Secara
teknis,
translate()
mengalikan

matriks
transformasi
pada
saat
ini
dengan
matriks
translasi.


Sintaks

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

Parameter

x
y
z

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

Mengembalikan
nilai:
Tidak

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:


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

Widianto
Nugroho
|
http://widiantonugroho.com


31

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Rotate

Nama:
rotate()

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

Deskripsi

Memutar
objek
sebanyak
yang
ditentukan
oleh
parameter
sudut.
Objek
selalu
dirotasi
di

sekitar
posisi
relatifnya
ke
titik
awal.
Bilangan
positif
memutar
objek
berlawanan
arah

jarum
jam.
Secara
teknis,
rotate()
mengalikan
matriks
transformasi
dengan
matriks

perkalian.


Sintaks

rotate(sudut);

Parameter

sudut

float: sudut rotasi atau putaran ditentukan dalam radian

Mengembalikan
nilai:
Tidak

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:

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

Widianto
Nugroho
|
http://widiantonugroho.com


32

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


rect(30, 20, 50, 50);

Deskripsi

Menambah
dan
mengurangi
ukuran
dari
objek
dengan
memperbesar
dan
mengerutkan

verteks.
Nilai
scale
ditentukan
oleh
persentase
desimal.
Memanggil
fungsi
scale(2.0)

akan
menambah
besar
ukuran
suatu
bentuk
sebesar
dua
ratus
persen.
Objek
selalu

diskalakan
dari
asal
relatifnya
ke
sistem
koordinat.


Sintaks

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

Parameter

ukuran
x
y
z

float:
float:
float:
float:

persentase
persentase
persentase
persentase

untuk
untuk
untuk
untuk

menskalakan
menskalakan
menskalakan
menskalakan

objek
objek dalam sumbu "x"
objek dalam sumbu "y"
objek dalam sumbu "z"

Mengembalikan
nilai:
Tidak

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:

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

Widianto
Nugroho
|
http://widiantonugroho.com


33

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Deskripsi

Push
adalah
mendorong
transformasi
matriks
ke
atas
tumpukan
matriks
(matrix
stack).

Memahami
push()
dan
pop()
memerlukanpemahaman
akan
konsep
matrix
stack.
Fungsi

push()
menyimpan
sistem
koordinat
saat
ini
ke
dalam
tumpukan
dan
pop()

mengembalikan
ke
semula
sistem
koordinat
sebelumnya.
push()
dan
pop()
digunakan

dalam
kaitan
dengan
metode
transformasi
lainnya
dan
bisa
dilekatkan
untuk

mengontrol
jangkauan
dari
transformasi.


Sintaks

push();

Mengembalikan
nilai:

Penggunaan:

Perintah
terkait:

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

Nama:
pop()

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

Deskripsi

Pops
adalah
memunculkan
transformasi
matriks
keluar
dari
tumpukan
matriks
(matrix

stack).
Memahami
push()
dan
pop()
memerlukanpemahaman
akan
konsep
matrix
stack.

Fungsi
push()
menyimpan
sistem
koordinat
saat
ini
ke
dalam
tumpukan
dan
pop()

mengembalikan
ke
semula
sistem
koordinat
sebelumnya.
push()
dan
pop()
digunakan

dalam
kaitan
dengan
metode
transformasi
lainnya
dan
bisa
dilekatkan
untuk

mengontrol
jangkauan
dari
transformasi.


Widianto
Nugroho
|
http://widiantonugroho.com


34

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Sintaks

pop();

Mengembalikan
nilai:
Tidak

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:
push()

[
Latihan
WG11‐WG12
]


WG11
 Gunakan
method
rotate()
untuk
mengekspresikan
ide
“keseimbangan”


WG12
 Gunakan
method
scale()
untuk
mengekspresikan
ide
“keseimbangan”



Presentasi:
Pelanting



Instruktur
akan
mempresentasikan
program
yang
mendemonstrasikan
pelanting
atau

pantulan.


Widianto
Nugroho
|
http://widiantonugroho.com


35

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Gerak
dan
Respon


Masukan
1

mouseX,
mouseY

Nama:
mouseX

void draw()
{
line(mouseX, 20, mouseX, 80);
}

Deskripsi

Variabel
sistem
mouseX
selalu
memuat
koordinat
horizontal
dari
mouse.


Sintaks

mouseX

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:

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

Nama:
mouseY

void draw()
{
line(20, mouseY, 80, mouseY);
}

Deskripsi

Variabel
sistem
mouseY
selalu
memuat
koordinat
vertikal
dari
mouse.


Sintaks

mouseY

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:



Widianto
Nugroho
|
http://widiantonugroho.com


36

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif



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

mousePressed


Nama:
mousePressed

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

Deskripsi

Processing
secara
otomatis
memantau
apakah
tombol
mouse
ditekan
atau
tidak

(memantau
tombol
kiri
mouse
pada
mouse
dengan
tombol
lebh
dari
satu).
Nilai
dari

variable
sistem
mousePressed
adalah
true
bila
tombol
ditekan
(pressed)
dan
false
bila

tombol
tidak
ditekan.

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:

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

[
Latihan
GR00‐GR02
]



GR00
 Gambarlah
sebuah
elemen
visual
yang
bergerak
berhubungan
dengan
mouse


GR01
 Gambarlah
dua
elemen
visual
yang
masing‐masing
bergerak
berhubungan

dengan
mouse
dengan
cara
yang
berbeda


GR02
 Gambarlah
sebuah
elemen
visual
yang
bergerak
berhubungan
dengan
mouse,

tetapi
dengan
hubungan
yang
berbeda
ketika
mouse
diklik



Widianto
Nugroho
|
http://widiantonugroho.com


37

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Masukan
2

mousePressed()

Nama:
mousePressed()

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

Deskripsi

Fungsi
mousePressed()
dipanggil
tiap
kali
tombol
mouse
ditekan.
Ketika
menggunakan

mouse
dengan
tombol
lebih
adri
satu,
hanya
tombol
kiri
yang
terdeteksi.


Sintaks

mousePressed()

Mengembalikan
nilai:
Tidak

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:

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

Widianto
Nugroho
|
http://widiantonugroho.com


38

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


mouseReleased()

Nama:
mouseReleased()

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

Deskripsi

Fungsi
mouseReleased()
dipanggil
tiap
kali
tombol
mouse
dilepaskan
atau
tidak
ditekan.

Ketika
menggunakan
mouse
dengan
tombol
lebih
dari
satu,
hanya
tombol
kiri
yang

terdeteksi.


Sintaks

mouseReleased()

Mengembalikan
nilai:
Tidak

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:

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

Widianto
Nugroho
|
http://widiantonugroho.com


39

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


mouseMoved()

Nama:
mouseMoved()

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

Deskripsi

Fungsi
mouseMoved()
dipanggil
tiap
kali
mouse
bergerak
dan
tombol
mouse
tidak

ditekan.


Sintaks

mouseMoved()

Mengembalikan
nilai:
Tidak

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:

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

Widianto
Nugroho
|
http://widiantonugroho.com


40

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


mouseDragged()

Nama:
mouseDragged()

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

Deskripsi

Dipanggil
tiap
kali
mouse
bergerak
dan
tombol
ditekan.
Ketika
menggunakan
mouse

dengan
tombol
lebih
adri
satu,
hanya
tombol
kiri
yang
terdeteksi.


Sintaks

mouseDragged()

Mengembalikan
nilai:
Tidak

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:

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

[
Latihan
GR05‐GR06
]



GR05
 Buat
sebuah
event
yang
dimulai
ketika
mouse
diklik
dan
berakhir
ketika
klik

mouse
dilepas


GR06
 Buatlah
sebuah
gambar
responsif
yang
berkelakuan
berbeda
ketika
mouse

bergerak
dan
mouse
ditarik



Widianto
Nugroho
|
http://widiantonugroho.com


41

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


GUI
1

Rollover

Contoh
berikut
ini
mendemonstrasikan
rollover.
Warna
akan
berubah
bila
mouse

melalui
obyek.

// Rollover
// by REAS <http://www.groupc.net>
// Roll over the colored squares in the center of the image
// to change the color of the outside rectangle
// Updated 09 February 2003
// Created 21 August 2002
int
int
int
int

rectX, rectY;
circleX, circleY;
rectSize = 50;
circleSize = 53;

//
//
//
//

Position
Position
Diameter
Diameter

of
of
of
of

square button
circle button
rect
circle

color rectColor;
color circleColor;
color baseColor;
boolean rectOver = false;
boolean circleOver = false;
void setup()
{
size(200, 200);
rectColor = color(204, 153, 0);
circleColor = color(102, 153, 0);
baseColor = color(102, 102, 102);
circleX = width/2+circleSize/2+10;
circleY = height/2;
rectX = width/2-rectSize-10;
rectY = height/2-rectSize/2;
ellipseMode(CENTER);
}
void draw()
{
update(mouseX, mouseY);
noStroke();
if (rectOver) {
background(rectColor);
} else if (circleOver) {
background(circleColor);
} else {
background(baseColor);
}
stroke(255);
fill(rectColor);
rect(rectX, rectY, rectSize, rectSize);
fill(circleColor);
ellipse(circleX, circleY, circleSize, circleSize);
}
void update(int x, int y)
{
if( overCircle(circleX, circleY, circleSize) ) {
circleOver = true;
rectOver = false;

Widianto
Nugroho
|
http://widiantonugroho.com


42

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


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


Button


Contoh
berikut
ini
mendemonstrasikan
button
atau
tombol.

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

Widianto
Nugroho
|
http://widiantonugroho.com


43

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


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 {

Widianto
Nugroho
|
http://widiantonugroho.com


44

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


}

return false;

}

[
Latihan
GR09‐GR10
]



GR09
 Ubahlah
warna
dari
segi
empat
ketika
mouse
melewati
permukaannya


GR10
 Piculah
sebuah
event
ketika
mouse
menggelinding
di
atas
lingkaran



Masukan
3

keyPressed


Nama:
keyPressed

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

Deskripsi

Sistem
variable
boolean
keyPressed
bernilai
true
bila
salah
satu
kunci
ditekan
dan

bernilai
false
bila
tidak
ada
kunci
yang
ditekan.


Sintaks

keyPressed

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:

key
keyCode
keyPressed()
keyReleased()

Widianto
Nugroho
|
http://widiantonugroho.com


45

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


key


Nama:
key

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

Deskripsi

Variabel
sistem
key
selalu
memuat
nilai
dari
kunci
yang
saat
ini
ditekan
pada
keyboard.


Sintaks

key

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:

keyPressed
keyCode
keyPressed()
keyReleased()

keyPressed()


Nama:


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

Deskripsi

Fungsi
keyPressed()
dipanggil
tiap
kali
sembarang
kunci
ditekan.
Sebagai
aturan
umum,

tidak
ada
yang
digambar
di
dalam
blok
keyPressed().


Widianto
Nugroho
|
http://widiantonugroho.com


46

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


Sintaks

void keyPressed() {
pernyataan
}

Mengembalikan
nilai:
Tidak

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:

keyPressed
key
keyCode
keyReleased()

keyReleased()


Nama:

keyReleased()

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

Deskripsi

Fungsi
keyReleased()
dipanggil
tiap
kali
sebuah
kunci
dilepaskan.
Sebagai
aturan
umum,

tidak
ada
yang
digambar
di
dalam
blok
keyReleased().


Sintaks

void keyReleased() {
pernyataan
}

Mengembalikan
nilai:
Tidak

Penggunaan:
Web
dan
aplikasi

Perintah
terkait:

keyPressed
key
keyCode
keyPressed()

Widianto
Nugroho
|
http://widiantonugroho.com


47

Processing:
Bahasa
dan
Lingkungan
Pemrograman
Grafis
Interaktif


[
Latihan
GR11‐GR12
]



GR11
 Ungkapkan
sebuah
elemen
yang
tersembunyi
untuk
melengkapi
sebuah
gambar

ketika
tombol
space
bar
diklik


GR12
 Buatlah
sebuah
landscape
abstrak
responsif
yang
dikendalikan
oleh
keyboard.

Tulislah
instruksi
sebagai
komentar
di
dalam
kode


Widianto
Nugroho
|
http://widiantonugroho.com


48

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.