Grafika Komputer dengan Processing-[Translation, Rotation dan Scalling]-(bagian V)

السلام علىكم ورحمةالله وبركاته

Hai sobat, setelah berakit-rakit kehulu akhirnya artikel ini selesai juga. Kali ini ane bakal ngebahas materi tentang Translation, Rotation dan Scalling.

Materi ini adalah bagian ke 5(lima) dari 12(dua belas) materi yang akan dibahas, bagi sobat yang belum mengenal apa itu grafika komputer dan apa itu processing ane sarankan untuk membaca artikel sebelumnya, sebab materi ini akan sulit untuk "difahami", "dihayati" apalagi "diamalkan" jika sobat belum tau processing itu apa dan apa-apa saja instruksi bentuk dasar nya. Nggak masalah sobat ngak ngebaca tentang gradasi warna karena memang nggak ada kaitanya dengan materi ini, namun agar lebih kreatif alangkah baiknya sobat baca juga materi tentang ornamen. :)

Namun sebelum kita ke TeKaPe, ada baiknya kita mampir dulu sejenak untuk membahas tentang struktur program pada Processing.

Lha, kok sekarang baru dibahas?

Ya, karena baru sekarang dibutukannya, pada materi sebelum-sebelumnya hal ini "belum" dibutuhkan. :)

Karena bahasa pemrograman yang digunakan pada Processing adalah bahasa java (ingat, bukan java tidak sama dengan jawa), maka strukturnya juga mirip. Namun tidak sama persis.

Jika pada java memiliki program utama dengan nama void main(), maka pada Processing program utama bernama void setup(), hanya saja jika kita tidak menyebutkan void setup(), maka semua instruksi yang ada dianggap berada didalam void setup().

Pada processing juga memiliki void draw() yang berfungsi untuk melukis frame untuk setiap satuan waktu (frameCount). Jika pada void setup() diberi instruksi noLoop(), maka frame hanya dilukis sekali saja.

frameCount dapat diatur kecepatannya dengan instruksi frameRate(freq). Dimana nilai freq adalah jumlah count dalam 1 (satu) detik.

 void setup(){  
  //Control Program
 }  
 void draw(){  
  //drawing frame
 }  

contoh :

float r,g,b;  //Buat variable r,g,b;
void setup(){  
 size(200,200);   //atur ukuran screen = 200x200 pixels;
 frameRate(3);  //atur frekwensi pelukisan = 3 Hz;
}  
void draw(){  
 r=random(0,255);  //nilai r adalah bilangan random dari 0 hingga 255;
 g=random(0,255);  //nilai g adalah bilangan random dari 0 hingga 255;
 b=random(0,255);  //nilai b adalah bilangan random dari 0 hingga 255;
 background(r,g,b);  //atur warna latar = nilai r,g,b;
}

Coba jalankan programnya, jika program anda benar maka layar akan berganti warna secara acak sebanyak 3x dalam 1 detik. Jangan terkesima, itu mah biasa pada Processing.. :)

1. Translation (Pergeseran)

Nah, sekarang saatnya kita bahas materi utama kita.

Translation berarti kita menggeser atau memindahkan objek dari koordinat A ke koordinat B. Nah, jika ada gambar pada sebuah kertas dan kita ingin memindahkannya bagaimana caranya ya?

Ada 2 (dua) cara untuk memindahkan objek, yaitu :

1. Geser titik koordinat gambarnya
2. Geser titik koordinat pusat frame-nya 

Untuk menggeser koordinat gambar tentulah sangat mudah. Tinggal tambahkan nilai x dan y sesuai keinginan maka gambar pun akan berpindah.

Misalnya ada ellipse dengan ukuran 100x100 pixels berada pada koordinat x=50 dan y=50. Untuk memindahkan lingkaran tersebut kita cukup menambahkan atau mengurangkan nilai x dan y dengan angka yang kita inginkan. Misalnya nilai x kita tambah 10 dan nilai y kita tambah 20, maka nilai x baru adalah 50+10=60 dan nilai y baru adalah 50+20=70.

Namun untuk memindahkan banyak objek sekali gus tentulah hal ini sangat tidak efisien, misalnya kita mau memindahkan gambar emoticon yang memiliki ellipse() untuk lingkar kepala dan 2(dua) buah mata serta satu buah arc() untuk mulut. Kalau masing-masing koordinatnya kita pindahkan one by one maka sungguh sangat dificult. (eh, bahasa saya udah keren nggak? kata tetangga sebelah kalau speak english ntu keren, nggak tau letak kerennya dimana?)

