Air - True Mobile Air Guitar (prototyyppi): 7 vaihetta (kuvilla)

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 08:59

Elikkäs, Tämä on todella lyhyt opettavainen osa ensimmäisestä osasta vihdoin päästä lähemmäksi lapsuuden unelmaani.

Kun olin nuori poika, katsoin aina suosikkitaiteilijoitani ja bändejäni soittavan kitaraa moitteettomasti.

Kasvaessani olin tarpeeksi kiitollinen oppiessani soittamaan kitaraa ja jopa soittamaan toisten omistamia, mutta minulla ei vieläkään ole omaa:(Joten päätin vihdoin istua alas ja tehdä sellaisen, joka toimii täysin puhelimella, käyttää tietokonenäköä ja antaa kaltaisieni ihmisten, jotka haluavat kitaran, mutta saattavat olla matkalla, rikki tai liian nuoria hankkimaan sellaisen!

Löydät prototyyppisovelluksen tältä sivustolta

Jos haluat nähdä kuinka pelata, siirry "Olet valmis" -vaiheeseen.

* Muista käyttää sitä puhelimessasi ja käännä näyttö sivuttain vaakasuuntaan *

Nauttia!

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

Tarvikkeet:

1. Älypuhelin

2. Pöytätietokone tai kannettava tietokone (ohjelmointia varten)

Vaihe 1: Taustaa ja huomautus koodista

Tämä projekti on suurelta osin koodattu projekti, jonka tarkoituksena on ajaa kokonaan puhelimella.

Tätä projektia keksiessäni kokeilin useita muita sovelluksia ja etsin muita tällä hetkellä markkinoilla olevia laitteita, kuten AirJamz- tai Kurv -kitaraa, kannettavia kitaroita tai jopa Real Guitar -sovellusta pelikaupasta.

Monista ongelmista puuttuivat seuraavat ongelmat:

1. Jotkut tarvitsivat ulkoisia laitteita

2. Lähes kaikki sovellukset eivät oikeastaan antaneet sinun soittaa todellisia sointuja tai musiikkia, ja ne olivat vain fret board -simulaattoreita

3. Ulkoiset laitteet olivat melko kalliita ja monet kitaristit suosittelivat vain oikean kitaran ostamista

Nämä on kuvattu oheisissa kuvissa.

Ja niin Air -sovelluksen on ratkaistava nämä ongelmat samalla, kun se pystyy toimimaan puhelimella. Uskon, että tämä on mahdollista, koska vuonna 2020 meillä on paljon parempi mobiiliselaintekniikka ja paljon parannuksia tietokonenäköön, joiden avulla voimme tehdä ihmeitä yhdellä RGB -kameralla.

Joten jatkoin tehdä luonnoksia siitä, miltä se näyttäisi ja miten se toimisi ennen kuin aloitin kokonaan.

Piirsin myös koodauksen virstanpylväitä, joten tässä ohjeessa, sen sijaan, että kyllästyisin koodiin, johdan teidät suunnitteluprosessini läpi ja liitän loppuun merkityn koodin, jotta voit lukea ja katsoa tarvittaessa.

Koko koodi löytyy osoitteesta https://github.com/msimbao/air, ja suosittelen tämän kaltaisten kooditiedostojen jäsentämistä.

Huomaa myös, että sovelluksen toimiminen edellyttää sen isännöimistä. Olen toistaiseksi löytänyt sen toimivan vain, kun sitä isännöidään githubissa.:)

Vaihe 2: Järkytys

Ensimmäinen merkittävä koodauksen virstanpylväs oli löytää tapa toistaa stummi digitaalisesti ilman ulkoisia reunuksia. Välitön ajatukseni oli käyttää puhelimeni RGB -etukameraa.

Ajattelin, että jos henkilöllä on sointu, jonka hän haluaa soittaa, niin kun hän pyyhkäisee kätensä kameransa edessä, kuuluu ääni.

Sen selvittämisen jälkeen tarvitsin sitten hyvän ohjelmointikielen, jota voitaisiin käyttää hyvin RGB -kameran kanssa.

Päädyin Javascriptiin, koska voisin tehdä alustanvälisen sovelluksen React Native -palvelun tai jonkin muun kanssa tai voisin vain isännöidä kitaraa verkkosivustolla ja se voisi olla kaikkien saatavilla.

Sitten löysin erilaisia tapoja selvittää, miten saisin pyyhkäisyn käynnistämään toiminnon, joka voisi olla sointuääni, mutta tähän oli monia tapoja.

Koneoppiminen toimi erittäin hyvin, kun kokeilin IBM: n palveluita ja koulutin viikossa noin 3000 kuvaa pyyhkäisytunnistukseen sekä sointujen tunnistamiseen. Kokeilin myös victordibian handtrack.js -tiedostoa. Valitettavasti molemmat olivat uskomattoman hitaita matkapuhelimissa.

Sitten törmäsin liiketunnistukseen ja lonekoreanin toteutukseen osoitteessa diffcam.com. Opin, että on mahdollista käyttää verkkokameraa kahden erillisen kehyksen tallentamiseen ja laskea sitten kehysten välinen ero ja antaa erotukselle pisteet. Jos pisteet ylittävät tietyn kynnyksen, suoritan toiminnon.

