Search form

Dasar-dasar Processing

Hal-hal dasar pembuatan gambar menggunakan Processing.

Array
Audiens

Sketch pertamamu

Mari kita coba membuat program pertama. Sudah siap? Di samping ini ada tiruan IDE Processing.

Lho kok kosong? Memang demikian. Ini sudah merupakan sebuah sketch. Cobalah jalankan dengan menekan tombol run di atasnya.

Selamat! Kamu telah membuat sketsa pertamamu!

Bentuk pertama: elips

Dalam Processing kamu dapat menggunakan ellipse untuk menggambar elips. Contoh sintaksnya adalah seperti ini.

ellipse(50, 40, 80, 60);

Cobalah ketikkan pada IDE, lalu tekan tombol run. Kamu juga dapat mencobanya pada IDE tiruan di samping ini. Kalau tidak terjadi apa-apa, mungkin kamu perlu memeriksa apakah yang kamu ketikkan sudah benar.

Apakah artinya ellipse(50, 40, 80, 60);? ellipse adalah perintah untuk menggambar elips. Dalam Processing, setiap perintah harus diikuti dengan tanda kurung seperti pada contoh ini.

Dalam kurung di atas ada bilangan-bilangan 50, 40, 80, dan 60. 50, 40 adalah koordinat tempat elips akan digambar, yaitu (50, 40). Dua bilangan berikutnya, 80 dan 60, adalah lebar dan tinggi elips tersebut.

Dengan demikian, perintah di atas diterjemahkan sebagai, Gambarlah elips yang pusatnya di koordinat (50, 40), dengan lebar 80 dan tinggi 60.

Oh ya, setiap perintah dalam processing harus diakhiri dengan tanda ; (titik koma/semicolon).

Bentuk berikutnya: lingkaran

Kalau begitu, bagaimana caranya menggambar lingkaran? Coba kamu pikirkan terlebih dahulu.

Dua argumen terakhir dari ellipse adalah menunjukkan lebar dan tinggi elips. Kalau kita membuat lebar dan tingginya sama, bentuk yang dihasilkan adalah lingkaran.

ellipse(50, 40, 80, 80);

Bentuk-bentuk lainnya

Setelah elips dan lingkaran, cobalah bentuk-bentuk lainnya. Processing menyediakan sejumlah bentuk lain yang dapat kamu gunakan.

Titik (point)

Cara penulisan: point(x, y);

Membuat titik pada koordinat (x, y).

Contohnya:

point(5, 95);

Akan membuat titik pada koordinat (5, 95).

Garis (line)

Cara penulisan: line(x1, y1, x2, y2);

Membuat garis dari koordinat (x1, y1) ke titik (x2, y2).

Contohnya:

line(20, 30, 90, 60);

Akan membuat garis lurus dimulai dari posisi (20, 30) ke posisi (90, 60).

Persegi panjang (rect)

Cara penulisan: rect(x, y, w, h);

Membuat persegi panjang dengan koordinat (x, y), dengan lebar sebesar w dan setinggi h.

Contohnya:

rect(20, 30, 70, 40);

Akan membuat persegi panjang dengan koordinat kiri atasnya adalah (20, 30), lebarnya 70 piksel, dan tingginya 40 piksel.

Segitiga (triangle)

Cara penulisan: triangle(x1, y1, x2, y2, x3, y3);

Membuat segitiga yang titik-titik sudutnya adalah (x1, y1), (x2, y2), dan (x3, y3).

Contohnya:

triangle(10, 10, 40, 40, 20, 40);

Akan membuat segitiga dengan titik-titik sudut yang terletak di (10, 10), (40, 40), dan (20, 40).

Segiempat sembarang (quad)

Cara penulisan: quad(x1, y1, x2, y2, x3, y3, x4, y4);

Membuat segiempat yang titik-titik sudutnya adalah (x1, y1), (x2, y2), (x3, y3),dan (x4, y4).

Contohnya:

quad(10, 90, 50, 95, 45, 75, 5, 50);

Akan membuat segiempat dengan titik-titik sudut yang terletak di (10, 90), (50, 95), (45, 75), dan (5, 50).

Busur (arc)

Cara penulisan: arc(x, y, w, h, sdt1, sdt2);

Membuat juring (sektor), atau busur (tepinya saja) dari elips. Letak pusat elipsnya adalah di (x, y), lebarnya w, dan tingginya h. Sudutnya akan mulai dari sdt1 ke sdt2.

Contohnya:

arc(100, 0, 100, 120, 1.7, 3.0);

Akan membuat juring berpusat di (100, 0), lebarnya 100 piksel, tingginya 120 piksel, dimulai dari sudut 1.7 radian (91,67°), sampai sudut 3 radian (171.89°).

Urutan penting!

Urutan tiap perintah adalah penting. Sketch di sebelah ini menggambar bentuk secara berurutan: persegi panjang, lingkaran, dan segitiga. Cobalah jalankan dan lihat hasilnya.

Sekarang tekan stop lagi, dan coba ubah urutannya menjadi:

triangle(10, 10, 50, 50, 50, 10);
ellipse(50, 50, 60, 60);
rect(50, 50, 40, 30);

Kemudian jalankan lagi.

Kira-kira mengapa terjadi demikian?

Processing membaca perintah-perintahmu secara berurutan. Setiap kali ia membaca, ia melakukan perintahmu begitu saja untuk menggambar di atas kanvas yang tersedia.

