Konsep Piksel

Suatu karya menarik dapat diawali dari sebuah objek yang sederhana. Dengan konsep karya yang menarik, sebuah objek dapat dipadupadankan dengan objek yang lain. Selanjutnya, objek-objek ini dapat dibuatkan animasi. Lebih jauh lagi, objek-objek selain dapat dianimasikan, objek-objek ini dapat berinteraksi dengan lingkungan di luar komputer.

Menggambar pada layar komputer sama halnya dengan menggambar pada kertas. Kita harus memulai suatu objek dari suatu sudut atau titik tertentu pada bidang kerja. Pada layar komputer, elemen-elemen terkecil pembentuk bidang kerja dikenal sebagai piksel. Piksel ini dapat diilustrasikan seperti grid kertas kotak.

Posisi dari tiap-tiap kotak ditentukan oleh koordinat x dan y-nya. Pada Processing, koordinat-x adalah jarak dari sisi kiri jendela display (Display Window), dan koordinat-y adalah jarak dari sisi atas jendela display.

konsep piksel.png

Amatilah di atas. Pada Gambar tersebut, piksel (0,0) diawali dari sisi kiri-atas, dan akan berakhir pada sisi kanan-bawah. Indeks dimulai dari 0, bukan dari 1. Misal, jika kita memiliki layar berukuran 200 x 300 piksel, maka sudut kiri-atas memiliki koordinat (0,0), dan sudut kanan-bawah memiliki koordinat (199 x 299). Pada ukuran 200 x 300 piksel, nilai 200 menyatakan Lebar layar, sedangkan nilai 300 menyatakan Tinggi layar.

Menampilkan Jendela Kerja

Jendela kerja dapat dibentuk dengan fungsi size(). Fungsi ini terdiri dari dua masukan, yaitu nilai piksel untuk lebar dan nilai piksel untuk tinggi.

size(80,100);

Processing jendela kerja.png

Menggambar Titik

Titik dapat digambar menggunakan fungsi point(). Masukkan fungsi ini adalah nilai koodinat. Dengan demikian, fungsi point() hanya berukuran 1 piksel.

size(200, 100);
point(50, 60);

Processing menggambar titik.png

size(200, 100);
point(50, 50);
point(50, 80);
point(80, 50);
point(80, 80);

Processing menggambar banyak titik.png

Menggambar Objek-objek Dasar

Beberapa objek dasar yang dapat dibentuk diantaranya garis, elips, kotak, segitiga dan busur. Amatilah rangkumannya seperti pada Tabel berikut.

Processing menggambar objek dasar.png

Contoh-contoh Pemrograman Objek Dasar

Menggambar garis

size(250, 150);
line(10, 10, 200, 100);

Processing Menggambar Garis.png

size(250, 150);
line(10, 10, 200, 100);
line(200, 100, 230, 50);

Processing Menggambar dua Garis.png

Menggambar Gabungan Objek-objek Dasar

size(280, 180);
rect(10, 10, 200, 50);
quad(10, 60, 210, 60, 260, 110, 60, 110);
rect(60, 110, 200, 50);
quad(10, 60, 60, 110, 60, 160, 10, 110);
line(10, 10, 60, 110);
triangle(210, 10, 260, 110, 210, 60);

Processing gabungan objek dasar.png

size (400, 200);
ellipse(200, -150, 480, 480);
ellipse(200, 130, 80, 80);
ellipse(230, 150, 30, 30);
ellipse(300, 180, 121, 121);

Processing gabungan objek ellips.png

Amatilah bahwa titik pusat atau titik awal dari suatu objek dapat dibuat di luar koordinat layar tanpa mengalami error. Demikian pula ketika ukuran hasil objek melebihi ukuran layar. Amati pula bahwa objek yang dibuat belakangan (skrip berada lebih di bawah) akan menumpuk objek sebelumnya (skrip berada lebih di atas). Dengan kata lain, komputer akan mengeksekusi skrip dari atas dan berurutan akan bergerak ke bawah.

size(620, 140);
arc(15, 60, 100, 100, 0, HALF_PI);
arc(150, 60, 100, 100, 0, PI + HALF_PI);
arc(270, 60, 100, 100, HALF_PI, 3.14);
arc(360, 60, 100, 100, HALF_PI, 3.14, PIE);
arc(450, 60, 100, 100, HALF_PI, 3.14, CHORD);
arc(500, 60, 100, 100, HALF_PI, 3.14, OPEN);
arc(550, 60, 100, 100, 1.57, 7);

Processing menggambar busur.png

Menggambar busur mungkin menjadi lebih rumit daripada objek dasar yang lain. Dua masukan pertama dari fungsi ellipse() menunjukkan posisi pusat elips. Masukan ketiga dan keempat menunjukkan lebar dan tinggi busur. Masukkan kelima dan keenam menandakan sudut dimulai dan diakhirinya perputaran busur. Sudut ini memiliki satuan radian, dan bukan dalam derajat. Sudut radian bergerak dari 0 sampai 2p, dengan nilai p = 3,14. Nilai-nilai PI, QUARTER_PI, HALF_PI, dan TWO_PI dapat digunakan untuk menggantikan satuan 180^o, 45^o, 90^o, dan 360^o.

Masukan fungsi arc() yang terakhir adalah mode busur. Mode PIE akan membentuk juring yang melalui titik pusat busur. Mode CORD akan menghubungkan titik-titik busur secara langsung tanpa melalui pusat elips. Mode OPEN sama dengan CORD, namun tidak terdapat garis yang menghubungkan titik-titik busur.

Selain dalam radian, busur juga dapat dibuat dalam derajat, namun perlu dikonversi menggunakan fungsi radians().

size(340, 120);
arc(15, 60, 100, 100, radians(0), radians(90));
arc(150, 60, 100, 100, radians(45), radians(180));
arc(270, 60, 100, 100, radians(180), radians(450));

Processing busur dalam derajat.png

Membentuk Berbagai Jenis Objek

Selain bentuk-bentuk dasar yang telah diuraikan sebelumnya, kita juga dapat membuat objek kita sendiri menggunakan fungsi vertex(). Awalilah pembuatan objek dengan fungsi beginShape(), dan akhiri dengan fungsi endShape(). Amatilah contoh berikut:

size(220, 360);
fill(255, 0, 0);
strokeWeight(5);

beginShape();
vertex(20, 300);
vertex(20, 70);
vertex(150, 70);
vertex(150, 30);
vertex(200, 90);
vertex(150, 150);
vertex(150, 110);
vertex(60, 110);
vertex(60, 300);
vertex(20, 300);
endShape();

Processing menggunakan fungsi vertex.png

Pada tutorial selanjutnya, kita akan mengatur properti dari tiap-tiap objek (bersambung).