Anda di sini

Pemrograman

[TUTORIAL] Dasar Menggambar Objek pada Processing

Kusuma Wardana - 03 Desember 2015 07:11:04 1

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.

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);

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);

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

Menggambar Objek-objek Dasar

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

Contoh-contoh Pemrograman Objek Dasar

Menggambar garis

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

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

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);

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

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);

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 180o, 45o, 90o, dan 360o.

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));

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();

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

10.212
Daftar Artikel Terkait
Image

Kusuma Wardana

I Nyoman Kusuma Wardana, yang akrab dipanggil Kusuma, lahir dan besar di Bali. Ia tinggal di Desa Wisata Ubud, dan lebih banyak melaksanakan aktivitasnya di Denpasar. Profesinya adalah sebagai staf pengajar di Jurusan Teknik Elektro, Politeknik Negeri Bali. Saat ini Ia menjadi salah satu penulis di tutorkeren.com.

Artikel Menarik Lainnya

Komentar

bagaimana membuat garis putus-putus dengan menggunakan for? saya hanya bisa membuat menggunakan cara manual void setup(){ size(400,400); } void draw(){ strokeWeight(5); line(30,100,80,100); line(90,100,100,100); line(110,100,160,100); line(170,100,180,100); line(190,100,240,100); }
Mari Gabung

Halo Emo 51 , Ada yang ingin disampaikan? Jangan sungkan untuk gabung diskusi ini. Silahkan Login dulu atau Daftar baru.