„Air“- tikra mobili oro gitara (prototipas): 7 žingsniai (su nuotraukomis)

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:44

Gerai taip, Tai bus tikrai trumpas pamokymas apie pirmą dalį pagaliau priartėti prie mano vaikystės svajonės.

Kai buvau jaunas berniukas, visada žiūrėjau, kaip mano mėgstami atlikėjai ir grupės nepriekaištingai groja gitara.

Kai užaugau, buvau pakankamai dėkingas, kad išmokau groti gitara ir netgi groti kai kuriuos, priklausančius kitiems, bet vis tiek neturiu savosios:(Taigi nusprendžiau pagaliau atsisėsti ir sukurti visiškai telefoną veikiantį kompiuterį, kuris mato kompiuterį ir leidžia tokiems žmonėms kaip aš, kurie nori gitaros, bet gali būti keliaujantys, sulūžę ar per jauni, kad dar negalėtų jos įsigyti!

Programos prototipą galite rasti šioje svetainėje

Norėdami sužinoti, kaip žaisti, pereikite prie veiksmo „Viskas baigta“.

* Būtinai naudokite jį savo telefone ir pasukite ekraną į šoną į kraštovaizdžio režimą *

Mėgautis!

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

Priedai:

1. Išmanusis telefonas

2. Stalinis kompiuteris ar nešiojamas kompiuteris (programavimui)

1 žingsnis: fonas ir pastaba apie kodą

Šis projektas iš esmės yra užkoduotas projektas, skirtas visiškai veikti telefonu.

Rengdamas šį projektą, išbandžiau įvairias kitas programas ir pažvelgiau į kitus šiuo metu rinkoje esančius įrenginius, tokius kaip „AirJamz“ar „Kurv“gitara, nešiojamas gitaras ar net „Real Guitar“programą žaidimų parduotuvėje.

Daugelyje jų man trūko šių problemų:

1. Kai kuriems reikėjo išorinių įrenginių

2. Beveik visos programos tikrai neleido groti tikrųjų akordų ar muzikos ir buvo tik fret board simuliatoriai

3. Išoriniai įrenginiai buvo gana brangūs ir daugelis gitaristų rekomendavo tiesiog nusipirkti tikrą gitarą

Jie pavaizduoti pridedamuose paveikslėliuose.

Taigi „Air“programa turi išspręsti šias problemas ir visiškai veikti telefonu. Manau, kad tai įmanoma, nes 2020 m. Turėsime kur kas geresnę mobiliųjų naršyklių technologiją ir daug patobulintų kompiuterio viziją, kuri leis mums daryti stebuklus naudojant vieną RGB kamerą.

Taigi aš pradėjau padaryti keletą eskizų, kaip jis atrodys ir kaip jis veiks, prieš pradėdamas visiškai pradėti.

Aš taip pat nubrėžiau savo kodavimo etapus, todėl šioje instrukcijoje, užuot nuobodžiusi kodu, aš jus supažindinsiu su savo projektavimo procesu ir pabaigoje pridėsiu anotuotą kodą, kad galėtumėte perskaityti ir, jei reikia, pažiūrėti.

Visą kodą galite rasti adresu https://github.com/msimbao/air, ir aš rekomenduoju susisteminti panašius kodo failus.

Taip pat atminkite, kad norint paleisti programą, ji turi būti priglobta. Kol kas radau, kad ji veiktų tik tada, kai ji yra talpinama „github“.:)

2 žingsnis: Strumming Action

Pirmasis svarbus kodavimo etapas buvo rasti būdą, kaip skaitmeniniu būdu atkartoti strumą be jokios išorinės periferijos. Mano tiesioginė mintis buvo naudoti savo telefono RGB priekinę kamerą.

Mano mintis buvo tokia: jei žmogus turi akordą, kurį nori groti, tada, kai jis perbraukia ranką prieš savo kamerą, bus paleistas garsas.

