Air - skutočná mobilná vzduchová gitara (prototyp): 7 krokov (s obrázkami)

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:55

Dobre, Toto bude naozaj krátky návod na prvú časť konečne sa priblížiť k môjmu detskému snu.

Keď som bol malý chlapec, vždy som sledoval, ako moji obľúbení umelci a kapely bezchybne hrajú na gitare.

Keď som vyrastal, bol som dostatočne vďačný, že som sa naučil hrať na gitare a dokonca hrať aj na niekoho iného, ale stále nemám vlastnú:(Rozhodol som sa teda konečne si sadnúť a vytvoriť taký, ktorý beží úplne po telefóne, používa počítačové videnie a umožňuje ľuďom, ako som ja, ktorí chcú gitaru, ale môžu byť na cestách, zlomení alebo príliš mladí na to, aby si ju ešte zaobstarali!

Prototyp aplikácie nájdete na tomto webe

Ak sa chcete dozvedieť, ako hrať, prejdite na krok „Hotovo“.

* Nezabudnite ho použiť vo svojom telefóne a otočte obrazovku nabok do režimu na šírku *

Užite si to!

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

Zásoby:

1. Chytrý telefón

2. Stolný počítač alebo prenosný počítač (na programovanie)

Krok 1: Pozadie a poznámka ku kódu

Tento projekt je do značnej miery kódovaný projekt zameraný na úplné spustenie v telefóne.

Pri vytváraní tohto projektu som vyskúšal rôzne ďalšie aplikácie a vyhľadal som ďalšie zariadenia, ktoré sú v súčasnosti na trhu, ako napríklad gitaru AirJamz alebo Kurv, prenosné gitary alebo dokonca aplikáciu Real Guitar v obchode Play.

Problémy, ktoré mi pri mnohých z nich chýbali, boli tieto:

1. Niektoré potrebné externé zariadenia

2. Takmer všetky aplikácie vám skutočne nedovolili hrať skutočné akordy alebo hudbu a boli to iba simulátory pražcov

3. Externé zariadenia boli dosť drahé a veľa gitaristov odporučilo kúpiť si skutočnú gitaru

Tieto sú zobrazené na sprievodných obrázkoch.

A tak aplikácia Air musí tieto problémy vyriešiť, pričom je schopná úplne bežať v telefóne. Verím, že je to možné, pretože v roku 2020 máme oveľa lepšiu technológiu mobilného prehliadača a veľa vylepšení v oblasti počítačového videnia, ktoré nám umožňujú robiť zázraky s jedinou kamerou RGB.

Pred úplným spustením som teda urobil niekoľko náčrtov toho, ako to bude vyzerať a ako to bude fungovať.

Tiež som nakreslil svoje míľniky v oblasti kódovania, takže v tomto návode vás namiesto toho, aby som vás nudil kódom, prevediem procesom návrhu a na konci pripojím komentovaný kód, aby ste si ho mohli prečítať a pozrieť, ak budete potrebovať.

Celý kód nájdete na stránke https://github.com/msimbao/air a odporúčam štruktúrovať súbory s kódom podobným spôsobom.

Upozorňujeme, že na to, aby bola aplikácia spustená, musí byť hostiteľom. Doposiaľ som zistil, že funguje iba vtedy, keď je hostený na github.:)

Krok 2: Akcia omračovania

Prvým veľkým míľnikom v oblasti kódovania bolo nájsť spôsob, ako digitálne replikovať brnka bez akejkoľvek vonkajšej periférie. Moja bezprostredná myšlienka bola použiť predný fotoaparát RGB môjho telefónu.

Myslel som si, že ak má človek akord, ktorý chce hrať, potom keď prejde rukou pred kamerou, zaznie zvuk.

Keď som to zistil, potreboval som dobrý programovací jazyk, ktorý by bolo možné použiť na dobré prepojenie s kamerou RGB.

Rozhodol som sa pre Javascript, pretože som mohol vytvoriť multiplatformovú aplikáciu s React Native alebo s niečím iným alebo by som mohol gitaru hostovať na webovej stránke a mohla by byť k dispozícii pre každého.

Potom som našiel rôzne spôsoby, ako zistiť, ako potiahnutím ruky spustiť akciu, ktorou by mohol byť zvuk akordu, ale bolo veľa spôsobov, ako to urobiť.

Strojové učenie fungovalo super dobre, keď som vyskúšal služby IBM a za týždeň som natrénoval asi 3 000 obrázkov na rozpoznávanie potiahnutím prstom a rozpoznávanie akordov. Skúsil som aj handtrack.js od victordibia. Nanešťastie boli obaja na mobilných telefónoch neuveriteľne pomalí.

Potom som narazil na detekciu pohybu a implementáciu lonekoreana na diffcam.com. Dozvedel som sa, že pomocou webovej kamery je možné zaznamenať dva samostatné snímky a potom vypočítať rozdiel medzi snímkami a dať rozdielu skóre. Ak toto skóre presiahne určitý prah, vykonám akciu.

