Canvas Javascript Sprite Sheet Animation fungsi Sinus Cosinus

Canvas Javascript Sprite Sheet Animation fungsi Sinus Cosinus

Posted by Clevo

Saturday, December 14, 2019

Algoritma Grafik Javascript Pemrograman

Selamat malam, besok senin udah UAS tapi malas banget mau belajar. Udah ngerasa bego gak mau belajar. Please give me motivation for study :v. Mau main game nge lag banget, ya udah lah mendingan ngisi blog sambil dengerin Already dead :v.

Artikel kali ini masih ada hubungannya dengan artikel sebelumnya, mengenai Grafik Fungsi Sinus Cosinus dengan Canvas Javascript. Saya mau membuatnya menjadi animation koin mengikuti jalur sinus cosinus pada fungsi sebelumnya.

Sebelum membuat animasinya kita pelajari dulu fungsi sinus cosinus yang akan digunakan. Dalam gambar tersebut grafik sinus ditunjukkan pada puncak pertama. Gambar cosinus ditunjukkan puncak kedua. Fungsi dari grafik sinus dapat ditunjukkan seperti dibawah ini:

f(x) = sin x

Karena umumnya dalam pemrograman menggunakan radian. Kita harus membentuknya dengan radian. Sementara itu fungsi cosinus ditunjukkan seperti dibawah ini:

f(x) = cos x

Dimana x dalam radian. Karena kita akan membentuknya seperti infinity kita melakukan sedikit perubahan pada fungsi cosinus ini. Bagaimana cara kita menggeser grafik cos supaya terbentuk hasil yang diinginkan. Untuk menggesernya kita hanya perlu menambahkan x dengan sudut yang diinginkan dalam hal ini kita menggunakan sudut 90 derajat atau pi/2. Fungsi yang kita gunakan akan berubah seperti ini:

f(x) = cos (x + pi / 2)

Setelah mengetahui fungsi dari sinus dan cosinus kita membutuhkan cara untuk mengubah gradien dunia nyata dengan gradien di komputer. Hal ini dilakukan karena dalam screen komputer tidak memiliki angka negatif. Bagian kanan atas merupakan titik (0, 0) komputer. Semakin kebawah nilai y akan bertambah. Karena itu kita membutuhkan pemetaan sederhana atau yang biasa disebut dengan window to viewport.

Window to Viewport

Window adalah koordinat dunia nyata atau yang biasa kita sebut dengan koordinat kartesius. Sementara itu viewport adalah koordinat elektronik atau koordinat layar pada komputer.

Window mendefinisikan apa yang ingin ditampilkan. Pemetaan bagian dari koordinat dunia nyata ke koordinat device sering disebut dengan window to viewport transformation atau windowing transformation.

Langkah-langkah transformation 

• Buat world-coordinate scene menggunakan pemodelan dan transformasi koordinat
• Konversi world-coordinate ke viewing coordinate
• Petakan viewing coordinate ke normalized viewing coordinate menggunakan spesifikasi window-viewport
• Petakan normalized viewing coordinat ke koordinat device

Viewport biasanya didefinisikan dalam bentuk persegi panjang atau square. Namun bisa juga dengan membuatnya menjadi lingkaran atau bentuk lainnya.

Lihat gambar diatas, window dengan viewport memiliki perbandingan yang sama antara jarak titik dan panjang atau lebar titik. Dalam matematika waktu smp kita telah belajar mengenai perbandingan. Dengan cara ini kita dapat menentukan letak titik pada device atau komputer.

Titik di posisi (xw, yw) pada window dipetakkan di posisi (xv, yv) pada viewport. Agar posisi relativ sama gunakan rumus berikut ini.

Dengan sifat matematika didapatkan rumus sebagai berikut :

Setelah saya cek dengan perbandingan rumus diatas ternyata masih salah. Rumus yang benar akan seperti dibawah ini.

const xv = xvmin + Math.round((xw - xwmin) * (xvmax - xvmin) / (xwmax - xwmin))
const yv = Math.round((ywmax - yw) * (yvmax - yvmin) / (ywmax - ywmin)) - yvmin

Logic Sprite Sheet Animation

Sebelum melangkah ke logika dari sprite sheet animation terlebih dahulu download bahan png image dibawah ini.

Dalam png image diatas terdapat posisi koin berbeda beda. Gambar tersebut akan ditransisikan dengan cepat sehingga mata kita melihatnya layaknya animasi. Padahal hanya gambar statis yang dipindah dengan cepat.

Sebelum berpindah pada posisi transisi selanjutnya, transisi pertama dihapus terlebih dahulu agar gambar tidak bertumpuk. Jika ingin menggunakan background dapat pula dihapus dengan menggenerate backgroun per transisi. Kurang lebih logika yang digunakan akan se simple ini. Tapi dalam implementasinya akan lebih rumit.

Source Code Sprite Sheet Animation

Karena sudah dijelaskan pada bagian logic saya rasa tidak perlu penjelasan lagi mengenai penggunaan fungsi-fungsi javascript diatas. Btw dalam program diatas menggunakan background yang saya manipulasi pada bagian css jadi saya hanya perlu menghapus canvasnya tidak perlu melakukan iterasi background. Saya rasa dengan cara ini dapat menghemat kompleksitas dari algoritma.

Dalam bahasa pemrograman lain, sepertinya anda diharuskan untuk melakukan iterasi pada bagian backgroundnya juga. Terima kasih. Jika ada yang gak dimengerti silakan tinggalkan komentar. Jika ingin melihat scriptnya secara menyeluruh silakan lihat di github saya di link here. Jika ingin melihat hasilnya silahkan klik link here.

Terima kasih. Minta doanya biar UAS gue lancar wkwk.

Ditulis Clevo Pada December 14, 2019 Komentar