Grafika Komputer Pertemuan Ke-5

(1)

BAB-5

APLIKASI INTERAKTIF

Aplikasi yang dikembangkan sekarang adalah aplikasi yang

kebanyakan interaktif antara user dengan aplikasi.

By: I Gusti Ngurah Suryantara, S.Kom., M.Kom

5.1. PENDAHULUAN

Perkembangan grafika komputer sangat luas, dengan semakin pesatnya perkembangan komputer dari segi hardware dan software kebanyakan aplikasi yang sekarang yang dikembangkan adalah alplikasi yang interaktif. Software yang digunakan untuk mengembagkan aplikasi interaktif seperti ActionScript dengan Macromedia Flash, Lingo Language dengan Macromedia Director, dan Java Script.

Aplikasi interaktif yang sederhana seperti penggunaan paint brush, yang dapat membuat objek dan memanipulasi objek tersebut. Manipulasi yang dapat dilakukan seperti cut, copy, delete, move dll.

Gambar 5.1. Pint Brush

(2)

5.2. ANIMASI

Dalam multimedia, animasi merupakan penggunaan komputer untuk menciptakan gerak pada layar, dalam sebuah pembuatan Motion Graphic Designer digunakan beberapa animasi sebagai berikut :

1. Animasi Frame ( Frame Animation )

Animasi frame adalah bentuk yang paling sederhana. Diumpamakan memiliki sebuah buku yang mempunyai gambar berseri di tepi halaman berurutan. Bila jempol membuka buku dengan cepat, maka gambar kelihatan bergerak. Pada komputer multimedia, animasi buku tersebut menampilkan sebuah gambar yang berurutan secara cepat. Antara gambar satu (frame satu) dengan gambar yang lain (frame lain) berbeda.

(a) http://img.tomshardware.com

(3)

(c)

http://www.we-make-money-not-art.com

2. Animasi Sprite (Sprite Animation)

Animasi sprite serupa dengan teknik animasi tradisional, yaitu objek yang diletakkan dan dianimasikan pada bagian puncak grafis dengan latar belakang diam. Sprite adalah setiap bagian dari animasi yang bergerak secara mandiri, misalnya burung terbang, planet berotasi, bola memantul-mantul atau logo berputar. Sprite beranimasi dan bergerak sebagai objek yang mandiri. Dalam animasi sprite, sebuah gambar tunggal atau berurutan dapat ditempelkan dalam sprite. Sprite dapat dianimasikan dalam satu tempat.

(4)

http://www.goldenstudios.or.id

(5)

3. Animasi Lintasan

Animasi lintasan adalah animasi dari objek yang bergerak sepanjang garis kurva yang kita tentukan sebagai suatu lintasan. Animasi SplineSpline adalah representasi matematis dari kurva. Bila objek bergerak, biasanya tidak mengikuti garis lurus, misalnya berbentuk kurva. Program animasi komputer memungkinkan kita untuk membuat animasi spline dengan lintasan gerakan berbentuk kurva.

(6)

http://www.kxcad.net

4. Computational Animation

Computational animation merupakan animasi pergerakan objek dengan memvariasikan

titik koordinat x dan y-nya, koordinat x merupakan posisi horizontal objek, yaitu berapa jauh kiri-kanan layar. Koordinat y merupakan posisi vertikal, yakni berapa jauh atas-bawah layar.

Catatan:

(7)

5.3. MORPHING

Pengertian morphing adalah:

• Morphing adalah perubahan bentuk objek gambar secara bertahap (perlahan-lahan). • Morphing merupakan salah satu teknik yang banyak digunakan dalam dunia

entertainment karena efek dari morphing ini sangat menarik untuk diamati. • Morphing memerlukan dua gambar, yaitu gambar awal dan gambar akhir.

• Morphing digunakan untuk membuat gambar yang berubah setiap satuan waktu dari gambar asal ke gambar hasil.

• Morphing secara sederhana dapat dilakukan dengan menggunakan interpolasi linier.

Gambar 5.2. Contoh morphing perubahan wajah manusia menjadi wajah kucing Sumber gambar: http://www.novadevelopment.com

(8)

