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(x~1~, y~1~, x~2~, y~2~); Membuat garis dari koordinat (*x*~1~, *y*~1~) ke titik (*x*~2~, *y*~2~). 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 atas**nya adalah **(20, 30)**, lebarnya **70** piksel, dan tingginya **40** piksel.
Segitiga (triangle)
**Cara penulisan**: triangle(x~1~, y~1~, x~2~, y~2~, x~3~, y~3~); Membuat segitiga yang titik-titik sudutnya adalah (*x*~1~, *y*~1~), (*x*~2~, *y*~2~), dan (*x*~3~, *y*~3~). 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(x~1~, y~1~, x~2~, y~2~, x~3~, y~3~, x~4~, y~4~); Membuat segiempat yang titik-titik sudutnya adalah (*x*~1~, *y*~1~), (*x*~2~, *y*~2~), (*x*~3~, *y*~3~),dan (*x*~4~, *y*~4~). 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, sdt~1~, sdt~2~); 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 *sdt*~1~ ke *sdt*~2~. 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.