Air - True Mobile Air Guitar (prototipo): 7 pasos (con imágenes)

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:40

Bueno entonces, Este será un instructivo muy breve sobre la primera parte de finalmente acercarme a un sueño mío de la infancia.

Cuando era un niño, siempre veía a mis artistas y bandas favoritos tocar la guitarra de manera impecable.

A medida que crecí, estaba lo suficientemente agradecido de aprender a tocar una guitarra e incluso tocar algunas que eran propiedad de otros, pero todavía no tengo la mía propia:(Así que finalmente decidí sentarme y hacer una que funcione completamente en el teléfono, use visión por computadora y permita a personas como yo que quieren una guitarra pero que pueden estar viajando, arruinadas o son demasiado jóvenes para conseguir una.

Puede encontrar la aplicación prototipo en este sitio web

Para ver cómo se juega, vaya al paso "Listo".

* Asegúrese de usarlo en su teléfono y gire la pantalla hacia los lados al modo horizontal *

¡Disfrutar!

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

Suministros:

1. Teléfono inteligente

2. Computadora de escritorio o portátil (para programación)

Paso 1: Antecedentes y nota sobre el código

Este proyecto es en gran parte un proyecto codificado destinado a ejecutarse completamente en el teléfono.

Al idear este proyecto, probé varias otras aplicaciones y busqué otros dispositivos actualmente en el mercado como la guitarra AirJamz o Kurv, guitarras portátiles o incluso la aplicación Real Guitar en Play Store.

Los problemas que encontré que faltaban en muchos de ellos fueron:

1. Algunos dispositivos externos necesarios

2. Casi todas las aplicaciones no te permitían tocar acordes o música reales y eran solo simuladores de trastes.

3. Los dispositivos externos eran bastante caros y muchos guitarristas recomendaron simplemente comprar una guitarra real.

Estos se muestran en las imágenes adjuntas.

Y, por lo tanto, la aplicación Air tiene que resolver estos problemas mientras se puede ejecutar por completo en el teléfono. Creo que esto es posible porque en 2020 tenemos una tecnología de navegador móvil mucho mejor y muchas mejoras en la visión por computadora que pueden permitirnos hacer maravillas con una sola cámara RGB.

Así que procedí a hacer algunos bocetos de cómo se vería y cómo funcionaría antes de comenzar por completo.

También dibujé mis hitos de codificación, por lo que en este instructivo, en lugar de aburrirlo con el código, lo guiaré a través de mi proceso de diseño y adjuntaré el código anotado al final para que lo lea y lo vea si lo necesita.

El código completo se puede encontrar en https://github.com/msimbao/air y recomiendo estructurar sus archivos de código de manera similar a esto.

También tenga en cuenta que para que la aplicación se ejecute, debe estar alojada. Hasta ahora solo lo he encontrado para ejecutarse cuando está alojado en github.:)

Paso 2: Acción de rasgueo

El primer hito importante de la codificación fue encontrar una manera de replicar un rasgueo digitalmente sin ninguna periferia externa. Mi pensamiento inmediato fue usar la cámara frontal RGB de mi teléfono.

Mi pensamiento era que si una persona tiene un acorde que quiere tocar, cuando pase la mano frente a la cámara, se reproducirá un sonido.

Después de darme cuenta de eso, necesitaba un buen lenguaje de programación que pudiera usarse para interactuar bien con la cámara RGB.

Me conformé con Javascript porque podía hacer una aplicación multiplataforma con React Native o algo más o simplemente podía alojar la guitarra en un sitio web y podría estar disponible para todos.

Luego encontré diferentes formas de averiguar cómo hacer que el deslizamiento de la mano desencadene una acción que podría ser un sonido de acorde, pero había muchas formas de hacerlo.

El aprendizaje automático funcionó muy bien cuando probé los servicios de IBM y entrené alrededor de 3000 imágenes durante una semana para el reconocimiento de deslizamientos y el reconocimiento de acordes. También probé handtrack.js de victordibia. Desafortunadamente, ambos eran increíblemente lentos con los teléfonos móviles.

Luego me topé con la detección de movimiento y una implementación del lonekorean en diffcam.com. Aprendí que es posible usar la cámara web para grabar dos fotogramas separados y luego calcular la diferencia entre los fotogramas y dar una puntuación a la diferencia. Si ese puntaje excede un cierto umbral, entonces ejecuto una acción.