Lalu gimana solusinya?

Solusinya adalaaaah... Geser titik koordinat pusat frame-nya.

Default-nya titik pusat frame berada pada koordinat(0,0). Namun hal itu dapat kita pindahkan ke koordinat lain, misalnya (40,80), sehingga koordinat(0,0) yang kita tuliskan pada program pada hakikatnya sudah berpindah ke koordinat(40,80).

Instruksi yang digunakan untuk keperluan tersebut adalah translate(x,y). Untuk lebih jelasnya pelototin gambar berikut ini.

Tidak lengkap rasanya suatu ilmu kalau tidak ada prakteknya. Yap, untuk ngetest suatu "kebenaran", maka sepatutnya kita uji kebenaran tersebut terlebih dahulu. Cekidot..

 int x=0,y=0,cx,cy;  //delarasikan variable x=0, y=0 dan variable countX (cx) dan countY (cy)
 void setup(){  
  size(400,400);   
 }  
 void draw(){  
  background(255);   
  if(x>=300)cx=-5; //Jika nilai x>=300 maka nilai cx=-5 (agar nilai x dikurangi 5)
  else if(x<=0)cx=5;  //Jika nilai x<=0 maka nilai cx=5 (agar nilai x ditambah 5)
  x+=cx; //Nilai x ditambahkan dengan nilai cx;
  if(y>=300)cy=-2;  //fikirkan aja sendiri.. :D
  else if(y<=0)cy=2;  
  y+=cy;   
  translate(x,y); //Pindahkan pusat frame ke koordinat sesuai niali x dan y
  noStroke(); //Objek tidak memiliki outline
  fill(255,255,0); //atur warna isi = kuning
  ellipse(50,50,100,100);  //lingkar kepala
  fill(0);  //warna isi = hitam
  ellipse(30,30,15,30);  //mata kiri
  ellipse(70,30,15,30);  //mata kanan
  stroke(0);  //outline berwarna hitam
  strokeWeight(3);  //ketebalan pena (garis) = 3 pixels
  noFill();  //tidak ada warna isi
  arc(50,30,75,100,radians(45),radians(135));  //bibir
 }  

Oiya, karena kita terbiasa menggunakan sudut derjat (degree), ada baiknya kita manfaatkan instruksi radians(x) untuk mengkonfersi nilai sudut derjat menjadi sudut radian.

Berikut ilustrasi hasilnya..

2. Rotation (Perputaran)

Sama halnya dengan translation, rotation juga dapat kita lakukan dengan 2 cara, yaitu :

1. Gunakan rumus perputaran objek dengan instruksi sin() dan cos()
2. Putar frame-nya dengan instruksi rotate()

Namun pada pembahasan in kita hanya membahas cara ke-2. Kenapa? Karena cara pertama itu sudah kuno, kalau sudah ada cara baru yang lebih praktis buat apa mepelajari cara lama yang ribet?

Ane rasa sobat semua sudah faham apa itu rotasi(rotate), namun yang harus diperhatikan untuk masalah rotasi adalah "tentukan dulu titik putar (poros) nya". Secara default poros putar berada di koordinat(0,0). Agar objek tidak "menghilang" ataupun terpotong dari layar maka kita harus pindahkan dulu porosnya dengan instruksi translate(x,y).

Oke deh, tanpa banyak bacot lagi silahkan sedot contoh program berikut :

 void setup(){  
  size(300,300);   
 }  
 void draw(){  
  int c=width/2;  
  background(255);  
  ellipse(c,c,3,3);  
  translate(c,c);  //Pindahkan poros putar ke titik tengah screen.
  rotate(PI*frameCount/100);  //putar frame 2 derjat dikali nilai frameCount
  //Buat emoticon..
  noStroke();  
  fill(255,255,0);
  ellipse(50,50,100,100);   
  fill(0);  
  ellipse(30,30,15,30);  
  ellipse(70,30,15,30);  
  stroke(0);  
  strokeWeight(3);  
  noFill();  
  arc(50,30,75,100,radians(45),radians(135));  
 }  

Berikut ilustrasi hasilnya..

3. Scalling (Penskalaan)

