Air - True Mobile Air Guitar (prototip): 7 passos (amb imatges)

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:10

Està bé, Aquest serà un breu instructiu sobre la primera part d’acostar-me finalment a un somni de la meva infància.

Quan era petit, sempre veia els meus artistes i grups preferits tocar la guitarra immaculadament.

Quan vaig créixer, vaig estar prou agraït per aprendre a tocar una guitarra i fins i tot tocar-ne d’altres, però encara no en tinc el meu:(Per tant, vaig decidir seure i fer-ne un que funcionés completament al telèfon, que utilitzi visió per ordinador i permeti a persones com jo que vulguin una guitarra però que viatgin, es trenquin o siguin massa joves per aconseguir-ne una.

Podeu trobar l'aplicació prototip en aquest lloc web

Per veure com es juga, aneu al pas "Ja està".

* Assegureu-vos d'utilitzar-lo al telèfon i gireu la pantalla cap al costat en mode horitzontal *

Gaudeix-ne!

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

Subministraments:

1. Telèfon intel·ligent

2. Ordinador de sobretaula o portàtil (per a la programació)

Pas 1: antecedents i nota sobre el codi

Aquest projecte és en gran part un projecte codificat dirigit a executar-se completament al telèfon.

En presentar aquest projecte, vaig provar diverses altres aplicacions i vaig buscar altres dispositius que hi ha actualment al mercat, com ara la guitarra AirJamz o Kurv, guitarres portàtils o fins i tot l’aplicació Real Guitar a la botiga de jocs.

Els problemes que he trobat a faltar en molts d’ells són:

1. Alguns necessitaven dispositius externs

2. Gairebé totes les aplicacions no us permetien tocar acords o música reals i eren simplement simuladors de trasts

3. Els dispositius externs eren bastant cars i molts guitarristes recomanaven comprar una guitarra real

Es mostren a les imatges adjuntes.

Així doncs, l’aplicació Air ha de resoldre aquests problemes alhora que pot funcionar completament al telèfon. Crec que això és possible perquè el 2020 tenim una tecnologia de navegador mòbil molt millor i moltes millores en la visió per ordinador que ens poden permetre fer meravelles amb una sola càmera RGB.

Així que vaig procedir a fer alguns esbossos de com seria i com funcionaria abans de començar completament.

També vaig treure les meves fites de codificació, de manera que, en aquest instructiu, en lloc d’avorrir-vos amb el codi, us recorreré el procés de disseny i us adjuntaré el codi anotat al final per llegir-lo i mirar-lo si ho necessiteu.

Es pot trobar tot el codi a https://github.com/msimbao/air i us recomano estructurar els fitxers de codi de manera similar a aquesta.

Tingueu en compte també que perquè l’aplicació s’executi, cal allotjar-la. Fins ara només he trobat que s’executaria quan s’allotjava a github.:)

Pas 2: Acció de raspar

La primera fita important de la codificació va ser trobar una manera de replicar digitalment un strum sense cap perifèria externa. El meu pensament immediat era utilitzar la càmera frontal RGB del meu telèfon.

El meu pensament era que si una persona té un acord que vol tocar, quan es llisqui la mà davant de la càmera, es reproduirà un so.

Després d’esbrinar-ho, necessitava un bon llenguatge de programació que es pogués utilitzar per connectar-me bé amb la càmera RGB.

Em vaig conformar amb Javascript perquè podia fer una aplicació multiplataforma amb React Native o alguna cosa més o simplement allotjar la guitarra en un lloc web i podia estar disponible per a tothom.

Aleshores vaig trobar diferents maneres d’esbrinar com fer lliscar la mà per provocar una acció que pot ser un so d’acords, però hi havia moltes maneres de fer-ho.

L’aprenentatge automàtic va funcionar molt bé quan vaig provar els serveis d’IBM i vaig entrenar unes 3000 imatges durant una setmana per al reconeixement de lliscament i el reconeixement d’acords. També he provat handtrack.js de victordibia. Malauradament, tots dos eren increïblement lents en els telèfons mòbils.

Després em vaig trobar amb la detecció de moviment i la implementació de lonekorean a diffcam.com. Vaig aprendre que era possible utilitzar la càmera web per gravar dos fotogrames separats i després calcular la diferència entre els fotogrames i donar una puntuació a la diferència. Si aquesta puntuació supera un llindar determinat, executaré una acció.

