Art Glove: 10 pasos (con imágenes)

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

El Art Glove es un guante portátil que contiene diferentes tipos de sensores para controlar los gráficos artísticos a través de un Micro: bit y p5.js Los dedos utilizan sensores de flexión que controlan los valores r, g, b, y el acelerómetro en el Micro: bit controla x, coordenadas y para los gráficos. Creé este proyecto como mi proyecto de término para mi clase de tecnología portátil como estudiante de último año en el programa de tecnología, artes y medios en CU Boulder.

Suministros:

• Guantes de jardineria
• BBC Micro: poco
• 3-4 sensores Flex
• Resistencias de 10K ohmios
• Cable de conexión (rojo y negro)
• Cortaalambres
• Tablero de circuitos
• Pinzas de cocodrilo (de doble cara y de una cara)
• Soldar
• Soldador
• Aguja
• Hilo
• Papel encerado
• Cinta
• Tijeras
• Pluma y lapiz

Paso 1: Pistas del sensor de curvatura

Primero, nos enfocaremos en hacer el hardware. De esta manera, cuando llegamos a la codificación, tenemos el componente de guante real para usar y probar.

1. Para empezar, vamos a hacer las pistas en los dedos que mantendrán los sensores de curvatura en su lugar. Tener estas pistas permite que los sensores de curvatura se muevan ligeramente hacia adelante y hacia atrás, al mismo tiempo que los mantiene seguros para que el dedo se doble. Primero, dale la vuelta al guante.
2. Tome un sensor de curvatura y colóquelo en el borde medio del dedo. Con un bolígrafo, delinee el sensor de curvatura
3. Desliza tu hilo a través de tu aguja. Regálate una pieza generosa. Haz un nudo al final del hilo.
4. Comenzando en la parte superior y en la línea, simplemente sople el arco del sensor de curvatura, deslice la aguja a través del guante por el interior y empújela hacia atrás en la línea paralela. Jala la aguja hasta el final para que el nudo se asiente en la línea que dibujaste.
5. Tirando con fuerza, haz 2-3 nudos en el otro lado para asegurar que el hilo no se salga. Asegúrese de que esté apretado para que el sensor de curvatura esté seguro contra su dedo
6. Cortar el hilo dejando unos cm. de hilo al final para que el nudo no se deshaga.
7. Repite los pasos 2 a 6 para todos los dedos a los que vas a conectar los sensores flexibles hasta que parezca la penúltima imagen.
8. Dale la vuelta al guante para que esté girado de la manera correcta. Deslice los sensores de curvatura a través de las pistas para asegurarse de que se ajusten correctamente a su mano

Paso 2: uso de la comunicación en serie con Micro: bit

Para ver las salidas de nuestros sensores, usaremos comunicación en serie. Verá cómo configurar el código en Makecode en el siguiente paso, pero primero aprenderemos cómo leerlo desde nuestra terminal. (Nota: estoy usando una Mac, por lo que estos pasos pueden ser diferentes según su sistema operativo. Para otros sistemas operativos, consulte aquí).

1. Conecte su Micro: bit
2. Abre tu terminal
3. escriba 'ls /dev/cu.*'
4. Debería ver algo parecido a '/dev/cu.usbmodem1422' pero el número exacto dependerá de su computadora
5. Una vez que esté ejecutando el código, escribiendo 'screen /dev/cu.usbmodem1422 115200' (con su número de puerto serie específico) le dará la salida en serie de su Micro: bit
6. ¡Su salida debe verse como la imagen de arriba, dependiendo de cómo formatee su salida!

Paso 3: creación de prototipos del circuito

Antes de soldar todos nuestros componentes juntos, crearemos un prototipo del circuito y escribiremos algunas líneas de código de ejemplo para leer los valores de nuestros sensores y asegurarnos de que nuestros componentes funcionen correctamente.

1. Usando el diagrama de circuito anterior, crea un prototipo de tu circuito en la placa de pruebas usando cables de puente, resistencias, las pinzas de cocodrilo de un lado y tu Micro: bit.
2. Conecte sus sensores de curvatura a los pines 0, 1 y 2.
3. Usé este código para probar mis sensores flexibles
4. Dóblelos unas cuantas veces para ver sus lecturas y asegurarse de que estén funcionando correctamente.

En el código, la última línea "serial.writeLine" es donde estamos escribiendo en nuestra salida serial. Puede formatear esta salida como desee, separé cada variable con una coma y luego la dividí en una coma más tarde, pero esta parte depende de usted.