Materi kita yang terakhir pada kesempatan ini adalah tentang Scalling, sama halnya dengan translation dan rotation, scalling juga punya 2(dua) cara, namun yang kita bahas hanya "cara terbaik" saja.

Adapun kedua cara tersebut adalah :

1. Perkecil/perbesar nilai width dan height dari sebuah objek, jika objek tersebut tidak memiliki nilai width dan height misalnya line, quad(), triangle() dll, maka selamat berpusing ria untuk memperbesar/memperkecil objek tersebut dengan menghitung jarak antar koordinat(x,y) nya kemudian dibagi/dikali dengan skala yang diinginkan.
2. Rubah skala frame dengan instruksi scale(x), dimana nilai x adalah nilai pembanding untuk skala awal frame.
   
   Maksudnya?
   Gini lo, untuk skala frame 2x lipat lebih besar maka digunakan instruksi scale(2), untuk kembali ke skala normal tinggal ketik scale(1), dan untuk memperkecil 50% tinggal ketik scale(0.5);
   Gimana kalau ingin memperbesar 175% atau memperkecil 35%, ya tinggal ketik scale(1.75) atau scale(0.35) aja.
   
   Ada pertanyaan lagi?
   
   Pernah nengok sendal terbang nggak?..

Biar lebih "ngeh" silahkan fahami, hayati dan amalkan program berikut :

 float s=1,cs=0.1;  //buat variable s=1 (skala 1) dan cs=0.1 (penambahan skala = 0.1)
 void setup(){  
  size(400,400);  
  frameRate(30);  //frekwensi pelukisan = 30Hz
 }  
 void draw(){  
  int c=width/2;  //buat variable untuk mengambil titik tengah (center) screen.
  background(255);  //Warna latar = putih
  if(s>=3.8)cs=-0.1;  //jika nilai skala >= 3.8 (1 berbanding 3.8), maka kurangi skala
  else if(s<=0.5)cs=0.1;  //jika nilai skala<=0.5 (1 berbanding 0.5) mak naikkan skala
  s+=cs;  //nilai skala adalah nilai skala ditambah nilai cs
  translate(c,c);  //pindahkan titik poros ke tengah layar
  scale(s);  //atur skala sesuai nilai s (antara 0.5 hingga 3.8)
  //Buat emoticon..
  noStroke();  
  fill(255,255,0);  
  ellipse(0,0,100,100);   
  fill(0);  
  ellipse(-20,-20,15,30);  
  ellipse(20,-20,15,30);  
  stroke(0);  
  strokeWeight(3);  
  noFill();  
  arc(0,-20,75,100,radians(45),radians(135));   
 }  

Sekian dulu materi tentang Translation, Rotation dan Scalling. Materi berikutnya adalah tentang kurva yang insya Allah akan segera launching.. :D

Read More

Grafika Komputer dengan Processing-[Ornamen]-(bagian IV)

السلام عليكم ورحمة الله وبركا ته

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 :

1. Ornamen Garis
2. Ornamen Lingkaran

Dari namanya jelas kalau ornamen garis dibentuk dari garis-garis (lha iya lah..), eh, jangan salah.. Instruksi dasar yang digunakan adalah line() dan rect();

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)

Ane nggak tau mau kasi nama apa sama ini bentuk, mau dikasi nama si udin keknya nggak cocok. Mending sobat liat aja sendiri en kasi nama sendiri..

 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.. :)

Agar lebih menarik, beri warna yang berbeda untuk setiap garis yang akan dibentuk dengan cara mengganti warna pen dengan instruksi stroke() sebelum instruksi line().

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 layar
 int a=(w/f);  //Deklarasikan variable a dengan nilai w/f
 for(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.

Garis berwarna merah menunjukkan arah pergerakan count(i) yang dikalikan dengan nilai(a).

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

Papan catur dibentuk dari 8x8 kotak warna hitam dan putih (dah tau kan?)
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.

Read More

Grafika Komputer dengan Processing-Gradasi Warna-(bagian III)

Assalamualaium wr. wb sobat semuanya. Kali ini ane akan mencoba mengulas materi grafika komputer tentang Gradasi Warna.

Setelah mempelajari bentukdasar (output primitives), maka setidaknya kita sudah bisa “berkreasi” dengan bentuk dasar tersebut. Kreasi pertama yang akan kita buat adalah tentang gradasi warna.

Apa itu gradasi warna? Gambar berikut mungkin lebih bisa menjelaskan dibandingkan seribu kata yang saya tuliskan :)

 

