Demo HTML 5 Canvas Quadratic Curve - Oscillating Bubble
Masih Lanjutan dari HTML 5 Canvas Quadratic Curve Tutorial [Basic] sebelumnya, kali ini saya ingin menunjukkan salah satu Demo Modifikasi penggunaan Quadratic Curve ini. Demo kali ini bisa dibilang diambil dari Ilmu Fisika tentang Gelembung, Karena yang hendak saya tunjukkan kepada anda adalah Gelembung Ber-Osilasi. Berhubung saya gak terlalu paham dengan Ilmu Fisika, jadi untuk pengertian dari Gelembung ber-Osilasi ini silahkan anda cari sendiri di Google hhe... yang jelas dasar dari pembuatan gelembung itu sendiri merupakan hasil tiupan dari Bulatan berbentuk Cincin yang biasa kita gunakan untuk membuat gelembung sabun. Bahasa yang lebih ilmiah di Wikipedia menyebutkan bahwa Gelembung yang kita tiup saat bermain Gelembung sabun tersebut diatur ke dalam gerak Asimetris. Itu kenapa Gelembung yang kita tiup akan menutup dan membentuk Elips.
Ketegangan kekuatan di sisi yang lebih pendek dari gelembung tidak sama dengan kekuatan ketegangan pada sisi panjang gelembung. Akibatnya, panjang gelembung akan mulai menarik. Setelah gelembung mencapai keadaan bulat sempurna - keadaan di mana ketegangan dikedua sisinya adalah sama - gelembung akan berada pada keadaan Sempurna dan akan menyusut kedalam bentuk bola, momentum itulah yang menyebabkan ia(gelembung) terus bergerak memperluas ke arah lain, menyebabkan osilasi terjadi terus-menerus.
Ok, kita tinggalkan pengertian Baku diatas, gampangnya, bisa saya katakan, Osilasi ini terjadi karena Momentum yang terjadi setelah Gelembung selesai ditiup, yang karenanya si gelembung ini akhirnya bergerak seperti tertiup angin.
Beruntung Kanvas API HTML 5 telah mendukung pembuatan Kurva Kuadrat. Dengan Menggunakan HTML 5, kita dapat mendefinisikan parameter Gelembung dengan 4 Bagian, sebuah upper left curve(kurva kiri atas), lower left curve(kurva kiri Bawah), a lower right curve(Kurva kanan bawah), Dan upper right curve(kurva Kanan atas).
Nha, dalam pembuatan Kurva ini, kita hanya akan bermain pada Lebar Gelembung. So, gak ada Array-array kaya kemaren, tapi disini anda masih harus menggunakan Sedikit Pengetahuan tentang Algoritma anda. Eum, paling nggak tentang If lah hhe...
Dan biar gak penasaran sama bentuknya, silahkan langsung ke TKP
Setelah melihat demonya, silahkan Tuangkan kreasi anda dan ciptakan bentuk lain dari HTML 5 Canvas Quadratic Curve ini....
Ketegangan kekuatan di sisi yang lebih pendek dari gelembung tidak sama dengan kekuatan ketegangan pada sisi panjang gelembung. Akibatnya, panjang gelembung akan mulai menarik. Setelah gelembung mencapai keadaan bulat sempurna - keadaan di mana ketegangan dikedua sisinya adalah sama - gelembung akan berada pada keadaan Sempurna dan akan menyusut kedalam bentuk bola, momentum itulah yang menyebabkan ia(gelembung) terus bergerak memperluas ke arah lain, menyebabkan osilasi terjadi terus-menerus.
Ok, kita tinggalkan pengertian Baku diatas, gampangnya, bisa saya katakan, Osilasi ini terjadi karena Momentum yang terjadi setelah Gelembung selesai ditiup, yang karenanya si gelembung ini akhirnya bergerak seperti tertiup angin.
Beruntung Kanvas API HTML 5 telah mendukung pembuatan Kurva Kuadrat. Dengan Menggunakan HTML 5, kita dapat mendefinisikan parameter Gelembung dengan 4 Bagian, sebuah upper left curve(kurva kiri atas), lower left curve(kurva kiri Bawah), a lower right curve(Kurva kanan bawah), Dan upper right curve(kurva Kanan atas).
Nha, dalam pembuatan Kurva ini, kita hanya akan bermain pada Lebar Gelembung. So, gak ada Array-array kaya kemaren, tapi disini anda masih harus menggunakan Sedikit Pengetahuan tentang Algoritma anda. Eum, paling nggak tentang If lah hhe...
Dan biar gak penasaran sama bentuknya, silahkan langsung ke TKP
Setelah melihat demonya, silahkan Tuangkan kreasi anda dan ciptakan bentuk lain dari HTML 5 Canvas Quadratic Curve ini....
Posting Komentar
Posting Komentar