Gaiss - patiesa mobilā gaisa ģitāra (prototips): 7 soļi (ar attēliem)

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:51

Labi, Šī būs patiešām īsa pamācība par pirmo daļu, beidzot beidzot tuvoties manam bērnības sapnim.

Kad es biju jauns zēns, es vienmēr skatījos, kā mani iecienītākie mākslinieki un grupas nevainojami spēlē ģitāru.

Kad es uzaugu, es biju pietiekami pateicīgs, ka iemācījos spēlēt ģitāru un pat spēlēt dažus, kas pieder citiem, bet man joprojām nav savas:(Tāpēc es nolēmu beidzot apsēsties un izveidot tādu, kas pilnībā darbojas pa tālruni, izmanto datora redzi un ļauj tādiem cilvēkiem kā es, kuri vēlas ģitāru, bet, iespējams, ceļo, ir sabojājušies vai ir pārāk jauni, lai to iegūtu!

Lietotnes prototipu varat atrast šajā vietnē

Lai uzzinātu, kā spēlēt, pārejiet uz darbību “Gatavs”.

* Noteikti izmantojiet to savā tālrunī un pagrieziet ekrānu uz sāniem ainavas režīmā *

Izbaudi!

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

Piegādes:

1. Viedtālrunis

2. Galddators vai klēpjdators (programmēšanai)

1. darbība. Fons un piezīme par kodu

Šis projekts lielā mērā ir kodēts projekts, kura mērķis ir pilnībā darboties pa tālruni.

Izstrādājot šo projektu, es izmēģināju dažādas citas lietotnes un meklēju citas tirgū esošās ierīces, piemēram, AirJamz vai Kurv ģitāru, portatīvās ģitāras vai pat lietotni Real Guitar spēļu veikalā.

Manuprāt, daudzās no tām trūka problēmu:

1. Dažām bija nepieciešamas ārējas ierīces

2. Gandrīz visas lietotnes īsti neļāva jums atskaņot faktiskos akordus vai mūziku un bija tikai fret board simulatori

3. Ārējās ierīces bija diezgan dārgas, un daudzi ģitāristi ieteica vienkārši iegādāties īstu ģitāru

Tie ir parādīti pievienotajos attēlos.

Un tāpēc lietotnei Air ir jāatrisina šīs problēmas, vienlaikus pilnībā darbojoties pa tālruni. Es uzskatu, ka tas ir iespējams, jo 2020. gadā mums ir daudz labāka mobilo pārlūku tehnoloģija un daudz datoru redzes uzlabojumu, kas ļauj mums darīt brīnumus ar vienu RGB kameru.

Tāpēc es turpināju izveidot dažas skices par to, kā tas izskatīsies un kā tas darbosies, pirms pilnībā sāku darbu.

Es arī izvilku savus kodēšanas atskaites punktus, tāpēc šajā pamācībā tā vietā, lai jūs nogurdinātu ar kodu, es jūs iepazīstināšu ar savu izstrādes procesu un beigās pievienosim anotēto kodu, lai jūs varētu to izlasīt un apskatīt, ja jums tas ir nepieciešams.

Visu kodu var atrast vietnē https://github.com/msimbao/air, un es iesaku strukturēt jūsu koda failus līdzīgi šim.

Ņemiet vērā arī to, ka, lai lietotne darbotos, tai ir jābūt mitinātai. Līdz šim esmu atradis, ka tā darbojas tikai tad, kad tiek mitināta vietnē github.:)

2. darbība. Strumming Action

Pirmais nozīmīgais kodēšanas pavērsiens bija atrast veidu, kā digitāli atkārtot strumu bez jebkādas ārējas perifērijas. Mana tūlītējā doma bija izmantot sava tālruņa RGB priekšējo kameru.

Mana doma bija tāda - ja cilvēkam ir akords, kuru viņš vēlas spēlēt, tad, pavelkot roku kameras priekšā, tiks atskaņota skaņa.