(Nota: Después de hacer este paso, descubrí que uno de mis sensores de curvatura tenía un chip en la pintura conductora y, por lo tanto, no obtenía buenas lecturas. Es por eso que algunas de las imágenes me muestran trabajando con 4 sensores. Después de descubrir esto, fui hasta solo tres sensores en el dedo índice, medio y anular. También encontré que mis sensores de curvatura tenían el rango más amplio de lectura doblando la forma "opuesta", por lo que los puse en el guante con la pintura resistiva hacia abajo.)

Paso 4: Prueba del acelerómetro y el sensor de luz

En esta etapa también elegí probar el acelerómetro y el sensor de luz en el Micro: bit

1. Conecte su Micro: bit a su computadora
2. Descarga este código
3. Luego probé el acelerómetro, la luz y los sensores de curvatura junto con este código

(Nota: fue en este punto que descubrí que no se pueden usar los pines y el sensor de luz al mismo tiempo, así que no usé el sensor de luz en mi final, pero quería que pudieras ver cómo leer el sensor de luz si lo necesita!)

Paso 5: Soldar los sensores de curvatura

¡Ahora vamos a empezar a soldar nuestros componentes juntos! Esta es una parte emocionante, pero es importante ir despacio y verificar que todo sigue funcionando a medida que avanza para que no llegue al final, tenga algo que no funcione y no esté seguro de dónde salió mal. Sugiero usar sus pinzas de cocodrilo de doble cara aquí para verificar que cada sensor aún funcione una vez que los cables y las resistencias estén soldados juntos.

1. Tome su sensor de curvatura y cinta adhesiva o coloque un objeto pesado sobre él para mantenerlo en su lugar.
2. Tome su resistencia de 10K Ohm y corte la mayor parte del extremo para que el cable sea tan largo como el cable del sensor de curvatura.
3. Tome su soldador y presiónelo tanto en la resistencia como en el cable del sensor hasta que estén calientes
4. Tome su soldadura y presiónela en la plancha caliente cuando comience a derretirse sobre los componentes. Solo necesitas lo suficiente para cubrir los cables.
5. Retire la plancha. Aquí me puse el otro guante de jardinería y mantuve la resistencia y el cable en su lugar mientras la soldadura se enfriaba.
6. Clip un trozo largo de cable rojo y colóquelo en la unión de soldadura donde se encuentran la resistencia y el sensor de curvatura. Repita los pasos 4-5. Este es el cable de clavija analógica.
7. Clip un trozo largo de cable negro y colóquelo al final del otro cable. Repita los pasos 4-5. Este es tu cable de tierra.
8. Sujeta un trozo largo de cable rojo y sujeta el otro extremo de la resistencia para que sea tan largo como el lado anterior. Repita los pasos 4-5. Este es tu cable de alimentación.
9. Repita los pasos 1-8 para el resto de sus sensores de curvatura.
10. Deje sus cables largos para que tenga espacio para trabajar y hacer que tengan la longitud correcta más adelante cuando los coloque en el Micro: bit.

Paso 6: Soldar al Micro: bit y ensamblar el guante

Ahora que nuestros sensores están listos, comenzaremos a soldar al Micro: bit y ensamblar el guante. Recuerde nuevamente probar sobre la marcha, utilizando pinzas de cocodrilo para asegurarse de que los componentes sigan funcionando después de soldarlos.

1. Coloque los sensores y Micro: bit en el guante para tener una idea de dónde deben ir los cables y cuánto deben durar.
2. Envuelva un cable rojo alrededor de la clavija de alimentación. Use cortadores de alambre para pelar el cable y dejar espacios abiertos a los que conectará el cable. Haga esto también para el cable de tierra.
3. Delinea el guante que no estás usando. Esto nos ayudará a soldar todo junto y corregir la longitud de las cosas. Sin embargo, hará todo al revés, ¡así que verifique que esté soldando las cosas de la manera correcta!
4. Coloque su Micro: bit aproximadamente donde desee que se apoye en su mano. Haga marcas donde se asientan el suelo y los cables de alimentación.
5. Pegue el cable, de alimentación o de tierra, en su lugar.
6. Pegue su sensor de curvatura en su lugar.
7. Corte el cable de alimentación de modo que pase justo por encima de su marca en la línea de alimentación.
8. Suelde estas piezas juntas.
9. Repita los pasos 5 a 8 para los otros cables de alimentación y para los cables de tierra.
10. Tome la broca Micro: y colóquela debajo de los cables recién soldados. Suelde la alimentación y la tierra a los pines correctos.
11. Sujete los cables analógicos de modo que pasen un poco más allá del extremo de las clavijas y puedan enrollarse en la parte frontal.
12. Suelde los cables a las clavijas correctas.
13. Descubrí que mis lecturas eran mejores y más consistentes cuando todos los cables (de alimentación, tierra y analógicos) tocaban tanto la parte delantera como la trasera de los pines.
14. Una pista por una pista, empuje los sensores de curvatura hacia arriba con los dedos simultáneamente.
15. Una vez que los sensores estén en su lugar, póngase el guante y asegúrese de que le quede bien. Si necesita agregar pistas o corregir su ubicación, hágalo ahora.
16. Una vez que los sensores estén donde los desea, tome nota de dónde atar el Micro: bit en su lugar. Puede usar los pequeños orificios a ambos lados de los botones A y B o usar los orificios para los pines. Use su aguja e hilo para atarlo en su lugar en su mano