Lonekorean teki myös moottorin diff -nokkaansa, jonka päätin käyttää Air -kitarassa, ja se toimi täydellisesti liiketulosten saamiseksi!

Liitteenä on kuvia koneoppimismallien kouluttamisyrityksistä sekä esimerkki diffcam.com, josta olen oppinut.

Huomautus: Tässä nykyisessä prototyypissä jyrinä toistuu kerta toisensa jälkeen ja lopeta se pitämällä yksinkertaisesti soittoa, jonka haluat soittaa seuraavaksi. Tämä on vika, jonka toivomme korjaavan eteenpäin.

Koko strumin koodi löytyy script.js -tiedostosta ja lonekoreanin diffcam -moottori on täällä.

Vaihe 3: Sointujen tunnistus

Seuraava koodauksen virstanpylväs oli sitten löytää tapa hoitaa sointujen tunnistus livenä.

Halusin, että käyttäjä pystyy toistamaan todellisia sointumuotoja ja harjoittelemaan hyvää käden sijoittamista sekä auttamaan heitä harjoittelemaan erilaisia sointuja.

Kuten viimeisessä vaiheessa, kokeilin Koneoppimista sointujen tunnistamiseen, mutta se oli hyvin hidasta matkapuhelimissa.

Opin sitten Real Guitar -sovelluksesta jotain, että otelauta saattaa olla mahdollista sijoittaa puhelimen näyttöön ja luoda näytöllä sointujen muotoja.

Minun piti sitten oppia sallimaan monikosketuskäyttö JavaScriptissä ja löysin mahtavan opetusohjelman ja esimerkin Mozillan asiakirjoista

Kosketustoiminnot voivat olla hankalia etenkin Javascriptissa, mutta ajatuksena on, että voimme luoda tiettyjä div -osioita ja sitten määrittää toimintoja eri kosketustapahtumien käsittelemiseksi:

1. touchStart: Kun sormi koskettaa näyttöä

2. kosketaPää: Kun sormi poistuu

3. kosketa Siirrä: Kun sormi on edelleen näytöllä, mutta muuttaa sijaintia

Tämän jälkeen kiertämme näitä toimintoja määrittääksemme omat elementtimme, jotka reagoivat erilaisiin kosketustapahtumiin ja yhdistelmiin.

Meidän tapauksessamme suunnittelemme otelaudan CSS: n avulla ja sitten Javascriptin avulla ja kerro sovellukselle, että kun tietyt divit painetaan yhteen, sointu on tunnistettava.

Voimme sitten määritellä audio -objektin, jolle välitämme soinnun, ja toistaa sitten äänen, kun pyyhkäisytapahtuma tapahtuu.

Jotta voisin määritellä erilaisia sointuyhdistelmiä, tein otelaudan tämän kuvan avulla ja asetin sitten vain jokaisen erikoisasennon diviksi, jota voisin koskettaa ja yhdistää muiden kanssa.

Sointujen etenemisen määrittelevä koodi löytyy täältä ja otelaudan ohjain löytyy liitteenä olevasta koodista.

Vaihe 4: Sointuäänien etsiminen

Nyt kun järjestelmämme on asetettu tunnistamaan, tarvitsemme todellisia sointuääniä.

Onneksi freesound.com tulee aina auttamaan, kun tarvitsen ääninäytteitä. Etsin vain sointuja ja löysin hämmästyttävän paketin dangladan suuria sointuja.

Sitten latasin ne ja muokkasin niitä rohkeudella varmistaakseni, että ääni alkoi heti eikä lyhyt tauko useimpien alkuhetkellä, kun niitä tallennettiin.

Jos haluat leikata ne rohkeudella, vedin ne yksinkertaisesti sovellukseen ja valitsin haluamani äänen osan (koko aaltoileva osa eikä mikään tasainen viivaosa, jossa ei ole ääntä). Siirryn sitten Muokkaa -välilehteen> Poista erikois> Leikkaa ääni. Sitten pääsin Jäljet -välilehteen> Kohdista jäljet> Aloita nollaan. Siirryn sitten tiedostoon ja sitten Vie> Vie WAV -muodossa.

Viennin WAV -muodossa, koska olen kokenut sen helpommaksi käsitellä Javascript -ääniprojekteissa.

Käytin sitten glitch.comia näiden tiedostojen isännöimiseen, koska niillä on hämmästyttävä sisällönjakeluverkosto, jota voidaan käyttää erilaisiin projekteihisi. Toinen vaihtoehto voisi olla käyttää firebasea, jota olen käyttänyt eri projekteihin, joissa voi olla enemmän tallennettavaa tietoa, kuten kollegion suunnittelutilan makerspace inventointisovellus.

Sinun täytyy yksinkertaisesti vetää ja pudottaa resurssit projektihakemistoon ja sitten löydät linkin, kun napsautat resurssikansio ja napsautat haluamaasi sisältöä. Glitch tuottaa sitten ainutlaatuisen CDN -URL -osoitteen sisältökohteellesi. Tässä on esimerkiksi linkki A -duurin sointuäänelle.

