Air - prava mobilna zračna kitara (prototip): 7 korakov (s slikami)

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:02

V redu tako, To bo res kratek pouk o prvem delu, ko sem se končno približal svojim otroškim sanjam.

Ko sem bil še mlad, sem vedno gledal svoje najljubše izvajalce in skupine, ki so brezhibno igrali kitaro.

Ko sem odraščal, sem bil dovolj hvaležen, da sem se naučil igrati kitaro in celo igrati nekatere v lasti drugih, vendar še vedno nimam svoje:(Zato sem se odločil, da se končno usedem in naredim takšnega, ki bo popolnoma deloval po telefonu, uporablja računalniški vid in ljudem, kot sem jaz, dovoli, da si želijo kitaro, a morda potujejo, zlomljeni ali premladi, da bi jo še dobili!

Prototipno aplikacijo najdete na tem spletnem mestu

Če želite videti, kako igrati, pojdite na korak »Končali ste«.

* Uporabite ga v telefonu in zaslon obrnite vstran v ležeči način *

Uživajte!

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

Zaloge:

1. Pametni telefon

2. Namizni računalnik ali prenosni računalnik (za programiranje)

1. korak: Ozadje in opomba o kodi

Ta projekt je v veliki meri kodiran projekt, katerega namen je, da se v celoti izvaja po telefonu.

Pri pripravi tega projekta sem preizkusil različne druge aplikacije in poiskal druge naprave, ki so trenutno na trgu, na primer kitaro AirJamz ali Kurv, prenosne kitare ali celo aplikacijo Real Guitar v trgovini z igrami.

Težave, za katere sem ugotovil, da pri mnogih manjkajo, so bile:

1. Nekateri so potrebovali zunanje naprave

2. Skoraj vse aplikacije vam v resnici niso omogočale predvajanja dejanskih akordov ali glasbe in so bile le simulatorji fret board

3. Zunanje naprave so bile precej drage in mnogi kitaristi so priporočali samo nakup prave kitare

Ti so prikazani na priloženih slikah.

In zato mora aplikacija Air rešiti te težave, medtem ko lahko v celoti deluje po telefonu. Menim, da je to mogoče, ker imamo leta 2020 veliko boljšo tehnologijo mobilnega brskalnika in veliko izboljšav računalniškega vida, ki nam lahko omogočajo čudeže z eno samo kamero RGB.

Tako sem naredil nekaj skic, kako bi to izgledalo in kako bi delovalo, preden sem začel v celoti.

Izrisal sem tudi svoje mejnike v kodiranju, zato vas bom v tem navodilu, namesto da vas dolgočasim s kodo, popeljal skozi postopek oblikovanja in na koncu priložil označeno kodo, da jo boste lahko prebrali in si ogledali, če jo potrebujete.

Celotno kodo najdete na https://github.com/msimbao/air in priporočam strukturiranje datotek s kodo, podobnih tej.

Upoštevajte tudi, da je za zagon aplikacije potrebno gostovanje. Doslej sem ugotovil, da se izvaja le, ko gostuje na githubu.:)

2. korak: Ukrepanje

Prvi pomemben mejnik v kodiranju je bil najti način za digitalno repliciranje struma brez zunanjega obrobja. Moja prva misel je bila uporaba sprednje kamere RGB v telefonu.

Mislil sem, da če ima nekdo akord, ki ga želi igrati, se bo potem, ko potegne roko pred kamero, predvajal zvok.

Potem ko sem to ugotovil, sem potreboval dober programski jezik, ki bi ga lahko uporabili za dober vmesnik s kamero RGB.

Odločil sem se za Javascript, ker bi lahko naredil aplikacijo za več platform z React Native ali kaj drugega ali pa bi lahko samo kitaro gostil na spletnem mestu in bi bila na voljo vsem.

Nato sem našel različne načine, kako ugotoviti, kako s potegom roke sprožiti dejanje, ki bi lahko bilo igranje akorda, vendar je bilo za to veliko načinov.

Strojno učenje je delovalo zelo dobro, ko sem preizkusil IBM -ove storitve in v enem tednu usposobil približno 3000 slik za prepoznavanje potez in prepoznavanje akordov. Poskusil sem tudi handtrack.js by victordibia. Na žalost sta bila oba na mobilnih telefonih neverjetno počasna.

Nato sem naletel na zaznavanje gibanja in izvedbo lonekorean na diffcam.com. Naučil sem se, da je mogoče s spletno kamero posneti dva ločena okvirja, nato pa izračunati razliko med okvirji in razliki dati oceno. Če ta rezultat preseže določen prag, potem izvedem dejanje.

