Air - Gitar Udara Mudah Alih (Prototaip): 7 Langkah (dengan Gambar)

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:06

Baik jadi, Ini akan menjadi petunjuk singkat mengenai bahagian pertama akhirnya mendekati impian masa kecil saya.

Semasa saya masih kecil, saya selalu menyaksikan artis dan kumpulan kegemaran saya bermain gitar dengan rapi.

Semasa saya dewasa, saya cukup bersyukur dapat belajar bermain gitar dan juga bermain beberapa milik orang lain, tetapi saya masih belum memiliki:(Oleh itu, saya memutuskan untuk akhirnya duduk dan membuat yang betul-betul berfungsi di telefon, menggunakan penglihatan komputer dan membiarkan orang seperti saya yang mahukan gitar tetapi mungkin sedang dalam perjalanan, patah atau terlalu muda untuk mendapatkannya!

Anda boleh mendapatkan aplikasi prototaip di laman web ini

Untuk melihat cara bermain, pergi ke Langkah "Anda Selesai".

* Pastikan menggunakannya di telefon Anda dan putar layar ke samping ke mod landskap *

Selamat mencuba!

(ﾉ ◕ ヮ ◕) ﾉ *: ･ ﾟ ✧ ･: * ヽ (◕ ヮ ◕ ヽ)

Bekalan:

1. Telefon Pintar

2. Komputer Desktop atau Komputer riba (Untuk Pengaturcaraan)

Langkah 1: Latar Belakang dan Catatan mengenai Kod

Projek ini sebahagian besarnya adalah projek berkod yang bertujuan untuk berjalan sepenuhnya di telefon.

Semasa menjayakan projek ini, saya mencuba pelbagai aplikasi lain dan mencari peranti lain yang ada di pasaran seperti gitar AirJamz atau Kurv, gitar mudah alih atau bahkan aplikasi Real Guitar di play store.

Masalah yang kurang saya dapati ialah:

1. Sebilangan peranti luaran diperlukan

2. Hampir semua aplikasi tidak benar-benar membiarkan anda memainkan kord atau muzik sebenar dan hanya simulator fret board

3. Peranti Luaran cukup mahal dan banyak pemain gitar mengesyorkan membeli gitar sebenar

Ini digambarkan dalam gambar yang disertakan.

Oleh itu, aplikasi Air harus menyelesaikan masalah ini dengan sepenuhnya dapat berjalan di telefon. Saya percaya ini mungkin berlaku kerana pada tahun 2020 kita mempunyai teknologi penyemak imbas mudah alih yang jauh lebih baik dan banyak peningkatan dalam penglihatan komputer yang membolehkan kita melakukan keajaiban dengan satu kamera RGB.

Oleh itu, saya terus membuat sketsa seperti apa dan bagaimana ia akan berfungsi sebelum memulakan sepenuhnya.

Saya juga mengeluarkan tonggak pengekodan saya jadi dalam arahan ini, bukannya membosankan anda dengan kod, saya akan membawa anda melalui proses reka bentuk saya dan melampirkan kod beranotasi pada akhir untuk anda baca dan perhatikan jika anda memerlukannya.

Keseluruhan kod boleh didapati di https://github.com/msimbao/air dan saya cadangkan anda menyusun fail kod anda yang serupa dengan ini.

Perhatikan juga bahawa untuk aplikasi berjalan, ia perlu dihoskan. Saya setakat ini hanya dapat menjalankannya ketika dihoskan di github.:)

Langkah 2: Tindakan Strumming

Tonggak pengekodan utama yang pertama, adalah mencari jalan untuk mereplikasi tali secara digital tanpa pinggiran luaran. Fikiran saya segera adalah menggunakan kamera menghadap depan RGB telefon saya.

Pemikiran saya adalah bahawa jika seseorang mempunyai akord yang mereka mahu mainkan, maka ketika mereka menggesekkan tangan mereka di hadapan kamera mereka, suara akan dimainkan.