Contoh Morphing 1, Transformasi posisi:

Morphing ini adalah morphing yang dilakukan secara geometrik atau perubahan bentuk (shape). Morphing ini adalah model morphing yang sangat rumit karena menggunakan transformasi posisi.

Bentuk ini dapat digunakan untuk 2D dan 3D

Gambar 5.3. Transformasi posisi

(9)

Contoh Morphing 2, Raster Trasnformasi:

Morphing ini sebenarnya bentuk morphing yang mudah, karena dilakukan dengan mengubah warna setiap titik dan tidak melakukan transforamsi posisi. Morphing ini hanya bisa digunakan untuk grafik 2D.

Gambar 5.5. Raster transformation

Sumber gambar: www.cescg.org

Gambar 5.6. Raster transformation

Contoh gambar ini diambil dari situs http://www.cs.unc.edu

(10)

5.3.1. Interpolasi Linier

Interpolasi linier adalah salah satu teknik untuk mendapatakan nilai antara dari dua nilai dengan memperhatikan perbandingan skala atau posisinya. Interpolasi ini menggunakan pendekatan garis lurus.

P2(X2,Y2)

P(X,Y)

P1(X1,Y1)

a

b

Gambar 5.7. Interpolasi linier

Dimana:

Rasio perubahan = interpolasi linier didefinisikan dengan: X = r.X1 + (1-r).X2

Y = r.Y1 + (1-r).Y2

Implementasi interpolasi linier 2D:

Point2D_t interpolasi(point2D_t a, point2D_t b, float r) {

Titik2D_t c;

c.x = r*a.x + (1.-r)*b.x; c.y = r*a.y + (1.-r)*b.y; return c;

}

Implementasi interpolasi linier 3D:

