Air - True Mobile Air Guitar (protótipo): 7 etapas (com fotos)

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:34

OK, então, Este será um breve instrutivo sobre a primeira parte de finalmente me aproximar de um sonho de infância meu.

Quando eu era pequeno, sempre assistia meus artistas e bandas favoritos tocar violão imaculadamente.

À medida que cresci, fui grato o suficiente por aprender a tocar guitarra e até tocar guitarra pertencente a outras pessoas, mas ainda não tenho a minha própria:(Então eu decidi finalmente sentar e fazer um que funcione completamente no telefone, use visão computacional e permita que pessoas como eu queiram um violão, mas podem estar viajando, falidos ou jovens demais para conseguir um ainda!

Você pode encontrar o aplicativo protótipo neste site

Para ver como jogar, vá para a etapa "Concluído".

* Certifique-se de usá-lo em seu telefone e vire a tela de lado para o modo paisagem *

Aproveitar!

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

Suprimentos:

1. Smart Phone

2. Computador desktop ou laptop (para programação)

Etapa 1: Histórico e nota sobre o código

Este projeto é em grande parte um projeto codificado destinado a ser executado inteiramente no telefone.

Ao fazer este projeto, experimentei vários outros aplicativos e procurei outros dispositivos atualmente no mercado, como a guitarra AirJamz ou Kurv, guitarras portáteis ou mesmo o aplicativo Real Guitar na Play Store.

Os problemas que descobri faltar em muitos deles foram:

1. Alguns dispositivos externos necessários

2. Quase todos os aplicativos não permitiam que você tocasse acordes ou música reais e eram apenas simuladores de trastes

3. Dispositivos externos eram muito caros e muitos guitarristas recomendaram apenas comprar uma guitarra de verdade

Estes são retratados nas imagens que acompanham.

E, portanto, o aplicativo Air precisa resolver esses problemas ao mesmo tempo em que pode ser executado inteiramente no telefone. Acredito que isso seja possível porque em 2020 teremos uma tecnologia de navegador móvel muito melhor e muitas melhorias na visão computacional que podem nos permitir fazer maravilhas com uma única câmera RGB.

Então, comecei a fazer alguns esboços de como seria e como funcionaria antes de começar totalmente.

Também extraí meus marcos de codificação, portanto, neste instrutível, em vez de entediá-lo com o código, vou levá-lo através do meu processo de design e anexar o código anotado no final para você ler e examinar se precisar.

O código completo pode ser encontrado em https://github.com/msimbao/air e eu recomendo estruturar seus arquivos de código de forma semelhante a este.

Observe também que, para que o aplicativo seja executado, ele precisa estar hospedado. Até agora, descobri que ele só rodava quando hospedado no github.:)

Etapa 2: Ação de dedilhar

O primeiro grande marco de codificação foi encontrar uma maneira de replicar uma batida digitalmente sem qualquer periferia externa. Meu pensamento imediato foi usar a câmera frontal RGB do meu telefone.

Meu pensamento era que se uma pessoa tem um acorde que deseja tocar, então, quando ela passar a mão na frente da câmera, um som será tocado.

Depois de descobrir isso, eu precisava de uma boa linguagem de programação que pudesse ser usada para fazer uma boa interface com a câmera RGB.

Eu me conformei com o Javascript porque eu poderia fazer um aplicativo multiplataforma com React Native ou outro ou poderia apenas hospedar a guitarra em um site e estar disponível para todos.

Em seguida, descobri diferentes maneiras de descobrir como fazer o movimento da mão disparar uma ação que poderia ser um acorde tocando, mas havia muitas maneiras de fazer isso.

O aprendizado de máquina funcionou muito bem quando experimentei os serviços da IBM e treinei cerca de 3.000 imagens durante uma semana para reconhecimento de deslize e de acordes. Também experimentei o handtrack.js da victordibia. Infelizmente, ambos eram incrivelmente lentos em telefones celulares.

Então me deparei com a detecção de movimento e uma implementação pelo lonekorean em diffcam.com. Aprendi que é possível usar a webcam para gravar dois quadros separados e depois calcular a diferença entre os quadros e dar uma pontuação à diferença. Se essa pontuação exceder um certo limite, eu então executo uma ação.

