KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

48
1

Transcript of KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

Page 1: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

1

Page 2: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

2

KATA PENGANTAR

Puji syukur ke hadirat Tuhan Yang Maha Esa yang telah memberikan Rahmat-Nya

sehingga Modul Praktikum Processing untuk mahasiswa/i Fakultas Ilmu Komunikasi

Universitas Gunadarma ini dapat diselesaikan dengan sebaik-baiknya.

Modul praktikum ini dibuat sebagai pedoman dalam melakukan kegiatan praktikum

Processing pada Fakultas Ilmu Komunikasi Universitas Gunadarma. Modul Praktikum ini

diharapkan dapat membantu mahasiswa/i dalam mempersiapkan dan melaksanakan

praktikum dengan baik, terarah serta terencana. Setiap Bab pada modul berisi tujuan

pelaksanaan praktikum, target, serta metode pelaksanaan pemberian materi, selain itu

terdapat teori singkat dan latihan soal untuk memperdalam pemahaman mahasiswa/i

mengenai materi yang dibahas.

Penyusun menyakini bahwa dalam pembuatan Modul Praktikum Processing ini masih

jauh dari sempurna. Oleh karena itu penyusun mengharapkan kritik dan saran yang

membangun guna penyempurnaan modul praktikum ini dimasa yang akan datang.

Akhir kata, penyusun mengucapkan banyak terima kasih kepada semua pihak yang

telah membantu baik secara langsung maupun tidak langsung.

Tim Penyusun

Page 3: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

3

DAFTAR ISI

Kata Pengantar .................................................................................... 2

Daftar Isi .............................................................................................. 3

Pengenalan Processing .......................................................................... 4

Instalasi Processing ............................................................................... 4

Mengenal Lingkungan Processing ....................................................... 5

Pengembangan Processing ................................................................... 11

Paradigma Processing .......................................................................... 14

Object Oriented .................................................................................... 15

Konstanta .............................................................................................. 23

Variabel ................................................................................................. 24

Perulangan ............................................................................................ 25

Operator Aritmatika ............................................................................ 30

Conditional ............................................................................................ 33

Operator Logika ................................................................................... 37

Page 4: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

4

I. PENGENALAN PROCESSING

1.1 Tentang Processing

Processing adalah salah satu dari bahasa pemrograman dan lingkungan

pengembangan open sorce. Processing suatu projek terbuka yang dikerjanakn oleh Ben

Fry dan Casey Reas. Berkembang dari ide-ide yang dieksplorasi di Aesthetics and

Computation Group (ACG). Sejak tahun 2001, software processing sudah mulai

dipromosikan untuk bidang seni visual.

1.2 Pengenalan Processing

Konsep dari software processing adalah menggunakan prinsip-prinsip bentuk visual,

gerak dan intraksi.

1.3 Tujuan Processing

Tujuan dari software processing adalah untuk pembelajaran dasar-dasar dari

pemrograman komputer dalam bentuk visual.

1.4 Penggunaan Processing

Pada saat ini, processing sudah digunakan oleh puluhan ribu siswa, seniman,

desainer, peneliti dan penggemar untuk belajar, prototype dan produksi.

II. INSTALASI PROCESSING

2.1 Versi - Versi Processing

Saat ini terdapat beberapa versi software processing, yaitu :

a. Versi 1.5.1 dirilis pada 15 Mei 2011.

b. Versi 2.2.1 dirilis pada 19 Mei 2014.

c. Versi 3.0a4 dirilis pada 12 September 2014.

d. Versi 3.0a5 dirilis pada 16 November 2014.

2.2 Sistem Operasi

Software processing dapat dijalankan oleh beberapa sistem operasi, diantaranya:

Windows 64-bit, Windows 32-bir, Linux 64-bit, Linux 32-bit, dan Mec OS X.

2.3 Download Processing

Page 5: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

5

Software Processing dapat didownload dengan gratis di website resmi processing

namun kita ditawarkan berdonasi untuk Processing Foundation (www.processing.org)

2.4 Instalasi Processing

Setelah di download lakukan langkah-langkah berikut:

1. Setelah didownload.

2. Extrak file winrar-nya.

3. Masuk ke file processing yang sudah diextrak.

4. pilih dan klik processing.exe

III. MENGENAL LINGKUNGAN PROCESSING

3.1 Sketsa dan Prototype

Sketsa adalah cara awal seseorang menuangkan buah pikiran, yaitu dengan tujuan

untuk memvisualisasikan pemikiran. Contoh : Pembuatan storyboard pada animasi.

