Havo - haqiqiy mobil havo gitara (prototip): 7 qadam (rasmlar bilan)

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:22

Yaxshi, Bu, nihoyat, bolalik orzusiga yaqinlashishning birinchi qismi haqida juda qisqa ko'rsatma bo'ladi.

Men bolaligimda har doim sevimli san'atkorlarim va guruhlarim gitara chalishni juda yaxshi ko'rardim.

Men ulg'ayganimda, gitara chalishni va hatto boshqalarga tegishli chalishni o'rganganim uchun minnatdor bo'ldim, lekin hali o'zimniki yo'q:(Men nihoyat o'tirib, telefonda ishlaydigan, kompyuter ko'rish qobiliyatini ishlatadigan va men kabi odamlarga gitara istagan, lekin sayohat qilayotgan, singan yoki juda yosh bo'lgan odamga gitarani olish uchun ruxsat berishga qaror qildim!

Ushbu veb -saytda siz prototipli dasturni topishingiz mumkin

Qanday o'ynashni bilish uchun "Siz tugadingiz" bosqichiga o'ting.

* Uni telefonda ishlatganingizga ishonch hosil qiling va ekranni yon tomonga landshaft rejimiga o'tkazing *

Xursand bo'ling!

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

Ta'minot:

1. Aqlli telefon

2. Ish stoli kompyuter yoki noutbuk (dasturlash uchun)

1 -qadam: Kod haqida ma'lumot va eslatma

Ushbu loyiha asosan telefonda ishlashga mo'ljallangan kodlangan loyihadir.

Loyihani ishlab chiqish chog'ida men turli xil ilovalarni sinab ko'rdim va hozirda bozorda AirJamz yoki Kurv gitara, ko'chma gitara yoki hatto o'yin do'konidagi Real gitara ilovasi kabi boshqa qurilmalarni qidirib topdim.

Ularning ko'pchiligida men topmagan muammolar:

1. Ba'zi zarur tashqi qurilmalar

2. Deyarli barcha ilovalar sizga haqiqiy akkordlar yoki musiqalarni ijro etishga imkon bermadi va shunchaki simulyatorlar edi

3. Tashqi qurilmalar juda qimmat edi va ko'plab gitarachilar faqat haqiqiy gitara sotib olishni maslahat berishdi

Bular qo'shma rasmlarda tasvirlangan.

Shunday qilib, Air ilovasi ushbu muammolarni hal qilishi kerak, shu bilan birga u telefonda to'liq ishlay oladi. Menimcha, bu mumkin, chunki 2020 yilda bizda mobil brauzer texnologiyasi ancha yaxshilanadi va kompyuter ko'rish qobiliyatini yaxshilaydi, bu bizga bitta RGB kamera yordamida mo''jizalar yaratishga imkon beradi.

Shunday qilib, men to'liq ishga tushirishdan oldin u qanday ko'rinishga ega bo'lishi va qanday ishlashi haqida eskizlar tuzishga kirishdim.

Men, shuningdek, kodlashning muhim bosqichlarini tuzdim, shuning uchun men sizni kod bilan bezovta qilishning o'rniga, sizni dizayn jarayonimdan o'tkazaman va agar kerak bo'lsa, o'qishingiz va qarashingiz uchun izohli kodni biriktiraman.

Butun kodni https://github.com/msimbao/air saytida topishingiz mumkin va men shunga o'xshash kod fayllaringizni tuzishni tavsiya qilaman.

Shuni ham unutmangki, ilova ishga tushishi uchun uni joylashtirish kerak. Men hozircha uni faqat github -da joylashtirilganda ishga tushirdim.:)

2 -qadam: Qo'rqinchli harakat

Kodlashning birinchi muhim bosqichi - bu hech qanday tashqi cheklovsiz raqamli nusxani ko'paytirish usulini topish edi. Men darhol telefonimning old tomonidagi RGB kamerasidan foydalanish haqida o'yladim.

Mening fikrimcha, agar odamda akkord chalishni xohlasa, kamera oldida qo'lini surtsa, ovoz eshitiladi.

Buni bilib olgach, menga RGB kamerasi bilan yaxshi bog'lanish uchun ishlatilishi mumkin bo'lgan yaxshi dasturlash tili kerak edi.

