السلام عليكم ورحمة الله وبركا ته
Apa kabar sobat semua?
Setelah kita membahas 3 (tiga) materi sebelumnya
Grafika Komputer dengan Processing-[Pengenalan Grafika Komputer]
Grafika Komputer dengan Processing-[Bentuk Dasar]
Grafika Komputer dengan Processing-[Gradasi Warna]
Kini saatnya kita melangkahkan kaki dan mengayunkan tangan menuju materi selanjutnya, yaitu tentang "Ornamen" (ciee bahasanya kayak mau pigi kerja bakti aja.. hehehe).
Apa itu ornamen?
Mungkin sobat sudah tidak asing dengan kata tersebut. Yap.. ornamen itu istilah lainnya adalah "hiasan" atau bisa juga "ukiran" atau.. ahh terserah deh, yang jelas ornamen itu identik dengan "indah" (bukan si indah anak pak somad ya bro.. hehehe)
Namun kali ini kita mau bikin yang "indah-indah" pakai coding, dan tentu saja agak sedikit pusing.
Dari segi unsur pembentukannya ornamen dibagi menjadi 2 (dua) jenis, yaitu :
- Ornamen Garis
- Ornamen Lingkaran
Lalu bagaimana dengan Ornamen Lingkaran?
Dari namanya juga, jelas kalau ornamen lingkaran dibentuk dari garis melengkung dan instruksi dasar yang digunakan adalah ellipse() dan arc()
Bagi yang baru bangun tidur dan nggak "ngeh" dengan instruksi line(), rect(), ellipse() dan arc() tersebut silahkan baca lagi artikel sebelumya tentang Bentuk Dasar.
Okelah kalau begitu, kita langsung saja ke inti permasalahannya. Cekidot..
1. Ornamen Garis
- Bentuk Jaring (1)
Ornamen Garis Bentuk Jaring (1)
Untuk membentuk jaring, hal pertama yang harus kita lakukan adalah mengambil nilai lebar layar(w), kemudian menentukan jumlah frekwensi (f) dari jaring, kemudian kita cari nilai jarak antar jaring (a) dengan cara membagi lebar layar(w) dengan nilai frekwensi (f).
Kemudian kita buat perulangan - count(i) sebanyak jumlah frekwensi (f), nilai (i) tersebut dikalikan dengan nilai (a) agar jarak berikutnya sebesar kelipatan dari nilai (a). Kemudian tarik garis dengan instruksi line() dari titik awal (bagian atas layar) menuju titik kedua (bagian kanan layar), tarik lagi garis dari titik kedua menuju titik ketiga (bagian bawah layar), dari titik ketiga menuju titik keempat (bagian kiri layar), terakhir dari titik keempat kembali ke titik pertama. Semua garis diberi jarak sebanyak nilai (a) dan jumlah garis yang terbentuk tentu saja sebanyak (f).
Gambar berikut mungkin lebih mampu menjelaskan dari pada seribu kalimat yang saya ketik.. :)
Berikut coding nya.
size(400,400); //Atur ukuran layar = 400x400 pixels background(0); //Atur warna latar = hitam int f=50; //Deklarasikan variable f dengan nilai 50 int w=width; //Deklarasikan variable w dengan nilai = lebar layarint a=(w/f); //Deklarasikan variable a dengan nilai w/ffor(int i=1;i<=f;i++){ //buat perulangan i ==> count(i) stroke(255,0,0); //Ganti warna pena = merah line(a*i,0,w,a*i); //tarik garis dari koordinat pertama(a,0) ke koordinat kedua(w,a) stroke(0,255,0); //Ganti warna pena = hijau line(w,a*i,w-a*i,w);//tarik garis dari koordinat kedua(w,a) ke koordinat ketiga(w-a,w)stroke(0,0,255); //Ganti warna pena = biru line(w-a*i,w,0,w-a*i);//tarik garis dari koordinat ketiga(w-a,w) ke koordinat keempat(0,w-a)stroke(255,0,255); //Ganti warna pena = jingga line(0,w-a*i,a*i,0);//tarik garis dari koordinat keempat(0,w-a) ke koordinat pertama(a,0)}
nb : karena nilai lebar(width)=tinggi(height) yaitu 400px, maka kita tidak perlu mendeklarasikan keduanya, jadi cukup deklarasikan nilai width(w) saja atau height(h) saja.
- Bentuk Jaring (2)
Sama halnya dengan bentuk jaring (1), hal pertama yang harus kita lakukan adalah mengambil nilai lebar layar(w),
menentukan jumlah frekwensi (f) dan mencari nilai
jarak antar jaring (a). Hanya saja pada bentuk (2) ini dibutuhkan nilai tengah(c) yang diambil dari setengah nilai width (w/2) dan nilai (a) didapatkan dari nilai tengah(c) dibagi frekwensi(f) ==> (c/f).
Setelah itu buat perulangan-count(i) sebanyak nilai(f). Kemudian tarik garis menggunakan instruksi line() seperti yang terlihat pada gambar.
Berikut program lengkapnya..
size(400,400);
background(255);
int f=50;
int w=width;
int c=(w/2);
int a=(c/f);
for(int i=1;i<=f;i++){
stroke(255,0,0);
line(c,a*i,c+a*i,c);
stroke(0,255,0);
line(c+a*i,c,c,w-a*i);
stroke(0,0,255);
line(c,w-a*i,c-a*i,c);
stroke(255,0,255);
line(c-a*i,c,c,a*i);
}
- Bentuk Gabungan
Setelah membuat bentuk jaring(1) dan (2), mudah-mudahan sobat semua nggak kesulitan untuk mengetahui logika pembentukan tampilan seperti gambar diatas. :) Langsung aja sedot kodingnya sob..
size(400,400);
background(0);
int f=50;
int w=width;
int c=(w/2);
int a=(c/f);
int k=(w/f); //Maksudnya sama dengan nilai(a) pada jaring(1).
int fc=255,hc=128; //ini hanya variable bantu untuk memudahkan mengetik 255 dan 128
for(int i=1;i<=f;i++){
stroke(fc,0,0);
line(a*i,a*i,c,c-a*i);
stroke(hc,hc,fc);
line(c,c-a*i,w-a*i,a*i);
stroke(0,fc,0);
line(w-a*i,a*i,c+a*i,c);
stroke(fc,fc,hc);
line(c+a*i,c,w-a*i,w-j*i);
stroke(0,0,fc);
line(w-a*i,w-a*i,c-a*i,c+a*i);
stroke(fc,fc,0);
line(c-a*i,c+a*i,a*i,a*i);
stroke(fc,0,fc);
line(k*i,0,w,k*i);
stroke(0,fc,fc);
line(w,k*i,w-k*i,w);
stroke(fc,hc,hc);
line(w-k*i,w,0,w-k*i);
stroke(hc,fc,hc);
line(0,w-k*i,k*i,0);
}
- Bentuk Papan Catur
Ngemeng-ngemeng soal kotak, berarti instruksi dasar yang digunakan adalah rect(). Untuk mengganti warna ini (fill) pada kotak(rect) digunakan instruksi fill(x) atau fill(r,g,b). Karena warna kotaknya cuma hitam dan putih, maka yang kita gunakan adalah instruksi fill(x) saja.
Bagaimana logika pembentukannya?
Ini mah gampang, di baris ganjil dan kolom genap atau di baris genap dan kolom ganjil set warna kotak = hitam (fill(0)), selain itu set warna kotak = putih (fill(255)). (lihat instruksi berwarna merah)
Setelah itu tampilkan deh kotaknya.. Jadi deh..
size(400,400);
background(255);
int s=50;
for(int y=0;y<8;y++){
for(int x=0;x<8;x++){
if(((y%2==1) && (x%2==0)) || ((y%2==0) && (x%2==1))) fill(0);
else fill(255);
rect(s*x,s*y,s,s);
}
}
2. Ornamen Lingkaran
- Permen Lolipop
size(400,400);
background(0);
strokeWeight(2);
noFill();
int f=10,w=width,c=w/2,j=w/f,k=j/2;
stroke(255,0,0);
for(int i=1;i<=f;i++){
arc(c,k*i,j*i,j*i,-PI/2,PI/2);
arc(c,w-k*i,j*i,j*i,PI/2,3*PI/2);
}
- Lingkaran Nyamuk(1)
size(400,400);
background(0);
strokeWeight(2);
noFill();
int f=10,w=width,c=w/2,j=c/f,k=j*2,l=j/2;
stroke(0,255,0);
for(int i=1;i<=f;i++){
arc(c,c-l,k*i,j*i,PI/2,1.5*PI);
arc(c,c,k*i,j*i,-PI/2,PI/2);
}
- Lingkaran Nyamuk(2)
size(400,400);
background(0);
strokeWeight(2);
noFill();
int f=10,w=width,c=w/2,j=c/f,k=j*2,l=j/2;
stroke(0,255,0);
for(int i=1;i<=f;i++){
arc(c,c-l,k*i,j+k*(i-1),PI/2,1.5*PI);
arc(c,c,k*i,k*i,-PI/2,PI/2);
}
- Hot Spot
size(400,400);
background(0);
int w=width,c=w/2,f=7,a=c/f;
stroke(255);
ellipse(c,c,40,40);
strokeWeight(10);
line(c,c,c,w);
noFill();
for(int i=1;i<=f;i++){
arc(c,c,a*2*i,a*2*i,-5*PI/4,PI/4);
}
- Wifi
size(400,400);
background(0);
int w=width,c=w/2,f=7,a=w/f,b=a/2;
stroke(255);
strokeWeight(10);
ellipse(c,w-b,30,30);
noFill();
for(int i=2;i<=f+1;i++){
arc(c,w-b*i,a*i,b*i,5*PI/4,7*PI/4);
}
Sebenarnya masih banyak lagi bentuk ornamen garis dan lingkaran yang dapat dibuat, namun karena masalah waktu dan "mood" maka pembahsan ornamen cukup sampai disini saja. Jika ada yang kurang jelas silahkan tanyakan di kolom komentar. :)
Terimakasih atas kunjungannya..
Materi kita berikutnya adalah tentang Translation, Rotate dan Scalling.
0 comments:
Post a Comment