Setelah mengetahuinya, saya kemudian memerlukan bahasa pengaturcaraan yang baik yang dapat digunakan untuk berinteraksi dengan baik dengan kamera RGB.

Saya berpuas hati dengan Javascript kerana saya boleh membuat aplikasi lintas platform dengan React Native atau yang lain atau hanya boleh menghoskan gitar di laman web dan ia boleh didapati untuk semua orang.

Saya kemudian menemui pelbagai cara untuk mengetahui cara mendapatkan sapuan tangan untuk mencetuskan tindakan yang boleh menjadi bunyi kord tetapi terdapat banyak cara untuk melakukan ini.

Pembelajaran mesin berfungsi dengan baik ketika saya mencuba perkhidmatan IBM dan melatih sekitar 3000 gambar selama seminggu untuk pengecaman sapu dan juga pengecaman kord. Saya juga mencuba handtrack.js oleh victordibia. Malangnya mereka berdua lambat menggunakan telefon bimbit.

Saya kemudian menemui pengesanan gerakan dan pelaksanaan oleh lonekorean di diffcam.com. Saya belajar bahawa menggunakan webcam adalah mungkin untuk merakam dua bingkai yang berasingan dan kemudian mengira perbezaan antara bingkai dan memberi perbezaan skor. Sekiranya skor melebihi ambang tertentu, saya kemudian melakukan tindakan.

Orang lekorea juga membuat mesin untuk kamera perbezaannya yang saya memutuskan untuk digunakan untuk gitar Air dan ia berfungsi dengan sempurna untuk mendapatkan saya skor gerakan!

Dilampirkan gambar percubaan melatih model pembelajaran Mesin dan juga contoh diffcam.com yang saya pelajari.

Catatan: Dalam prototaip semasa ini, strumming berulang berulang, untuk menghentikannya, cukup tekan akord yang ingin anda mainkan di sebelah bawah. Ini adalah pepijat yang kami harap dapat diperbaiki.

Kod untuk strum penuh terdapat dalam fail script.js yang dilampirkan di sini dan mesin diffcam oleh lonekorean ada di sini.

Langkah 3: Pengecaman Kord

Tonggak pengekodan seterusnya adalah dengan mencari cara untuk mengendalikan pengecaman kord secara langsung.

Saya mahukan pengguna dapat meniru bentuk kord yang sebenarnya dan dengan itu berlatih meletakkan tangan dengan baik dan juga membantu mereka berlatih kord yang berbeza.

Seperti pada langkah terakhir, saya mencuba pembelajaran Mesin untuk pengecaman kord, tetapi telefon bimbit sangat perlahan.

Saya kemudian belajar sesuatu dari aplikasi Gitar Sebenar bahawa mungkin meletakkan papan fret di skrin telefon menggunakan skrin untuk menghasilkan bentuk kord.

Saya kemudian harus belajar bagaimana membenarkan interaksi berbilang sentuhan dalam javascript dan menemui tutorial dan contoh hebat dari dokumen Mozilla

Interaksi sentuhan boleh menjadi sukar terutama dalam Javascript tetapi idenya adalah bahawa kita dapat membuat div tertentu dan kemudian menentukan fungsi untuk menangani peristiwa sentuhan yang berbeza:

1. sentuh Mulakan: Apabila jari menyentuh skrin

2. sentuhEnd: Semasa jari keluar

3. sentuh Gerakkan: Semasa jari masih di skrin tetapi berubah kedudukan

Kami kemudian mengusahakan fungsi tersebut untuk menentukan elemen kita sendiri yang bertindak balas terhadap peristiwa dan kombinasi sentuhan yang berbeza.

Dalam kes kami, kami merancang papan fret menggunakan CSS dan kemudian menggunakan Javascript, memberitahu aplikasi bahawa apabila div tertentu ditekan bersama, kord harus dikenali.