Lonekorean tiež vyrobil motor pre svoju diferenciálnu kameru, ktorý som sa rozhodol použiť pre gitaru Air a fungovalo to perfektne na získanie pohybového skóre!

V prílohe sú obrázky pokusov o školenie modelov strojového učenia a príklad diffcam.com, z ktorého som sa naučil.

Poznámka: V tomto súčasnom prototype sa brnkanie trochu opakuje znova a znova, aby ste to zastavili, jednoducho podržte akord, ktorý chcete hrať ďalej. Toto je chyba, ktorú dúfame, že odstránime.

Kód pre úplné brnkanie sa nachádza v priloženom súbore script.js a je tu engine diffcam od lonekorean.

Krok 3: Rozpoznanie akordu

Ďalším medzníkom kódovania bolo potom nájsť spôsob, ako zvládnuť rozpoznávanie akordov naživo.

Chcel som, aby bol používateľ schopný replikovať skutočné tvary akordov, a tak si precvičil dobré umiestnenie ruky a tiež im pomohol cvičiť rôzne akordy.

Rovnako ako v poslednom kroku som vyskúšal strojové učenie na rozpoznávanie akordov, ale na mobilných telefónoch išlo veľmi pomaly.

Potom som sa z aplikácie Real Guitar dozvedel niečo o tom, že by bolo možné umiestniť hmatník na obrazovku telefónu pomocou obrazovky na generovanie tvarov akordov.

Potom som sa musel naučiť, ako povoliť viacdotykovú interakciu v JavaScripte, a našiel som úžasný návod a príklad z dokumentov Mozilly

Interakcie s dotykom môžu byť náročné najmä v Javascripte, ale ide o to, že môžeme vytvoriť určité divy a potom definovať funkcie na spracovanie rôznych dotykových udalostí:

1. touchStart: Keď sa prst dotkne obrazovky

2. touchEnd: Keď prst odíde

3. touchMove: Keď je prst stále na obrazovke, ale mení polohu

Potom tieto funkcie obchádzame, aby sme definovali naše vlastné prvky, ktoré reagujú na rôzne dotykové udalosti a kombinácie.

V našom prípade navrhneme pražcovú dosku pomocou CSS a potom pomocou Javascriptu oznámime aplikácii, že keď sa stlačia určité divy, mal by byť rozpoznaný akord.

Potom môžeme definovať zvukový objekt, do ktorého odovzdáme akord, a potom prehrať tento zvuk, keď dôjde k potiahnutiu prstom.

Aby som definoval rôzne kombinácie akordov, vyrobil som pražcovú dosku pomocou tohto obrázku a potom som nastavil každú špeciálnu pozíciu na div, ktorého sa môžem dotknúť a kombinovať s ostatnými.

Kód na definovanie postupu akordov sa nachádza tu a ovládač hmatníka sa nachádza v priloženom kóde.

Krok 4: Nájdenie zvukov akordu

Teraz, keď je náš systém nastavený na rozpoznávanie, potrebujeme nejaké skutočné zvuky akordov.

Našťastie mi freesound.com vždy príde na pomoc, keď potrebujem zvukové ukážky. Jednoducho som hľadal akordy a našiel som úžasný balíček durových akordov od danglada.

Potom som ich stiahol a pomocou drzosti som ich upravil, aby som sa ubezpečil, že zvuk sa začal skôr než krátka prestávka na začiatku väčšiny z nich, keď sa nahrávali.

Ak ich chcete pomocou odvážnosti vystrihnúť, jednoducho som ich pretiahol do aplikácie a potom som vybral časť zvuku, ktorú chcem (celú vlnitú časť a žiadnu z častí plochých čiar, ktoré nepočúvajú). Potom prejdem na kartu Upraviť> Odstrániť špeciálne> Orezať zvuk. Potom som sa dostal na kartu Stopy> Zarovnať trasy> Začať na nulu. Potom idem do súboru, potom na Export> Exportovať ako WAV.

Exportujem ako WAV, pretože sa mi s ním ľahšie pracuje v zvukových projektoch Javascript.

Potom som použil glitch.com na hostovanie týchto súborov, pretože majú úžasnú sieť na doručovanie obsahu, ktorú je možné použiť na rôzne projekty, ktoré máte. Ďalšou možnosťou by mohlo byť použitie platformy firebase, ktorá je mojím zázemím pre rôzne projekty, ktoré by mohli mať viac informácií na uloženie, ako je napríklad aplikácia inventár makerspace pre makerspace mojej vysokej školy.

Prostriedky musíte jednoducho presunúť myšou do adresára projektu a potom nájdete odkaz, keď kliknete na priečinok s aktívami a kliknete na majetok, ktorý chcete získať. Glitch potom pre váš majetok vyrobí jedinečnú adresu URL CDN. Tu je napríklad odkaz na zvuk akordu A dur.