O lonekorean também fez um motor para sua câmera diferencial que decidi usar para a guitarra Air e funcionou perfeitamente para obter a partitura de movimento!

Em anexo estão fotos de tentativas de treinar modelos de aprendizado de máquina, bem como o exemplo de diffcam.com com o qual aprendi.

Nota: neste protótipo atual, dedilhar meio que se repete, para interrompê-lo, simplesmente segure o acorde que deseja tocar a seguir. Este é um bug que esperamos corrigir no futuro.

O código para o strum completo é encontrado no arquivo script.js anexado aqui e o mecanismo diffcam de lonekorean está aqui.

Etapa 3: reconhecimento de acordes

O próximo marco de codificação foi encontrar uma maneira de lidar com o reconhecimento de acordes ao vivo.

Eu queria que um usuário fosse capaz de replicar formas reais de acordes e, assim, praticar o bom posicionamento das mãos e também ajudá-los a praticar diferentes acordes.

Como na última etapa, experimentei o aprendizado de máquina para reconhecimento de acordes, mas era muito lento em telefones celulares.

Então aprendi algo com o aplicativo Real Guitar que pode ser possível colocar uma escala na tela do telefone e usar a tela para gerar formas de acordes.

Eu então tive que aprender como permitir a interação multitoque em javascript e encontrei um tutorial incrível e um exemplo da documentação do Mozilla

As interações de toque podem ser complicadas, especialmente em Javascript, mas a ideia é que podemos criar certos divs e, em seguida, definir funções para lidar com diferentes eventos de toque:

1. touchStart: Quando um dedo toca a tela

2. touchEnd: Quando o dedo sai

3. touchMove: Quando o dedo ainda está na tela, mas muda de posição

Em seguida, contornamos essas funções para definir nossos próprios elementos que respondem a diferentes eventos e combinações de toque.

Em nosso caso, projetamos uma fretboard usando CSS e, em seguida, usando Javascript, informamos ao aplicativo que, quando certos divs são pressionados juntos, um acorde deve ser reconhecido.

Podemos então definir um objeto de áudio para o qual passaremos o acorde e, em seguida, reproduzir esse áudio quando ocorrer um evento de deslize.

Para definir diferentes combinações de acordes, fiz o braço da guitarra usando essa imagem e, em seguida, apenas configurei cada posição especial para ser um div que eu pudesse tocar e combinar com os outros.

O código para definir a progressão de acordes é encontrado aqui e o controlador do braço da guitarra é encontrado no código em anexo.

Etapa 4: Encontrar sons de acordes

Agora que nosso sistema está configurado para reconhecer, precisamos de alguns sons de acordes reais.

Felizmente, o freesound.com sempre vem em meu socorro quando preciso de amostras de áudio. Eu simplesmente procurei por acordes e encontrei um pacote incrível de acordes maiores de danglada.

Em seguida, baixei e editei usando o audacity para ter certeza de que o som começou imediatamente, em vez da curta pausa no início da maioria deles quando estavam sendo gravados.

Para recortá-los usando o audacity, simplesmente arrastei-os para o aplicativo e selecionei a parte do som que desejo (toda a parte ondulada e nenhuma das seções de linha plana que não têm som). Em seguida, vou para a guia Editar> Remover especial> Cortar áudio. Então eu cheguei na guia Tracks> Align Tracks> Start to Zero. Em seguida, vou para o arquivo e, em seguida, Exportar> Exportar como WAV.

Exporto como WAV porque achei mais fácil lidar com projetos de áudio Javascript.

Em seguida, usei glitch.com para hospedar esses arquivos porque eles têm uma rede de distribuição de conteúdo incrível que pode ser usada para diferentes projetos que você tem. Outra opção poderia ser usar o firebase, que é meu goto para diferentes projetos que podem ter mais informações para armazenar, como o aplicativo de inventário do makerspace para o makerspace da minha faculdade.

Você simplesmente tem que arrastar e soltar os ativos para o diretório do projeto e, em seguida, você pode encontrar um link ao clicar na pasta de ativos e clicar no ativo que deseja obter. O Glitch produzirá um URL CDN exclusivo para o seu ativo. Por exemplo, aqui está o link para o som de acorde de lá maior.

Posso então vincular todos esses acordes em uma função getChord que procurará quando uma combinação específica de posições do traste foi pressionada e, em seguida, atribuir um acorde apropriado para o aplicativo tocar quando ocorrer um evento de deslizar a mão.