Kami kemudian dapat menentukan objek audio yang akan kami sampaikan pada akord dan kemudian memainkan audio itu ketika peristiwa leret berlaku.

Untuk menentukan kombinasi akord yang berbeza, saya membuat papan fret menggunakan gambar ini dan kemudian menetapkan setiap kedudukan khas menjadi div yang boleh saya sentuh dan gabungkan dengan yang lain.

Kod untuk menentukan perkembangan kord terdapat di sini dan pengawal fretboard terdapat dalam kod yang dilampirkan.

Langkah 4: Mencari Bunyi Kord

Setelah sistem kita dikenali, kita memerlukan beberapa bunyi akord sebenarnya.

Syukurlah, freesound.com selalu membantu saya ketika saya memerlukan sampel audio. Saya hanya mencari kord dan menemui sebilangan besar kord utama oleh danglada.

Saya kemudian memuat turunnya dan mengeditnya menggunakan keberanian untuk memastikan bahawa suara itu dimulakan dengan segera dan bukannya jeda pendek pada permulaan kebanyakan mereka semasa mereka dirakam.

Untuk klip mereka menggunakan keberanian, saya hanya menyeretnya ke dalam aplikasi kemudian memilih bahagian suara yang saya mahukan (keseluruhan bahagian bergelombang dan tidak ada bahagian garis rata yang tidak mempunyai suara). Saya kemudian pergi ke tab Edit> Buang Khas> Potong Audio. Kemudian saya sampai ke tab Tracks> Align Tracks> Start to Zero. Saya kemudian pergi ke fail, kemudian Eksport> Eksport sebagai WAV.

Saya mengeksport sebagai WAV kerana saya lebih mudah berurusan dengan projek audio Javascript.

Saya kemudian menggunakan glitch.com untuk menghoskan fail-fail ini kerana mereka mempunyai rangkaian penghantaran kandungan yang luar biasa yang dapat digunakan untuk berbagai projek yang anda miliki. Pilihan lain ialah menggunakan firebase yang merupakan goto saya untuk projek yang berbeza yang mungkin mempunyai lebih banyak maklumat untuk disimpan seperti aplikasi inventori makerpace untuk ruang pembuat kolej saya.

Anda hanya perlu menyeret dan melepaskan aset ke direktori projek dan kemudian anda dapat mencari pautan apabila anda mengklik folder aset dan mengklik aset yang ingin anda dapatkan. Glitch kemudian akan menghasilkan url CDN yang unik untuk aset anda. Sebagai contoh, berikut adalah pautan ke suara Chord utama.

Saya kemudian dapat menghubungkan semua akord ini bersama-sama dalam fungsi getChord yang akan dicari apabila kombinasi kedudukan fret tertentu telah ditekan dan kemudian menetapkan kord yang sesuai untuk dimainkan oleh aplikasi ketika berlaku kejadian sapu tangan.

Langkah 5: Menyelesaikan dan Menghoskan Seluruh Aplikasi

Terdapat banyak cara untuk mengadakan hosting.

Sejujurnya yang terbaik yang saya dapati hanyalah menggunakan github. Ini kerana jika anda telah memprogram aplikasi dengan baik, anda dapat menjadikan seluruh bahagian belakang anda dilayan oleh pangkalan data atau firestore dari firebase atau bahkan menggunakan CDN dari glitch.com dan tempat lain untuk menyimpan aset.

Untuk menjadi tuan rumah projek di github, yang perlu anda lakukan hanyalah membuka akaun github, buat repositori baru. Kemudian untuk membuatnya lebih mudah untuk disiapkan, setelah anda meletakkan nama projek anda, selalu pastikan untuk menambahkan lesen (saya bukan pakar tetapi saya mendapati bahawa ini menjadikan hidup saya lebih mudah). Saya selalu menggunakan lesen awam seperti GNU.

Setelah repositori disiapkan, kita hanya boleh menyeret dan melepaskan fail kita ke repositori dan mengklik butang komit hijau di bahagian bawah.