Pēc tam, kad to izdomāju, man vajadzēja labu programmēšanas valodu, ko varētu izmantot, lai labi saskarotos ar RGB kameru.

Es samierinājos ar Javascript, jo es varētu izveidot starpplatformu lietotni ar React Native vai kaut ko citu vai vienkārši uzņemt ģitāru kādā vietnē, un tā varētu būt pieejama ikvienam.

Pēc tam es atradu dažādus veidus, kā izdomāt, kā ar roku pārvilkt, lai aktivizētu darbību, kas varētu būt akordu skaņas atskaņošana, taču bija daudz veidu, kā to izdarīt.

Mašīnmācība darbojās ļoti labi, kad izmēģināju IBM pakalpojumus un nedēļas laikā apmācīju aptuveni 3000 attēlu, lai atpazītu pārvilkšanu, kā arī akordus. Es arī izmēģināju victordibia handtrack.js. Diemžēl viņi abi mobilajos tālruņos darbojās neticami lēni.

Pēc tam es satiku kustības noteikšanu un lonekorean ieviešanu vietnē diffcam.com. Es uzzināju, ka ir iespējams izmantot tīmekļa kameru, lai ierakstītu divus atsevišķus kadrus un pēc tam aprēķinātu atšķirību starp kadriem un piešķirtu atšķirību. Ja šis rādītājs pārsniedz noteiktu slieksni, es veicu darbību.

Lonekorejs arī izgatavoja dzinēju savai diferenciālajai kamerai, kuru es nolēmu izmantot Air ģitārai, un tas lieliski darbojās, lai iegūtu man kustības rezultātu!

Pievienoti attēli no mēģinājumiem apmācīt mašīnmācīšanās modeļus, kā arī piemērs diffcam.com, no kura mācījos.

Piezīme. Šajā pašreizējā prototipā trieciens atkārtojas atkal un atkal, lai to apturētu, vienkārši turiet lejup akordu, kuru vēlaties atskaņot. Šī ir kļūda, kuru ceram novērst.

Pilna struma kods ir atrodams šeit pievienotajā failā script.js, un lonekorean diffcam dzinējs ir šeit.

3. darbība: akordu atpazīšana

Nākamais kodēšanas pavērsiens bija atrast veidu, kā rīkoties ar akordu atpazīšanu tiešraidē.

Es gribēju, lai lietotājs spētu atkārtot faktiskās akordu formas un tādējādi praktizēt labu roku novietošanu, kā arī palīdzēt viņiem praktizēt dažādus akordus.

Tāpat kā pēdējā solī, es izmēģināju mašīnmācīšanos akordu atpazīšanai, taču mobilajos tālruņos tā bija ļoti lēna.

Pēc tam es uzzināju kaut ko no lietotnes Real Guitar, ka varētu būt iespējams novietot fretboard uz tālruņa ekrāna, izmantojot ekrānu, lai ģenerētu akordu formas.

Pēc tam man bija jāiemācās atļaut vairāku pieskārienu mijiedarbību javascript, un es atradu lielisku apmācību un piemēru no Mozilla dokumentiem

Mijiedarbība ar pieskārieniem var būt sarežģīta, jo īpaši Javascript, taču ideja ir tāda, ka mēs varam izveidot noteiktus divus un pēc tam definēt funkcijas dažādu pieskārienu notikumu apstrādei:

1. touchStart: kad pirksts pieskaras ekrānam

2. touchEnd: kad pirksts atstāj

3. touchMove: kad pirksts joprojām atrodas ekrānā, bet maina pozīciju

Pēc tam mēs strādājam pie šīm funkcijām, lai definētu savus elementus, kas reaģē uz dažādiem pieskāriena notikumiem un kombinācijām.

Mūsu gadījumā mēs izstrādājam fret dēli, izmantojot CSS, un pēc tam, izmantojot Javascript, pastāstiet lietotnei, ka, nospiežot dažus divus kopā, ir jāatpazīst akords.

Pēc tam mēs varam definēt audio objektu, kuram mēs nodosim akordu, un pēc tam atskaņot šo audio, kad notiek pārvilkšanas notikums.