Potom môžem prepojiť všetky tieto akordy dohromady pomocou funkcie getChord, ktorá vyhľadá, kedy bola stlačená konkrétna kombinácia polôh pražcov, a potom priradí príslušný akord, ktorý sa aplikácii bude hrať, keď dôjde k potiahnutiu rukou.

Krok 5: Dokončenie a hostenie celej aplikácie

Existuje mnoho spôsobov, ako ísť o hosťovanie.

Úprimne povedané, najlepšie, čo som našiel, je jednoducho použiť github. Je to preto, že ak ste aplikáciu naprogramovali dobre, môžete zaistiť, aby celý váš zadný koniec bol obsluhovaný databázou alebo úložiskom hasičov z firebase alebo dokonca použiť CDN z glitch.com a ďalších miest na ukladanie aktív.

Na hostovanie projektu na serveri github stačí otvoriť účet github a vytvoriť nové úložisko. Potom, aby ste uľahčili nastavenie, potom, čo ste zadali názov svojho projektu, vždy nezabudnite pridať licenciu (nie som odborník, ale zistil som, že mi to uľahčuje život). Vždy používam verejnú licenciu ako GNU.

Akonáhle je úložisko nastavené, môžeme jednoducho presúvať naše súbory do úložiska a kliknúť na zelené tlačidlo potvrdenia v spodnej časti.

Potom prejdeme na kartu Nastavenia pomocou ikony ozubeného kolieska úplne vpravo na stránke úložiska pod tlačidlami hviezdičky a hodiniek. Keď ste v nastaveniach, posuňte sa nadol, kým sa nezobrazí pole Stránky Github. Zmeňte zdroj na hlavnú vetvu a vyberte tému, ak chcete. Naučíte sa používať témy tak, že si ich vygooglite (nikdy ich nepoužívam, pretože často prinášam svoje vlastné CSS a nápady na témy).

Keď je stránka pripravená, zobrazí sa zelené zvýraznenie a začiarknutie, ktoré vám oznámi, že váš web je zverejnený a je k nemu prístup.

Krok 6: Hotovo

Teraz si môžete užiť úžasnú jam session v pohodlí vlastných slúchadiel, spálne alebo vo vlaku. Ak chcete, pridajte ďalšie akordy a dokonca si zahrajte s polohami gitarového pražca.

Krátka poznámka k detekcii pohybu

1. Prah pre potiahnutie gitary je možné nastaviť v súbore script.js, ale uistite sa, že keď aplikáciu používate, pozadie, ktoré váš telefón vidí, je relatívne nehybné.

2. Napríklad vo vlaku je lepšie sadnúť si, nasadiť si slúchadlá a otočiť telefón dovnútra, aby ak sa okolo vás pohybujú cestujúci, kamera telefónu videla väčšinu času iba vašu ruku.

3. Ruka zvierajúca telefón musí byť relatívne nehybná v závislosti od vášho prahu. Myslím, že spustím niekoľko testov s vysokým prahom a aktualizujem limity, aby boli v budúcnosti konkrétnejšie.

Hrať:

Nainštalujte aplikáciu do webového prehliadača a potom ju nakloňte do režimu na šírku.

Potom keď švihnete rukou, bude hrať akord, ale bude hrať, kým sa nedotknete klávesu F v pravom dolnom rohu.

Prípadne môžete zvuk zastaviť vytvorením kombinácie akordov.

Keď vytvoríte kombináciu akordov, aktuálny zvuk sa zastaví a potom sa vyberie nový zvuk akordu.

Krok 7: Naučené veci a záverečné slová

Naozaj sa mi páčilo pracovať na tomto projekte, aj keď prototypovanie a výroba aplikácie trvalo dlho, kým som pracoval na iných projektoch a domácich prácach. Cestou som sa tiež naučil pár úžasných vecí;

1. Pri navrhovaní digitálnych produktov sa vždy snažte, aby boli vaše prototypy čo najrýchlejšie, pretože vaše prvé predpoklady budú nesprávne a musíte ich rýchlo prejsť, aby ste sa dostali na koniec.

2. Vyhnite sa čo najväčšiemu vynakladaniu peňazí na projekt. Vždy znova použite, čo môžete, a vždy začnite jednoduchými vecami, ktoré máte poruke.

3. Nebojte sa naučiť sa nové jazyky, rámce a systémy. Často sú jednoduchšie, ako si na začiatku myslíte.

A obrovská vďaka lonekoreanovi za splnenie mojich snov

Ak vás zaujíma, ako sa aplikácia vyvíja, môžete sa pripojiť k nášmu zoznamu adries. Malý tím a ja budeme pracovať na vytvorení úplnej verzie, ktorá pomôže ľuďom, ktorí sú na mizine, cestujú alebo majú malé deti, prístup k úžasnej prenosnej gitare, nech sú kdekoľvek.

Naozaj by sme chceli pomoc, najmä od grafických dizajnérov, gitaristov a kodérov pri testovaní a zosúladení všetkého.

Užite si (ﾉ ◕ ヮ ◕) ﾉ *: ･ ﾟ ✧ ･: *ヽ (◕ ヮ ◕ ヽ)