Demo HTML 5 Canvas Bezier Curve - Harmonic Oscillator
OK, kali ini saya akan menunjukkan Hasil Modifikasi HTML 5 Canvas Bezier Curve kepada anda. Dan kali ini masih berhubungan dengan ilmu Fisika, kita akan memanfaatkan Hukum Hooke, dan pastinya masih tentang Osilasi. Namun kali ini, kita akan membuat Sejenis Per Seimbang yang bisa naik-turun.
Nha untuk membuat Pemberat seolah terhubung dengan Garis menyerupai Per dan dapat seolah memantul keatas dan kebawah kita perlu membuat keadaan Dinamis dengan menghubungkan serangkaian Bezier Curve. Kita dapat menciptakan Konektor atas dan bawah(Yang kaya Per) dengan dua buah garis dan membuat pemberatnya dengan Square.
Selanjutnya, kita dapat membuat animasinya dengan fungsi rekursif updateScreen() dengan terus menerus menaikkan nilai t dan mengulang element. Persamaan yang kita gunakan dalam hal ini adalah:
x(t) = [A * sin(2*PI / P) ]+ A
yang merupakan persamaan untuk sebuah Osilator Harmonik sederhana. Dalam hal ini, x adalah jarak, t adalah waktu, A adalah Amplitudo, dan P adalah periode yang mendefinisikan kecepatan Osilasi. Hem.. klo diliat-liat hampir-hampir kaya Rumus Mata Pelajaran fisika jaman SMA dulu hhe...
Dan sekarang silahkan ke TKP untuk ng'liat bentuknya
Setelah melihat demonya, silahkan Tuangkan kreasi anda dan ciptakan bentuk lain dari HTML5 Canvas Bezier Curve ini....
Nha untuk membuat Pemberat seolah terhubung dengan Garis menyerupai Per dan dapat seolah memantul keatas dan kebawah kita perlu membuat keadaan Dinamis dengan menghubungkan serangkaian Bezier Curve. Kita dapat menciptakan Konektor atas dan bawah(Yang kaya Per) dengan dua buah garis dan membuat pemberatnya dengan Square.
Selanjutnya, kita dapat membuat animasinya dengan fungsi rekursif updateScreen() dengan terus menerus menaikkan nilai t dan mengulang element. Persamaan yang kita gunakan dalam hal ini adalah:
x(t) = [A * sin(2*PI / P) ]+ A
yang merupakan persamaan untuk sebuah Osilator Harmonik sederhana. Dalam hal ini, x adalah jarak, t adalah waktu, A adalah Amplitudo, dan P adalah periode yang mendefinisikan kecepatan Osilasi. Hem.. klo diliat-liat hampir-hampir kaya Rumus Mata Pelajaran fisika jaman SMA dulu hhe...
Dan sekarang silahkan ke TKP untuk ng'liat bentuknya
Setelah melihat demonya, silahkan Tuangkan kreasi anda dan ciptakan bentuk lain dari HTML5 Canvas Bezier Curve ini....
Cara ngasih animasinya kayak gimana ya mas?
BalasHapus