Luva de arte: 10 etapas (com fotos)

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

A Art Glove é uma luva vestível que contém diferentes tipos de sensores para controlar gráficos de arte por meio de um Micro: bit e p5.js. Os dedos utilizam sensores de dobra que controlam os valores r, g, b e o acelerômetro nos controles Micro: bit x, coordenadas y para os gráficos. Eu criei este projeto como meu projeto de termo para meu curso de tecnologia wearable como um sênior no programa de tecnologia, artes e mídia na CU Boulder.

Suprimentos:

• Luvas de jardinagem
• BBC Micro: Bit
• 3-4 sensores Flex
• Resistores de 10K Ohm
• Fio de conexão (vermelho e preto)
• Tesoura de arame
• Tábua de pão
• Clipes de jacaré (dupla face e face simples)
• Solda
• Ferro de solda
• Agulha
• Fio
• Papel de cera
• Fita
• Tesoura
• Caneta e Lápis

Etapa 1: Dobrar as trilhas do sensor

Primeiro, vamos nos concentrar em fazer o hardware. Dessa forma, quando chegarmos à codificação, teremos o componente real da luva para usar e testar.

1. Para começar, vamos fazer os rastros nos dedos que manterão os sensores de curvatura no lugar. Esses trilhos permitem que os sensores de dobra se movam ligeiramente para frente e para trás, ao mesmo tempo que os mantém presos ao dedo para dobrar. Primeiro, vire sua luva do avesso.
2. Pegue um sensor de curvatura e coloque-o na crista média do dedo. Usando uma caneta, delineie o sensor de curvatura
3. Passe a linha pela agulha. Dê a si mesmo um pedaço generoso. Dê um nó no final do fio.
4. Começando na parte superior e na linha, basta soprar o arco do sensor de curvatura, deslizar a agulha pela luva por dentro e empurrá-la de volta na linha paralela. Puxe a agulha totalmente para que o nó fique na linha que você desenhou.
5. Puxando com força, faça 2-3 nós do outro lado. Isso garantirá que a linha não saia. Certifique-se de que está apertado para que o sensor de dobra fique seguro contra o seu dedo
6. Corte o fio deixando alguns cm. de linha no final para que o nó não se desfaça.
7. Repita as etapas 2 a 6 para todos os dedos aos quais você está conectando sensores flexíveis até que pareça a terceira à última imagem.
8. Vire sua luva para trás de forma que ela seja virada da maneira correta. Deslize seus sensores de curvatura pelos trilhos para se certificar de que eles se encaixam corretamente em sua mão

Etapa 2: Usando a comunicação serial com Micro: bit

Para ver as saídas de nossos sensores, usaremos comunicação serial. Você verá como configurar o código em Makecode na próxima etapa, mas primeiro vamos aprender como lê-lo em nosso terminal. (Observação: estou usando um Mac, então essas etapas podem ser diferentes dependendo do seu sistema operacional. Para outros sistemas operacionais, veja aqui).

1. Conecte seu Micro: bit
2. Abra seu terminal
3. digite 'ls /dev/cu.*'
4. Você deve ver algo parecido com '/dev/cu.usbmodem1422', mas o número exato dependerá do seu computador
5. Depois de executar o código, digitar 'screen /dev/cu.usbmodem1422 115200' (com seu número de porta serial específico) fornecerá a saída serial de seu Micro: bit
6. Sua saída deve ser semelhante à imagem acima, dependendo de como você formatou sua saída!

Etapa 3: prototipagem do circuito

Antes de soldar todos os nossos componentes, vamos fazer o protótipo do circuito e escrever algumas linhas de código de exemplo para ler os valores do nosso sensor e garantir que nossos componentes funcionem corretamente.

1. Usando o diagrama de circuito acima, crie um protótipo de seu circuito na placa de ensaio usando fios de jumper, resistores, as garras jacaré de um lado e seu Micro: bit.
2. Conecte seus sensores de curvatura aos pinos 0, 1 e 2.
3. Usei este código para testar meus sensores flex
4. Dobre-os algumas vezes para ver suas leituras e certifique-se de que estão funcionando corretamente

No código, a última linha "serial.writeLine" é onde estamos gravando em nossa saída serial. Você pode formatar esta saída como quiser, separei cada variável com uma vírgula e, em seguida, divida-a com uma vírgula mais tarde, mas essa parte é com você.