Page 6: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

6

3.2 Fleksibilitas

Processing konsisten menggunakan banyak tool yang dapat digunakan bersama.

Lebih dari 100 library yang disediakan, seperti suara, komputer vision, dan lain-lain.

Dengan begitu, banyak informasi yang dapat mengalir kedalam ataupun keluar processing.

3.3 Family Tree

Seperti bahasa manusia, bahasa pemrograman juga memiliki bahasa terkait.

Processing menggunakan bahasa java, bahasa sintaks yang digunakan hampir mirip, tetapi

ada penambahan fitur custom untuk grafik dan interaksi.

Oleh karena itu, pembelajaran processing adalah langkah awal untuk pemrograman

pada bahasa lain dan dengan menggunakan perangkat lunak yang berbeda.

Page 7: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

7

3.4 Mengenal Menu Processing

1. Display Processing: Berfungsi untuk menampilkan output.

PDE (Processing Development Environment): Tempat dimana anda dapat

membuat sketch.

Page 8: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

8

2. Menu File

a. New: Membuat file baru

b. Open: Membuka file

c. Sketchbook: Berisi file sketch yang anda buat

d. Recent: Daftar file sketch yg telah disimpan

e. Examples: Berisi contoh-contoh

f. Close: Menutup jendela kerja

g. Save: Menyimpan sketch

h. Save As…: Menyimpan sketch sebagai …

i. Export Application: Mengexport menjadi

sebuah aplikasi

j. Page Setup: Menyeting spesifikasi halaman

k. Print: Mencetak kesebuah kertas

l. Preferences

m. Quit

3. Menu Edit

a. Undo : Mengbalikan kekondisi sebelum

b. Redo : Kebalikan dari menu undo

c. Cut : Untuk memotong dari yang telah anda pilih

d. Copy : Untuk menduplikat dari yang telah anda pilih

e. Copy as HTML : Untuk menduplikat dari yang telah anda pilih dengan

hasil akhir dalam bentuk format HTML

f. Paste : Menampilkan hasil dari fungsi cut/ copy

g. Select All : Memilih semua

h. Auto Format : Membuat kode yang anda pilih menjadi dalam bentuk

standar penulisan kode

i. Comment/Uncomment : Untuk memberikan atau menghilangkan komentar

j. Increase Indent : Text yang telah anda tandai, akan digeser kekanan

sebanyak 1 tabulasi

k. Decrease Indent : Text yang telah anda tandai, akan digeser kekiri

sebanyak 1 tabulasi

l. Find : Mencari text dengan menggunakan keyword

Page 9: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

9

m. Find Next : Mencari text selanjutnya dengan menggunakan

keyword yang telah tersimpan pada find

n. Find Previous : Mencari text sebelumnya dengan menggunakan

keyword yang telah tersimpan pada find

o. Use Selection for Find : Memilih keyword dengan cara memblok, lalu

disimpan pada find

4. Menu Sketch

a. Run : Untuk mengeksekusi sketch

b. Present : Membuat tampilan fullscrean pada ketika running

c. Stop : Menghentikan sketch yang sedang running

d. Import Library … : Memasukan library tambahan berdasarkan kategori

e. Show Sketch Folder : Membuka direktori skatch

f. Add File … : Membuka file navigasi yang mengijinkan anda

meload gambar, huruf, media, dll

5. Menu Tools

Page 10: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

10

a. Create Font : Berfungsi membuat karakter huruf

b. Color Selector : Memilih dan juga mengetahui value dari warna

HSB dan RGB yang telah terpilih

c. Archive Sketch : Membuat file dalam bentuk Zip dari sketch

d. Movie Maker : Membuat Quick time movie dari sequence image

e. Add Tool : Membuka tool manager, yang mengijinkan anda

menambahkan tool yang dapat membantu anda

6. Menu Help

a. Environmen : Memberikan informasi pada lingkungan

pemrograman processing, anda akan diarahkan

pada jendela web browser

b. Reference : Menyediakan referensi mengenai bahasa

processing, yang mana telah tersimpan pada

program processing

c. Find in Reference : Anda dapat mencari referensi, dengan

memasukan keyword yang anda cari

d. Online : Menu ini akan aktif ketika terkoneksi dengan

internet, ketika mengakses bantuan

e. Getting Started : Memberikan petunjuk kepada anda, ketika

anda pertama kali menggunakan processing

f. Troubleshooting : Membantu anda ketika anda melakukan

kesalahan, menu ini akan membantu anda

memberikan solusi