Etapa 5: Concluindo e hospedando o aplicativo inteiro

Há muitas maneiras de hospedar.

Honestamente, o melhor que descobri é simplesmente usar o github. Isso ocorre porque, se você programou bem um aplicativo, pode fazer com que todo o seu back-end seja servido por um banco de dados ou firestore do firebase ou até mesmo usar um CDN do glitch.com e outros locais para armazenar ativos.

Para hospedar o projeto no github, tudo que você precisa fazer é abrir uma conta no github e criar um novo repositório. Então, para facilitar a configuração, depois de colocar o nome do projeto, certifique-se sempre de adicionar uma licença (não sou um especialista mas descobri que isso facilita minha vida). Eu sempre uso apenas uma licença pública como a GNU.

Assim que o repositório estiver configurado, podemos apenas arrastar e soltar nossos arquivos no repositório e clicar no botão verde de confirmação na parte inferior.

Em seguida, vamos para a guia Configurações com o ícone de engrenagem na extremidade direita da página do repositório sob os botões de estrela e relógio. Uma vez nas configurações, role para baixo até ver a caixa Github Pages. Mude o código-fonte para o ramo mestre e escolha um tema, se desejar. Você pode aprender a usar temas pesquisando-os no Google (nunca os uso porque geralmente trago meu próprio CSS e ideias de tema).

Quando a página estiver pronta, você obterá um destaque verde e uma marca informando que seu site foi publicado e pode ser acessado.

Etapa 6: Concluído

Agora você pode desfrutar de uma incrível sessão de jam no conforto de seus próprios fones de ouvido, no quarto ou no trem. Adicione mais alguns acordes se quiser e até mesmo brinque com as posições dos trastes da guitarra.

Uma nota rápida sobre detecção de movimento

1. O limite para um toque de guitarra pode ser ajustado no arquivo script.js, mas certifique-se de que, quando estiver usando o aplicativo, o fundo que seu telefone vê esteja relativamente parado.

2. Por exemplo, no trem, é melhor sentar e colocar os fones de ouvido e virar o telefone para dentro de modo que, se os passageiros estiverem se movendo ao seu redor, a câmera do telefone só possa ver o movimento da mão na maior parte do tempo.

3. A mão que segura o telefone precisa estar relativamente imóvel, dependendo do seu limite. Acho que vou executar alguns testes com um limite alto e atualizar os limites para ser mais específico.

Jogar:

Carregue o aplicativo em seu navegador da web e incline-o para o modo paisagem.

Então, quando você balança a mão, um acorde toca, no entanto, ele continuará tocando até que você toque na tecla F no canto direito mais baixo.

Como alternativa, você pode interromper o som fazendo uma combinação de acordes.

Quando você faz uma combinação de acordes, o som atual para e, em seguida, um novo som de acorde é selecionado.

Etapa 7: coisas aprendidas e palavras finais

Eu realmente adorei trabalhar neste projeto, mesmo que tenha demorado muito para fazer o protótipo e produzir o aplicativo enquanto eu trabalhava em outros projetos e no trabalho de casa. Eu aprendi algumas coisas incríveis ao longo do caminho também;

1. Ao projetar produtos digitais, sempre certifique-se de fazer seus protótipos o mais rápido possível, porque suas primeiras suposições estarão erradas e você precisa repassá-las rapidamente para chegar ao fim.

2. Evite gastar dinheiro em um projeto tanto quanto possível. Sempre reutilize tudo o que puder e sempre comece com coisas simples que você tem em mãos.

3. Não tenha medo de aprender novas linguagens, estruturas e sistemas. Muitas vezes são mais fáceis do que você pensa no início.

E muito obrigado ao Ionekorean por tornar meus sonhos realidade

Se você estiver interessado em como o aplicativo se desenvolve, você pode entrar em nossa lista de e-mails. Uma pequena equipe e eu estaremos trabalhando para fazer uma versão completa para ajudar pessoas que estão sem dinheiro, viajando ou crianças pequenas a terem acesso a uma incrível guitarra portátil onde quer que estejam.

Nós realmente adoraríamos alguma ajuda, especialmente de designers gráficos, guitarristas e programadores para testar e desenvolver tudo.

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