¡Felicitaciones! ¡Los componentes de hardware del guante ya están completos!

Paso 7: Micro: código de bits

Ahora voy a guiarte a través del código Micro: bit. Eres más que bienvenido para hacer de este código lo que quieras, pero quería pasar y explicar todo para que puedas ver lo que hice, cómo lo hice y por qué. Puedes encontrar mi código aquí.

1. Líneas 1-31. Aquí estoy usando funciones preestablecidas con las que viene Micro: bit.

   • Al presionar A, disminuye el recuento, que es la selección de gráficos disponibles. Una vez que llega a 0, vuelve al número más alto.
   • Al presionar B aumenta el recuento, una vez que alcanza el número más alto de gráficos disponibles, vuelve a 0.
   • Si el gráfico actual que ha seleccionado no es el que se está dibujando actualmente, al presionar A y B simultáneamente se selecciona el nuevo gráfico.
   • Si el gráfico actual que ha seleccionado es el mismo que el que se está dibujando, presionar A y B simultáneamente llena la forma si puede tener un relleno.
   • Shaking the Micro: bit establece la variable de borrado en 1, lo que le dice a p5.js que borre el lienzo y comience en negro. Pausa la ejecución por un segundo y luego la vuelve a poner en 0 para que el usuario pueda continuar dibujando.

2. Las líneas 32-64 están configurando mis variables. Era importante utilizar muchas variables para que la mayoría de los valores no estuvieran codificados. Se pueden cambiar con el guante y también se pueden cambiar fácilmente en un solo lugar en lugar de actualizar un montón de valores en todo el lugar. Destacaré algunos de los importantes.

   • Es bueno tener el tamaño del lienzo en una variable para actualizar según el tamaño de mi lienzo. Lo mismo con la shapeHigh. A medida que agrego o me deshago de gráficos, puedo actualizar ese número aquí.
   • Las variables alta y baja me permiten realizar un seguimiento de la corriente alta y baja de los sensores y tener un rango de calibración continua. Esto es importante ya que cada persona que use los guantes tendrá un rango de movimiento diferente y, por lo tanto, diferentes altibajos que podrá alcanzar.
3. Las líneas 66-68 están leyendo los valores analógicos de los pines para los sensores flexibles

4. Las líneas 69-74 están calibrando el valor alto para el dedo índice.

   • Si se alcanza un nuevo máximo, lo establece como máximo.
   • Recalibra el rango de ese dedo.
   • Utiliza esa nueva gama para el mapeo de colores
5. Las líneas 75-80 están calibrando el valor bajo del dedo índice.
6. Las líneas 81-104 hacen lo mismo que 4 y 5 para los dedos medio y anular.

7. Las líneas 105-107 están mapeando los valores de mi sensor flexible a los valores de color 0-255 (o colorLow a colorHigh, si no estoy haciendo el rango completo)

   • La función de mapa incorporada de Makecode no me estaba dando un gran mapeo, dado el rango limitado que obtenía de mis sensores. Así que hice mi propia función de mapeo.
   • Así es como funciona. El rango de entrada de cada dedo está determinado por su (valor más alto - su valor más bajo). El rango de color, que también es el (valor de color más alto - valor de color más bajo) se divide por el rango de cada dedo. Este número se redondea al número entero más bajo y es el cociente.
   • El (valor real del sensor - el valor más bajo del sensor) le da el valor dentro del rango. Multiplicar esto por el cociente que encontramos arriba y agregar los valores de color más bajos le da un valor mapeado del sensor, al color, dentro del rango de color.
8. La línea 109 está leyendo el valor de tono (hacia arriba y hacia abajo).
9. Las líneas 110-115 están calibrando el alto y el bajo para este valor.
10. La línea 116 está leyendo el valor de rollo (izquierda y derecha).
11. Las líneas 117-122 están calibrando el alto y el bajo para este valor.
12. Las líneas 123-126 asignan los valores de cabeceo y balanceo al tamaño del lienzo y los redondean a números enteros.
13. La línea 127 escribe las variables en la salida serial usando serial.writeLine, separando cada valor por una coma y un espacio ",", para analizar más tarde.