g. Frequently Asked Question : Anda akan diarahkan pada jendela tanya

jawab

h. Visit Processing.org : Anda akan dibawa ke website resmi

processing

Page 11: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

11

IV. PENGEMBANGAN PROCESSING

4.1 Pengenalan

Processing sekarang sudah banyak perkembangannya dari berbagai bidang,

diantaranya bidang Game, Primitives 3D, Graphical User Interface (GUI) untuk

mikrokontroller, animasi, deteksi wajah dengan kamera, dan masih banyak yang lain.

Games

Page 12: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

12

Primitives 3D

GUI Microcontroller

Animasi

Page 13: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

13

Deteksi Wajah Dengan Camera

Page 14: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

14

V. PARADIGMA DAN STRUKTUR PROCESSING

5.1 Paradigma Processing

Processing mengadopsi paradigma berorientasi objek karena menggunakan konsep

class dan object.

5.2 Penjelasan Struktur Processing

a. Inisialisasi: Bagian dimana kita mendeklarasikan variabel dan import

perpustakaan (libraries).

b. Setup: Suatu bagian untuk menyiapkan atau menyajikan keperluan perogram.

c. Draw: Bagian menggambar atau mendesain.

Page 15: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

15

VI. OBJEK ORIENTED

6.1 Mengenal Konsep Objek di Processing

Menggambar pada layar komputer adalah seperti menggambar pada sebuah kertas

grafik. Pixel adalah grid dari element pencahayaan pada layar computer.

Koordinat-X : Nilai yang mewakili sumbu X (Horizontal)

Koordinat-Y : Nilai yang mewakili sumbu Y (Vertikal)

6.2 Perbandingan Pixel

Pixel merupakan suatu satuan standar ukuran yang digunakan pada layar.

Perbandingan berikut ini adalah untuk melihat perbedaan dari setiap nilai pixel yang

digunakan. Diharapkan anda bisa mengambil kesimpulan dari perbandingan berikut ini :

Page 16: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

16

6.3 Function

Function adalah dasar untuk membangun suatu blok dari program processing.

Behavior dari function didefinisikan sebagai parameter, seperti : Size, Point, Line,

Rectangle, Quad, Rect, Ellipse, Arc.

Penggunaan function akan dijelaskan, anda harus lebih fokus lagi pada slide-slide

berikutnya.

6.4 Menggambar Titik

size() function memiliki dua parameter: width dan height pada layar. point() function

memiliki dua parameter untuk mendefinisikan posisi: koordinat-X dan koordinat-Y.

• Jalankan perintah:

size (480, 120);

point (240, 60);

Output:

6.5 Behavior Function Menggambar Bentuk Dasar

Output

Page 17: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

17

6.6 Menggambar Garis

Untuk menggambar garis memerlukan dua buah koordinat, gunakan line () function.

Bu : line (x1, y1, x2, y2);

• Contoh program, size (480, 120);

line (20, 50, 420, 110);

Output:

6.7 Menggambar Bentuk Dasar

Ikuti pola ini :

Untuk membuat sebuah segi tiga, membutuhkan 6 parameter

Untuk membuat sebuah quadrilateral, membutuhkan 8 parameter

Contoh : size (480, 120);

quad (158, 55, 199, 14, 392, 66, 351, 107);

triangle (347, 54, 392, 9, 392, 66);

triangle (158, 55, 290, 91, 290, 112);

Output:

Page 18: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

18

6.8 Menggambar Bujursangkar

Untuk menggambar bujursangkar memerlukan 4 buah paramater, gunakan rect ()

function.

Bu : rect (x1, y1, width, height);

Contoh program: size (480, 120);

rect (180, 60, 220, 40);

Output:

6.9 Menggambar Ellipse dan sebagian Ellipse

Untuk menggambar ellipse memerlukan 4 buah paramater, gunakan ellipse ()

function.

Bu : ellipse (x1, y1, width, height);

Contoh program: size (480, 120);

ellipse(278, -110, 400, 400);

ellipse(120, 100, 110, 110);

ellipse(412, 60, 18, 18);

Output:

Untuk menggambar sebagian dari ellipse memerlukan 6 buah paramater, gunakan

arc () function.

Page 19: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

19

Bu : arc (x1, y1, width, height, start, stop);

Contoh program, size(480, 120);

arc(90, 60, 80, 80, 0, HALF_PI);

arc(190, 60, 80, 80, 0, PI+HALF_PI);

arc(290, 60, 80, 80, PI, TWO_PI+HALF_PI);

arc(390,60, 80, 80, QUARTER_PI, PI+QUARTER_PI);