Lai definētu dažādas akordu kombinācijas, es izveidoju fret dēli, izmantojot šo attēlu, un pēc tam vienkārši iestatīju katru īpašo pozīciju, lai es varētu pieskarties un apvienot ar citiem.

Kods akorda progresēšanas noteikšanai ir atrodams šeit, bet fretboard kontrolieris ir atrodams pievienotajā kodā.

4. solis: Horda skaņu atrašana

Tagad, kad mūsu sistēma ir atpazīta, mums ir vajadzīgas dažas akordu skaņas.

Par laimi, freesound.com vienmēr palīdz man, kad man ir nepieciešami audio paraugi. Es vienkārši meklēju akordus un atradu pārsteidzošu danglada galveno akordu komplektu.

Pēc tam es tos lejupielādēju un rediģēju, izmantojot pārdrošību, lai pārliecinātos, ka skaņa sākās uzreiz, nevis īsa pauze lielākās daļas to sākumā, kad tie tika ierakstīti.

Lai tos izgrieztu, izmantojot pārdrošību, es vienkārši ievilku tos lietotnē un pēc tam izvēlējos vēlamo skaņas daļu (visu viļņoto daļu un nevienu no plakanās līnijas sadaļām, kurām nav skaņas). Pēc tam es dodos uz cilni Rediģēt> Noņemt īpašo> Apgriezt audio. Tad es nokļuvu cilnē Dziesmas> Izlīdzināt celiņus> Sākt līdz nullei. Pēc tam es eju uz failu, pēc tam Eksportēt> Eksportēt kā WAV.

Es eksportēju kā WAV, jo man ir bijis vieglāk tikt galā ar Javascript audio projektiem.

Pēc tam es izmantoju glitch.com, lai mitinātu šos failus, jo tiem ir pārsteidzošs satura piegādes tīkls, ko var izmantot dažādiem jūsu projektiem. Vēl viena iespēja varētu būt izmantot firebase, kas ir mans goto dažādiem projektiem, kuros varētu būt vairāk informācijas, piemēram, makerspace inventarizācijas lietotne manas koledžas veidotāju telpai.

Jums vienkārši jāvelk un jānomet aktīvi uz projektu direktoriju, un pēc tam jūs varat atrast saiti, noklikšķinot uz aktīvu mapes un noklikšķinot uz aktīva, kuru vēlaties iegūt. Pēc tam Glitch jūsu īpašumam izveidos unikālu CDN URL. Piemēram, šeit ir saite uz A -major Horda skaņu.

Pēc tam es varu saistīt visus šos akordus, izmantojot funkciju getChord, kas meklēs, kad ir nospiesta noteikta fret pozīciju kombinācija, un pēc tam piešķiru lietotnei atbilstošu akordu atskaņošanai, kad notiek pārvilkšana ar roku.

5. darbība: visas lietotnes pabeigšana un mitināšana

Ir daudz veidu, kā rīkoties ar mitināšanu.

Godīgi sakot, labākais, ko esmu atradis, ir vienkārši izmantot github. Tas ir tāpēc, ka, ja esat labi ieprogrammējis lietotni, varat nodrošināt, lai visu jūsu aizmuguri apkalpotu datu bāze vai ugunsdzēsēju veikals no firebase vai pat izmantotu CDN no glitch.com un citām vietām, kur glabāt aktīvus.

Lai vadītu projektu vietnē github, viss, kas jums jādara, ir atvērt github kontu, izveidot jaunu krātuvi. Pēc tam, lai atvieglotu iestatīšanu, pēc projekta nosaukuma ievietošanas noteikti pievienojiet licenci (es neesmu eksperts, bet esmu atklājis, ka tas atvieglo manu dzīvi). Es vienmēr izmantoju tikai tādu publisku licenci kā GNU.

Kad krātuve ir iestatīta, mēs varam vienkārši vilkt un nomest savus failus krātuvē un noklikšķināt uz zaļās apņemšanās pogas apakšā.

