Air - True Mobile Air Guitar (Prototype): 7 trinn (med bilder)

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:20

Ok, så

Dette blir en veldig kort instruksjon om den første delen av endelig å komme nærmere en barndomsdrøm for meg.

Da jeg var en ung gutt, så jeg alltid på mine favorittartister og band som spilte gitar perfekt.

Da jeg vokste opp, var jeg takknemlig nok til å lære å spille gitar og til og med spille noen eid av andre, men har fremdeles ikke min egen:(Så jeg bestemte meg for å endelig sette meg ned og lage en som kjører helt på telefonen, bruker datasyn og lar folk som meg som vil ha en gitar, men kan være på reise, blakk eller for unge til å få en enda!

Du finner prototypeappen på dette nettstedet

For å se hvordan du spiller, gå til trinnet "Du er ferdig".

* Sørg for å bruke den på telefonen og vri skjermen sidelengs til liggende modus *

Nyt!

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

Rekvisita:

1. Smart telefon

2. Stasjonær datamaskin eller bærbar datamaskin (for programmering)

Trinn 1: Bakgrunn og merknad om kode

Dette prosjektet er i stor grad et kodet prosjekt som tar sikte på å kjøre helt på telefonen.

Når jeg kom på dette prosjektet, prøvde jeg forskjellige andre apper og så opp andre enheter som for tiden er på markedet, for eksempel AirJamz- eller Kurv -gitaren, bærbare gitarer eller til og med Real Guitar -appen i spillbutikken.

Problemene jeg fant manglet i mange av dem var:

1. Noen trengte eksterne enheter

2. Nesten alle apper lot deg egentlig ikke spille faktiske akkorder eller musikk, og var bare plage -simulatorer

3. Eksterne enheter var ganske dyre og mange gitarister anbefalte bare å kjøpe en ekte gitar

Disse er avbildet i de medfølgende bildene.

Og så må Air -appen løse disse problemene samtidig som den kan kjøre på telefonen. Jeg tror dette er mulig fordi vi i 2020 har langt bedre mobilnettleserteknologi og mange forbedringer i datasyn som kan tillate oss å gjøre underverker med et enkelt RGB -kamera.

Så jeg fortsatte med å lage noen skisser av hvordan det ville se ut og hvordan det ville fungere før jeg begynte for fullt.

Jeg har også tegnet mine milepæler for koding, så i denne instruksjonsfulle, i stedet for å kjede deg med kode, tar jeg deg gjennom designprosessen og legger ved den kommenterte koden til slutt for at du kan lese og se på om du trenger det.

Hele koden finnes på https://github.com/msimbao/air, og jeg anbefaler å strukturere kodefilene dine som ligner på denne.

Vær også oppmerksom på at for at appen skal kjøre, må den være vert. Jeg har hittil bare funnet det å kjøre når det er vert på github.:)

Trinn 2: Strumming Action

Den første store milepælen for koding var å finne en måte å replikere et strum digitalt uten ekstern periferi. Min umiddelbare tanke var å bruke RGB -kameraet foran på telefonen min.

Min tanke var at hvis en person har et akkord de vil spille, vil en lyd spilles når de sveiper hånden foran kameraet.

Etter å ha funnet ut av det, trengte jeg et godt programmeringsspråk som kunne brukes til å koble godt til RGB -kameraet.

Jeg nøyde meg med Javascript fordi jeg kunne lage en plattform-app med React Native eller noe annet eller bare kunne være gitar på et nettsted, og den kan være tilgjengelig for alle.

Jeg fant deretter forskjellige måter å finne ut hvordan du får hånden til å utløse en handling som kan spille en akkordlyd, men det var mange måter å gjøre dette på.

Maskinlæring fungerte veldig bra da jeg prøvde IBMs tjenester og trente omtrent 3000 bilder over en uke for både sveipegenkjenning og akkordgjenkjenning. Jeg prøvde også handtrack.js av victordibia. Dessverre var de begge utrolig treg på mobiltelefoner.

Jeg snublet deretter over bevegelsesdeteksjon og en implementering av lonekorean på diffcam.com. Jeg lærte at det er mulig å bruke webkameraet til å ta opp to separate rammer og deretter beregne forskjellen mellom bildene og gi forskjellen en poengsum. Hvis denne poengsummen overskrider en viss terskel, utfører jeg deretter en handling.