Men Javascript-ga qaror qildim, chunki men React Native yoki boshqa biror narsa bilan o'zaro platformali ilova yasashim mumkin yoki faqat gitara veb-saytida joylashtirilishi mumkin edi va u hamma uchun mavjud bo'lishi mumkin edi.

Keyin men akkord ovozi bo'lishi mumkin bo'lgan harakatni qo'zg'atish uchun qo'lni suringni aniqlashning turli usullarini topdim, lekin buning ko'p usullari bor edi.

Mashinada o'qitish juda yaxshi ishladi, men IBM xizmatlarini sinab ko'rdim va bir hafta mobaynida 3000 ga yaqin tasvirni surish va akkordlarni aniqlash uchun o'rgatdim. Viktoribiya tomonidan handtrack.js ni ham sinab ko'rdim. Afsuski, ikkalasi ham uyali telefonda aql bovar qilmas darajada sekin harakat qilishdi.

Keyin diffcam.com saytida harakatni aniqlash va yolg'onchi tomonidan amalga oshirildi. Men veb -kameradan foydalanib, ikkita alohida kadrni yozib, so'ngra kadrlar orasidagi farqni hisoblab, farqni baho berish mumkinligini bilib oldim. Agar bu ball ma'lum bir chegaradan oshsa, men harakatni bajaraman.

Yolg'iz koreys, shuningdek, havo gitarasi uchun ishlatishga qaror qilgan diff kamerasi uchun dvigatel yasadi va u menga harakat balini olish uchun juda yaxshi ishladi!

Mashinada o'qitish modellarini o'rgatishga urinishlar rasmlari, shuningdek, diffcam.com misoli men bilgan.

E'tibor bering: hozirgi prototipda shovqin -suron bir necha bor takrorlanadi, uni to'xtatish uchun keyingi chalishni xohlaysiz. Bu xato, biz hal qilishga umid qilamiz.

To'liq strum kodi bu erda biriktirilgan script.js faylida va lonekorean diffcam dvigateli bu erda.

3 -qadam: Akkordlarni aniqlash

Keyingi kodlash bosqichi akkordlarni aniqlashni jonli boshqarishning yo'lini topish edi.

Men foydalanuvchidan akkordning haqiqiy shakllarini takrorlay olishini, shuning uchun qo'llarni yaxshi joylashtirishni, shuningdek ularga turli xil akkordlarni bajarishda yordam berishini xohlardim.

Oxirgi bosqichda bo'lgani kabi, men akkordlarni aniqlash uchun Machine Learning -ni sinab ko'rdim, lekin bu mobil telefonlarda juda sekin edi.

Keyin men "Real gitara" ilovasidan nimadir o'rgandim, bu telefon ekraniga akkord shakllarini yaratish uchun ekran yordamida paneldagi panel qo'yish mumkin edi.

Keyin men JavaScript-da ko'p tegishli ishlashga ruxsat berishni o'rganishim kerak edi va Mozilla hujjatlaridan ajoyib darslik va misol topdim.

Sensorli o'zaro ta'sirlar, ayniqsa, Javascript -da juda qiyin bo'lishi mumkin, lekin fikr shundaki, biz ba'zi divlarni yaratib, so'ngra turli sensorli hodisalarni boshqarish uchun funktsiyalarni belgilashimiz mumkin:

1. touchStart: barmoq ekranga tegganda

2. ga teging End: barmoq ketganda

3. touchHarakat: barmoq hali ekranda bo'lsa -da, o'rnini o'zgartirganda

Keyin biz turli xil teginish hodisalari va kombinatsiyalariga javob beradigan o'z elementlarimizni aniqlash uchun shu funktsiyalar atrofida ishlaymiz.

Bizning holatda, biz CSS -dan foydalanib, so'ngra Javascript -dan foydalangan holda paneldagi taxtani loyihalashtiramiz, dasturga ma'lum div -lar bir -biriga bosilganda, akkord tan olinishi kerakligini aytamiz.

Keyin biz ovozli ob'ektni belgilashimiz mumkin, biz akkordni uzatamiz va keyin surish hodisasi yuz berganda, bu ovozni ijro etamiz.

Har xil akkord kombinatsiyalarini aniqlash uchun men ushbu rasm yordamida panjara taxtasini yasadim, so'ngra har bir alohida pozitsiyani div bo'ladigan qilib o'rnatdim va boshqalar bilan birlashtira olaman.