Output:

6.10 Lingkaran dan Pengukuran Derajat

6.11 Menggambar sebagian dari Ellipse dengan Menggunakan Derajat

Untuk menggambar sebagian dari ellipse memerlukan 6 buah paramater, gunakan

arc () function. Gunakan radians () function, pada parameter start dan stop

Bu : arc (x1, y1, width, height, start, stop);

Contoh program, size(480, 120);

Page 20: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

20

arc(90, 60, 80, 80, 0, radians (90));

arc(190, 60, 80, 80, 0, radians (270));

arc(290, 60, 80, 80, radians (180), radians(450));

arc(390, 60, 80, 80, radians (45), radians (225));

Output:

6.12 Menggambar dengan Urutan

Ketika program dieksekusi (run), komputer mulai membaca dari atas hingga

pembacaan line program berikutnya.

Perhatikan contoh berikut ini :

size(480, 120);

ellipse(140, 0, 190, 190);

rect(160, 30, 260, 20);

size(480, 120);

rect(160, 30, 260, 20);

ellipse(140, 0, 190, 190);

6.13 Shape Properties

a. Draw Smooth Lines

smooth () function, memberikan mehalusan pada tepi garis. Prinsipnya yaitu

dengan mencampurkan/ menyatukan tepi garis dengan nilai pixel terdekatnya. Jika

smooth () function diaktifkan, maka nosmooth () function secara otomatis tidak aktif.

Page 21: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

21

Contoh : size (480, 120);

smooth ();

ellipse (140, 60, 90, 90);

noSmooth ();

ellipse (240, 60, 90, 90);

Output:

b. Set Stroke Weight

Defaultnya strokeweight adalah single pixel, fungsinya memberikan ketebalan

pada garis.

Contoh : size(480, 120);

smooth();

ellipse(75, 60, 90, 90);

strokeWeight(8);

ellipse(175, 60, 90, 90);

ellipse(279, 60, 90, 90);

strokeWeight(20);

ellipse(389, 60, 90, 90);

Output:

Page 22: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

22

c. Set Stroke Atributes

Strokejoin () function

Strokecap () function

Contoh : size (480, 120);

smooth ();

strokeWeight (12);

strokeJoin (ROUND);

rect (40, 25, 70, 70);

strokeJoin (BEVEL);

rect (140, 25, 70, 70);

strokeCap (SQUARE);

line (270, 25, 340, 95);

strokeCap (ROUND);

line (350, 25, 420, 95);

Contoh lain:

size (800, 600);

background (255, 255, 255);

for (int i=0; i<100; i++)

{

fill (random(0, 255), random(0, 255), random(0, 255));

int p1x = (int) random (0,800);

int p1y = (int) random (0,600);

int p2x = (int) random (0,800);

int p2y = (int) random (0,600);

int p3x = (int) random (0,800);

int p3y = (int) random (0,600);

triangle (p1x, p1y, p2x, p2y, p3x, p3y);

}

Page 23: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

23

VII. KONSTANTA

7.1 HALF_PI

HALF_PI adalah konstanta matematika dengan nilai 1.57079632679489661923.

HALF_PI adalah setengah rasio keliling lingkaran dengan diameternya.

7.2 PI

PI adalah konstanta metematika dengan nilai 3.14159265358979323846. PI adalah

rasio keliling lingkaran dengan diameternya.

7.3 QUARTER_PI

QUARTER_PI adalah konstanta matematika dengan nilai 0.7853982.

QUARTER_PI adalah seperempat rasio keliling lingkaran dengan diameternya.

7.4 TAU

TAU sam seperti TWO_PI adalah konstanta matematika dengan nilai

6.28318530717958647693. TAU adalah dua kali rasio keliling lingkaran dengan

diameternya.

7.5 TWO_PI

TWO_PI adalah konstanta matematika dengan nilai 6.28318530717958647693.

TWO_PI adalah dua kali rasio keliling lingkaran dengan diameternya.

Contoh :

float x = width/2; float y = height/2;

float d = width * 0.8;

arc(x, y, d, d, 0, QUARTER_PI);

arc(x, y, d-20, d-20, 0, HALF_PI);

arc(x, y, d-40, d-40, 0, PI);

arc(x, y, d-60, d-60, 0, TAU);

VIII.

Page 24: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

24

VIII. VARIABLES

8.1 Tentang Variable

Suatu variable menyimpan nilai didalam memori, bisa digunakan kapan saja dan

mudah untuk diupdate.

