#Processing
Processing merupakan sebuah lingkup pemrograman sederhana yang dimaksudkan untuk mempermudah pengembangan aplikasi berorientasi visual dengan penekanan pada aspek animasi serta umpan balik langsung melalui interaksi. Saat ini processing telah menjadi salah satu tool yang banyak dipergunakan untuk membuat desain dan prototype dari berbagai proses visualisasi data. Processing berbasis Java, dan salah satu tujuan penting dari pembuatan aplikasi ini adalah agar program ini dapat diakses oleh banyak pengguna.
Processing terdiri dari:
- Processing Development Environment (PDE). PDE inilah yang dijalankan saat 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 seperti pengiriman data melalui jaringan, membaca aliran data dari kamera, dan menyimpan objek dalam format gambar ataupun dokumen (PDF).
- Bahasa pemrograman yang mirip 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 dapat diakses dari menu File => Sketchbook, atau langsung dari File =>Open.
#pembuatan program sederhana
Padanan program “Hello World” dalam processing adalah dengan menggambar sebuah garis dengan perintah sebagai berikut:
line(15, 40, 70, 100);
Seperti yang dapat diperkirakan, perintah di atas dipakai untuk membuat 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 baru 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 menentukan 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 adalah untuk menentukan 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 dipakai untuk menentukan warna garis yang akan dibuat (255). Nilai stroke ini merupakan shortcut dari nilai (R=255, G=255, B=255). Contoh dari fungsi stroke adalah 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 dipakai untuk menentukan 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 hingga perintah fill dan stroke berikutnya.
#hello word 2
Program yang ditulis dalam bentuk urutan pernyataan seperti pada contoh sebelumnya, disebut sketch yang statis. Dalam sketch statis ini, sejumlah fungsi dijalankan untuk membuat sebuah gambar, tanpa animasi atau interaksi.
Sementara itu, program interaktif ditampilkan dalam bentuk rangkaian frame, di mana dalam hal ini ada dua fungsi penting yang dapat dipergunakan, yaitu setup() dan draw() seperti 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() seperti 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 adalah (800 x 600), warna garis putih, dan warna latar belakang hijau.
Fungsi draw() dipakai untuk menampilkan animasi (karena dijalankan setiap frame). Sebagai tambahan, fungsi size() harus ditulis di bagian awal dari fungsi setup().
Karena fungsi background() hanya dijalankan satu kali, maka layar akan dipenuhi dengan gambar garis saat 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 membuat 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 adalah mousepressed(), yang seperti dapat diperkirakan dari namanya, akan dijalankan pada saat user menekan tombol mouse. Contoh di bawah ini adalah sketch di mana saat tombol mouse di tekan, layar akan dibersihkan dari garis-garis yang telah dibuat 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 adalah saveFrame(). Jika fungsi ini diletakkan di dalam draw() maka akan menghasilkan file-file gambar dengan nama yang berurutan. Peringatan: jika menggunakan cara ini ada kemungkinan folder sketch akan langsung dipenuhi dengan ratusan gambar! Contoh penggunaan fungsi saveFrame() adalah sebagai berikut:
saveFrame("output.png")
Hasil gambar bisa dilihat di folder My Documents. Sebagai catatan, processing akan langsung membuat folder dengan nama processing di My Documents setelah dijalankan pertama kali. Untuk menyimpan gambar secara berurutan, gunakan perintah seperti di bawah ini:
saveFrame("output-####.png");
#Size()
Fungsi size() menentukan 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 menggunakan 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 tambahan lain dari fungsi size() adalah variabel untuk menentukan bagaimana gambar tersebut ditampilkan (meskipun nilai default [tanpa tambahan variabel] sudah mampu 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 menggunakan OpenGL yang mampu menampilkan grafis 2D dengan lebih cepat. Renderer P3D juga menggunakan OpenGL untuk proses rendering yang lebih cepat, selain itu juga mampu 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 dapat dilakukan dengan menambahkan baris berikut di bagian atas program.
Import.processing.pdf.*;
Posting Komentar untuk "pengenalan processing grafika komputer"