Tai išsiaiškinus, man reikėjo geros programavimo kalbos, kurią būtų galima gerai sujungti su RGB kamera.

Aš apsisprendžiau prie „Javascript“, nes galėjau sukurti kelių platformų programą su „React Native“ar kažkuo kitu arba tiesiog galėjau priglobti gitarą svetainėje ir ji galėtų būti prieinama visiems.

Tada radau įvairių būdų, kaip išsiaiškinti, kaip perbraukti ranka, kad suaktyvintų veiksmą, kuris gali skambėti akordo garsu, tačiau buvo daug būdų tai padaryti.

Mašininis mokymasis puikiai veikė, kai išbandžiau IBM paslaugas ir per savaitę išmokau apie 3000 vaizdų, kad būtų galima atpažinti perbraukimą ir akordus. Aš taip pat išbandžiau victordibia handtrack.js. Deja, jie abu neįtikėtinai lėtai naudojosi mobiliaisiais telefonais.

Tada atsitiktinai aptikau judesio aptikimą ir „lonekorean“įgyvendinimą svetainėje diffcam.com. Sužinojau, kad naudojant internetinę kamerą galima įrašyti du atskirus kadrus, tada apskaičiuoti skirtumą tarp kadrų ir suteikti skirtumui balą. Jei rezultatas viršija tam tikrą ribą, aš atlieku veiksmą.

Lonekoreanas taip pat pagamino variklį savo difuzinei kumšteliui, kurį nusprendžiau naudoti „Air“gitarai, ir jis puikiai veikė, kad gaučiau judesio balą!

Pridedamos bandymų mokyti mašininio mokymosi modelius nuotraukos ir pavyzdys, iš kurio aš sužinojau.

Pastaba: šiame dabartiniame prototipe triukšmas kartojasi vėl ir vėl, kad jį sustabdytumėte, tiesiog laikykite žemyn akordą, kurį norite groti. Tai klaida, kurią tikimės ištaisyti.

Viso strum kodą rasite čia pridėtame faile „script.js“, o „lonekorean“„diffcam“variklis yra čia.

3 žingsnis: akordų atpažinimas

Kitas kodavimo etapas buvo surasti būdą, kaip akordų atpažinimą valdyti tiesiogiai.

Norėjau, kad vartotojas galėtų atkartoti tikras akordo formas ir taip praktikuoti gerą rankų išdėstymą, taip pat padėti jiems praktikuoti skirtingus akordus.

Kaip ir paskutiniame žingsnyje, išbandžiau mašininį mokymąsi akordų atpažinimui, tačiau mobiliuosiuose telefonuose tai buvo labai lėta.

Tada iš „Real Guitar“programos sužinojau, kad gali būti įmanoma įdėti grifą į telefono ekraną, naudojant ekraną akordų formoms generuoti.

Tada turėjau išmokti, kaip leisti daugialypį sąveiką „JavaScript“, ir radau nuostabią mokymo programą bei pavyzdį iš „Mozilla“dokumentų

Sąveikos lietimu gali būti sudėtingos, ypač naudojant „Javascript“, tačiau idėja yra ta, kad galime sukurti tam tikrus skyrius ir apibrėžti funkcijas, skirtas įvairiems lietimo įvykiams valdyti:

1. touchStart: kai pirštas paliečia ekraną

2. touchEnd: kai pirštas palieka

3. palieskite Perkelti: kai pirštas vis dar yra ekrane, bet keičia padėtį

Tada mes sprendžiame šias funkcijas, kad apibrėžtume savo elementus, kurie reaguoja į skirtingus prisilietimo įvykius ir derinius.

Mūsų atveju mes sukuriame fret lentą, naudodami CSS, o tada naudodami „Javascript“, pasakykite programai, kad kai tam tikri divai yra suspausti, akordas turėtų būti atpažintas.

