Rosihan Ari's Blog

Menyisipkan Grafik Animasi dari Maple ke Situs Web

March 24th, 2009 | by rosihanari |  Cetak Artikel

Bermula dari sekedar iseng-iseng saja ketika di depan mahasiswa sewaktu kuliah “Pembelajaran Matematika Berbasis Web”, eh.. tahunya kok bisa Latar belakang keisengan ini diawali dari keingintahuan saya bagaimana cara membuat grafik animasi kemudian memindahkannya ke halaman web.

Karena kebetulan Maple adalah salah satu software yang saya kuasai dan di dalamnya tersedia module untuk membuat grafik animasi maka muncul dalam benak saya, bagaimana cara memindahkan grafik animasi yang dihasilkan dari Maple trus… dipindahkan ke halaman web.

Mau tahu caranya? So.. simak artikel ini lebih lanjut.

Contoh pertama yang saya buat adalah membuat grafik animasi yang menggambarkan fungsi f(x) = sin(ax) untuk a yang berubah-ubah mulai dari a = 1 s/d 2. Sedangkan domain fungsi yang saya pilih adalah [-10, 10].

Perintah dalam Maple untuk membuat grafik animasi di atas adalah sebagai berikut:

with(plots):
animate(sin(a*x), x = -10..10, a=1..2, frames=50);

Dalam perintah di atas terdapat parameter frames. Seperti yang kita tahu bahwa suatu gambar animasi pada dasarnya merupakan terdiri atas beberapa gambar diam yang disebut dengan frame. Semakin banyak frame maka grafik animasi yang dihasilkan semakin halus gerakannya (movement).

Nah… setelah grafik dihasilkan, selanjutnya kita lakukan proses exporting. Grafik yang dihasilkan akan kita ekspor ke file animated GIF. Bisa tidak dalam format JPG? Tidak bisa… karena hanya GIF yang bisa mensupport gambar animasi.

Bagaimana cara melakukannya? Caranya adalah dengan mengklik kanan grafik yang dihasilkan untuk memunculkan popup menu. Dalam popup menu pilih ANIMATION > CONTINUOUS bila Anda menginginkan grafik animasi bergerak terus menerus dalam animated GIF yang akan dihasilkan.

Langkah selanjutnya klik kanan kembali pada grafik, lalu pilih EXPORT AS > GRAPHIC INTERCHANGE FORMAT (GIF) pada popup menu. Perhatikan gambar berikut ini:

Nah… selanjutnya simpan dengan nama file yang diinginkan, misalkan diberi nama animasi.gif.

OK file gambar animasi sudah kita dapatkan, next… kita akan menyisipkan file animasi.gif tersebut ke dalam dokumen HTML kita. Bagaimana caranya? ya… kita tinggal gunakan saja tag

<img src="animasi.gif" />

Di bawah ini adalah hasil grafik animasi yang saya sisipkan ke dalam artikel ini

Cantik dan mudah bukan cara membuatnya?

Oya… Anda dapat pula membuat grafik animasi 3 dimensi (3D) dengan Maple kemudian mengeksportnya seperti cara di atas lalu disisipkan ke halaman web. Adapun contoh perintah Maple untuk membuat grafik animasi 3D adalah seperti berikut ini:

with(plots):
animate3d(cos(t*x)*sin(t*y), x = -Pi..Pi, y=-Pi..Pi, t=1..2);

Catatan: Anda juga bisa menambahkan parameter ‘frames = n’ seperti pada contoh sebelumnya.

Selamat mencoba. Mudah-mudahan artikel ini bermanfaat bagi Anda yang ingin mengembangkan media ajar berbasis web yang di dalamnya termuat grafik animasi.