Alasan utama menggunakan variable adalah untuk menghindari pengulangan nilai

pada suatu program, untuk digunakan berkali-kali.

8.2 Menggunakan Lagi Nilai yang Sama

Ketika anda menggunakan ellipse () function, nilai untuk koordinat-Y dan diameter

ellipse kita masukan kedalam suatu variable, nilai yang sama dapat digunakan berkali-kali

pada ellipse yang lainnya.

Contoh : size (480, 120);

smooth ();

int y = 60;

int d = 80;

ellipse (75, y, d, d);

ellipse (175, y, d, d);

ellipse (275, y, d, d);

Nilai variable dapat dengan mudah anda ganti, dengan begitu anda dapat lebih cepat

menyelesaikan pekerjaan anda.

8.3 Membuat Variable

Ketika anda membuat variable, anda harus menetapkan: nama variable, type data,

dan nilai.

Range nilai yang depat disimpan, telah didefinisikan pada type data.

Type data : integer, floating point, character, words, images, font, dll.

Variable harus dideklarasikan terlebih dahulu, yang mana akan ditempatkan pada

ruang memori komputer.

Anda perlu juga untuk mendeklarasikan type data.

Contoh Deklarasi variable :

int x;

x = 12 atau int x = 12

Page 25: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

25

8.4 Basic Arithmetic

Perhatikan Contoh berikut :

size(480, 120);

int x = 25;

int h = 20;

int y = 25;

rect (x, y, 300, h);

x = x + 100;

rect (x, y + h, 300, h);

x = x - 250;

Simbol seperti +, -, dan * (disebut dengan operator). Ketika ditempatkan dengan

nilai seperti 5 + 9, ini adalah expresion.

Operator Matematika:

int x = 4 + 4 * 5; // Memberikan nilai 24 pada x

int x = 4 + (4 * 5); // Memberikan nilai 24 pada x

int x = (4 + 4) * 5; // Memberikan nilai 40 pada x

x += 10; // Ini artinya sama seperti x = x + 10

y -= 15; // Ini artinya sama seperti y = y - 10

x++; // Ini artinya sama seperti x = x + 1

Y-- ; // Ini artinya sama seperti y = y - 1

IX. PERULANGAN

9.1 Tentang Perulangan

Pernyataan perulangan adalah pernyataan yang akan diulang-ulang hingga

persyaratan perulangan terpenuhi. Didalam processing ada 2 buah perulangan yang dapat

digunakan, yaitu For dan While.

9.2 FOR

Perulangan For adalah perulangan yang diketahui banyaknya dan dimulainya dari

mana perulangan yang kita akan lakukan dalam program.

+ Addition

- Substractor

* Multiplication

/ Division

= Assignment

Page 26: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

26

9.3 SYNTAX FOR

Berikut ini syntak dasar For:

for (i=a; i<b; i=i+c)

{ d}

a : mulai perulangan.

b : banyak perulangan.

c : pengeksekusi perulangan.

d : pernyataan yang akan diulang.

for (tipe_data variabel : array)

{pernyataan}

Tipe_data : tipe data variabel yang akan diulang.

Variabel : variabel data yang akan diulang.

Array : variabel array

Pernyataan : pernyataan yang akan diulang.

Contoh 1:

for (int i = 0; i < 40; i = i+1)

{

line(30, i, 80, i);

}

Penjelasan 1:

int i = 0

Variabel i sebagai integer dengan nilai awalan 0.

i < 40

Nilai perulangan variabel i kurang dari 40.

i = i+1

Nilai variabel i akan di tambahkan 1 setiap perulangan.

line(a, b, c, d);

a : koordiant X pertama.

b : koordinat Y pertama.

c : koordinat X kedua.

d : koordinat Y kedua.

Page 27: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

27

Hasil Contoh 1:

Contoh 2:

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

{

line(30, i, 80, i);

}

Hasil Contoh 2:

Penjelasan contoh 2:

int i = 0

Variabel i sebagai integer dengan nilai awalan 0.

i < 80

Nilai perulangan variabel i kurang dari 80.

i = i+5

Nilai variabel i akan di tambahkan 5 setiap perulangan.

line(a, b, c, d);

a : koordinat X pertama.

b : koordinat Y pertama.

Page 28: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

28

c : koordinat X kedua.

d : koordinat Y kedua.

Contoh 3:

for (int i = 30; i < 80; i = i+5)

{

for (int j = 0; j < 80; j = j+5)

{

point(i, j);

}

}

Hasil Contoh 3:

Penjelasan Contoh 3:

Didalam contoh 3, terdapat For didalam For. Dimana For pertama akan berulang jika

For yang ke dua sudah terpenuhi semua persyaratannya.

Point(a,b);

a : koordinat X

b : koordinat Y

Contoh 4:

int[] nums = { 5, 4, 3, 2, 1 };

for (int i : nums)

{

println(i);

}

Page 29: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

29

Penjelasan Contoh 4:

Nums : variabel array sebagai tipe data integer dengan nilai 5,4,3,2,1.

Int i : variabel dari for array sebagai tipe data integer.

Println(i) : nilai variabel i dicetak.

9.4 WHILE

Perulangan while adalah perulangan yang dilakukan jika kita tidak mengetahui

jumlah perulangan yang akan dilakukan namun kita sudah mengetahui syarat dan

ketentuan dari perulangan yang akan kita lakukan.

9.5 SYNTAX dasar FOR

while (ketentuan)

{

pernyataan;

}

Ketentuan : banyaknya perulangan.

Pernyataan : pernyataan yang akan diulang.

Contoh 5:

int i = 0;

while (i < 80)

{

line(30, i, 80, i);

i = i + 5;

}

Hasil Contoh 5:

Page 30: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

30

Penjelasan Contoh 5:

int i

variabel i sebagai integer dengan nilai awal 0.

While(i<80)

perulangin nilai pada variabel i hingga kurang dari 80.

line(a, b, c, d);

a : koordinat X pertama.

b : koordinat Y pertama.

c : koordinat X kedua.

d : koordinat Y kedua.

9.6 EMBEDDEDITERATION

a. Buka menu file.

b. Pilih examples.

c. Pilih basics.

d. Pilih control.

e. Pilih embeddediteration.

9.7 LOGICAL OPERATOR

a. Buka menu file.

b. Pilih examples.

c. Pilih basics.

d. Pilih control.

e. Pilih LogicalOperator

X. OPERATOR ARITMATIKA

10.1 Tentang Operator Aritmatika

Operator aritmatika adalah operator penjumlahan, pengurangan, pembagian dan

pembagian. Atau operator untuk melakukan perhitungan.

10.2 %(MODULO)

Operator (%) adalah operator sisa pembagi dari dau atribut atau nilai. Contoh:

int a = 5 % 4;

5 dibagi 4 adalah 1 dan sisa 1, maka hasilnya a=1.

Page 31: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

31

int b = 125 % 100;

125 dibagi 100 adalah 1 dan sisa 25, maka hasilnya b=25.

float c = 285.5 % 140.0;

285.5 dibagi 140.0 adalah 2 dan sisanya 5.5, maka hasilnya c=5.5.

float d = 30.0 % 33.0;

30.0 dibagi 33.0 adalah 0 dan sisanya 30, maka hasilnya d=30.

10.3 *(MULTIPLY)

Operator (*) adalah operator perkalian dari dua atau lebih atribut atau nilai. Contoh:

int e = 50 * 5;

50 dikalikan dengan 5 maka hasilnya e=250.

int f = e * 5;

Nilai e dikalikan dengan 5 maka hasilnya f=1250.

10.4 *= (MULTIPLY ASSIGN)

Operator (*=) adalah operator menggabungkan perkalian. Contoh:

int a = 5;

int b = 2;

a *= b;

Nilai a (5) dikalikan dengan nilai b (2) dan hasilnya nilai a=10.

Atau

a=a*b;

10.5 + (ADDITION)

Operator (+) adalah operator penambahan dari dua atau lebih atribut atau nilai.

Contoh:

int a=5+10;

Nilai 5 ditambahkan 10 makah hasilnya a=15;

Int b=a+5;

Nilai a (15) ditambahkan 5 maka hasilnya b=20.

10.6 ++ (INCREMENT)

Operator (++) adalah operator penambahan 1. Contoh:

int a=3;

Page 32: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

32

int b=a++;

nilai a adalah 3 maka nilai b adalah nilai a+1 atau 3+1 hasilnya b=4.

10.7 += (ADD ASSIGN)

Operator (+=) adalah operator penggabungan penambahan. Contoh :

Int a=4;

Int b=6;

a+=b;

Nilai a(4) ditambahkan nilai b(6) maka hasilnya a=10.

10.8 - (MINUS)

Operator (-) adalah operator pengurangan dari dua atau lebih atribut atau nilai dan

untuk nilai negatif. Contoh:

Int a=3-2;

3 dikurangi 2 maka hasilnya nilai a=1.

int b=-2;

B bernilai -2.

10.9 - - (DECREMENT)