Kami kemudian pergi ke tab Tetapan dengan ikon roda gigi di paling kanan halaman repositori di bawah butang bintang dan jam. Setelah berada dalam tetapan, tatal ke bawah sehingga anda melihat kotak Github Pages. Tukar Sumber ke cabang induk dan pilih tema jika anda mahu. Anda boleh belajar bagaimana menggunakan tema dengan mengarahkannya (saya tidak pernah menggunakannya kerana saya sering membawa idea CSS dan tema saya sendiri).

Apabila halaman siap, anda akan mendapat sorotan hijau dan tandakan memberitahu anda bahawa laman web anda diterbitkan dan dapat diakses.

Langkah 6: Selesai

Anda kini boleh menikmati sesi jam yang hebat dalam keselesaan fon kepala, bilik tidur atau kereta api anda sendiri. Tambah lagi kord jika anda suka dan bermain-main dengan kedudukan gitar fret.

Catatan ringkas mengenai Pengesanan Gerak

1. Ambang geseran senar gitar dapat disesuaikan dalam fail script.js tetapi pastikan bahawa semasa anda menggunakan aplikasi, latar belakang yang dilihat oleh telefon anda agak pegun.

2. Sebagai contoh, di dalam kereta api, lebih baik duduk dan meletakkan fon kepala anda dan menghidupkan telefon anda ke dalam sehingga jika penumpang bergerak di sekitar anda, kamera telefon hanya dapat melihat tangan anda bergerak sepanjang masa.

3. Tangan yang mencengkeram telefon perlu tetap bergantung pada ambang anda. Saya fikir saya akan menjalankan beberapa ujian dengan ambang tinggi dan mengemas kini had yang akan datang agar lebih spesifik.

Untuk bermain:

Muatkan aplikasi pada penyemak imbas web anda, kemudian condongkannya ke mod landskap.

Kemudian apabila anda mengayunkan tangan anda, kord akan dimainkan, namun ia akan terus bermain sehingga anda menyentuh kekunci F di sudut kanan bawah.

Sebagai alternatif, anda boleh menghentikan suara dengan membuat gabungan kord.

Apabila anda membuat gabungan akord, bunyi semasa berhenti, maka bunyi kord baru dipilih.

Langkah 7: Perkara yang Dipelajari dan Kata Akhir

Saya sangat gemar mengusahakan projek ini walaupun memerlukan masa yang lama untuk membuat prototaip dan membuat aplikasi dihasilkan semasa mengerjakan projek lain dan kerja rumah. Saya juga belajar beberapa perkara hebat;

1. Semasa merancang produk digital, selalu pastikan membuat prototaip anda secepat mungkin kerana andaian pertama anda akan salah dan anda perlu cepat menggunakannya sebelum sampai ke penghujungnya.

2. Elakkan menghabiskan wang untuk projek sebanyak mungkin. Gunakan semula apa sahaja yang anda boleh dan mulakan dengan perkara mudah yang anda ada.

3. Jangan takut untuk belajar bahasa, kerangka kerja dan sistem baru. Mereka lebih mudah daripada yang anda fikirkan pada mulanya.

Dan terima kasih yang besar kepada orang-orang lonekorea kerana membuat impian saya menjadi kenyataan

Sekiranya anda berminat dengan bagaimana aplikasi itu berkembang, anda boleh menyertai senarai mel kami. Sepasukan kecil dan saya akan berusaha untuk membuat versi lengkap untuk membantu orang yang mengalami kerosakan, perjalanan atau anak-anak mempunyai akses ke gitar mudah alih yang hebat di mana sahaja mereka berada.

Kami sangat memerlukan bantuan terutamanya dari pereka grafik, pemain gitar dan pengkod untuk menguji dan menyelesaikan semuanya.

Nikmati (ﾉ ◕ ヮ ◕) ﾉ *: ･ ﾟ ✧ ･: * ヽ (◕ ヮ ◕ ヽ)