Tada galime apibrėžti garso objektą, kuriam perduosime akordą, ir tada paleisti tą garsą, kai įvyks perbraukimas.

Norėdami apibrėžti skirtingus akordų derinius, sukūriau fret lentą naudodamas šį vaizdą ir tada tiesiog nustatiau kiekvieną specialią poziciją kaip div, kurią galėčiau paliesti ir sujungti su kitais.

Kodą akordo progresavimui apibrėžti rasite čia, o grotelių valdiklį rasite pridėtame kode.

4 žingsnis: suraskite akordo garsus

Dabar, kai mūsų sistema nustatyta atpažinti, mums reikia tikrų akordų garsų.

Laimei, freesound.com man visada padeda, kai man reikia garso pavyzdžių. Aš tiesiog ieškojau akordų ir radau nuostabų danglada pagrindinių akordų paketą.

Tada aš juos atsisiunčiau ir redagavau, naudodamasis įžūlumu, kad įsitikinčiau, jog garsas prasidėjo iškart, o ne trumpa pauzė daugumos jų pradžioje, kai jie buvo įrašinėjami.

Norėdami juos iškirpti naudodamiesi įžūlumu, aš tiesiog vilkau juos į programą, tada pasirinkau norimą garso dalį (visą banguotą dalį ir nė vieną iš plokščių linijų sekcijų, kuriose nėra garso). Tada einu į skirtuką Redaguoti> Pašalinti specialųjį elementą> Apkirpti garsą. Tada patekau į skirtuką Takeliai> Lygiuoti takelius> Pradėti iki nulio. Tada einu į failą, tada Eksportuoti> Eksportuoti kaip WAV.

Eksportuoju kaip WAV, nes man buvo lengviau susidoroti su „Javascript“garso projektais.

Tada aš naudojau glitch.com šiems failams priglobti, nes jie turi nuostabų turinio pristatymo tinklą, kurį galima naudoti įvairiems jūsų turimiems projektams. Kitas variantas gali būti naudoti „Firebase“, kurią naudoju įvairiems projektams, kuriuose gali būti saugoma daugiau informacijos, pavyzdžiui, mano kolegijos kūrėjų erdvės „makerspace“inventoriaus programa.

Jūs tiesiog turite nuvilkti išteklius į projekto katalogą ir tada rasite nuorodą spustelėję išteklių aplanką ir norimą gauti turtą. Tada „Glitch“sukurs unikalų jūsų turto CDN URL. Pavyzdžiui, čia yra nuoroda į A -dur akordo garsą.

Tada galiu susieti visus šiuos akordus naudodami „getChord“funkciją, kuri ieškos, kai bus paspaustas tam tikras fret pozicijų derinys, ir tada priskirsiu tinkamą akordą, kurį programa paleis, kai įvyks rankos braukimas.

5 veiksmas: visos programos užbaigimas ir priegloba

Yra daug būdų, kaip tai padaryti.

Tiesą sakant, geriausia, ką radau, yra tiesiog naudoti „github“. Taip yra todėl, kad jei gerai suprogramavote programą, galite padaryti, kad visa jūsų užpakalinė dalis būtų teikiama duomenų bazės ar židinio parduotuvės iš „Firebase“arba netgi galite naudoti CDN iš glitch.com ir kitų vietų turtui saugoti.

Norėdami priimti projektą „github“, jums tereikia atidaryti „github“paskyrą ir sukurti naują saugyklą. Tada, kad būtų lengviau nustatyti, įvedę projekto pavadinimą, būtinai pridėkite licenciją (nesu ekspertas, bet pastebėjau, kad tai palengvina mano gyvenimą). Aš visada naudoju viešą licenciją, tokią kaip GNU.

Kai saugykla bus nustatyta, galime tiesiog vilkti ir mesti failus į saugyklą ir apačioje spustelėti žalią įsipareigojimo mygtuką.