(Observação: depois de realizar essa etapa, descobri que um dos meus sensores de dobra tinha um chip na tinta condutora e, portanto, não estava obtendo boas leituras. É por isso que algumas das fotos me mostram trabalhando com 4 sensores. Depois de descobrir isso, fui para apenas três sensores no ponteiro, dedo médio e dedo anular. Também descobri que meus sensores de curvatura tinham a faixa mais ampla de leitura, dobrando no sentido "oposto", e é por isso que os coloquei na luva com a tinta resistiva voltada para baixo.)

Etapa 4: Testar o acelerômetro e o sensor de luz

Nesta fase, também optei por testar o acelerômetro e o sensor de luz no Micro: bit

1. Conecte seu Micro: bit ao computador
2. Baixe este código
3. Então testei o acelerômetro, os sensores de luz e de dobra junto com este código

(Observação: foi neste ponto que descobri que você não pode usar os pinos e o sensor de luz ao mesmo tempo, então não usei o sensor de luz na minha final, mas queria que você pudesse ver como ler o sensor de luz se você precisar!)

Etapa 5: soldando os sensores de dobra

Agora vamos começar a soldar nossos componentes juntos! Essa é uma parte empolgante, mas é importante ir devagar e verificar se tudo ainda está funcionando enquanto você avança para que você não chegue ao fim, tenha algo que não deu certo e não tenha certeza de onde deu errado! Eu sugiro usar suas pinças de crocodilo de dupla face aqui para verificar se cada sensor ainda funciona depois que os fios e os resistores são soldados juntos.

1. Pegue o sensor de curvatura e prenda com fita adesiva ou coloque um objeto pesado sobre ele para mantê-lo no lugar.
2. Pegue seu resistor de 10K Ohm e corte a maior parte da extremidade de modo que o cabo seja quase tão longo quanto o cabo do sensor de curvatura.
3. Pegue o seu ferro de solda e pressione-o no resistor e dobre o cabo do sensor até que estejam quentes
4. Pegue a sua solda e pressione-a no ferro quente quando ela começar a derreter sobre os componentes. Você só precisa de o suficiente para cobrir os fios.
5. Remova o ferro. Aqui, coloquei a outra luva de jardinagem e segurei o resistor e o fio no lugar enquanto a solda esfriava.
6. Prenda um pedaço longo de fio vermelho e coloque-o na junta de solda onde o resistor e o sensor de dobra se encontram. Repita as etapas 4-5. Este é o fio do pino analógico.
7. Prenda um pedaço longo de fio preto e coloque-o na extremidade do outro cabo. Repita as etapas 4-5. Este é o seu fio terra.
8. Prenda um longo pedaço de fio vermelho e prenda a outra extremidade do resistor de forma que fique quase tão comprido quanto o lado anterior. Repita as etapas 4-5. Este é o seu fio de alimentação.
9. Repita as etapas 1 a 8 para o resto dos sensores de dobra.
10. Deixe seus fios longos para que você tenha espaço para trabalhar para torná-los do comprimento correto mais tarde, ao colocá-los na broca Micro:.

Etapa 6: soldando no micro: broca e montando a luva

Agora que nossos sensores estão prontos, vamos começar a soldar na broca Micro e montar a luva. Lembre-se novamente de testar à medida que avança, usando pinças de crocodilo para certificar-se de que os componentes ainda estão funcionando depois de soldá-los.

1. Coloque os sensores e o Micro: morda a luva para ter uma ideia de onde os fios precisam ir e de quanto tempo.
2. Enrole um fio vermelho ao redor do pino de alimentação. Use cortadores de fio para descascar o fio e deixar espaços abertos para prender o fio. Faça isso também para o fio terra.
3. Contorne a luva que você não está usando. Isso nos ajudará a soldar tudo e obter o comprimento correto das coisas. Você estará fazendo tudo ao contrário, então verifique se você está soldando as coisas da maneira correta!
4. Coloque seu Micro: bit aproximadamente onde você deseja que ele seja colocado em sua mão. Faça marcas onde estão os fios de aterramento e de alimentação.
5. Prenda o fio, a alimentação ou o aterramento no lugar.
6. Prenda seu sensor de dobra no lugar.
7. Corte o fio de alimentação de forma que passe logo após a marca em toda a linha de alimentação.
8. Soldar essas peças juntas.
9. Repita as etapas 5 a 8 para os outros fios de alimentação e para os fios de aterramento.
10. Pegue a broca Micro: e coloque-a sob os fios recém-soldados. Solde a força e o aterramento nos pinos corretos.
11. Prenda os fios analógicos de forma que eles passem pelo final dos pinos e possam se enrolar na parte frontal.
12. Solde os fios nos pinos corretos.
13. Descobri que minhas leituras eram melhores e mais consistentes quando todos os fios (alimentação, aterramento e analógico) tocavam a frente e a parte de trás dos pinos.
14. Uma trilha por trilha, empurre os sensores de curva pelos dedos simultaneamente.
15. Assim que os sensores estiverem no lugar, coloque a luva e verifique se o ajuste está correto. Se você precisar adicionar faixas ou corrigir seu posicionamento, faça-o agora.
16. Assim que os sensores estiverem onde você deseja, anote onde amarrar o micro: bit no lugar. Você pode usar os pequenos orifícios de cada lado dos botões A e B ou usar os orifícios para os pinos. Use sua agulha e linha para amarrá-la no lugar em sua mão