Point3D_t interpolasi(point3D_t a, point3D_t b, float r) {

Titik3D_t c;

c.x = r*a.x + (1.-r)*b.x; c.y = r*a.y + (1.-r)*b.y; c.z = r*a.z + (1.-r)*b.z; return c;

(11)

Gambar 5.7. Interpolasi linier

5.3.2. Morphing 2D

Pengertian dan definisi morphing 2D dapat dijelaskan sebagai berikut:

• Morphing 2D adalah implementasi dari interpolasi yang dikenakan pada titik-titik 2D. • Morphing yang dilakukan pada dua obyek gambar 2D adalah interpolasi dari setiap

titik yang bersesuaian (berdasarkan urutan).

• Morphing 2D menggunakan transformasi posisi pada sistem koordinat 2D.

•

Jumlah titik sama.

Gambar 5.8. Morphing 2D

5.3.3. Morphing 3D

Pengertian dan definisi morphing 3D dapat dijelaskan sebagai berikut:

• Morphing 3D adalah implemenasi dari interpolasi yang dikenakan pada titik-titik 3D. • Morphing yang dilakukan pada dua objek gambar 3D adalah interpolasi dari setiap

titik yang bersesuaian (berdasarkan urutan).

• Morphing tidak nenoengaruhi definisi face dan cara penggambarannya. • Morphing 3D menggunakan transformasi posisi pada sistem koordinat 3D. • Jumlah titik pada masing-masing objek sama.

5.3.4. Tugas Morphing

Buatlah sebuah program yang mempu melakukan morphing terhadap suatu objek, dapat menggunakan morphing linier, 2D, atau 3D. Dalam membuat mophing ini menggunakan bahasa pemrograman, bahasa pemrograman yang digunakan dapat anda pilih VB, VB.Net. Jangan menggunakan software yang memang dikhususkan untuk membuat morphing.

(12)

5.4. GRAFIK USER INTERFACE

Interface interaksi manusia dengan komputer untuk kebanyakan sistem menggunakan grafik supaya memudahkan penggunaan aplikasi. Interface digunakan dalam banyak aplikasi seperti dalam permainan game, pengolah kata, pengolah tabel, management system, presentation system, dll.

5.4.1. Dialog User

Model user menjelaskan bagaimana sistem dirancang untuk menyelesaikan fungsinya dengan operasi grafik yang tersedia. Semua informasi dalam dialog user disajikan dalam aplikasi, dan dapat dimengerti oleh user yang berhubungan dengan sistem tersebut. Beberapa pertimbangan diperlukan untuk pembuatan dialog user, yaitu manipulasi langsung, window dan icon, akomodasi beberapa kemampuan, konsistensi, minimisasi memori, backup dan penanganan kesalahan serta feedback.

5.4.1.1. Manipulasi Langsung

Manipulasi langsung merupakan bentuk user interface yang baik dan mudah dipelajari oleh user. Interface dapat menggunakan kombinasi atara direct-manipulasi dan command language.

5.4.1.2. Window dan Icon

Fungsi yang biasanya terdapat dalam sistem window diantaranya membuka dan menutup window, memindahkan window, mengubah ukuran window, dll.

Bentuk icon yang disajikan menggambarkan simbol yang mudah dimegerti oleh user. Pembuatan desain icon mempunyai tiga macam tujuan:

1. Mudah dikenali, bagaimana icon dapat dikenali dengan mudah dan mempunyai arti yang jelas.

2. Mudah diingat, bagaima arti sebuah icon mudah diingat oelh user.

3.

Mudah dibedakan, bagimana suatu icon dapat dibedakan dengan yang lainnya.

5.4.1.3. Akomodasi Beberapa Kampuan User

Cara ini mengakomodasi kebiasaan atau kemampuan user yang berbeda-beda, sehingga user merasakan kemudahan dalam menggunakan sistem. Keberhasilan suatu sistem bukan hanya ditentukan oleh masalah teknis, tetapi masalah psikologis sangat berpengarauh.

Bagi user yang belum berpengalaman , interface dengan sedikit operasi dan perintah alan lebih bermanfaat daipada pengguna yang lebih luas.

Bagi user yang sudah berpengalaman biasanya menginginkan kecepatan dalam menggunakan aplikasi.

5.4.1.4. Konsistensi

Pertimbangan penting untuk desain user interface adalah konsistensi. Contohnya, bentuk icon harus mempunyai suatu arti dalam penggunaan, karena bila digunakan pada berbagai macam fungsi akan membingungkan bagi user. Seperti gambar gunting untuk memotong suatu objek, jangan digunakan untuk menyimpan file.

(13)

• Penggunaan warna harus sama, sehingga tidak menimbulkan penapsiran yang berbeda.

• Pesan dari sistem ditampilkan pada lokasi tertentu secara logika.

• Posisi menu sebaiknya diletakkan pada lokasi yang sama, sehingga user tidak selalu mencari-cari untuk menemukannya.

• Penggunaan fungsi key harus sama untuk action yang sama. Contoh penggunaan konsistensi dari penggunaan input.

• Karakter dari keyboarr, seperti return, tab, backspace selalu mempunyai fungsi sama dan dapat digunakan setiap saat.

• Global command, seperti Help, Satus, dan Cancel dapat digunakan setiap saat.

• Generic command, seperti Move, Copy, dan Delete dilengkapi pada setiap pemakian untuk setipa objek dari sistem.

5.4.1.5. Minimisasi Memori

Sistem window dengan icon membantu untuk mengurangi penggunaan memori. Bermacam-macam informasi dapat ditampilkan pada beberapa window bergantian dengan berpindah dari window satu kewindow yang lain bila diperlukan.

5.4.1.6. Backup dan Penanganan Kesalahan

Tujuan backup dan penanganan kesalahan adalah untuk menghindari kesalahan yang dilakukan oleh user. Backup dapat dibuat dalam berbagai bentuk seperti perintah undo.

5.4.1.7. Feedack

Feedback dimaksudkan memberikan respon interaksi user dengan aplikasi. feedback yang diberikan oleh aplikasi bermacam-macam dapat berupa perubahan warna, perubahan bentuk. Yang menandakan sistem sedang perespon interaksi user dengan aplikasi.

5.4.2. Desain Visual

Desain visual mencakup elemen grafik yang digunakan pada inerface, termasuk layout secara keseluruhan, menu, desain form, penggunaan warna, coding, dan penempatan tiap unit dari informasi. Desain visual yang baik memberikan pengaruh yang kuat pada kejelasan, konsistensi, dan estetis.