Akkord progressiyasini aniqlash uchun kod bu erda, klaviatura boshqaruvchisi esa biriktirilgan kodda joylashgan.

4 -qadam: Akkord tovushlarini topish

Endi bizning tizimni taniy oladigan bo'lsak, bizga haqiqiy akkord tovushlari kerak.

Yaxshiyamki, freesound.com har doim menga audio namunalar kerak bo'lganda yordamga keladi. Men shunchaki akkordlarni qidirib topdim va danglada ajoyib akkordlar to'plamini topdim.

Keyin men ularni yukladim va jasorat bilan tahrir qildim, shunda ovoz yozilayotganda ularning ko'pchiligi boshida qisqa pauza emas, balki darhol boshlangan.

Ularni jasorat bilan kesish uchun men ularni shunchaki dasturga sudrab olib keldim, so'ngra ovozning kerakli qismini tanladim (to'lqinli qismi va tovushsiz tekis chiziqli bo'limlarning hech biri). Keyin "Tahrirlash" yorlig'iga o'ting, "Maxsus o'chirish"> "Ovozni kesish". Keyin men "Yo'llar" yorlig'iga o'tdim. "Treklarni tekislang" - "Nolga boshlang". Keyin men faylga o'taman, keyin Eksport> WAV sifatida eksport qilish.

Men WAV sifatida eksport qilaman, chunki men Javascript audio loyihalarida ishlashni osonlashtirdim.

Keyin men glitch.com saytidan ushbu fayllarni joylashtirish uchun foydalanardim, chunki ular sizda mavjud bo'lgan turli loyihalar uchun ishlatilishi mumkin bo'lgan ajoyib kontent etkazib berish tarmog'iga ega. Yana bir variant - bu mening loyiham bo'lgan kollejning ishlab chiqarish maydoni uchun makerspace inventarizatsiyasi ilovasi kabi ko'proq ma'lumotga ega bo'lishi mumkin bo'lgan turli xil loyihalar uchun men uchun zarur bo'lgan firebase -dan foydalanish.

Siz shunchaki aktivlarni loyiha katalogiga sudrab tashlab qo'yishingiz kerak, keyin siz aktivlar papkasini bosganingizda va kerakli aktivni bosganingizda havolani topishingiz mumkin. Glitch keyin sizning aktivingiz uchun noyob CDN urlini ishlab chiqaradi. Masalan, bu erda asosiy akkord tovushining havolasi.

Men bu barcha akkordlarni getChord funktsiyasida birlashtira olaman, bu ma'lum pozitsiyalar kombinatsiyasi bosilganda qidiriladi va keyin qo'lda surish hodisasi sodir bo'lganda, ilovaga mos keladigan akkord tayinlanadi.

5 -qadam: Butun ilovani tugatish va joylashtirish

Xosting qilishning ko'plab usullari mavjud.

Rostini aytsam, men topgan eng yaxshi narsa - bu github -dan foydalanish. Buning sababi shundaki, agar siz dasturni yaxshi dasturlashtirgan bo'lsangiz, siz butun orqa qismini ma'lumotlar bazasi yoki yong'in bazasidan o't o'chiruvchi do'konga xizmat ko'rsatishingiz yoki hatto glitch.com va aktivlarni saqlash uchun boshqa joylardan CDN ishlatishingiz mumkin.

Loyihani github -da joylashtirish uchun github hisobini ochish, yangi ombor yaratish kifoya. O'rnatishni osonlashtirish uchun, loyiha nomini kiritganingizdan so'ng, har doim litsenziyani qo'shganingizga ishonch hosil qiling (men mutaxassis emasman, lekin bu mening hayotimni osonlashtirayotganini aniqladim). Men har doim GNU kabi ochiq litsenziyadan foydalanaman.

Ma'lumotlar ombori o'rnatilgandan so'ng, biz fayllarimizni omborga sudrab tashlab, pastki qismidagi yashil majburiyat tugmasini bosishimiz mumkin.