Parabéns! Os componentes de hardware da luva agora estão completos!

Etapa 7: Micro: código de bits

Agora, vou orientá-lo no código Micro: bit. Você é mais do que bem-vindo para tornar este código o que você quiser, mas eu queria passar e explicar tudo para que você possa ver o que eu fiz, como fiz e por quê! Você pode encontrar meu código aqui.

1. Linhas 1-31. Estou usando funções predefinidas com as quais o Micro: bit vem.

   • Pressionar A diminui a contagem, que é a seleção dos gráficos disponíveis. Depois de chegar a 0, ele volta para o número mais alto.
   • Pressionar B aumenta a contagem, uma vez que você atinge o maior número de gráficos disponíveis, ele volta a 0.
   • Se o gráfico atual que você selecionou não for o que está sendo desenhado, pressione A e B simultaneamente para selecionar o novo gráfico.
   • Se o gráfico atual que você selecionou for o mesmo que está sendo desenhado, pressionar A e B simultaneamente preencherá a forma se ela puder ter um preenchimento.
   • Agitando o micro: bit define a variável de apagamento para 1, o que diz ao p5.js para apagar a tela e começar no preto. Ele pausa a execução por um segundo e, em seguida, retorna para 0 para que o usuário possa continuar a desenhar.

2. As linhas 32-64 estão configurando minhas variáveis. Era importante usar muitas variáveis para que a maioria dos valores não fossem codificados permanentemente. Eles podem ser alterados com a luva e também podem ser facilmente alterados em um lugar, em vez de atualizar um monte de valores em todos os lugares. Vou destacar alguns dos mais importantes.

   • O tamanho da tela é bom ter em uma variável para atualizar dependendo do tamanho da minha tela. O mesmo ocorre com shapeHigh. À medida que adiciono ou removo gráficos, posso atualizar esse número aqui.
   • As variáveis de alta e baixa me permitem manter o controle das altas e baixas de corrente para sensores e ter uma faixa de calibração contínua. Isso é importante porque cada pessoa que usa as luvas terá uma amplitude de movimento diferente e, portanto, diferentes altos e baixos que eles são capazes de alcançar.
3. As linhas 66-68 estão lendo os valores analógicos dos pinos para os sensores flex

4. As linhas 69-74 estão calibrando o valor alto para o dedo indicador.

   • Se um novo máximo for alcançado, ele o define como o máximo.
   • Recalibra o alcance desse dedo.
   • Usa esse novo intervalo para o mapeamento de cores
5. As linhas 75-80 estão calibrando o valor baixo para o dedo indicador.
6. As linhas 81-104 estão fazendo a mesma coisa que 4 e 5 para os dedos médio e anelar.

7. As linhas 105-107 estão mapeando os valores do meu sensor flexível para valores de cor 0-255 (ou colorLow para colorHigh, se eu não estiver fazendo a faixa completa)

   • A função de mapa embutida do Makecode não estava me dando um grande mapeamento, dado o alcance limitado que estava obtendo dos meus sensores. Então eu fiz minha própria função de mapeamento.
   • É assim que funciona. A faixa de entrada de cada dedo é determinada por ele (valor mais alto - é o valor mais baixo). O intervalo de cores, que também é o (valor de cor mais alto - valor de cor mais baixo), é dividido por cada intervalo de dedos. Este número é arredondado para o menor número inteiro e é o quociente.
   • O (valor real do sensor - o valor mais baixo do sensor) fornece o valor dentro do intervalo. Multiplicando isso pelo quociente que encontramos acima e adicionando os valores de cor mais baixos, você obtém um valor mapeado do sensor para a cor, dentro da faixa de cores.
8. A linha 109 está lendo o valor do pitch (para cima e para baixo).
9. As linhas 110-115 estão calibrando o alto e o baixo para este valor
10. A linha 116 está lendo o valor do rolo (esquerda e direita).
11. As linhas 117-122 estão calibrando o alto e o baixo para este valor
12. As linhas 123-126 mapeiam os valores de inclinação e rotação para o tamanho da tela e os arredondam para números inteiros.
13. A linha 127 grava as variáveis na saída serial usando serial.writeLine, separando cada valor por uma vírgula e espaço ",", para analisar posteriormente.