El solekorean també va crear un motor per a la seva càmera de fotos que vaig decidir utilitzar per a la guitarra Air i va funcionar perfectament per aconseguir-me la partitura de moviment.

Adjuntem imatges d’intents d’entrenament de models d’aprenentatge automàtic, així com l’exemple de diffcam.com que he après.

Nota: En aquest prototip actual, el rebombori es repeteix una i altra vegada, per aturar-lo, només cal que mantingueu l’acord que voleu tocar a continuació. Es tracta d’un error que esperem solucionar.

El codi per a l'estrum complet es troba al fitxer script.js adjunt aquí i el motor diffcam de lonekorean és aquí.

Pas 3: reconeixement d’acords

La següent fita de codificació va ser llavors trobar una manera de gestionar el reconeixement d’acords en directe.

Volia que un usuari pogués reproduir formes d’acords reals i així practicar una bona col·locació de la mà i també ajudar-los a practicar diferents acords.

Com a l'últim pas, vaig provar l'aprenentatge automàtic per al reconeixement d'acords, però va ser molt lent als telèfons mòbils.

Després vaig aprendre alguna cosa de l’aplicació Real Guitar que podria ser possible col·locar un diapasó a la pantalla del telèfon i fer servir la pantalla per generar formes d’acords.

Aleshores vaig haver d’aprendre a permetre la interacció multitáctil en javascript i vaig trobar un fantàstic tutorial i un exemple dels documents de Mozilla

Les interaccions tàctils poden ser complicades, sobretot a Javascript, però la idea és que puguem crear determinats divs i definir funcions per gestionar diferents esdeveniments tàctils:

1. Toca Inici: quan un dit toca la pantalla

2. tocar Final: quan surt el dit

3. Toca Mou: quan el dit encara està a la pantalla però canvia de posició

A continuació, treballem al voltant d’aquestes funcions per definir els nostres propis elements que responen a diferents combinacions i esdeveniments tàctils.

En el nostre cas, dissenyem un tauler de trasts mitjançant CSS i, a continuació, mitjançant Javascript, indiquem a l’aplicació que quan es premen certs div, s’ha de reconèixer un acord.

A continuació, podem definir un objecte d'àudio al qual passarem l'acord i reproduirem aquest àudio quan es produeixi un esdeveniment de lliscament.

Per definir diferents combinacions d’acords, vaig crear el tauler de trasts utilitzant aquesta imatge i després vaig establir cada posició especial perquè fos un div que pogués tocar i combinar amb altres.

El codi per definir la progressió dels acords es troba aquí i el controlador del diapasó es troba al codi adjunt.

Pas 4: trobar sons d'acord

Ara que el nostre sistema està reconegut, necessitem alguns sons d’acords reals.

Afortunadament, freesound.com sempre em rescata quan necessito mostres d'àudio. Simplement vaig buscar acords i vaig trobar un increïble paquet d’acords importants de danglada.

Després els vaig descarregar i editar amb audàcia per assegurar-me que el so començava immediatament en lloc de fer una breu pausa al començament de la majoria d'ells quan es gravaven.

Per retallar-los amb audàcia, simplement els he arrossegat a l'aplicació i després he seleccionat la part del so que desitjo (tota la part ondulada i cap de les seccions de línia plana que no tinguin so). Després vaig a la pestanya Edita> Suprimeix especial> Retalla àudio. Després he arribat a la pestanya Pistes> Alinea pistes> Inicia a zero. Vaig a l’arxiu i després Exporto> Exporta com a WAV.

Exporto com a WAV perquè he estat més fàcil de tractar en projectes d'àudio Javascript.

Després vaig fer servir glitch.com per allotjar aquests fitxers perquè tenen una xarxa de distribució de contingut increïble que es pot utilitzar per a diferents projectes que tingueu. Una altra opció podria ser utilitzar Firebase, que és el que em dedico a diferents projectes que puguin tenir més informació per emmagatzemar, com l'aplicació d'inventari makerspace per al makerspace de la meva universitat.

Simplement heu d’arrossegar i deixar anar els recursos al directori del projecte i, a continuació, podeu trobar un enllaç quan feu clic a la carpeta de recursos i feu clic a l’actiu que voleu obtenir. Glitch produirà una URL de CDN única per al vostre recurs. Per exemple, aquí teniu l’enllaç al so d’acord A major.