Keyin biz "Sozlamalar" yorlig'iga o'tamiz, u erda yulduzcha ostidagi ombor sahifasining o'ng burchagidagi tishli belgi va tomosha tugmalari joylashgan. Sozlamalarga kirgandan so'ng, Github Pages oynasini ko'rmaguningizcha pastga aylantiring. Manbani asosiy bo'limga o'zgartiring va agar xohlasangiz mavzuni tanlang. Siz mavzularni googling orqali ishlatishni o'rganishingiz mumkin (men ularni hech qachon ishlatmayman, chunki men ko'pincha o'z CSS va mavzu g'oyalarimni olib kelaman).

Sahifa tayyor bo'lgach, siz yashil rangga ega bo'lasiz va sizning saytingiz nashr etilganligini va unga kirishingiz mumkinligini bildiruvchi belgini qo'yasiz.

6 -qadam: bajarildi

Endi siz o'zingizning minigarniturangizda, yotoqxonangizda yoki poezdda ajoyib murabbo seansidan bahramand bo'lishingiz mumkin. Agar xohlasangiz, yana bir nechta akkord qo'shing va hatto gitara chig'anoqlari bilan o'ynang.

Harakatni aniqlash bo'yicha tezkor eslatma

1. Gitara chayqalishining chegarasi skript.js faylida sozlanishi mumkin, lekin ilovadan foydalanganda telefoningiz ko'radigan fon nisbatan tinch ekanligiga ishonch hosil qiling.

2. Masalan, poyezdda, quloqchinlarni qo'yib, telefoningizni ichkariga burib, yo'lovchilar sizning atrofingizda aylanib yursa, telefon kamerasi ko'pincha sizning qo'lingiz harakatlanayotganini ko'ra oladi.

3. Telefonni ushlab turgan qo'l ostonangizga qarab nisbatan harakatsiz bo'lishi kerak. O'ylaymanki, men yuqori darajadagi ba'zi testlarni o'tkazaman va aniqroq bo'lish uchun chegaralarni yangilayman.

O'ynash uchun:

Ilovani veb -brauzeringizga yuklang, so'ngra landshaft rejimiga o'tkazing.

Qachon qo'lingizni silkitsangiz, akkord o'ynaydi, lekin u o'ng pastki burchakdagi F tugmachasini bosmaguningizcha o'ynaydi.

Shu bilan bir qatorda, siz akkordlar kombinatsiyasini yaratib, ovozni to'xtatishingiz mumkin.

Akkordlar kombinatsiyasini yaratganingizda, joriy ovoz to'xtaydi, keyin yangi akkord ovozi tanlanadi.

7 -qadam: O'rganilgan narsalar va yakuniy so'zlar

Menga bu loyiha ustida ishlash juda yoqdi, garchi boshqa loyihalar va uy ishlari ustida ishlayotganda prototip yaratish va ilovani ishlab chiqarish ko'p vaqt talab qilsa ham. Yo'l davomida men bir nechta ajoyib narsalarni o'rgandim;

1. Raqamli mahsulotlarni loyihalashda, har doim prototiplaringizni iloji boricha tezroq bajarishga ishonch hosil qiling, chunki sizning birinchi taxminlaringiz noto'g'ri bo'ladi va siz oxirigacha etib borish uchun ularni tezda yugurib o'tishingiz kerak.

2. Iloji boricha loyihaga pul sarflashdan saqlaning. Har doim qo'lingizdan kelganini qayta ishlating va har doim qo'lingizda bo'lgan oddiy narsalardan boshlang.

3. Yangi tillarni, ramkalar va tizimlarni o'rganishdan qo'rqmang. Ular odatda siz o'ylagandan ko'ra osonroq.

Va orzularimni ro'yobga chiqargani uchun yolg'iz koreysga katta rahmat

Agar ilova qanday ishlab chiqilishi sizni qiziqtirsa, siz bizning pochta ro'yxatimizga qo'shilishingiz mumkin. Kichkina jamoa va men buzilgan, sayohat qilayotgan yoki yosh bolalarga qayerda bo'lishidan qat'i nazar, ajoyib ko'chma gitara olishiga yordam berish uchun to'liq versiyasini tayyorlash ustida ishlaymiz.

Biz, ayniqsa, grafik dizaynerlar, gitara chaluvchilar va koderlarning har bir narsani sinab ko'rish va hal qilishda yordamini juda yaxshi ko'ramiz.

Xursand bo'ling (ﾉ ◕ ヮ ◕) ﾉ *: ･ ﾟ ✧ ✧ ･: *ヽ (◕ ヮ ◕ ヽ)