Processing. Bahasa dan Lingkungan Pemrograman Grafis Interaktif. Widianto Nugroho Tutorial release date:

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


[ 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


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.


4


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


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 


6


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. 


7


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


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


continue dipakai untuk mengarahkan eksekusi ke putaran atau iterasi berikutnya pada  pernyataan pengulangan. 


10


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


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


12


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


13


Parameter  x y width height

int int int int

atau atau atau atau


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


14


 

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;


15


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


16


  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


 

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


18


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


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


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


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


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


23


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. 


24


Waktu dan Gerak   

Kontrol 2   If  Nama: if()  for(int i=5; 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  


25


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


26


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

 


27


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


28


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

 


29


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


30


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


31


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


32


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


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


33


 

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. 


34


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. 


35


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:  


36


  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    


37


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


38


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


39


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


40


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    


41


GUI 1  Rollover  Contoh berikut ini mendemonstrasikan rollover. Warna akan berubah bila mouse  melalui obyek.  // Rollover // by REAS // 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;


42


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


43


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 {


44


}

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


45


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


46


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


47


[ 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     


48

Processing. Bahasa dan Lingkungan Pemrograman Grafis Interaktif. Widianto Nugroho Tutorial release date:

Recommend Documents