Eksperimen Totox

"Stay hungry, stay foolish" ~Steve Jobs

[eksperimentotox-blog-blog]

Tips Performa jQuery oleh Addy Osmani

JQUERY, tidak diragukan lagi adalah salah satu framework javascript tersukses saat ini. Dengan banyaknya plugin-plugin keren dan komunitas yang terus berkembang, menjadikan jQuery menjadi framework javascript paling populer yang digunakan oleh para developer, termasuk digunakan oleh situs microblog terkenal, Twitter.

Dengan pesatnya perkembangan jQuery, saat tulisan ini dibuat jQuery sudah memasuki versi 1.9, dan semakin banyak lagi fitur-fitur yang ditambahkan, jQuery semakin menjadi kompleks dan berat. Karena performance adalah hal yang utama bagi para developer, maka penggunaan dan optimasi dari sebuah script sangatlah diperlukan.

Bagi anda pengguna jQuery, slide diatas adalah tips dan trik yang dirangkum dan ditesting oleh Addy Osmani yang dapat membantu anda untuk meningkatkan performa script jQuery anda.

[eksperimentotox-blog-blog]

Tes Kamera HTML5 [Chrome Only]

DEMO KLIK DISINI (Google Chrome Only - Klik allow jika diminta)

Penasaran dengan tutorial yang ada di HTML5ROCKS saya mencoba membuat eksperimen tentang salah satu kemampuan html5 yang bisa mengakses hardware dari sisi klien.

Eksperimen ini mengakses webcam sehingga kita bisa mengambil foto secara langsung melalui browser. Dan uniknya kita, dengan menggunakan CSS3 filter kita bisa memberikan efek secara live pada tampilan kamera kita, namun sayangnya CSS3 filter ini hanya berupa layered efek yang tidak memberikan efek/memanipulasi grafis secara langsung di <canvas> sehingga saat menekan tombol "ambil foto", efek tersebut tidak ikut tercapture.

Sebenarnya di <canvas> sendiri ada terdapat pengolah grafis per-pixel yang bisa memberikan efek secara langsung pada <canvas>, namun saya belum mencobanya. Kamu bisa bereksperimen dengan mengikuti link berikut:

http://www.html5rocks.com/en/tutorials/canvas/imagefilters/

Siapa tahu bisa bikin instagram yang berbasis web :)

[eksperimentotox-blog-blog]

Eksperimen Box2D di HTML5 Canvas - AngryPig

DEMO

Box2D adalah sebuah physics engine untuk platform 2 dimensi yang awalnya tersedia dalam bahasa C++ dan ActionScript yang kini diporting ke javascript.

BOX2D terkenal karena digunakan dalam game AngryBird.

Disini eksperimennya mencoba untuk membuat objek agar memiliki berbagai atribut yang disediakan oleh box2d dan juga elemen-elemen fisika seperti gravitasi. untuk dokumentasi selengkapnya mengenai box2d bisa mengunjungi halaman dokumentasi berikut:

http://www.box2d.org/manual.html

Di eksperimen ini saya mencoba untuk membuat toggle on-off untuk gravitasi, objek-objek seperti kotak, lingkaran yang saling berinteraksi. Agar lebih menarik saya menggunakan karakter dari game AngryBird sebagai contoh. Anda bisa melempar babi dengan men-drag dan melepas kearah tumpukan kayu dan burung, atau men-drag burung atau kayu, kombinasikan dengan tombol gravitasi dan lihat apa yang terjadi. :p

Jika objek keluar dari layar, tekan reset untuk mengembalkan keposisi semula.

[eksperimentotox-blog-blog]

HTML5 Game Menggunakan GameQuery

DEMO Hasil Eksperimen

Percobaan membuat game html5 menggunakan gamequery. Salah satu kendala dari game html5 menggunakan gamequery adalah penggunaan sprite untuk media animasinya, bukan canvas untuk generate grafisnya. Hal ini menyebabkan turunnya frame rate menjadi sangat rendah saat menggunakan banyak animasi kompleks di game.

Saat dicoba untuk memporting game ini ke perangkat android menggunakan phonegap, frame rate game sangat rendah dan game sangat lambat dijalankan. Mungkin jika ingin memporting game yang dibuat dengan gamequery ke perangkat android, terlebih dahulu pastikan gamenya tidak banyak menggunakan sprite animasi untuk grafisnya. Terlalu boros memori.

DEMO Hasil Eksperimen