Lonekorean je za svojo diferenčno kamero naredil tudi motor, ki sem se ga odločil uporabiti za kitaro Air, in mi je odlično uspel, da sem dobil gib gibanja!

V prilogi so slike poskusov usposabljanja modelov strojnega učenja in primer diffcam.com, iz katerega sem se učil.

Opomba: V tem trenutnem prototipu se godrnjanje vedno znova ponavlja, če ga želite ustaviti, preprosto držite akord, ki ga želite predvajati naslednjič. To je napaka, ki jo upamo odpraviti naprej.

Kodo za celoten strum najdete v datoteki script.js, ki je priložena tukaj, in ločilni mehanizem diffcam tukaj.

3. korak: Prepoznavanje akordov

Naslednji mejnik v kodiranju je bil najti način za prepoznavanje akordov v živo.

Želel sem, da bi uporabnik lahko ponovil dejanske oblike akordov in tako vadil dobro postavitev rok ter jim tudi pomagal vaditi različne akorde.

Tako kot v zadnjem koraku sem preizkusil strojno učenje za prepoznavanje akordov, vendar je bilo pri mobilnih telefonih zelo počasno.

Nato sem se v aplikaciji Real Guitar naučil nekaj, da bi bilo mogoče na zaslon telefona postaviti prag z uporabo zaslona za ustvarjanje oblik akordov.

Nato sem se moral naučiti, kako omogočiti interakcijo z več dotiki v javascriptu, in našel super vadnico in primer iz Mozillinih dokumentov

Interakcije na dotik so lahko zapletene, zlasti v Javascriptu, vendar je ideja, da lahko ustvarimo določene dive in nato definiramo funkcije za obravnavo različnih dogodkov na dotik:

1. touchStart: Ko se prst dotakne zaslona

2. touchEnd: Ko prst zapusti

3. touchMove: Ko je prst še vedno na zaslonu, vendar spremeni položaj

Nato obidemo te funkcije, da določimo lastne elemente, ki se odzivajo na različne dogodke in kombinacije dotika.

V našem primeru oblikujemo fret ploščo s pomočjo CSS in nato z uporabo Javascripta, aplikaciji povemo, da je treba ob pritisku določenih div na njih prepoznati akord.

Nato lahko določimo zvočni objekt, ki mu bomo predali akord, in nato predvajali ta zvok, ko pride do dogodka vlečenja.

Za določitev različnih kombinacij akordov sem s to sliko naredil fret desko in nato nastavil vsak poseben položaj kot div, ki se ga lahko dotaknem in združim z drugimi.

Kodo za določanje napredovanja akordov najdete tukaj, krmilnik fretboarda pa v priloženi kodi.

4. korak: Iskanje akordov

Zdaj, ko je naš sistem nastavljen na prepoznavanje, potrebujemo nekaj dejanskih zvokov akorda.

Na srečo mi freesound.com vedno priskoči na pomoč, ko potrebujem zvočne vzorce. Preprosto sem iskal akorde in našel neverjeten paket glavnih akordov danglade.

Nato sem jih prenesel in urejal z drznostjo, da sem se prepričal, da se je zvok začel takoj, ne pa kratek premor na začetku večine med snemanjem.

Če jih želim izrezati z drznostjo, sem jih preprosto povlekel v aplikacijo in nato izbral tisti del zvoka, ki ga želim (celoten valovit del in noben od odsekov ravne črte, ki nimajo zvoka). Nato grem na zavihek Urejanje> Odstrani posebno> Obreži zvok. Nato sem prišel na zavihek Skladbe> Poravnaj sledi> Začni na nič. Nato grem v datoteko, nato Izvozi> Izvozi kot WAV.

Izvažam kot WAV, ker sem se lažje ukvarjal z avdio projekti Javascript.

Nato sem uporabil glitch.com za gostovanje teh datotek, ker imajo neverjetno omrežje za dostavo vsebine, ki ga lahko uporabite za različne projekte, ki jih imate. Druga možnost bi lahko bila uporaba firebase, ki je moja izbira za različne projekte, ki imajo morda več informacij za shranjevanje, na primer aplikacijo inventarja makerspace za makerspace moje fakultete.

Sredstva morate preprosto povleči in spustiti v imenik projekta, nato pa lahko najdete povezavo, ko kliknete mapo sredstev in kliknete sredstvo, ki ga želite dobiti. Glitch bo nato ustvaril edinstven naslov CDN za vaše sredstvo. Tu je na primer povezava do zvoka A -major Chord.

