[TUTORIAL] Mengatur Properti Objek pada Processing

Mengatur Properti

Beberapa fungsi seperti smooth(), strokeWeight(), strokeJoin(), dan strokeCap() dapat digunakan untuk mengatur properti dari objek kita.

Fungsi smooth()

Fungsi smooth() dapat digunakan untuk memperhalus sudut-sudut objek. Secara default, fungsi ini akan diaktifkan. Untuk menonaktifkan, gunakanlah fungsi noSmooth(). Berbeda dengan versi sebelumnya, fungsi smooth() pada Processing 3 hanya dideklarasikan sekali saja di awal program. Fungsi smooth() dan noSmooth() tidak dapat dideklarasikan secara bersamaan di dalam satu sketch.

size(160, 120);
smooth(); 
ellipse(80, 60, 90, 90);

size(160, 120);
noSmooth(); 
ellipse(80, 60, 90, 90);

[[{"fid":"335","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"Processing smooth nosmooth","field_file_image_title_text[und][0][value]":"Processing smooth nosmooth"},"type":"media","link_text":null,"attributes":{"alt":"Processing smooth nosmooth","title":"Processing smooth nosmooth","height":"123","width":"380","class":"media-element file-default"}}]]

Fungsi strokeWeight()

Fungsi ini berguna untuk mengatur ketebalan garis. Secara default, tebal garis dari objek yang dih=gambar adalah sebesar 1 piksel. Dengan menggunakan fungsi ini, kita dapat mengatur ketebalan yang kita inginkan.

 size(460, 120);
strokeWeight(1);
ellipse(60, 60, 80, 80);

strokeWeight(5);
ellipse(170, 60, 80, 80);

strokeWeight(10);
ellipse(280, 60, 80, 80);

strokeWeight(15);
ellipse(390, 60, 80, 80);

[[{"fid":"336","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"Processing Menggunakan fungsi strokeWeight()","field_file_image_title_text[und][0][value]":"Processing Menggunakan fungsi strokeWeight()"},"type":"media","link_text":null,"attributes":{"alt":"Processing Menggunakan fungsi strokeWeight()","title":"Processing Menggunakan fungsi strokeWeight()","height":"118","width":"460","class":"media-element file-default"}}]]

Fungsi strokeJoin()

Fungsi ini digunakan untuk mengatur sudut pertemuan dari dua buah garis. Terdapat tiga jenis mode, yaitu MITER, BEVEL dan ROUND. Amatilah perbedaannya dengan menggunakan program berikut:

size(420, 170);
strokeWeight(15);

strokeJoin(MITER);
rect(60, 40, 80, 80);

strokeJoin(BEVEL);
rect(170, 40, 80, 80);

strokeJoin(ROUND);
rect(280, 40, 80, 80);

[[{"fid":"337","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"Processing Menggunakan fungsi strokeJoin()","field_file_image_title_text[und][0][value]":"Processing Menggunakan fungsi strokeJoin()"},"type":"media","link_text":null,"attributes":{"alt":"Processing Menggunakan fungsi strokeJoin()","title":"Processing Menggunakan fungsi strokeJoin()","height":"174","width":"424","class":"media-element file-default"}}]]

Fungsi strokeCap()

Fungsi ini digunakan untuk mengatur sudut akhir dari suatu garis. Terdapat tiga jenis mode, yaitu SUARE, PROJECT dan ROUND. Amatilah perbedaannya dengan menggunakan program berikut:

size(230, 150);
strokeWeight(15);

strokeCap(ROUND);
line(40, 30, 80, 100);

strokeCap(SQUARE);
line(90, 30, 130, 100);

strokeCap(PROJECT);
line(140, 30, 180, 100);

[[{"fid":"338","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"Processing Menggunakan fungsi strokeCap()","field_file_image_title_text[und][0][value]":"Processing Menggunakan fungsi strokeCap()"},"type":"media","link_text":null,"attributes":{"alt":"Processing Menggunakan fungsi strokeCap()","title":"Processing Menggunakan fungsi strokeCap()","height":"156","width":"236","class":"media-element file-default"}}]]

Memainkan Warna

Terdapat beberapa fungsi yang dapat digunakan untuk memainkan warna pada objek, diantaranya stroke(), fill(), dan background().

Fungsi stroke()

Fungsi ini berguna untuk mengatur warna garis dari objek yang akan digambar. Gunakanlah fungsi noStroke() untuk menonaktifkan fungsi ini.

size(440, 120);
strokeWeight(10);

// dalam skala keabuan
stroke(100);
rect(30, 30, 60, 60);

// dalam format RGB
stroke(200, 50, 80);
rect(110, 30, 60, 60);

// dalam format heksa
stroke(#292CD3);
rect(190, 30, 60, 60);

// penulisan lain format heksa
stroke(0xFFD152BA);
rect(270, 30, 60, 60);

// tanpa stroke
noStroke();
rect(350, 30, 60, 60);

[[{"fid":"339","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"Processing Menggunakan fungsi stroke()","field_file_image_title_text[und][0][value]":"Processing Menggunakan fungsi stroke()"},"type":"media","link_text":null,"attributes":{"alt":"Processing Menggunakan fungsi stroke()","title":"Processing Menggunakan fungsi stroke()","height":"115","width":"436","class":"media-element file-default"}}]]

Fungsi fill()

Jika fungsi stroke()Fungsi ini digunakan untuk memberi warna pada garis objek kita, maka fungsi fill() akan mewarnai bagian dalam dari objek kita. Metode pemberian warna pada fungsi fill() sama dengan fungsi stroke().

size(380, 270);
noStroke();
fill(150);
ellipse(170, -30, 210, 210);
fill(250);
ellipse(0, 270, 480, 480);
fill(80);
ellipse(282, 115, 160, 160);

[[{"fid":"340","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"Processing Menggunakan fungsi fill() skala keabuan","field_file_image_title_text[und][0][value]":"Processing Menggunakan fungsi fill() skala keabuan"},"type":"media","link_text":null,"attributes":{"alt":"Processing Menggunakan fungsi fill() skala keabuan","title":"Processing Menggunakan fungsi fill() skala keabuan","height":"276","width":"386","class":"media-element file-default"}}]]

Nilai masukan dari fungsi fill() dapat berupa warna keabuan (0 sampai 255), atau menggunakan format RGB maupun HSV. Kombinasi dari fungsi fill() strokeWeight() dan stroke() juga dapat dilakukan untuk menghasilkan objek yang bervariasi. Amatilah contoh berikut:

ize(400, 370);
smooth();
stroke(50);
strokeWeight(8);

fill(255, 80, 120);
ellipse(170, 180, 300, 300);

fill(217, 127, 229);
ellipse(170, 180, 200, 200);

fill(255, 200, 100);
ellipse(70, 60, 80, 80);

fill(60, 150, 200);
ellipse(300, 200, 150, 150);

fill(210, 240, 24);
ellipse(100, 300, 100, 100);

[[{"fid":"341","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"Processing Menggunakan fungsi fill() format RGB","field_file_image_title_text[und][0][value]":"Processing Menggunakan fungsi fill() format RGB"},"type":"media","link_text":null,"attributes":{"alt":"Processing Menggunakan fungsi fill() format RGB","title":"Processing Menggunakan fungsi fill() format RGB","height":"375","width":"406","class":"media-element file-default"}}]]

Untuk memudahkan dalam pemilihan warna, gunakanlah jendela Color Selector. Carilah di Tools à Color Selector…

[[{"fid":"342","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"Processing Color Selector","field_file_image_title_text[und][0][value]":"Processing Color Selector"},"type":"media","link_text":null,"attributes":{"alt":"Processing Color Selector","title":"Processing Color Selector","height":"335","width":"445","class":"media-element file-default"}}]]

Fungsi background()

Jika fungsi background()Fungsi ini digunakan untuk memberi warna latar (background) dari layar kita. Cara pemberian warna juga serupa dengan fungsi fill() atau stroke(). Amatilah contoh berikut:

size(380, 270);
background(255, 204, 0);
noStroke();

fill(180);
ellipse(170, -30, 210, 210);

fill(250);
ellipse(0, 270, 480, 480);

fill(40);
ellipse(282, 115, 160, 160);

[[{"fid":"343","view_mode":"default","fields":{"format":"default","field_file_image_alt_text[und][0][value]":"Processing Menggunakan fungsi background()","field_file_image_title_text[und][0][value]":"Processing Menggunakan fungsi background()"},"type":"media","link_text":null,"attributes":{"alt":"Processing Menggunakan fungsi background()","title":"Processing Menggunakan fungsi background()","height":"274","width":"386","class":"media-element file-default"}}]]

Pada tutorial selanjutnya, kita akan membahas tentang Variabel dan Fungsi (bersambung...)