Una vez que tenga el código como le gusta, descárguelo y arrástrelo desde sus descargas a su Micro: bit (debería verlo en "Ubicaciones" en el lado izquierdo de su buscador) para cargar el código al Micro: bit

Paso 8: Comunicación en serie con P5.js

Para comunicarnos en serie con p5.js, necesitamos una herramienta adicional. Para obtener más información sobre lo que hay detrás de escena de la comunicación en serie, sugiero leer este artículo.

1. Descargue una versión de la aplicación p5.js desde este enlace. Tengo la versión Alpha 6 pero cualquiera funcionará.
2. Utilice esta plantilla p5.js para comunicarse en serie. Para configurarlo, inserte su nombre de puerto serie correcto para portName en la línea 12. Este es el nombre que averiguamos en el paso 2.
3. Conecte su Micro: bit a su computadora
4. Abra la aplicación serial p5.js.
5. Seleccione su puerto de la lista de puertos y no haga nada más. ¡Ni siquiera presionar para abrir! Simplemente seleccione su puerto de su lista.
6. Presione ejecutar en la plantilla de serie p5.js. Debería poder verlo abierto y leerá valores nulos, ya que aún no hemos escrito código para analizar nuestra salida en serie.

¡Ahora podemos comunicarnos en serie desde nuestro Micro: bit a p5.js!

Paso 9: Código P5.js

Ahora vamos a saltar al código p5.js. Aquí es donde leemos los valores de salida en serie y los usamos para crear arte.

1. Como mencioné en el paso anterior, asegúrese de que el nombre del puerto en la línea 12 sea el nombre específico del puerto de su computadora.
2. En la función setup (), en las líneas 32-33, agregué el búfer izquierdo y derecho con createGraphics, hice esto para separar el lienzo para que una parte se use para dibujar y la otra parte pueda mostrar direcciones y mostrar qué gráfico estás mirando o desplazándote.
3. La función draw () llama a funciones que hice para crear leftBuffer y rightBuffer por separado. También define dónde comienza la esquina superior izquierda de cada búfer.
4. La función drawRightBuffer () muestra todo el texto para las direcciones y selecciones de gráficos

5. Las funciones drawLeftBuffer () muestran todos los gráficos.

   • La línea 93 genera aleatoriamente un valor para el valor alfa. Esto es así para que todos los colores tengan diferentes valores de transparencia para que parezca más interesante. ¡Si hubiera tenido 4 sensores flexibles, habría usado el cuarto para esto!
   • La línea 94 establece el valor de carrera en los valores r, g, b determinados por los sensores flexibles
   • Las líneas 96-102 se pueden descomentar para probar cómo funciona el guante sin tener el guante usando el mouse en su lugar. Reemplace la línea 102 con gráficos del resto de la función.
6. 104-106 borre el lienzo cuando la mano tiembla configurando el fondo del lienzo en negro
7. 108-114 controlan el relleno de las formas cuando se presionan y seleccionan A + B y la forma actual es la misma
8. 117-312 es donde se muestran los gráficos. ¡Esta es la mayor parte del código y la parte para ser creativo! Sugiero mirar la referencia de p5.js para comprender mejor cómo controlar las formas. Usé el balanceo y el tono para controlar las posiciones x, y y cambiar el tamaño de las formas y los gráficos, y como mencioné anteriormente usé la extensión. Doblar los sensores para controlar el color. ¡Aquí es donde puedes ser creativo! ¡Juega con lo que p5.js tiene para ofrecer y crea tus propios gráficos divertidos para controlar! Aquí también configuro la descripción de currentShape que se muestra en el rightBuffer.
9. 318-460 Establezco la descripción de la forma seleccionada.

10. Las líneas 478-498 son la función serialEvent (). Aquí es donde recibimos los datos en serie.

    • En las líneas 485-486 configuré proll y ppitch (balanceo y tono anterior) a los valores de balanceo y tono anteriores.
    • En la línea 487 dividí los datos en ",". Hago esto porque escribí los datos para que estén separados por comas. Pondría aquí cualquier cosa con la que separara sus variables. Estas variables se colocan en la matriz de números.
    • Luego, en las líneas 488-496, establezco las variables en el elemento correspondiente en la matriz y las traduzco de una cadena a un número. Utilizo estas variables en toda la función drawLeftBuffer () para controlar los gráficos.

¡Eso resume bastante bien el código y termina el proyecto! Ahora podemos ver el guante funcionando en acción.

Paso 10: Producto final

¡Aquí hay algunas imágenes del guante terminado, así como algunas piezas de arte que generó! ¡Mire el video de demostración para verlo en acción!