Pēc tam mēs ejam uz cilni Iestatījumi ar zobrata ikonu krātuves lapas labajā malā zem zvaigznes un pulksteņa pogām. Kad esat iestatījis, ritiniet uz leju, līdz redzat lodziņu Github Pages. Mainiet avotu uz galveno filiāli un, ja vēlaties, izvēlieties tēmu. Jūs varat uzzināt, kā izmantot motīvus, meklējot tos googlē (es tos nekad neizmantoju, jo bieži ņemu līdzi savu CSS un tēmu idejas).

Kad lapa ir gatava, tiks parādīts zaļš izcēlums un atzīme, norādot, ka jūsu vietne ir publicēta un tai var piekļūt.

6. darbība. Gatavs

Tagad varat baudīt satriecošu ievārījuma sesiju, ērti lietojot savas austiņas, guļamistabu vai vilcienā. Ja vēlaties, pievienojiet vēl dažus akordus un pat spēlējiet ar ģitāras fret pozīcijām.

Īsa piezīme par kustību noteikšanu

1. Ģitāras trieciena sliekšņa slieksni var pielāgot failā script.js, taču pārliecinieties, vai, lietojot lietotni, tālrunī redzamais fons ir salīdzinoši nekustīgs.

2. Piemēram, vilcienā labāk apsēsties un uzlikt austiņas un pagriezt tālruni uz iekšu tā, lai, ja pasažieri pārvietojas ap jums, tālruņa kamera lielāko daļu laika var redzēt tikai jūsu rokas kustību.

3. Roku, kas satver tālruni, jābūt samērā nekustīgam atkarībā no jūsu sliekšņa. Es domāju, ka es izpildīšu dažus testus ar augstu slieksni un turpmāk atjaunināšu ierobežojumus, lai tie būtu precīzāki.

Spēlēt:

Ielādējiet lietotni savā tīmekļa pārlūkprogrammā un pēc tam nolieciet to ainavas režīmā.

Tad, kad jūs šūpojat roku, tiks atskaņots akords, taču tas tiks atskaņots, līdz pieskarsieties taustiņam F apakšējā labajā stūrī.

Varat arī pārtraukt skaņu, izveidojot akordu kombināciju.

Izveidojot akordu kombināciju, pašreizējā skaņa tiek pārtraukta, un tiek izvēlēta jauna akorda skaņa.

7. solis: apgūtās lietas un beigu vārdi

Man ļoti patika strādāt pie šī projekta, pat ja bija vajadzīgs ilgs laiks, lai izstrādātu un izveidotu lietotni, strādājot pie citiem projektiem un mājas darbiem. Pa ceļam es uzzināju arī pāris satriecošas lietas;

1. Izstrādājot digitālos izstrādājumus, vienmēr pārliecinieties, ka prototipi tiek izgatavoti pēc iespējas ātrāk, jo jūsu pirmie pieņēmumi būs kļūdaini, un jums ātri jāpārvar tie, lai tiktu galā.

2. Cik vien iespējams, izvairieties no naudas tērēšanas projektam. Vienmēr atkārtoti izmantojiet visu iespējamo un vienmēr sāciet ar vienkāršām lietām, kas jums ir pa rokai.

3. Nebaidieties apgūt jaunas valodas, ietvarus un sistēmas. Tie bieži ir vieglāki, nekā jūs domājat sākumā.

Un milzīgs paldies lonekoreanam par manu sapņu piepildīšanos

Ja jūs interesē lietotnes attīstība, varat pievienoties mūsu adresātu sarakstam. Mēs ar nelielu komandu strādāsim, lai izveidotu pilnu versiju, lai palīdzētu cilvēkiem, kuri ir salauzti, ceļo vai ir mazi bērni, lai viņiem būtu pieejama satriecoša pārnēsājama ģitāra, lai kur viņi atrastos.

Mēs patiešām vēlētos kādu palīdzību, jo īpaši no grafikas dizaineriem, ģitāristiem un kodētājiem, lai pārbaudītu un precizētu visu.

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