Lonekoreanen laget også en motor til diffkameraet sitt som jeg bestemte meg for å bruke til Air -gitaren, og det fungerte perfekt for å få meg bevegelsesscoren!

Vedlagt er bilder av forsøk på trening av maskinlæringsmodeller samt diffcam.com -eksemplet jeg lærte av.

Merk: I denne nåværende prototypen gjentar slankende slags igjen og igjen, for å stoppe den, hold bare akkordet du vil spille neste ned. Dette er en feil som vi håper å fikse videre.

Koden for hele strummet finnes i script.js -filen som er vedlagt her, og diffcam -motoren fra lonekorean er her.

Trinn 3: Akkordgjenkjenning

Den neste milepælen for koding var da å finne en måte å håndtere akkordgjenkjenning live.

Jeg ville at en bruker skulle kunne kopiere faktiske akkordformer og så trene på god håndplassering og også hjelpe dem med å trene forskjellige akkorder.

Som i det siste trinnet, prøvde jeg ut maskinlæring for akkordgjenkjenning, men det var veldig tregt på mobiltelefoner.

Jeg lærte deretter noe fra Real Guitar -appen at det kan være mulig å plassere en gripebrett på telefonskjermen ved å bruke skjermen til å generere akkordformer.

Jeg måtte deretter lære å tillate multi-touch-interaksjon i javascript og fant en fantastisk opplæring og eksempel fra Mozillas dokumenter

Berøringsinteraksjoner kan være vanskelige, spesielt i Javascript, men tanken er at vi kan lage bestemte divs og deretter definere funksjoner for å håndtere forskjellige berøringshendelser:

1. touchStart: Når en finger berører skjermen

2. touchEnd: Når fingeren går

3. touchMove: Når fingeren fremdeles er på skjermen, men endrer posisjon

Vi jobber deretter rundt disse funksjonene for å definere våre egne elementer som reagerer på forskjellige berøringshendelser og kombinasjoner.

I vårt tilfelle designer vi et tavle ved hjelp av CSS og deretter bruker Javascript, forteller appen at når visse div er presset sammen, bør et akkord gjenkjennes.

Vi kan deretter definere et lydobjekt som vi vil sende akkordet til og deretter spille av lyden når det oppstår en sveipehendelse.

For å definere forskjellige akkordkombinasjoner, lagde jeg tavlebrettet ved å bruke dette bildet, og deretter satte jeg hver spesialposisjon til å være en div som jeg kunne berøre og kombinere med andre.

Koden for å definere akkordprogresjon finnes her, og gripebrettkontrolleren finnes i koden som er vedlagt.

Trinn 4: Finne akkordlyder

Nå som systemet vårt skal gjenkjenne, trenger vi noen faktiske akkordlyder.

Heldigvis kommer freesound.com alltid til unnsetning når jeg trenger lydprøver. Jeg søkte ganske enkelt etter akkorder og fant en fantastisk pakke med store akkorder av danglada.

Jeg lastet dem deretter ned og redigerte dem ved hjelp av dristighet for å sikre at lyden startet umiddelbart i stedet for den korte pausen i begynnelsen av de fleste av dem da de ble spilt inn.

For å klippe dem ved hjelp av dristighet, dro jeg dem ganske enkelt inn i appen og valgte deretter delen av lyden jeg vil ha (hele den bølgede delen og ingen av de flate linjeavsnittene som ikke har lyd). Jeg går deretter til kategorien Rediger> Fjern spesial> Trim lyd. Så kom jeg til fanen Spor> Juster spor> Start til null. Jeg går deretter til filen, deretter Eksporter> Eksporter som WAV.

Jeg eksporterer som WAV fordi jeg har funnet det lettere å håndtere i Javascript -lydprosjekter.

Jeg brukte deretter glitch.com til å være vert for disse filene fordi de har et fantastisk innholdsleveringsnettverk som kan brukes til forskjellige prosjekter du har. Et annet alternativ kan være å bruke firebase som er min prøve for forskjellige prosjekter som kan ha mer informasjon å lagre som makerspace inventar -appen for høyskolens makerspace.

Du må ganske enkelt dra og slippe eiendelene til prosjektkatalogen, og så kan du finne en lenke når du klikker på eiendelmappen og klikker på eiendelen du vil få. Glitch vil da produsere en unik CDN -url for eiendelen din. Her er for eksempel lenken til A -akkordlyden.

