Membuat Fade In Animation dengan Processing

Tidak terasa sudah masuk minggu ketiga semester dua. Processing masih terasa baru meski beberapa hari ini ada sebuah masalah yang belum terpecahkan, apalagi berhubungan dengan kuliah, karena itu adalah tugas kuliah. Membuat animasi fade in dengan processing. Sebenarnya sih untuk membuat sebuah fade in animation dari sebuah gambar sih gampang, yang sulit adalah mengotak-atik logika agar menggunakan sedikit coding untuk menghasilkan animasi fade in dari empat buah gambar.

Setelah beberapa hari mengotak-atik, akhirnya masalah tersebut sudah terpecahkan dengan cukup mudah. Intinya sih di logika matematika. Namun karena tidak ada mata kuliah matematika, dan tidak terbiasa dengan pelajaran matematika, sehingga cukup sulit untuk memecahkannya. Mungkin tahun depan jadi ada mata kuliah matematika untuk jurusan Multimedia Broadcasting :p.

Sebelum menuju kode sepenuhnya, mari kita pelajari sedikit-sedikit agar lebih faham dan tidak asa copas saja. Saya menggunakan kode tint bagian transparency untuk membuat efek fade in / out animation. Seperti yang ada pada referensi processing yang isinya sebagai berikut:

tint(value1, value2, value3, alpha)

Pengaturan alpha berada pada nilai yang ke-empat / yang paling belakang. Nilai maksimal alpha bukan 0 melainkan 255, sehingga jika ingin menampilkan gambar seutuhnya tanpa ada transparansi maka atur nilainya menjadi 255.

Saatnya masuk ke percobaan, ada beberapa hal yang perlu kita siapkan. Diantaranya

Pendeklarasian variabel gambar, dimana dalam sebuah variabel gambar akan digunakan untuk menyimpan sebuah gambar. Karena ada 4 buah gambar, maka saya mendeklarasikan 4 buah variabel gambar yang saya beri nama img dengan cara menuliskan seperti di bawah ini
```
PImage img; PImage img1; PImage img2; PImage img3;
```
Pendeklarasian variabel transparansi dengan type data integer saya beri nama
```
int transparency1; int transparency2; int transparency3;
```
Buat sebuah setup atau pengaturan untuk beberapa hal diantaranya adalah isi variabel transparency dan variabel image
Pengisian variabel transparansi, variabel ini nilainya dapat berubah-ubah namun tetap ada dalam batasan nilai 0 – 255, karena kita akan mengubah alpha menggunakan variabel ini. Berikut nilai variabel transparency
```
transparency1 = 255; transparency2 = 0; transparency3=0;
```
Pengisian variabel img yang sudah kita buat dengan gambar, sebelum mengisikan variabel tersebut kita harus membuat sebuah folder yang berada satu folder dengan file *.pde kita. Nama folder tersebut adalah data. Masukkan 4 buah gambar pada folder data tersebut dan panggil kedalam processing dengan menggunakan perintah
```
 img = loadImage("gbr.jpg"); dst
```

Setelah pengaturan pada void setup() selesai, kini saatnya bermain-main dengan matematika pada bagian void draw(). Untuk bagian pertama saya menggunakan script berikut:

  tint(255,255,255,transparency1);
  image(img, 0, 0);
  if(transparency1 > 0){
    transparency1--;
  }

Yang berarti, nilai transparency1 diambil dari void setup adalah 255. Karena nilainya memenuhi logika if yang isinya jika nilai transparency1 lebih dari 0 maka transparency1 akan dikurangi, hal tersebut akan berulang terus menerus hingga nilai transparency1 kurang tidak lebih besar daripada 0. Ketika nilai transparency1 = 0 maka gambar pertama yaitu img tidak akan terlihat dan digantikan oleh gambar berikutnya yang menggunakan script berikut:

  tint(255,255,255,255-transparency1);
  image(img1, 0, 0);

Karena nilai alpha pada script kedua adalah 255 – transparency1. Jadi ketika nilai transparency 255, maka alpha gambar kedua = 0. Padahal kita mengurangi terus-menerus nilai alpha pada variabel transparency1, sehingga akan membuat alpha yang ada pada gambar kedua bertambah terus-menerus hingga titik maksimal, yaitu 255.

Untuk mengurangi transparency gambar kedua dan menampakkan gambar ketiga saya menggunakan script berikut

  tint(255,255,255,transparency2);
  image(img2, 0, 0);
  if((transparency1 == 0) && (transparency2 < 255)){
    transparency2++;
  }

Script tersebut menggunakan transparency2 sebagai acuan variabel untuk mengatur alpha gambar kedua. Sedangkan untuk arti dari logika if tersebut kurang lebih jika transparency1 sama dengan 0 dan transparency2 kurang dari 255 maka nilai transparency2 akan ditambah terus sampai nilai transparency2 = 255.

Kemudian dilanjutkan dengan penulisan script berikut

  tint(255,255,255,transparency3);
  image(img3, 0, 0);
  if((transparency2 > 0)&&(transparency2==255)){
    transparency3++;
  }

Dengan logika if jika transparency2 lebih besar daripada 0 dan transparency2 sama dengan 255, maka nilai dari transparency3 akan dijumlahkan, sehingga gambar keempat akan tampak dengan jelas.

Semoga sedikit penjelasan dari saya diatas dapat membantu teman-teman yang kesulitan dalam mengerjakan soal tersebut. Apalagi deadlinenya besok pagi. hehehe. Untuk script sengaja tidak saya jadikan satu agar mau belajar membaca dan memahami maksud dari script tersebut, tidak asal copas. Jika ada alternatif yang lebih ringkas comment ya :D.

Karena tugasnya sudah dikumpulkan, banyak yang mengeluhkan tidak jalan. Berikut source code secara utuh yang bisa dicopas

PImage img;
PImage img1;
PImage img2;
PImage img3;

int transparency1;
int transparency2;
int transparency3;

void setup(){
  size(640,480);
  transparency1 = 255;
  transparency2 = 0;
  transparency3 = 0;
  img = loadImage("gbr.jpg");
  img1 = loadImage("gambar.jpg");
  img2 = loadImage("gbr_01.jpg");
  img3 = loadImage("gbr_02.jpg");
}

void draw(){
  background(255);
  tint(255,255,255,transparency1);
  image(img, 0, 0);
  if(transparency1 > 0){
    transparency1--;
  }
  tint(255,255,255,255-transparency1);
  image(img1, 0, 0);
  
  tint(255,255,255,transparency2);
  image(img2, 0, 0);
  if((transparency1 == 0) && (transparency2 < 255)){
    transparency2++;
  }
  
  tint(255,255,255,transparency3);
  image(img3, 0, 0);
  if((transparency2 > 0)&&(transparency2==255)){
    transparency3++;
  }

}