Nah, bagaimana? Sudah tahu kan apa itu gradasi?

Berdasarkan polanya terdapat 3 (tiga) jenis gradasi, yaitu :

1. Linear ==> Gradasi yang berbentuk sejajar.
2. Rectangular ==> Gradasi yang membentuk sudut.
3. Radial ==> Gradasi yang berbentuk melingkar.

Seperti yang sudah kita bahas pada bab sebelumnya, bahwa pena (pen) memiliki properti warna yang dapat kita rubah dengan instruksi stroke(x) atau stroke(r,g,b). Oleh karena itu berarti gradasi juga dapat dibentuk dengan warna grayscale ataupun rgb. Karena kita akan menggabungkan setidaknya 2 (dua) warna, maka tentulah kita harus memiliki dua warna dasar yang akan kita gabungkan dan warna hasil yang berupa hasil penggabungan.

Karena r,g,b ataupun gray memiliki rentang nilai antara 0 hingga 255, maka nilai tersebut dapat kita tampung menggunakan variabel terpisah dengan type data byte.

Jadi, kita harus memiliki variabel r,g,b untuk warna hasil, r1,g1,b1 untuk warna pertama dan r2,g2,b2 untuk warna kedua.

Untuk menggabungkan warna (gradasi) digunakan rumus :

r = (r1+(r2-r1)*count/sum);

g = (g1+(g2-g1)*count/sum);

b = (b1+(b2-b1)*count/sum);

Oke lah, kita nggak usah kebanyakan teori, mari kita langsung saja ke TKP! Ayo kita kemon..

Gradasi Linear

 Size(200,200); //atur ukuran layar = 200x200 pixels  
 background(255); //atur warna latar = putih;  
 int r,g,b, //deklarasikan variabel r,g,b  
 r1=255,g1=0,b1=0, //deklarasikan variabel r1=255,g1=0,b1=0 (merah)  
 r2=0,g2=0,b2=255; //deklarasikan variabel r1=0,g1=0,b1=255 (biru)  
 for(int i=0;i<=width-1;i++){ //buat perulangan dari 0 hingga width  
 r=(r1+(r2-r1)*i/(width-1)); //masukkan rumus gradasi  
 g=(g1+(g2-g1)*i/(width-1));  
 b=(b1+(b2-b1)*i/(width-1));  
 stroke(r,g,b); //atur warna garis = warna gradasi  
 line(i,0,i,width-1); //buat garis dari atas ke bawah  
 }  

Jalankan program diatas, kemudian coba ganti instruksi yang berwarna merah menjadi line(0,i,width-1,i);
Jika program sobat benar maka hasilnya adalah seperti ini :

Lalu jika gradasinya diagonal seperti gambar berikut, apakah bisa dilakukan dengan mengganti instruksi warna merah saja?

Untuk membuat gradasi diagonal maka perulangannya dua kali lipat lebih banyak. Maksudnya penarikan garis dilakukan sebanyak lebar+tinggi layar. Untuk lebih terang-benderangnya ayo kita langsung aja kemon...

 Size(200,200); //atur ukuran layar = 200x200 pixels  
 background(255); //atur warna latar = putih;  
 int s=with+height, //deklarasikan nilai s = lebar tambah tinggi layar  
    r,g,b, //deklarasikan variabel r,g,b  
    r1=255,g1=0,b1=0, //deklarasikan variabel r1=255,g1=0,b1=0 (merah)  
    r2=0,g2=0,b2=255; //deklarasikan variabel r1=0,g1=0,b1=255 (biru)  
 for(int i=0;i<=width-1;i++){ //buat perulangan dari 0 hingga nilai s  
   r=(r1+(r2-r1)*i/s); //masukkan rumus gradasi  
   g=(g1+(g2-g1)*i/s);  
   b=(b1+(b2-b1)*i/s);  
   stroke(r,g,b); //atur warna garis = warna gradasi  
   if(i<200)line(0,i,i,0);  
   else line(i-200,200,200,i-200);  
 }  

Jika program diatas dijalankan maka akan menghasilkan output gradasi Diagonal Up, untuk merubahnya menjadi diagonal down ganti instruksi berwarna merah menjadi :

if(i<200)line(0,200-i,i,200);
else line(i-200,0,200,s-i);

 

