Elemen dasar pada Processing

Processing

 

Elemen Dasar Gambar pada Processing

 

Elemen-elemen ini memudahkan untuk menggambar bentuk objek pada layar monitor. Dalam grafika computer terdapat 4 elemen dasar grafik yaitu :

1. Titik (point)

2. Garis (line)

3. Bentuk segi

4. Bentuk Bundar

Points and Lines

Untuk menggambar titik (point) digunakan perintah point(x,y) dimana nilai x dan y adalah koordinat pada layar. Sedangkan untuk membuat garis digunakan perintah lines(x1,y1,x2,y2). Sebagai percobaan pertama silahkan ketik program berikut ini :

int d = 40;
int p1 = d;
int p2 = p1+d; int p3 = p2+d; int p4 = p3+d; size(200, 200); background(0);
stroke(255);
line(50, 50, 100, 150);
line(p3, p3, p2, p3); line(p2, p3, p2, p2); line(p2, p2, p3, p2); line(p3, p2, p3, p3);
point(p1, p1); point(p1, p3); point(p2, p4); point(p3, p1); point(p4, p2); point(p4, p4) 

  ;

 

Untuk mengubah warna garis, dapat digunakan perintah stroke(x) atau stroke(r,g,b). Selain itu ketebalan garis dapat kita atur dengan menggunakan perintah strokeWeight(x) dengan nilai x adalah jumlah ketebalan pixel.

Jika ingin merubah tampilan ujung garis, dapat juga kita tambahkan perintah strokeCap(mode). Mode yang digunakan adalah SQUARE, ROUND dan PROJECT. Untuk lebih jelas, silahkan ketik program berikut ini:

size(200, 200);
background(0);
line(25, 5, 175, 5);
stroke(255,0,0);
line(25, 25, 175, 25);
strokeWeight(5);
line(25, 50, 175, 50);
strokeWeight(10);
strokeCap(SQUARE);
line(25, 75, 175, 75);

Objek Bundar

Untuk membuat objek bundar dapat menggunakan beberapa cara bentuk, yaitu : ellipse dan busur.

Untuk bentuk ellipse dapat digunakan perintah ellipse(x,y,width,height) dengan nilai x dan y adalah sebagai pusat ellipse seperti ditunjukkan pada gambar 1.1 berikut :

Gambar 1.1 Model Penggambaran Bentuk Ellipse

 

Sedikit berbeda dengan penggunaan busur (arc). Pada ellipse kita dapat membuat bentuk bundar secara utuh, namun pada busur kita dapat membuat bentuk bundar hanya sebagian dalam arti kurva terbuka. Perintah yang digunakan adalah arc(x,y,width,height,start,stop), x dan y adalah posisi pusat busur, width adalah lebar dan height adalah tinggi. Penggunan start pada arc adalah posisi awal penggambaran dan stop adalah posisi akhir penggambaran busur.

Nilai awal dan akhir pada arc, adalah menggunakan satuan nilai PI (π). Untuk 180˚ sama dengan PI

 = 3,14 atau (22/7) jika dibuat dengan persamaan lain yaitu : (sudut * PI)/180˚.  Untuk lebih yakin, silahkan tulis program berikut ini :

size(400,150); background(255);
fill(255,0,0);
ellipse(50,50,75,100);
fill(0,255,0);
arc(175,50,100,100,(0*PI)/180,(90*PI)/180);
arc(250,50,100,100,(0*PI)/180,(90*PI)/180);

Perintah fill(r,g,b) digunakan untuk member warna area didalam ellipse atau arch, dan  noFill() digunakan untuk menghilangkan warna didalam area. Untuk perintah stroke(), noStroke(), strokeCap() dan strokeWeight() juga dapat diaplikasikan pada objek.

Bentuk Segi 

Bentuk segi yang dimaksud adalah berupa segi empat dan segi tiga atau segi lainnya. Untuk yang pertama kita mencoba untuk membuat segi empat standar dengan menggunakan  perintah rect(x,y,width,height), dimana x dan y adalah posisi awal sudut seperti ditunjukkan pada gambar 2.3 berikut:

Gambar 2.3. Model penggambaran perintah rect()

Perintah lain yang dapat digunakan adalah quad(x1,y1,x2,y2,x3,y3,x4,y4). x1 dan y1 menyatakan koordinat xy titik sudut pertama, x2 dan y2 menyatakan koordinat xy titik sudut kedua, x3 dan y3 menyatakan koordinat xy titik sudut ketiga, x4 dan y4 menyatakan koordinat xy titik sudut keempat. Bentuk selanjutnya adalah segitiga yang dapat dibuat dengan perintah triangle(x1,y1,x2,y2,x3,y3). Untuk lebih jelas silahkan coba program berikut ini:

size(200, 200); smooth(); background(0);
noStroke();
fill(226);
triangle(10, 10, 10, 200, 45, 200);
rect(45, 45, 35, 35);
quad(105, 10, 120, 10, 120, 200, 80, 200);
triangle(160, 10, 195, 200, 160, 200);

 

Bentuk yang lain dalah penggunaan bentuk bebas yaitu dengan menggunakan perintah :

beginShape(mode);

vertex(x,y); 

vertex(x,y);

…..

endShape();

Dengan menggunakan mode perintah ini, setiap vertex akan terhubung menjadi sebuah objek pada satu macam shape. Parameter mode shape dapat diisi dengan  POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP. 

Contoh program

contoh1

beginShape(); 

vertex(30, 20);  

vertex(85, 20);  

vertex(85, 75);

vertex(30, 75); 

endShape(CLOSE);

contoh2

beginShape(TRIANGLE_FAN);
vertex(57.5, 50);
vertex(57.5, 15);
vertex(92, 50);
vertex(57.5, 85);
vertex(22, 50);

vertex(57.5, 15);

endShape();