Operator (--) adalah operator pengurangan 1. Contoh:

Int a=9;

Int b=a--;

Nilai a adalah 9 maka nilai b adalah 9-1=8;

10.10 - = (SUBSTRACT ASSIGN)

Operator (-=) adalah operator penggabungan pengurangan. Contoh:

Int a=4;

Int b=3;

a-=b;

Nilai a(4) dan nillai b(3) maka hasilnya nilai a=1;

Page 33: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

33

10.11 / (DIVIDE)

Operator (/) adalah operator pembagia dari dua buah atribut atau nilai. Contoh:

Int a= 4/2;

4 dibagi 2 hasilnya nilai a=2;

10.12 /= (DIVIDE ASSIGN)

Operator (/=) adalah operator penggabungan pembagian. Contoh:

Int a=6;

Int b=3;

a/=b;

Nilai a(6) dibagi nilai b(3) maka nilai a=2.

XI. CONDITIONAL

11.1 Tentang ?: (CONDITIONAL)

Jika nilai tes bernilai benar(true) maka ekspresi1 dijalankan sedangkan jika tess

bernilai salah (false) maka expresi2 dijalankan.

Code:

test ? ekspresi1 : ekspresi2

Test : ekspresi yang mengevaluasi benar atau salah.

Ekspresi1 : ekspresi yang akan dijalankan.

Ekspresi2 : ekspresi yang akan dijalankan.

Contoh Code:

int s = 0;

for (int i = 5; i < 100; i += 5)