Pada sketch yang semula, pertama-tama Processing akan menggambar kotak. Setelah kotak tergambar, ia menggambar lingkaran di kanvas itu lagi, yang sudah ada gambar kotaknya. Lalu ia menggambar lagi segitiga pada kanvas itu lagi, yang sudah ada gambar lingkaran dan kotak.

Pada sketch kedua, urutannya terbalik, sehingga gambar yang dihasilkan juga berbeda.

Dengan demikian, urutan menggambar, bahkan urutan memberi perintah, harus sangat kamu perhatikan.

Ganti-ganti warna

Sekarang, bagaimana caranya mengganti warna? Di sebelah ini ada sketch untuk menggambar sebuah lingkaran berwarna. Cobalah jalankan.

Di sana, sebelum perintah ellipse, ada perintah background, fill dan stroke.

Background akan mewarnai kanvas secara keseluruhan dengan warna tertentu. Stroke adalah warna dari garis tepi objek yang akan digambar, sedangkan fill adalah isinya.

Warna-warna yang tertulis dalam contoh ini ditulis dalam format warna web. Memang kelihatannya seperti hashtag dengan kode-kode aneh dari angkasa luar. Mengenai kode warna nanti akan dibahas pada satu bagian khusus. Untuk sementara, kamu bisa mencoba-coba warnanya dengan format seperti ini:

Setiap warna diawali dengan tanda #, diikuti 6 angka/huruf. Angka yang diperbolehkan adalah semua angka: 0 sampai 9. Huruf yang diperbolehkan adalah A sampai F, bisa huruf besar maupun kecil (ini disebut basis heksadesimal). Contoh: #ff0000 (warna merah), atau #1234ab (warna biru).

Tanpa warna

Bagaimana kalau kita tidak ingin memberi warna? Kalau fill dan stroke bertugas mengatur warna isi dan garis tepi, maka ada perintah noFill dan noStroke yang memberitahu Processing untuk tidak memberi warna.

Cara penulisannya:

noFill();
noStroke();

Perintah fill(...), stroke(...), noFill() dan noStroke() akan mengatur warna yang akan digunakan. Sehingga sekali diset warnanya, maka perintah-perintah seterusnya akan memakai pengaturan yang sama, sampai kita memberi perintah lain.

Mengganti ukuran

Sebelum-sebelumnya, sketch kita berukuran kecil. Ukurannya adalah 100 piksel × 100 piksel. Untuk mengubah ukurannya, kita bisa menggunakan size.

Cara penulisannya: size(lebar, tinggi);

Contoh:

size(250, 200);

Akan membuat area gambar kita menjadi selebar 250 piksel, dan tingginya 200 piksel.

Cobalah!

Menuliskan keterangan

Sambil mengetik sketch, sebaiknya kamu memberi keterangan pada baris-baris perintah yang kamu ketikkan. Keterangan-keterangan ini hanya untuk dibaca manusia, tetapi tidak akan dianggap perintah oleh Processing.

Keterangan bisa dituliskan dengan dua cara.

Kalau kamu menuliskan tanda // (double slash), maka semua tulisan sesudahnya dianggap komentar oleh Processing. Tetapi hanya untuk baris yang sama. Contoh:

ellipse(100, 100, 50, 50);  // gambar lingkaran

Tulisan gambar lingkaran akan diabaikan oleh Processing.

Kalau kamu menuliskan tanda /*, maka semua tulisan sesudahnya akan dianggap komentar, sampai tanda */.

/* Ini akan dianggap komentar
   baris ini juga
   yang ini juga
   baru yang setelah ini akan dikerjakan
*/

ellipse(100, 100, 50, 50);

Ini akan sangat berguna ketika suatu saat di masa depan kamu membaca programmu lagi. Juga akan sangat berguna agar orang yang membaca programmu mengerti apa yang kamu buat, tanpa harus membaca kode-kodenya.

Bandingkan keduanya

Kedua sketch ini akan melakukan hal yang sama. Tetapi yang manakah yang lebih mudah dimengerti?

Selamat!

Kamu telah mempelajari dasar-dasar membuat gambar dengan Processing.

Dengan perintah-perintah dasar yang telah kamu pelajari, kamu sudah bisa membuat gambar-gambar dengan kemungkinan yang hampir tak terbatas. Seiring dengan banyaknya waktu yang kamu gunakan untuk berlatih, kamu akan semakin mahir mengekspresikan jiwa senimu dengan menggunakan Processing.

Tanggapan

Ari

Terima kasih banyak atas apresiasinya.

Tapi software untuk membuat yang mana yang Anda maksud?

Kalau software yang sedang dipelajari, namanya Processing, bisa diunduh di http://processing.org

Kalau software yang digunakan untuk eksperimen di sini, ini menggunakan ProcessingJS, yang dapat diunduh di http://processingjs.org. Tapi editornya saya buat sendiri. Kalau editor yang online bisa dicoba di http://sketchpad.cc/, atau http://www.openprocessing.org/.

Kalau untuk tampilan presentasi seperti pada halaman ini, menggunakan plugin bernama JMPress.

Semoga memberi informasi yang cukup.

Arini MS

Terima Kasih.. sangat bermanfaat :)

indriana

terimakasih.halaman ini sangat bermanfaat seerti saya yang baru belajar ... di web aa agar saya bisa melihat materi yang lain.. ?

Beri tanggapan