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