Jeg kan deretter koble alle disse akkordene sammen i en getChord -funksjon som vil lete etter når en bestemt kombinasjon av båndposisjoner har blitt trykket, og deretter tilordne et passende akkord for appen for å spille når en hendelse sveiper hendelse oppstår.

Trinn 5: Fullfør og vert hele appen

Det er mange måter å gå om hosting.

Ærlig talt, det beste jeg har funnet er ganske enkelt å bruke github. Dette er fordi hvis du har programmert en app godt, kan du få hele baksiden til å bli servert av en database eller firestore fra firebase eller til og med bruke en CDN fra glitch.com og andre steder å lagre eiendeler på.

For å være vert for prosjektet på github er det bare å åpne en github -konto, lage et nytt depot. For å gjøre det lettere å sette opp, må du alltid legge til en lisens etter at du har lagt prosjektnavnet (jeg er ikke ekspert, men jeg har funnet ut at det gjør livet mitt lettere). Jeg bruker alltid bare en offentlig lisens som GNU.

Når depotet er konfigurert, kan vi bare dra og slippe filene våre inn i depotet og klikke på den grønne forpliktelsesknappen nederst.

Deretter går vi til kategorien Innstillinger med tannhjulikonet helt til høyre på arkivsiden under stjerneknappene. Når du er i innstillingene, ruller du ned til du ser boksen Github Pages. Bytt kilde til hovedgren og velg et tema hvis du vil. Du kan lære å bruke temaer ved å google dem (jeg bruker dem aldri fordi jeg ofte tar med meg egen CSS og temaideer).

Når siden er klar, får du et grønt utheving og kryss som forteller deg at nettstedet ditt er publisert og kan nås.

Trinn 6: Ferdig

Du kan nå nyte en fantastisk jamsession i komforten av dine egne hodetelefoner, soverom eller på toget. Legg til flere akkorder hvis du vil, og til og med leke deg med gitarfret -posisjonene.

En rask merknad om bevegelsesdeteksjon

1. Terskelen for en gitarstrumming -sveipe kan justeres i script.js -filen, men sørg for at bakgrunnen som telefonen ser, er relativt stille når du bruker appen.

2. For eksempel i toget er det bedre å sette seg ned og sette på hodetelefonene og snu telefonen innover, slik at hvis passasjerer beveger seg rundt deg, kan telefonkameraet bare se at hånden din beveger seg mesteparten av tiden.

3. Hånden som holder telefonen, må være relativt stille avhengig av terskelen din. Jeg tror jeg skal kjøre noen tester med høy terskel og oppdatere grensene fremover for å være mer spesifikke.

Å leke:

Last inn appen i nettleseren, og vipp den deretter til liggende modus.

Så når du svinger hånden din, vil et akkord spille, men det vil fortsette å spille til du berører F -tasten i nedre høyre hjørne.

Alternativt kan du stoppe lyden ved å lage en akkordkombinasjon.

Når du lager en akkordkombinasjon, stopper gjeldende lyd, deretter velges en ny akkordlyd.

Trinn 7: Lærte ting og siste ord

Jeg elsket virkelig å jobbe med dette prosjektet, selv om det tok lang tid å prototype og få appen produsert mens jeg jobbet med andre prosjekter og hjemmearbeid. Jeg lærte et par fantastiske ting underveis også;

1. Når du designer digitale produkter, må du alltid sørge for å gjøre prototypene dine så raskt som mulig fordi de første antagelsene dine vil være feil og du må kjøre over dem raskt for å komme til slutten.

2. Unngå å bruke penger på et prosjekt så mye som mulig. Bruk alltid det du kan, og begynn alltid med enkle ting du har tilgjengelig.

3. Ikke vær redd for å lære nye språk, rammer og systemer. De er ofte lettere enn du først tror.

Og en stor takk til lonekoreanen for å få drømmene mine til å gå i oppfyllelse

Hvis du er interessert i hvordan appen utvikler seg, kan du bli med på vår e -postliste. Et lite team og jeg skal jobbe med å lage en fullversjon for å hjelpe mennesker som er blakk, på reise eller små barn, har tilgang til en fantastisk bærbar gitar uansett hvor de er.

Vi ville virkelig elske litt hjelp, spesielt fra grafiske designere, gitarister og kodere til å teste og utarbeide alt.

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