58 KOMPUTER GRAFIK

BAB 6
MEMBUAT ANIMASI PADA PEMROGRAMAN
PROCESSING

Ani adalah sebuah library yang berisi fungsi-fungsi yang berkaitan dengan
pembuatan animasi. Secara umum, ada 3 fungsi yang akan memudahkan
dalam membuat animasi:
a) Fungsi motion atau pengaturan gerakan
b) Fungsi sequencing atau pengaturan urutan kejadian
c) Fungsi timeline atau pengaturan berjalannya animasi (playback)
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 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 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
melakukan hal-hal dasar, namun esensial dalam animasi ini. Dengan
demikian, energi bisa difokuskan untuk membuat kontennya.

KOMPUTER GRAFIK 59
Menggunakan Fungsi Motion Ani
Pada dasarnya, kebanyakan fungsi Ani bisa dipanggil dengan menggunakan
sintaks:
Ani.to(objek, durasi, nama_variabel, tujuan,
easing)

Di mana parameter-parameter tersebut menunjukkan:

 objek : adalah objek yang akan digerakkan, bisa berupa objek yang
buat sendiri, ataupun "this"
 durasi: lamanya animasi berjalan, dinyatakan dalam detik
 nama_variabel: ini adalah variabel mana yang akan digerakkan
 easing: ini adalah tiper pergerakannya
Fungsi di atas sudah lebih dari cukup untuk memudahkan dalam membuat
sebuah pergerakan objek hingga menjadi animasi. Sebagai contoh, bisa
membuat animasi untuk menggerakkan sebuah lingkaran ke posisi acak
setiap 2 detik sekaligus mengganti warnanya.
1. Download Library Ani

Gambar 52. Menambahkan Library

60 KOMPUTER GRAFIK
2. Cari/ketikkan ani, dan lakukan instal

Gambar 53. Install Library Ani

3. Isikan dengan kode berikut:
Program 6.1
Script: Hasil:

// mengimpor library
Ani
import
de.looksgood.ani.*;

// variabel x dan y
adalah posisi lingkaran
// variabel colorG Gambar 54. Animasi dengan librari Ani
adalah warna di
spektrum hijau
// variabel colorB
adalah warna di
spektrum biru
// variabel dia
adalah ukuran
lingkaran

KOMPUTER GRAFIK 61
 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

62 KOMPUTER GRAFIK
 // 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));
}
}

Bagian paling penting terjadi pada saat pemanggilan fungsi Ani.to(),

karena di sinilah animasi berlangsung. Animasi posisi, warna dan
ukurannya. Fungsi Ani.to() kemudian melakukan perubahan terhadap
variabel-variabel ini dalam durasi tertentu selama program berjalan.

Kembangkan contoh diatas untuk menganimasikan custom easing

Program 6.2
Script:
import de.looksgood.ani.*;
import de.looksgood.ani.easing.*;

//ada 3 objek

KOMPUTER GRAFIK 63
int y = 0;
int y2 = 0;
int y3 = 0;
AniSequence seq;

void setup() {
size(500,500);
Ani.init(this); // initialize the library...

seq = new AniSequence(this);

seq.beginSequence();

seq.beginStep();
seq.add(Ani.to(this, 1, "y", 400, Ani.BOUNCE_OUT));
seq.add(Ani.to(this, 2, "y2", 400, Ani.BOUNCE_OUT));
seq.add(Ani.to(this, 3, "y3", 400, Ani.BOUNCE_OUT));
seq.endStep();

seq.beginStep();
seq.add(Ani.to(this, 1, 0.1, "y", 0, Ani.EXPO_OUT)); // second value is delay.
(0.1)
seq.add(Ani.to(this, 1, 0.2, "y2", 0, Ani.EXPO_OUT));
seq.add(Ani.to(this, 1, 0.2, "y3", 0, Ani.EXPO_OUT));
seq.endStep();

seq.endSequence();
//seq.start();
}

void draw() {
background(#FAB6DD);
rect(0,y,100,100);

64 KOMPUTER GRAFIK
 rect(200,y2,100,100);
rect(400,y3,100,100);
}

void mousePressed() {
seq.start();
}

KOMPUTER GRAFIK 65