Tada mes einame į skirtuką Nustatymai su krumpliaračio piktograma saugyklos puslapio dešinėje po žvaigždute ir laikrodžio mygtukais. Įvedę nustatymus, slinkite žemyn, kol pamatysite langelį „Github Pages“. Pakeiskite šaltinį į pagrindinę šaką ir, jei norite, pasirinkite temą. Galite išmokti naudotis temomis, ieškodami jų „Google“(aš jų niekada nenaudoju, nes dažnai atsinešu savo CSS ir temų idėjas).

Kai puslapis bus paruoštas, gausite žalią paryškinimą ir pažymėsite, kad jūsų svetainė yra paskelbta ir ją galima pasiekti.

6 žingsnis: Atlikta

Dabar galite mėgautis nuostabia džemo sesija patogiai naudodami savo ausines, miegamąjį ar traukinį. Jei norite, pridėkite dar keletą akordų ir netgi pažaiskite su gitaros fret pozicijomis.

Greita pastaba apie judesio aptikimą

1. Braukimo gitara slenkstį galima koreguoti faile „script.js“, tačiau įsitikinkite, kad kai naudojate programą, fonas, kurį mato jūsų telefonas, yra palyginti nejudantis.

2. Pavyzdžiui, traukinyje geriau atsisėsti, užsidėti ausines ir pasukti telefoną į vidų, kad jei aplink jus judėtų keleiviai, telefono kamera didžiąją laiko dalį matytų tik jūsų ranką.

3. Ranka, suspaudusi telefoną, turi būti santykinai nejudri, priklausomai nuo jūsų slenksčio. Manau, kad kai kuriuos testus atliksiu su aukštu slenksčiu ir ateityje atnaujinsiu ribas, kad jie būtų konkretesni.

Žaisti:

Įkelkite programą į savo žiniatinklio naršyklę, tada pakreipkite ją į gulsčiojo režimą.

Tada, kai pasuksite ranką, skambės akordas, tačiau jis gros tol, kol paliesite F klavišą apatiniame dešiniajame kampe.

Arba galite sustabdyti garsą atlikdami akordų derinį.

Kai atliekate akordų derinį, dabartinis garsas sustoja, tada pasirenkamas naujas akordo garsas.

7 žingsnis: Išmokti dalykai ir paskutiniai žodžiai

Man labai patiko dirbti su šiuo projektu, net jei prireikė daug laiko, kol buvo sukurtas prototipas ir sukurta programa, dirbant su kitais projektais ir atliekant namų darbus. Taip pat išmokau keletą nuostabių dalykų;

1. Kurdami skaitmeninius gaminius, visada pasirūpinkite, kad jūsų prototipai būtų pagaminti kuo greičiau, nes jūsų pirmosios prielaidos bus klaidingos ir jums reikia greitai jas perbėgti, kad pasiektumėte pabaigą.

2. Kiek įmanoma venkite pinigų projektui. Visada pakartotinai naudokite viską, ką galite, ir visada pradėkite nuo paprastų dalykų, kuriuos turite po ranka.

3. Nebijokite išmokti naujų kalbų, sistemų ir sistemų. Jie dažnai būna lengvesni, nei manote iš pradžių.

Ir didžiulis ačiū lonekoreanui už mano svajonių išsipildymą

Jei jus domina programos kūrimas, galite prisijungti prie mūsų adresatų sąrašo. Aš ir maža komanda stengsimės sukurti pilną versiją, kuri padėtų sulūžusiems, keliaujantiems ar mažiems vaikams, kad ir kur jie būtų, turėti nuostabią nešiojamą gitarą.

Mes tikrai norėtume pagalbos, ypač iš grafikos dizainerių, gitaristų ir koduotojų, kad išbandytume ir suformuluotume viską.

Mėgaukitės (ﾉ ◕ ヮ ◕) ﾉ *: ･ ﾟ ✧ ･: *ヽ (◕ ヮ ◕ ヽ)