Gradasi Rectangular

 size(200,200);  
 background(255);  
 noFill();  
 int r,g,b,  
 r1=255,g1=0,b1=0,  
 r2=0,g2=0,b2=255;  
 for(int i=0;i<=width-1;i++){  
 r=(r1+(r2-r1)*i/(width-1));  
 g=(g1+(g2-g1)*i/(width-1));  
 b=(b1+(b2-b1)*i/(width-1));  
 stroke(r,0,b);  
 line(i,height-1,i,i);  
 line(i,i,width-1,i);  
 }  

Setelah menjalankan program diatas bagaimana hasilnya?

Copas semua coding diatas, lalu ganti instruksi yang berwarna merah dengan :

 

line(0,i,width-i,i);

line(width-i,i,width-i,height-1);

Copas lagi, lalu ganti lagi instruksi berwarna merah tersebut dengan :

line(width-i,0);

line(width-i,height-i,0,height-i);

Copas lagi, ganti lagi dengan :

line(0,i,width-i,i);

line(width-i,i,width-i,height-1);

 

Bagaimana hasilnya? Apakah sobat melihat bedanya? Yap, ke empat program diatas jika digabungkan akan menghasilkan output seperti gambar berikut.

Bagaimana jika kita ingin membuat gradasi Centered Rectangular seperti gambar berikut?

Kombinasi Gradsi Rectangular Centered

Untuk keperluan tersebut, kita harus mengganti instruksi nilai (width-1) yang berwarna hijau dengan nilai (width/2) dan mengganti instruksi berwarna merah dengan instruksi  rect(i,i,width-i*2,height-i*2); seperti contoh berikut..

 size(200,200);  
 background(255);  
 noFill();  
 int r,g,b,r1=255,g1=0,b1=0,r2=0,g2=0,b2=255;
 for(int i=0;i<=(width/2);i++){  
  r=(r1+(r2-r1)*i/(width/2)); 
  g=(g1+(g2-g1)*i/(width/2)); 
  b=(b1+(b2-b1)*i/(width/2));  
  stroke(r,g,b);   
  rect(i,i,width-i*2,height-i*2);  
 }  

Untuk meletakkan warna biru di luar dan warna merah di dalam (gambar kanan) dapat dilakukan dengan 2 (dua) cara :

1. Ganti stroke(r,g,b); dengan stroke(b,g,r);
2. Ganti rect(i,i,width-i*2,height-i*2); dengan rect(width/2-i,height/2-i,i*2,i*2);

Selamat mencoba :)

Gradasi Radial

 Materi terakhir kita tentang gradasi adalah Gradasi Radial. Sama halnya dengan gradasi rectangular, gradasi radial juga memiliki bentuk Cornered dan Centered. Hanya saja gradasinya berbentuk melingkar.

 size(200,200);  
 background(255);  
 noFill();  
 strokeWeight(2);  
 int w=width*2,i,r,b,r1=255,b1=1,r2=1,b2=255;  
 for(i=0;i<=w;i++){  
  r=(r1+(r2-r1)*i/w);  
  b=(b1+(b2-b1)*i/w);  
  stroke(r,0,b);  
  arc(width-1,height-1,i*2,i*2,PI,3*PI/2);  
 }  

Untuk bentuk output radial cornered lainnya ganti instruksi berwarna merah dengan :

• arc(0,height-1,i*2,i*2,-PI/2,0);
• arc(0,0,i*2,i*2,0,PI/2);
• arc(width-1,0,i*2,i*2,PI/2,PI);

Untuk membuat output Centered Radial, maka jumlah perulangannya cukup sebanyak nilai width saja, jadi nilai w=width*2; diganti dengan w=width; (hapus "*2" nya), kemudian ganti arc() dengan ellipse();

 size(200,200);  
 background(255);  
 noFill();  
 strokeWeight(2);  
 int w=width,i,r,b,r1=255,b1=1,r2=1,b2=255;  
 for(i=0;i<=w;i++){  
  r=(r1+(r2-r1)*i/w);  
  b=(b1+(b2-b1)*i/w);  
  stroke(r,0,b);  
  ellipse(width/2,height/2,i*2,i*2);  
 }  

Hasilnya seperti gambar berikut..

Demikian materi tentang Gradasi Warna, bagi yang masih penasaran, kita jumpa lagi di materi Ornamen.. Sampai jumpa..

Read More