El lonekorean también hizo un motor para su cámara de diferencia que decidí usar para la guitarra Air y funcionó perfectamente para conseguirme la partitura en movimiento.

Se adjuntan imágenes de intentos de entrenar modelos de aprendizaje automático, así como el ejemplo de diffcam.com del que aprendí.

Nota: En este prototipo actual, el rasgueo se repite una y otra vez, para detenerlo, simplemente mantenga presionado el acorde que desea tocar a continuación. Este es un error que esperamos corregir en el futuro.

El código para el rasgueo completo se encuentra en el archivo script.js adjunto aquí y el motor diffcam de lonekorean está aquí.

Paso 3: reconocimiento de acordes

El siguiente hito de la codificación fue encontrar una forma de manejar el reconocimiento de acordes en vivo.

Quería que un usuario pudiera replicar formas reales de acordes y así practicar una buena colocación de las manos y también ayudarlos a practicar diferentes acordes.

Como en el último paso, probé el aprendizaje automático para el reconocimiento de acordes, pero fue muy lento en los teléfonos móviles.

Luego aprendí algo de la aplicación Real Guitar de que podría ser posible colocar un diapasón en la pantalla del teléfono y usar la pantalla para generar formas de acordes.

Luego tuve que aprender cómo permitir la interacción multitáctil en javascript y encontré un tutorial y un ejemplo asombrosos de los documentos de Mozilla

Las interacciones táctiles pueden ser complicadas, especialmente en Javascript, pero la idea es que podamos crear ciertos divs y luego definir funciones para manejar diferentes eventos táctiles:

1. touchStart: cuando un dedo toca la pantalla

2. touchEnd: cuando el dedo se va

3. touchMove: cuando el dedo todavía está en la pantalla pero cambia de posición

Luego trabajamos en torno a esas funciones para definir nuestros propios elementos que responden a diferentes eventos táctiles y combinaciones.

En nuestro caso, diseñamos un tablero de trastes usando CSS y luego usando Javascript, le decimos a la aplicación que cuando ciertos div se presionan juntos, se debe reconocer un acorde.

Luego podemos definir un objeto de audio al que pasaremos el acorde y luego reproducir ese audio cuando ocurra un evento de deslizamiento.

Para definir diferentes combinaciones de acordes, hice el diapasón usando esta imagen y luego configuré cada posición especial para que fuera un div que pudiera tocar y combinar con otros.

El código para definir la progresión de acordes se encuentra aquí y el controlador del diapasón se encuentra en el código adjunto.

Paso 4: encontrar sonidos de acordes

Ahora que nuestro sistema está configurado para reconocer, necesitamos algunos sonidos de acordes reales.

Afortunadamente, freesound.com siempre me rescata cuando necesito muestras de audio. Simplemente busqué acordes y encontré un increíble paquete de acordes mayores de danglada.

Luego los descargué y los edité usando audacity para asegurarme de que el sonido comenzara de inmediato en lugar de la breve pausa al comienzo de la mayoría de ellos cuando se estaban grabando.

Para recortarlos usando audacity, simplemente los arrastré a la aplicación y luego seleccioné la parte del sonido que quiero (la parte ondulada completa y ninguna de las secciones de línea plana que no tienen sonido). Luego voy a la pestaña Editar> Eliminar especial> Recortar audio. Luego llegué a la pestaña Tracks> Align Tracks> Start to Zero. Luego voy al archivo, luego Exportar> Exportar como WAV.

Exporto como WAV porque lo he encontrado más fácil de manejar en proyectos de audio de Javascript.

Luego utilicé glitch.com para alojar estos archivos porque tienen una red de entrega de contenido increíble que se puede usar para diferentes proyectos que tienes. Otra opción podría ser usar firebase, que es mi goto para diferentes proyectos que podrían tener más información para almacenar, como la aplicación de inventario de MakerSpace para el MakerSpace de mi universidad.

Simplemente tiene que arrastrar y soltar los activos en el directorio del proyecto y luego puede encontrar un enlace cuando hace clic en la carpeta de activos y hace clic en el activo que desea obtener. Entonces, Glitch producirá una URL de CDN única para su activo. Por ejemplo, aquí está el enlace al sonido de acorde de La mayor.

Luego puedo vincular todos estos acordes en una función getChord que buscará cuando se presione una combinación específica de posiciones de trastes y luego asignar un acorde apropiado para que la aplicación lo reproduzca cuando ocurra un evento de deslizamiento de la mano.