{ s = (i < 50) ? 0 : 255;

stroke(s);

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

Penjelasan:

Jika nilai i kurang dari 50 maka nilai s=0 dan jika nilai i lebih besar dari 50

maka nilai s=255

Page 34: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

34

11.2 BREAK

Akhir eksekusi dari struktur switch, for dan while.

Contoh :

char letter = 'B';

switch(letter) {

case 'A':

println("Alpha");

break;

case 'B':

println("Bravo");

break;

default:

println("Zulu");

break; }

11.3 CASE

Menunjukan label yang berbeda untuk dievaluasi dengan parameter.

Code:

case label : pernyataan

Label : label dari setiap case dengan tipe data char,byte atau integer.

Pernyataan : pernyataan dari case yang dipilih.

Contoh Code Case:

char letter = 'B';

switch(letter) {

case 'A':

println("Alpha");

break;

case 'B':

println("Bravo");

break;

default:

println("Zulu");

break; }

Page 35: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

35

11.4 CONTINUE

Ketika menjalankan didalam operator for atau while, dia akan melompat sisa blok

berikutnya.

Contoh Code Continue:

for (int i = 0; i < 100; i += 10) {

if (i == 70) {

continue;

}

line(i, 0, i, height);

}

11.5 DEFAULT

Mendefinisikan pilihan yang tidak ada label khusus dengan parameter switch.

Code :

Default : pernyataan

Pernyataan : pernyataan yang dijalankan.

Contoh Code Default:

char letter = 'B';

switch(letter) {

case 'A':

println("Alpha");

break;

case 'B':

println("Bravo");

break;

default:

println("Zulu");

break; }

11.6 ELSE

Memperpanjang struktur if yang memungkinkan untuk memilih antara dua atau

lebih blok kode.

Page 36: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

36

Code Else:

if (ekspresi) {

pernyataan }

else if (ekpresi) {

pernyataan }

else { pernyataan }

Ekspresi : syarat.

Pernyataan :pernyataan yang akan dijalankan jika sesuai syarat.

Contoh :

for (int i = 5; i < 95; i += 5) {

if (i < 35) {

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

else {

line(20, i, 90, i); } }

11.7 IF

Fungsi if adalah fungsi untuk penyeleksian kondisi.

Code:

Code :

If(tes){pernyataan}

Tes : syarat.

Pernyataan : pernyataan yang akan dijalankan jika sesuai syarat.

Contoh:

for (int i = 5; i < height; i += 5) {

stroke(255);

if (i < 35) {

stroke(0);}

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

Page 37: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

37

11.8 SWITCH

Kerjanya sama seperti if else tapi switch lebih baik jika kita harus memilih antara

tiga atau lebih banyak alternatif.

Code :

Switch(ekpresi)

{ case label:

pernyataan

case label:

pernyataan

default:

pernyataan}

Contoh:

int num = 1;

switch(num) {

case 0:

println("Zero");

break;

case 1:

println("One");

break; }

11.9 CONTOH CONDITIONAL

Conditional 1:

Buka menu file

Klik examples

Pilih Basics

Pilih Control

Pilih conditional1

Conditional 2:

Buka menu file

Klik examples

Pilih Basics

Pilih Control

Pilih conditional2

XII. OPERATOR LOGIKA

12.1 Tentang Operator Logika

Operator Logika adalah operator yang digunakan untuk membandingkan dua atau

lebih kondisi logika benar (true) dan logika salah (false).

12.2 ! (LOGICAL NOT)

Membalikan nilai boolean dari ekpresi yang dihasilkan

sebelumnya.

Contoh:

boolean a = false;

if (!a)

Page 38: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

38

{ rect(30, 20, 50, 50); }

a = true;

if (a)

{ line(20, 10, 90, 80);

line(20, 80, 90, 10); }

Penjelasan:

if(!a)

Jika bukan a atau jika a bernilai salah.

12.3 && (LOGICAL AND)

Membandingkan dua ekpresi atau lebih. Jikas salah satunya bernilai salah maka hasil

perbandinganya akan bernilai salah, sedangkan jika semua bernilai benar maka hasil

perbandingannya bernilai benar.

Syntax Dasar:

(ekpresi1)&&(ekspresi2)

Contoh:

for (int i = 5; i <= 95; i += 5)

{

if ((i > 35) && (i < 60)) { stroke(0); }

else

{ stroke(255);}

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

Penjelasan:

if((i>35)&&(i<60))

Jika nilai i lebih besar 23 dan nilai i kurang dari 60.

stroke(255)

Garis tepi dengan warna hitam.

Page 39: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

39

12.4 | | (LOGICAL OR)

Membandingkan dua atau lebih ekspresi. Jika salah satu ekpresi bernilai benar maka

hasil perbandinganya akan bernilai benar, sedangkan jika semua ekspresi bernilai salah

maka hasil perbandingannya akan bernilai salah.

Contoh:

for (int i = 5 ; i <= 95; i += 5)

{

if ((i < 35) || (i > 60))

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

}

Penjelasan:

if((i<35)||(i>60))

Jika nilai i kurang dari 35 atau nilai i lebih besar dari 60.

line(a,b,c,d)

a : Koordinat X pertama.

b : Koordinat Y pertama.

c : Koordinat X kedua.

d : Koordinat Y kedua.

XIII. OBJECTS ORIENTED

13.1 CLASS dan OBJECT

Sebelum membuat obyek, anda harus mendefinisikan class. Class merupakan bagian

dari suatu obyek. Class itu seperti sebuah arsitektur suatu obyek. Seperti ketika

membangun rumah, arsitektur dapat menggambarkan seperti apa jadinya rumah tersebut.

Rumah yang dibangun oleh arsitektur tersebut adalah obyeknya.

Contoh: Membuat Obyek Bola

Sketch 1 : Program utama

Sketch 2 : Global Variable

Constructor

Function

Effect : Memantul dan Gravitasi

Page 40: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

40

Sketch 1: Program Utama

// DECLARE

Bola BolaKu;

Bola BolaKu2;

Bola BolaKu3;

void setup(){

size(600,600);

smooth();

// INITIALIZE

BolaKu = new Bola(200, 200);

BolaKu2 = new Bola(400, 50);

BolaKu3 = new Bola(50, 150);

}

void draw(){

background(0);

// CALL FUNCTIONALITY

BolaKu.run();

BolaKu2.run();

BolaKu3.run();

Page 41: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

41

Sketch 2 : Class Bola

class Bola{

// GLOBAL VARIABLES

float x = 0;

float y = 0;

float kecepatanX = 4;

float kecepatanY = 0.5;

// CONSTRUCTOR

Bola(float _x, float _y){

x = _x;

y = _y;

}

// FUNCTION

void run(){

tampilan();

bergerak();

memantul();

gravtasi();

}

void gravitasi(){

kecepatanY += 0.2;

}

void memantul(){

if( x > width){

kecepatanX = kecepatanX * -1;

}

if( x < 0){

kecepatanX = kecepatanX * -1;

}

if( y > height){

kecepatanY = kecepatanY * -1;

}

if( y < 0){

kecepatanY = kecepatanY * -1;

}

}

void bergerak(){

x += kecepatanX;

y += kecepatanY;

}

void tampilan(){

ellipse(x,y,20,20);

}

}

Page 42: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

42

Page 43: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

43

Page 44: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

44

Page 45: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

45

Page 46: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

46

Page 47: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

47

Page 48: KATA PENGANTAR - ahmad_fatoni.staff.gunadarma.ac.id

48