Pada bab-bab sebelumnya, kita telah membiasakan diri menggunakan Processing, serta mengaplikasikan fungsi-fungsi bawaannya untuk melakukan berbagai hal, seperti menampilkan gambar, membuat bentuk, hingga mentransformasikan keduanya. Pada titik ini, tentu saja Processing telah nampak sebagai sebuah tool yang bersahabat untuk membuat konten visual yang dinamis. Namun, pada kenyataannya, kekuatan Processing dapat ditingkatkan dengan menggunakan berbagai library tambahan. Library-library ini menyediakan fungsi-fungsi baru, di luar yang sudah jadi bawaan Processing. Peningkatan fungsionalitas ini membuat Processing mampu melakukan banyak hal-hal baru dengan relatif mudah.
Daftar library Processing bisa dilihat di halaman https://processing.org/reference/libraries/ terdapat daftar lengkap library apa saja yang bisa kita tambahkan ke Processing. Daftar tersebut juga bahkan sudah dikelompokkan berdasarkan fungsi dari library tersebut.
Khusus untuk bab ini, kita akan melakukan pembuatan sekuens animasi, atau melakukan beberapa hal dalam urutan-urutan tertentu. Dari deskripsi itu, mungkin ada pembaca yang berkata, ini akan sangat mudah dilakukan dengan menggunakan fungsi bawaan Processing. Namun, untuk memudahkan pekerjaan kita, sekaligus memperkenalkan library, maka pada bab ini, kita akan menggunakan sebuah library bernama Ani. Referensi lebih lanjut mengenai library tersebut, bisa diakses di http://www.looksgood.de/libraries/Ani/.
Ani, seperti juga library lain, bisa diinstalasikan ke Processing dalam 2 cara, silahkan pilih cara yang paling nyaman.
Melalui IDE
Download dan pindahkan ke folder Processing
Untuk menguji apakah instalasi sudah berjalan dengan benar, maka coba pilih Sketch - Import Library. Apabila ada nama Ani dalam pilihan library yang bisa diimpor, maka instalasi sudah benar. Jika tidak, coba ulangi langkah-langkah instalasi tadi.
Ani adalah sebuah library yang berisi fungsi-fungsi yang berkaitan dengan pembuatan animasi. Secara umum, ada 3 fungsi yang akan memudahkan kita dalam membuat animasi:
Dalam fungsi motion, Ani mengimplementasikan fitur tweening yang terdapat di Adobe Flash. Dengan menggunakan ini, maka pembuat animasi cukup menentukan objek mana yang akan bergerak, ke mana bergeraknya dan dengan pergerakan seperti apa. Tipe pergerakan ini juga dikenal dengan nama easing karena sejatinya, transisi gerakan yang terjadi, dilakukan secara pelan-pelan dan bukan konstan atau mendadak.
Fungsi sequencing membuat kita bisa menentukan dengan mudah apa saja yang akan terjadi dalam animasi dan kemudian memainkan kejadian-kejadian ini dalam sebuah urutan. Dan dengan menggunakan timeline, maka kita bisa mengatur kapan animasi mulai bermain, kapan berhenti dan apa yang terjadi setelah berhenti. Anggap saja timeline ini sebagai kumpulan tombol yang biasa ada di player multimedia, seperti tombol play, stop, pause dan sebagainya.
Meski pada dasarnya ketiga fungsi ini bisa dilakukan dengan menggunakan fungsi-fungsi bawaan Processing, namun library ini akan memudahkan kita melakukan hal-hal dasar, namun esensial dalam animasi ini. Dengan demikian, energi kita bisa difokuskan untuk membuat kontennya.
Pada dasarnya, kebanyakan fungsi Ani bisa dipanggil dengan menggunakan sintaks:
Ani.to(objek, durasi, nama_variabel, tujuan, easing)
Di mana parameter-parameter tersebut menunjukkan:
Fungsi di atas sudah lebih dari cukup untuk memudahkan kita membuat sebuah pergerakan objek hingga menjadi animasi. Sebagai contoh, kita bisa membuat animasi untuk menggerakkan sebuah lingkaran ke posisi acak setiap 2 detik sekaligus mengganti warnanya. Mari kita simak:
Contoh 9-1 Menggunakan Fungsi Motion Ani
// mengimpor library Ani
import de.looksgood.ani.*;
// variabel x dan y adalah posisi lingkaran
// variabel colorG adalah warna di spektrum hijau
// variabel colorB adalah warna di spektrum biru
// variabel dia adalah ukuran lingkaran
float x = 256;
float y = 256;
int colorG, colorB;
int dia = 50;
void setup() {
size(512,512);
smooth();
noStroke();
// pemanggilan fungsi Ani.init(), ini wajib dilakukan
Ani.init(this);
}
void draw() {
background(255);
fill(0, colorG, colorB);
ellipse(x,y,dia,dia);
// setiap 2 detik. defaultnya 1 detik = 60 frame
if (frameCount%120 == 0) {
// animasikan variabel x, y, colorG dan colorB
// masing-masing animasi berjalan selama 2 detik
Ani.to(this, 2, "x", random (width));
Ani.to(this, 2, "y", random (height));
Ani.to(this, 2, "colorG", random(255));
Ani.to(this, 2, "colorB", random(255));
Ani.to(this, 1, "dia", random(50,120));
}
}
Kita bisa lihat dari contoh di atas bahwa bagian paling penting terjadi pada saat pemanggilan fungsi Ani.to(), karena di sinilah animasi berlangsung. Animasi kita lakukan terhadap beberapa properti dari lingkaran, yakni posisi, warna dan ukurannya. Fungsi Ani.to() kemudian melakukan perubahan terhadap variabel-variabel ini dalam durasi tertentu selama program berjalan. Cukup mudah bukan?
Latihan 9-1
Kembangkan contoh 9-1 untuk menganimasikan lebih dari 1 bentuk secara bersamaan
Easing, adalah metode untuk melakukan transisi dalam animasi. Jadi ketika sebuah nilai berubah katakan dari 10 ke 100, maka seiring berjalannya waktu, nilai ini bisa jadi tidak berubah secara linear, tapi mengikuti sebuah grafik tertentu. Aplikasi grafik ini dalam sebuah gerakan animasi kemudian dikenal dengan nama easing, karena secara harfiah, perubahan nilainya pelan-pelan, tidak mendadak.
Ani menyediakan beberapa jenis easing yang bisa langsung kita gunakan untuk memuluskan pergerakan dalam animasi kita. Untuk menggunakannya, kita cukup menambahkan parameter kelima dalam pemanggilan fungsi Ani.to(). Contoh berikut akan menunjukkan penggunaan easing dalam membuat animasi sebuah lingkaran yang bergerak. Perhatikan perbedaan hasilnya ketika terjadi penggunaan metode easing yang berbeda
Contoh 9-2 Menggunakan Easing di Ani
import de.looksgood.ani.*;
float x = 300;
float y = 550;
void setup() {
size(600, 600);
smooth();
noStroke();
Ani.init(this);
}
void draw() {
background(255);
fill(0, 150, 100);
ellipse(x, y, dia, dia);
// setiap tombol yang berbeda akan menggerakkan bola dengan
// efek easing yang berbeda pula
if (keyPressed) {
if (key == '1') {
Ani.to(this, 2, "y", 50, Ani.BOUNCE_OUT);
} else if (key == '2') {
Ani.to(this, 1.5, "y", 550, Ani.ELASTIC_IN);
}
}
}