Assim que tiver o código como deseja, baixe-o e arraste-o de seus downloads para o Micro: bit (você deve vê-lo em "Locais" no lado esquerdo do seu localizador) para fazer upload do código para o Micro: bit

Etapa 8: Comunicação serial com P5.js

Para se comunicar em série com p5.js, precisamos de uma ferramenta extra. Para saber mais sobre o que está por trás dos bastidores da comunicação serial, sugiro a leitura deste artigo.

1. Baixe uma versão do aplicativo p5.js neste link. Eu tenho a versão Alpha 6, mas qualquer funcionará.
2. Use este modelo p5.js para comunicação serial. Para configurá-lo, insira o nome correto da porta serial para portName na linha 12. Este é o nome que descobrimos na etapa 2.
3. Conecte seu Micro: bit ao computador
4. Abra o aplicativo serial p5.js.
5. Selecione sua porta na lista de portas e não faça mais nada. Nem mesmo pressione para abrir! Basta selecionar sua porta na lista.
6. Pressione executar no modelo de série p5.js. Você deve conseguir vê-lo aberto e ele lerá os valores nulos, pois ainda não escrevemos o código para analisar nossa saída serial.

Agora podemos nos comunicar em série de nosso Micro: bit para p5.js!

Etapa 9: Código P5.js

Agora vamos pular para o código p5.js. Aqui é onde lemos os valores de saída serial e os usamos para criar arte.

1. Como mencionei na etapa anterior, certifique-se de que portName na linha 12 seja o nome da porta do seu computador específico.
2. Na função setup (), nas linhas 32-33, adicionei o buffer esquerdo e direito com createGraphics, fiz isso para separar a tela para que uma parte fosse usada para desenhar e a outra pudesse exibir direções e mostrar qual gráfico você está olhando ou percorrendo.
3. A função draw () chama funções que fiz para criar leftBuffer e rightBuffer separadamente. Ele também define onde começa o canto superior esquerdo de cada buffer.
4. A função drawRightBuffer () exibe todo o texto para as direções e seleções de gráficos

5. As funções drawLeftBuffer () exibem todos os gráficos.

   • A linha 93 gera aleatoriamente um valor para o valor alfa. Isso ocorre para que todas as cores tenham diferentes valores de transparência para torná-las mais interessantes. Se eu tivesse 4 sensores flex, teria usado o 4º para isso!
   • A linha 94 define o valor do curso para os valores r, g, b determinados pelos sensores flex
   • As linhas 96-102 podem ser descomentadas para testar como a luva funciona sem ter a luva, usando o mouse. Substitua a linha 102 com gráficos do resto da função.
6. 104-106 apague a tela quando a mão tremer, definindo o fundo da tela como preto
7. 108-114 controlar o preenchimento das formas quando A + B são pressionados e selecionados e a forma atual é a mesma
8. 117-312 são onde os gráficos são exibidos. Esta é a maior parte do código e a parte para ser criativo! Eu sugiro olhar a referência de p5.js para entender melhor como controlar as formas. Usei roll e pitch para controlar as posições x, y e alterar o tamanho das formas e gráficos e, como mencionei anteriormente, usei o. sensores de dobra para controlar a cor. É aqui que você pode ser criativo! Brinque com o que o p5.js tem a oferecer e crie seus próprios gráficos divertidos para controlar! Aqui, também defino a descrição do currentShape que é exibido no rightBuffer.
9. 318-460 Eu defino a descrição para selectedShape.

10. As linhas 478-498 são a função serialEvent (). É aqui que recebemos os dados seriais.

    • Nas linhas 485-486 eu defino proll e ppitch (roll e pitch anteriores) para os valores de roll e pitch anteriores.
    • Na linha 487 divido os dados em ",". Faço isso porque escrevi os dados separados por vírgulas. Você colocaria tudo o que separou suas variáveis aqui. Essas variáveis são colocadas na matriz de números.
    • Então, nas linhas 488-496, defino as variáveis para o elemento correspondente na matriz e as traduzo de uma string para um número. Eu uso essas variáveis em toda a função drawLeftBuffer () para controlar os gráficos.

Isso resume bem o código e finaliza o projeto! Agora podemos ver a luva funcionando em ação.

Etapa 10: Produto Final

Aqui estão algumas fotos da luva acabada, bem como algumas peças de arte que ela gerou! Assista ao vídeo de demonstração para vê-lo em ação!