Voin sitten linkittää kaikki nämä soinnut yhteen getChord -funktiossa, joka etsii, kun tiettyä fret -asentojen yhdistelmää on painettu, ja määrittää sitten sopivan soinnun sovellukselle toistettavaksi, kun käsi pyyhkäisee.

Vaihe 5: Koko sovelluksen viimeistely ja isännöinti

Isännöintiin on monia tapoja.

Rehellisesti, paras mitä olen löytänyt, on yksinkertaisesti githubin käyttö. Tämä johtuu siitä, että jos olet ohjelmoinut sovelluksen hyvin, voit asettaa koko taustapuolen palvelemaan tietokannassa tai palomuurissa Firebasesta tai jopa käyttää CDN: ää osoitteessa glitch.com ja muista paikoista omaisuuden tallentamiseen.

Jos haluat isännöidä projektia githubissa, sinun tarvitsee vain avata github -tili ja luoda uusi arkisto. Muista aina lisätä lisenssi asennuksen helpottamiseksi, kun olet kirjoittanut projektisi nimen (en ole asiantuntija, mutta olen huomannut, että se helpottaa elämääni). Käytän aina vain julkista lisenssiä, kuten GNU.

Kun arkisto on määritetty, voimme vain vetää ja pudottaa tiedostomme arkistoon ja napsauttaa vihreää sitoutumispainiketta alareunassa.

Siirrymme sitten Asetukset -välilehteen, jossa on rataskuvake arkistosivun oikeassa reunassa tähden ja kellopainikkeiden alla. Kun olet asetuksissa, vieritä alaspäin, kunnes näet Github -sivut -ruudun. Vaihda lähde päähaaraksi ja valitse teema, jos haluat. Voit oppia käyttämään teemoja googlaamalla niitä (en käytä niitä koskaan, koska tuon usein omat CSS- ja teemaideani).

Kun sivu on valmis, saat vihreän korostuksen ja rastin, joka kertoo, että sivustosi on julkaistu ja siihen pääsee.

Vaihe 6: Valmis

Voit nyt nauttia mahtavasta hillosessiosta mukavasti omilla kuulokkeilla, makuuhuoneessa tai junassa. Lisää halutessasi lisää sointuja ja jopa leikkiä kitaran tuskailla.

Pikahuomautus liiketunnistuksesta

1. Kitaran lyönnin kynnystä voidaan säätää script.js -tiedostossa, mutta varmista, että kun käytät sovellusta, puhelimesi näkemä tausta on suhteellisen hiljainen.

2. Esimerkiksi junassa on parempi istua alas ja laittaa kuulokkeet päälle ja kääntää puhelin sisäänpäin niin, että jos matkustajat liikkuvat ympärilläsi, puhelimen kamera näkee vain kätesi liikkuvan suurimman osan ajasta.

3. Kädestä kiinni puhelimen on oltava suhteellisen paikallaan kynnyksestäsi riippuen. Luulen, että suoritan joitain testejä korkealla kynnyksellä ja päivitän rajat tarkemmin.

Pelata:

Lataa sovellus verkkoselaimeesi ja kallista se vaakasuunnassa.

Sitten kun käännät kättäsi, sointu soi, mutta se jatkaa soittoaan, kunnes kosketat F -näppäintä oikeassa alakulmassa.

Vaihtoehtoisesti voit pysäyttää äänen tekemällä sointuyhdistelmän.

Kun teet sointuyhdistelmän, nykyinen ääni lakkaa ja uusi sointuääni valitaan.

Vaihe 7: Opitut asiat ja viimeiset sanat

Pidin todella tämän projektin parissa työskentelystä, vaikka prototyypin luominen ja sovelluksen saaminen kesti kauan muiden projektien ja kotitehtävien parissa. Opin myös pari mahtavaa asiaa matkan varrella;

1. Kun suunnittelet digitaalisia tuotteita, varmista aina, että teet prototyyppisi mahdollisimman nopeasti, koska ensimmäiset oletuksesi ovat vääriä ja sinun täytyy ajaa niiden yli nopeasti päästäksesi loppuun.

2. Vältä käyttämästä rahaa projektiin niin paljon kuin mahdollista. Käytä aina uudelleen mitä voit ja aloita aina yksinkertaisista asioista, joita sinulla on käsillä.

3. Älä pelkää oppia uusia kieliä, kehyksiä ja järjestelmiä. Ne ovat usein helpompia kuin luulet aluksi.

Ja suuret kiitokset lonekoreanille unelmieni toteuttamisesta

Jos olet kiinnostunut sovelluksen kehityksestä, voit liittyä postituslistallemme. Pieni tiimi ja minä pyrimme tekemään täyden version auttaaksemme rikkoutuneita, matkustavia tai pieniä lapsia pääsemään mahtavaan kannettavaan kitaraan missä tahansa.

Haluaisimme todella apua erityisesti graafisilta suunnittelijoilta, kitaristeilta ja koodereilta kaiken testaamiseen ja täydentämiseen.

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