#Processing
Processing merupakan sebuah lingkup pemrograman sederhana yang dimaksudkan untuk mempermudah pengembangan aplikasi berorientasi visual dengan penitikberatan pada aspek animasi serta umpan balik eksklusif melalui interaksi. Saat ini processing telah menjadi salah satu tool yang banyak dipergunakan untuk menciptakan desain dan prototype dari banyak sekali proses visualisasi data. Processing berbasis Java, dan salah satu tujuan penting dari pembuatan aplikasi ini ialah semoga kegiatan ini sanggup diakses oleh banyak pengguna.
Processing terdiri dari:
- Processing Development Environment (PDE). PDE inilah yang dijalankan ketika user membuka processing. PDE merupakan sebuah IDE (Integrated Development Environment dengan sejumlah fitur sederhana untuk memudahkan pemrograman atau dalam menguji coba gagasan.
- Sejumlah fungsi (atau yang sering disebut juga sebagai method) yang merupakan inti dari antarmuka pemrograman (API), serta sejumlah library yang mendukung fitur-fitur lanjutan ibarat pengiriman data melalui jaringan, membaca pedoman data dari kamera, dan menyimpan objek dalam format gambar ataupun dokumen (PDF).
- Bahasa pemrograman yang ibarat dengan Java, namun disertai dengan beberapa perubahan.
Program atau script yang dihasilkan processing disebut “sketch”. Sketch ini disimpan dalam “Sketchbook”, yaitu sebuah folder yang dipergunakan sebagai lokasi penyimpanan semua project yang dikerjakan. Sketch yang disimpan dalam sketchbook sanggup diakses dari sajian File => Sketchbook, atau eksklusif dari File =>Open.
#pembuatan kegiatan sederhana
Padanan kegiatan “Hello World” dalam processing ialah dengan menggambar sebuah garis dengan perintah sebagai berikut:
line(15, 40, 70, 100);
Seperti yang sanggup diperkirakan, perintah di atas digunakan untuk menciptakan garis dari titik awal di koordinat x=15 dan y=40, dan berakhir di koordinat x=70, y=100.
Saat dijalankan, di layar akan muncul sebuah jendela gres dengan latar belakang abu-abu dan sebuah garis berwarna hitam dari koordinat (15,40) menuju (70, 100). Seperti dalam pemrograman grafis lain, koordinat 0,0 berada di pojok kiri atas.
Untuk mengubah ukuran jendela yang ditampilkan dan memilih warna latar belakang, kita bisa menuliskan script berikut:
size(800, 600);
background(255, 0, 0);
stroke(255);
line(150, 25, 270, 400);
Perintah size di atas ialah untuk memilih ukuran jendela yang akan dipergunakan (lebar 800px dan tinggi 600px), kemudian perintah background dipergunakan untuk mengubah warna latar belakang menjadi merah (R=255, G=0, B=0). Perintah stroke digunakan untuk memilih warna garis yang akan dibentuk (255). Nilai stroke ini merupakan shortcut dari nilai (R=255, G=255, B=255). Contoh dari fungsi stroke ialah sebagai berikut:
stroke(255); // putih
stroke(255, 255, 255); // sama dengan di atas
stroke(255, 128, 0); // oranye cerah (R= 255, G=128, B= 0)
stroke(#FF8000); // oranye cerah (seperti dalam pemrograman web)
stroke(255, 128, 0, 128); // oranye cerah dengan transparansi 50%
Perintah yang sama juga berlaku untuk fungsi fill(), yang digunakan untuk memilih warna dari fill, dan fungsi background(), untuk warna latar belakang. Seperti halnya semua fungsi dalam processing, warna fill dan stroke mempengaruhi semua bentuk geometri yang digambar di atas layar sampai perintah fill dan stroke berikutnya.
#hello word 2
Program yang ditulis dalam bentuk urutan pernyataan ibarat pada pola sebelumnya, disebut sketch yang statis. Dalam sketch statis ini, sejumlah fungsi dijalankan untuk menciptakan sebuah gambar, tanpa animasi atau interaksi.
Sementara itu, kegiatan interaktif ditampilkan dalam bentuk rangkaian frame, di mana dalam hal ini ada dua fungsi penting yang sanggup dipergunakan, yaitu setup() dan draw() ibarat yang ditunjukkan dari script di bawah ini. Kedua fungsi ini merupakan fungsi built-in.
void setup() {
size(800, 600);
stroke(255);
background(0,255,0);
}
void draw() {
line(150, 25, mouseX, mouseY);
}
Fungsi setup() ibarat yang mungkin telah dibayangkan sebelumnya, dijalankan satu kali, sedangkan fungsi draw() dijalankan setiap frame. Dalam hal ini fungsi setup() sangat sesuai dan memang diperuntukkan bagi Inisialisasi. Dari fungsi setup() di atas, diketahui bahwa ukuran jendela yang akan dibuka ialah (800 x 600), warna garis putih, dan warna latar belakang hijau.
Fungsi draw() digunakan untuk menampilkan animasi (karena dijalankan setiap frame). Sebagai tambahan, fungsi size() harus ditulis di bab awal dari fungsi setup().
Karena fungsi background() hanya dijalankan satu kali, maka layar akan dipenuhi dengan gambar garis ketika mouse digerakkan. Untuk menampilkan hanya satu garis, pindahkan fungsi background() dari fungsi setup() ke dalam draw(), di mana pada setiap fungsi draw() yang dipanggil, sebelum fungsi line() dijalankan, maka processing akan menjalankan fungsi background(), atau dengan kata lain menghapus garis sebelumnya.
void setup() {
size(400, 400);
stroke(255);
}
void draw() {
background(192, 64, 0);
line(150, 25, mouseX, mouseY);
}
Sketch yang bersifat statis umumnya dipergunakan untuk menciptakan gambar-gambar yang sederhana, atau untuk menjalankan script secara linier kemudian berhenti atau keluar (exit). Contoh sketch statis adalah: menampilkan jendela, menyimpannya menjadi file dengan ekstensi PDF, kemudian keluar.
Contoh lain dari fungsi yang cukup sering dipergunakan ialah mousepressed(), yang ibarat sanggup diperkirakan dari namanya, akan dijalankan pada ketika user menekan tombol mouse. Contoh di bawah ini ialah sketch di mana ketika tombol mouse di tekan, layar akan dibersihkan dari garis-garis yang telah dibentuk sebelumnya.
void setup() {
size(400, 400);
stroke(255);
}
void draw() {
line(150, 25, mouseX, mouseY);
}
void mousePressed() {
background(192, 64, 0);
}
#menyimpan gambar
Fungsi untuk menyimpan gambar yang diberikan dalam processing ialah saveFrame(). Jika fungsi ini diletakkan di dalam draw() maka akan menghasilkan file-file gambar dengan nama yang berurutan. Peringatan: kalau memakai cara ini ada kemungkinan folder sketch akan eksklusif dipenuhi dengan ratusan gambar! Contoh penggunaan fungsi saveFrame() ialah sebagai berikut:
saveFrame("output.png")
Hasil gambar bisa dilihat di folder My Documents. Sebagai catatan, processing akan eksklusif menciptakan folder dengan nama processing di My Documents sehabis dijalankan pertama kali. Untuk menyimpan gambar secara berurutan, gunakan perintah ibarat di bawah ini:
saveFrame("output-####.png");
#Size()
Fungsi size() memilih variabel global yang berisi lebar dan tinggi jendela yang ditampilkan. Untuk objek-objek yang bergantung pada ukuran jendela tersebut, gunakan variabel lebar dan tinggi, jangan memakai angka. Hal ini untuk mencegah perubahan posisi.
size(400, 400);
// Salah
ellipse(200, 200, 50, 50);
// Benar
ellipse(width/2, height/2, 50, 50);
Dari contoh-contoh sebelumnya, fungsi size() hanya menampilkan lebar dan tinggi jendela yang akan ditampilkan. Satu opsi pemanis lain dari fungsi size() ialah variabel untuk memilih bagaimana gambar tersebut ditampilkan (meskipun nilai default [tanpa pemanis variabel] sudah bisa menghasilkan gambar yang sangat baik). Namun ada beberapa pilihan yang diberikan processing, di antaranya yaitu:
size(800, 600, P2D);
size(800, 600, P3D);
size(800, 600, OPENGL);
size(800, 600, PDF, "output.pdf");
Renderer P2D memakai OpenGL yang bisa menampilkan grafis 2D dengan lebih cepat. Renderer P3D juga memakai OpenGL untuk proses rendering yang lebih cepat, selain itu juga bisa menampilkan objek 3D serta pencahayaan (lighting), tekstur, dan material. Renderer PDF dipergunakan untuk menyimpan semua objek ke dalam file PDF secara langsung, bukan ke tampilan di layar. Namun perintah ini memerlukan import atas library PDF, yang sanggup dilakukan dengan menambahkan baris berikut di bab atas program.
Import.processing.pdf.*;