A continuació, puc enllaçar tots aquests acords en una funció getChord que buscarà quan s’hagi premut una combinació específica de posicions del trast i, després, assignar un acord adequat perquè l’aplicació es reprodueixi quan es produeixi un esdeveniment de lliscament manual.

Pas 5: finalitzar i allotjar l'aplicació sencera

Hi ha moltes maneres de fer allotjament.

Sincerament, el millor que he trobat és simplement utilitzar github. Això es deu al fet que si heu programat bé una aplicació, podeu fer servir tota la vostra base de dades mitjançant una base de dades o una botiga de foc de firebase o fins i tot fer servir una CDN de glitch.com i altres llocs on emmagatzemar recursos.

Per allotjar el projecte a github, tot el que heu de fer és obrir un compte de github, crear un nou dipòsit. A continuació, per facilitar la configuració, després d’haver posat el nom del projecte, assegureu-vos sempre d’afegir una llicència (no sóc expert, però he comprovat que em facilita la vida). Sempre faig servir una llicència pública com la GNU.

Un cop configurat el dipòsit, només podem arrossegar i deixar anar els fitxers al dipòsit i fer clic al botó de confirmació verd a la part inferior.

A continuació, anem a la pestanya Configuració amb la icona d'engranatge a l'extrem dret de la pàgina del dipòsit, sota els botons d'estrella i de rellotge. Un cop a la configuració, desplaceu-vos cap avall fins que aparegui el quadre Pàgines de Github. Canvieu la font a branca mestra i trieu un tema si voleu. Podeu aprendre a utilitzar temes buscant-los en google (no els faig servir mai perquè sovint aporto les meves pròpies idees de temes i CSS).

Quan la pàgina estigui llesta, obtindreu un marcat i marcat de color verd que us indicarà que el vostre lloc està publicat i que es pot accedir a ell.

Pas 6: Fet

Ara podeu gaudir d’una impressionant jam session a la comoditat dels vostres auriculars, del dormitori o del tren. Afegiu alguns acords més si voleu i fins i tot toqueu-los amb les posicions del trast de la guitarra.

Una nota ràpida sobre la detecció de moviment

1. El llindar d'un lliscament de guitarra es pot ajustar al fitxer script.js, però assegureu-vos que, quan utilitzeu l'aplicació, el fons que veu el vostre telèfon sigui relativament immòbil.

2. Per exemple, al tren, és millor seure i posar els auriculars i girar el telèfon cap a dins, de manera que si els passatgers es mouen al voltant de vosaltres, la càmera del telèfon només us pot veure moure la mà la major part del temps.

3. La mà que agafi el telèfon ha d'estar relativament quieta segons el vostre llindar. Crec que faré algunes proves amb un llindar elevat i actualitzaré els límits per ser més específics.

Jugar:

Carregueu l'aplicació al navegador web i inclineu-la al mode horitzontal.

Aleshores, quan gireu la mà, es tocarà un acord, però continuarà tocant fins que toqueu la tecla F a l'extrem inferior dret.

Com a alternativa, podeu aturar el so fent una combinació d’acords.

Quan feu una combinació d'acords, el so actual s'atura i se selecciona un nou acord d'acords.

Pas 7: Coses apreses i paraules finals

M’ha agradat molt treballar en aquest projecte, fins i tot si ha trigat molt a prototipar i fer que l’aplicació es produís mentre treballava en altres projectes i treballs a casa. Al llarg del camí també vaig aprendre un parell d’increïbles coses;

1. Quan dissenyeu productes digitals, assegureu-vos sempre de fer els vostres prototips el més ràpid possible perquè els vostres primers supòsits seran equivocats i heu de superar-los ràpidament per arribar al final.

2. Eviteu gastar diners en un projecte tant com sigui possible. Reutilitzeu sempre el que pugueu i comenceu sempre per coses senzilles que tingueu a mà.

3. No tingueu por d'aprendre nous idiomes, marcs i sistemes. Sovint són més fàcils del que es pensa al principi.

I enormes gràcies al solitari per fer realitat els meus somnis

Si us interessa saber com es desenvolupa l'aplicació, podeu unir-vos a la nostra llista de correu. Un petit equip i jo estarem treballant per fer una versió completa que ajudi a les persones que estiguin en viatge, que viatgin o que els nens petits tinguin accés a una guitarra portàtil increïble allà on siguin.

Realment ens agradaria una mica d’ajuda, especialment de dissenyadors gràfics, guitarristes i codificadors, per provar i concretar tot.

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