Paso 5: Finalización y alojamiento de toda la aplicación

Hay muchas formas de realizar el hospedaje.

Honestamente, lo mejor que he encontrado es simplemente usar github. Esto se debe a que si ha programado bien una aplicación, puede hacer que todo su back-end sea servido por una base de datos o firestore de firebase o incluso usar un CDN de glitch.com y otros lugares para almacenar activos.

Para alojar el proyecto en github, todo lo que tiene que hacer es abrir una cuenta de github, crear un nuevo repositorio. Luego, para que sea más fácil de configurar, después de haber puesto el nombre de su proyecto, asegúrese siempre de agregar una licencia (no soy un experto, pero he descubierto que me hace la vida más fácil). Siempre uso una licencia pública como GNU.

Una vez que el repositorio está configurado, podemos simplemente arrastrar y soltar nuestros archivos en el repositorio y hacer clic en el botón verde de confirmación en la parte inferior.

Luego vamos a la pestaña Configuración con el ícono de ajustes en el extremo derecho de la página del repositorio debajo de los botones de estrella y reloj. Una vez en la configuración, desplácese hacia abajo hasta que vea el cuadro Páginas de Github. Cambie la fuente a la rama maestra y elija un tema si lo desea. Puedes aprender a usar temas buscándolos en Google (nunca los uso porque a menudo traigo mi propio CSS e ideas de temas).

Cuando la página esté lista, aparecerá un resaltado verde y una marca que le indicará que su sitio está publicado y se puede acceder a él.

Paso 6: Listo

Ahora puede disfrutar de una increíble sesión de improvisación en la comodidad de sus propios auriculares, en la habitación o en el tren. Agregue algunos acordes más si lo desea e incluso juegue con las posiciones de los trastes de la guitarra.

Una nota rápida sobre la detección de movimiento

1. El umbral para un golpe de guitarra se puede ajustar en el archivo script.js, pero asegúrese de que cuando esté usando la aplicación, el fondo que ve su teléfono sea relativamente quieto.

2. Por ejemplo, en el tren, es mejor sentarse, ponerse los auriculares y girar el teléfono hacia adentro para que, si los pasajeros se mueven a su alrededor, la cámara del teléfono solo pueda ver cómo se mueve la mano la mayor parte del tiempo.

3. La mano que agarra el teléfono debe estar relativamente quieta dependiendo de su umbral. Creo que realizaré algunas pruebas con un umbral alto y actualizaré los límites en el futuro para que sean más específicos.

Para jugar:

Cargue la aplicación en su navegador web, luego inclínela al modo horizontal.

Luego, cuando muevas la mano, se reproducirá un acorde, sin embargo, seguirá sonando hasta que toques la tecla F en la esquina inferior derecha.

Alternativamente, puede detener el sonido haciendo una combinación de acordes.

Cuando realiza una combinación de acordes, el sonido actual se detiene y luego se selecciona un nuevo sonido de acorde.

Paso 7: Cosas aprendidas y palabras finales

Realmente me encantó trabajar en este proyecto, incluso si me llevó mucho tiempo crear el prototipo y producir la aplicación mientras trabajaba en otros proyectos y tareas a domicilio. También aprendí un par de cosas increíbles en el camino;

1. Al diseñar productos digitales, asegúrese siempre de hacer sus prototipos lo más rápido posible porque sus primeras suposiciones serán incorrectas y tendrá que repasarlas rápidamente para llegar al final.

2. Evite gastar dinero en un proyecto tanto como sea posible. Siempre reutilice todo lo que pueda y siempre comience con cosas simples que tenga a mano.

3. No tenga miedo de aprender nuevos lenguajes, marcos y sistemas. A menudo son más fáciles de lo que cree al principio.

Y muchas gracias al lonekorean por hacer realidad mis sueños.

Si está interesado en cómo se desarrolla la aplicación, puede unirse a nuestra lista de correo. Un pequeño equipo y yo trabajaremos para hacer una versión completa para ayudar a las personas que están en quiebra, que viajan o que los niños pequeños tengan acceso a una guitarra portátil increíble donde sea que estén.

Realmente nos encantaría recibir ayuda, especialmente de diseñadores gráficos, guitarristas y codificadores para probar y desarrollar todo.

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