Nato lahko vse te akorde povežem v funkcijo getChord, ki bo iskala, ko je pritisnjena določena kombinacija položajev freta, in nato dodelim ustrezen akord, ki ga bo aplikacija lahko predvajala, ko pride do dogodka s potegom roke.

5. korak: Dokončanje in gostovanje celotne aplikacije

Gostovanje je na veliko načinov.

Iskreno, najboljše, kar sem našel, je preprosto uporaba githuba. To je zato, ker če ste dobro programirali aplikacijo, lahko poskrbite, da bo celotna hrbtna stran služila zbirka podatkov ali firestore iz firebase ali celo uporabite CDN z glitch.com in drugih mest za shranjevanje sredstev.

Če želite gostiti projekt na githubu, morate samo odpreti račun github in narediti novo skladišče. Potem, da olajšate nastavitev, potem ko ste vnesli ime projekta, vedno dodajte licenco (nisem strokovnjak, vendar sem ugotovil, da mi olajša življenje). Vedno uporabljam samo javno licenco, kot je GNU.

Ko je skladišče nastavljeno, lahko datoteke povlečemo in spustimo v skladišče ter na dnu kliknemo zeleni gumb za oddajo.

Nato gremo na zavihek Nastavitve z ikono zobnika na skrajni desni strani strani skladišča pod gumbi z zvezdico in uro. Ko ste v nastavitvah, se pomaknite navzdol, dokler ne vidite polja Strani Github. Spremenite vir v glavno vejo in po želji izberite temo. Naučite se uporabljati teme tako, da jih poiščete na googlu (nikoli jih ne uporabljam, ker pogosto prinesem svoj CSS in ideje o temah).

Ko je stran pripravljena, boste dobili zeleno oznako in kljukico, ki vas obvešča, da je vaše spletno mesto objavljeno in do njega lahko dostopate.

6. korak: Končano

Zdaj lahko uživate v čudovitem jam sessionu v udobju svojih slušalk, spalnice ali na vlaku. Če želite, dodajte še nekaj akordov in se celo poigrajte s položaji kitare.

Na kratko o zaznavanju gibanja

1. Prag za drsenje po kitari lahko prilagodite v datoteki script.js, vendar pazite, da bo ozadje, ki ga vidi vaš telefon, med uporabo aplikacije relativno mirno.

2. Na primer, na vlaku je bolje, da se usedete in si priklopite slušalke ter telefon obrnete navznoter, tako da lahko, če se potniki gibljejo okoli vas, kamera telefona le večino časa vidi vašo roko.

3. Roka, ki drži telefon, mora biti relativno mirna, odvisno od vašega praga. Mislim, da bom izvedel nekaj testov z visokim pragom in omejitve v prihodnje še bolj natančno določil.

Igrati:

Naložite aplikacijo v spletni brskalnik in jo nato nagnite v ležeči način.

Ko zamahnete z roko, se bo zaigral akord, vendar bo igral še naprej, dokler se ne dotaknete tipke F v spodnjem desnem kotu.

Druga možnost je, da zvok ustavite s kombinacijo akordov.

Ko sestavite akordno kombinacijo, se trenutni zvok ustavi, nato pa izberete nov zvok akorda.

7. korak: Naučene stvari in zaključne besede

Zelo rad sem delal na tem projektu, čeprav je trajalo veliko časa za izdelavo prototipa in izdelavo aplikacije med delom na drugih projektih in domačem delu. Na poti sem se naučil tudi nekaj super stvari;

1. Pri načrtovanju digitalnih izdelkov vedno poskrbite, da bodo vaši prototipi čim hitrejši, ker bodo vaše prve domneve napačne in jih morate hitro povoziti, da pridete do konca.

2. Izogibajte se čim večji porabi denarja za projekt. Vedno znova uporabite, kar lahko, in vedno začnite s preprostimi stvarmi, ki jih imate pri roki.

3. Ne bojte se učiti novih jezikov, okvirov in sistemov. Pogosto so lažje, kot si sprva mislite.

In velika zahvala lonekorejcu, ki mi je uresničil sanje

Če vas zanima, kako se aplikacija razvija, se lahko pridružite našemu poštnemu seznamu. Z majhno ekipo si bomo prizadevali ustvariti popolno različico, ki bo ljudem, ki so zlomljeni, potujoči ali mlajši, omogočila dostop do čudovite prenosne kitare, kjer koli že so.

Res bi bili veseli pomoči grafičnih oblikovalcev, kitaristov in kodirnikov, da bi vse skupaj preizkusili.

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