Guant d'art: 10 passos (amb imatges)

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

El guant Art és un guant portable que conté diferents tipus de sensors per controlar gràfics artístics mitjançant un Micro: bit i p5.js Els dits utilitzen sensors de doblegat que controlen els valors r, g, b i l’acceleròmetre del control Micro: bit x, coordenades y per als gràfics. Vaig crear aquest projecte com a projecte per a la meva classe de tecnologia portable com a sènior al programa de tecnologia, arts i mitjans de comunicació de CU Boulder.

Subministraments:

• Guants de jardineria
• BBC Micro: Bit
• 3-4 sensors Flex
• Resistències de 10K Ohm
• Cable de connexió (vermell i negre)
• Talls de filferro
• Taula de pa
• Clips de cocodril (doble cara i simple cara)
• Soldar
• Soldador
• Agulla
• Fil
• Paper de cera
• Cinta
• Tisores
• Bolígraf i llapis

Pas 1: pistes del sensor de flexió

En primer lloc, ens centrarem a fabricar el maquinari. D’aquesta manera, quan arribem a la codificació, tenim el component de guant real que cal utilitzar i provar.

1. Per començar, farem les pistes dels dits que mantindran els sensors de doblegat al seu lloc. Tenir aquestes pistes permet que els sensors de corba es moguin lleugerament cap endavant i cap enrere, alhora que els mantenen segurs al dit per doblegar-los. Primer, gireu el guant per dins.
2. Agafeu un sensor de doblegat i col·loqueu-lo a la carena mitjana del dit. Amb un bolígraf, traça el sensor de doblegat
3. Feu lliscar el fil per l’agulla. Regala't una peça generosa. Feu un nus al final del fil.
4. Començant per la part superior i per la línia, només cal bufar l'arc del sensor de doblegat, lliscar l'agulla a través del guant per l'interior i empènyer-la cap enrere per la línia paral·lela. Estireu l’agulla fins que el nus quedi a la línia que heu dibuixat.
5. Tirant bé, fes 2-3 nusos a l’altre costat, cosa que garantirà que el fil no surti. Assegureu-vos que estigui ajustat de manera que el sensor de doblegada quedi ben fixat contra el dit
6. Talleu el fil deixant uns cm. de fil al final perquè el nus no es desfaci.
7. Repetiu els passos 2-6 per a tots els dits als quals estigueu connectant els sensors flex fins que sembli la tercera darrera imatge.
8. Gireu el guant cap enrere perquè es giri de la manera correcta. Feu lliscar els sensors de doblegat per les vies per assegurar-vos que encaixen correctament a la mà

Pas 2: utilitzar la comunicació en sèrie amb Micro: bit

Per veure les sortides dels nostres sensors, farem servir comunicació en sèrie. Veureu com configurar el codi a Makecode al següent pas, però primer aprendrem a llegir-lo des del nostre terminal. (Nota: Estic fent servir un Mac, de manera que aquests passos poden ser diferents segons el vostre sistema operatiu. Per a altres sistemes operatius, consulteu aquí).

1. Connecteu el vostre micro: bit
2. Obriu el terminal
3. escriviu 'ls /dev/cu.*'
4. Hauríeu de veure alguna cosa que sembli "/dev/cu.usbmodem1422", però el número exacte dependrà del vostre ordinador
5. Quan hàgiu executat el codi, escriviu "pantalla /dev/cu.usbmodem1422 115200" (amb el número de port sèrie específic) us proporcionarà la sortida serial del vostre Micro: bit
6. La vostra sortida hauria de ser semblant a la de la imatge anterior, segons com hàgiu formatat la vostra sortida.

Pas 3: prototipatge del circuit

Abans de soldar tots els nostres components junts, farem un prototip del circuit i escriurem algunes línies de codi d'exemple per llegir els valors dels nostres sensors i assegurar-nos que els nostres components funcionin correctament.

1. Utilitzant el diagrama de circuits anterior, feu un prototipus del vostre circuit a la placa mitjançant cables de pont, resistències, clips de cocodril d’una cara i el vostre Micro: bit.
2. Connecteu els sensors de doblegada als pins 0, 1 i 2.
3. He utilitzat aquest codi per provar els meus sensors flex
4. Dobleu-les unes quantes vegades per veure les seves lectures i assegureu-vos que funcionin correctament

Al codi, l'última línia "serial.writeLine" és on escrivim a la nostra sortida serial. Podeu formatar aquesta sortida com vulgueu, he separat totes les variables amb una coma i després les he dividit en una coma més endavant, però aquesta part depèn de vosaltres.

(Nota: Després de fer aquest pas, vaig descobrir que un dels meus sensors de doblegat tenia un xip a la pintura conductora i, per tant, no aconseguia bones lectures. Per això, algunes de les imatges mostren que treballo amb 4 sensors. Després de descobrir-ho, vaig anar fins a només tres sensors al punter, al mig i al dit anular. També vaig trobar que els meus sensors de doblegat tenien la gamma més àmplia de lectura doblegant de la manera "oposada", per això els vaig posar al guant amb la pintura resistiva cap avall.)

Pas 4: proveu l’acceleròmetre i el sensor de llum

En aquesta etapa també vaig optar per provar l’acceleròmetre i el sensor de llum al Micro: bit

1. Connecteu el vostre micro: bit a l'ordinador
2. Baixeu-vos aquest codi
3. Després vaig provar els sensors de l’acceleròmetre, la llum i els dobles junt amb aquest codi

(Nota: En aquest moment vaig descobrir que no es podien utilitzar els pins i el sensor de llum alhora, de manera que no vaig utilitzar el sensor de llum a la meva final, però volia que poguéssiu veure com llegir el sensor de llum si ho necessiteu!)

Pas 5: soldar els sensors de flexió

Ara començarem a soldar els nostres components junts. Aquesta és una part emocionant, però és important anar lent i comprovar que tot continua funcionant a mesura que avança, de manera que no arribis al final, que alguna cosa no funcioni i no estiguis segur d’on va sortir malament. Us suggereixo que feu servir els clips de cocodril de doble cara aquí per comprovar que cada sensor funciona encara que els cables i les resistències es soldin junts.

1. Agafeu el sensor de flexió i la cinta adhesiva o poseu-hi un objecte pesat per mantenir-lo al seu lloc.
2. Agafeu la resistència de 10K Ohm i talleu la major part de l’extrem perquè el cable sigui aproximadament tan llarg com el cable del sensor de corba.
3. Agafeu el soldador i premeu-lo sobre la resistència i el cable del sensor de corba fins que estiguin calents
4. Agafeu la soldadura i premeu-la a la planxa calenta perquè comenci a fondre’s sobre els components. Només cal prou per cobrir els cables.
5. Traieu la planxa. Aquí vaig posar l'altre guant de jardineria i vaig mantenir la resistència i el filferro al seu lloc mentre la soldadura es refredava.
6. Retalleu un llarg tros de fil vermell i col·loqueu-lo a la junta de soldadura on es troben la resistència i el sensor de doblegat. Repetiu els passos 4-5. Aquest és el cable de pin analògic.
7. Retalleu un llarg tros de fil negre i col·loqueu-lo al final de l’altre cable. Repetiu els passos 4-5. Aquest és el vostre cable de terra.
8. Retalleu un llarg tros de fil vermell i retalleu l’altre extrem de la resistència de manera que sigui tan llarg com el costat anterior. Repetiu els passos 4-5. Aquest és el vostre cable d'alimentació.
9. Repetiu els passos 1-8 per a la resta de sensors de corba.
10. Deixeu els cables llargs de manera que tingueu espai per treballar-hi i que tinguin la longitud correcta després de posar-los al micro: bit.

Pas 6: Soldar al micro: bit i muntar el guant

Ara que els nostres sensors estan preparats, començarem a soldar al micro: bit i a muntar el guant. Recordeu-vos de tornar a provar a mesura que aneu, mitjançant clips de cocodril per assegurar-vos que els components continuïn funcionant després de soldar-los junts.

1. Col·loqueu els sensors i Micro: bit al guant per tenir una idea d’on han d’anar els cables i de quant de temps han de ser.
2. Emboliqueu un cable vermell al voltant del passador d’alimentació. Utilitzeu talladors de filferro per despullar el filferro i deixar espais oberts als quals fixareu el filferro. Feu-ho també pel cable de terra.
3. Descriviu el guant que no utilitzeu. Això ens ajudarà a soldar-ho tot junt i a obtenir la longitud de les coses correcta. Ho faràs tot cap enrere, tot i que comprova que estàs soldant les coses de la manera correcta.
4. Col·loqueu el vostre micro: bit aproximadament on vulgueu que es posi a la mà. Feu marques a terra i se senten els cables d’alimentació.
5. Enganxeu el cable, l’alimentació o la terra al seu lloc.
6. Enganxeu el sensor de doblegat al lloc.
7. Tallar el cable d'alimentació perquè passi més enllà de la seva marca a la línia elèctrica general.
8. Soldeu aquestes peces juntes.
9. Repetiu els passos 5-8 per als altres cables d’alimentació i per als cables de terra.
10. Agafeu el bit Micro: i col·loqueu-lo sota els cables acabats de soldar. Soldeu l’alimentació i la terra als passadors correctes.
11. Retalleu els cables analògics de manera que passin just al final dels passadors i es puguin enrotllar cap a la part frontal.
12. Soldeu els cables als pins correctes.
13. Vaig trobar que les meves lectures eren les millors i més consistents quan tots els cables (alimentació, terra i analògics) tocaven tant la part frontal com la posterior dels passadors.
14. Una pista per pista, empènyer simultàniament els sensors de corba cap amunt dels dits.
15. Un cop els sensors estiguin al seu lloc, poseu-vos el guant i assegureu-vos que l’ajust és correcte. Si heu d'afegir pistes o corregir-ne la ubicació, feu-ho ara.
16. Un cop els sensors es trobin on vulgueu, anoteu on lligueu el micro: al seu lloc. Podeu utilitzar els forats petits de cada costat dels botons A i B o bé utilitzar els forats dels passadors. Feu servir l’agulla i el fil per lligar-la al lloc de la mà

Felicitats! Els components de maquinari del guant ja estan acabats.

Pas 7: Codi de micro: bits

Ara us passaré pel codi Micro: bit. Esteu més que benvingut a fer d’aquest codi el que vulgueu, però jo volia explicar-ho tot perquè pugueu veure què he fet, com ho he fet i per què. Podeu trobar el meu codi aquí.

1. Línies 1-31. Aquí estic fent servir funcions predefinides que inclou el micro: bit.

   • Si premeu A es redueix el recompte, que és la selecció dels gràfics disponibles. Un cop arribeu a 0, es torna al nombre més alt.
   • Si premeu B augmenta el recompte, un cop arribeu al màxim nombre de gràfics disponibles, es torna a 0.
   • Si el gràfic actual que heu seleccionat no és el que s'està dibuixant actualment, prement A i B simultàniament se selecciona el nou gràfic.
   • Si el gràfic actual que heu seleccionat és el mateix que el que es dibuixa, prement A i B simultàniament s'omple la forma si pot tenir un farciment.
   • Sacsejant el micro: el bit estableix la variable d'esborrar a 1, que indica a p5.js que esborri el llenç i que comenci en negre. Fa una pausa de la carrera durant un segon i després la torna a establir a 0 perquè l'usuari pugui continuar dibuixant.

2. Les línies 32-64 configuren les meves variables. Era important utilitzar moltes variables perquè la majoria dels valors no estiguessin codificats. Es poden canviar amb el guant i també es poden canviar fàcilment en un sol lloc en lloc d’actualitzar un munt de valors per tot arreu. En destacaré alguns dels més importants.

   • La mida del llenç és agradable que es pugui actualitzar en una variable en funció de la mida del meu llenç. El mateix passa amb la forma Alta. A mesura que afegeixo o desapareixo gràfics, puc actualitzar aquest número aquí.
   • Les variables altes i baixes em permeten fer un seguiment de l’alta i baixa actual per als sensors i tenir un rang de calibratge continu. Això és important, ja que cada persona que porta els guants tindrà un rang de moviment diferent i, per tant, diferents màxims i mínims als quals pugui arribar.
3. Les línies 66-68 estan llegint els valors analògics dels pins dels sensors flex

4. Les línies 69-74 estan calibrant l’alt valor del dit punter.

   • Si s’arriba a un nou màxim, el defineix com a màxim.
   • Torna a calibrar l'abast d'aquest dit.
   • Utilitza aquest nou rang per a l'assignació de colors
5. Les línies 75-80 calibren el valor baix del dit punter.
6. Les línies 81-104 fan el mateix que el 4 i el 5 per als dits mitjans i anulars.

7. Les línies 105-107 mapen els valors del meu sensor de flexió als valors de color 0-255 (o color Low to colorHigh, si no estic fent el rang complet)

   • La funció de mapa integrada de Makecode no em proporcionava un bon mapatge, donat el rang limitat que obtenia dels meus sensors. Així que vaig fer la meva pròpia funció de mapatge.
   • Així és com funciona. L'interval d'entrada de cada dit està determinat per ell (el valor més alt és el valor més baix). El rang de colors, que també és el (valor de color més alt - valor de color més baix), es divideix per cada rang de dits. Aquest nombre s'arrodoneix amb el nombre enter més baix i és el quocient.
   • El (valor del sensor real: el valor del sensor més baix) us proporciona el valor dins de l'interval. Multiplicant això per quocient que hem trobat més amunt i afegint els valors de color més baixos, obtindreu un valor assignat des del sensor fins al color dins de l’interval de colors.
8. La línia 109 està llegint el valor del to (amunt i avall).
9. Les línies 110-115 estan calibrant l’alt i el baix per obtenir aquest valor
10. La línia 116 llegeix el valor del llançament (esquerra i dreta).
11. Les línies 117-122 estan calibrant l’alt i el baix per obtenir aquest valor
12. Les línies 123-126 assignen els valors de pitch and roll a la mida del llenç i els arrodoneixen a nombres enters.
13. La línia 127 escriu les variables a la sortida de sèrie mitjançant serial.writeLine, separant cada valor per una coma i l'espai ",", per analitzar amb més endavant.

Un cop tingueu el codi com us agrada, descarregueu-lo i arrossegueu-lo des de les descàrregues al vostre Micro: bit (hauríeu de veure'l a "Ubicacions" a la part esquerra del cercador) per penjar el codi al Micro: bit

Pas 8: comunicació en sèrie amb P5.js

Per comunicar-nos en sèrie amb p5.js, necessitem una eina addicional. Per obtenir més informació sobre el que passa entre bastidors de la comunicació en sèrie, us recomano llegir aquest article.

1. Baixeu una versió de l'aplicació p5.js des d'aquest enllaç. Tinc la versió Alpha 6, però qualsevol funcionarà.
2. Utilitzeu aquesta plantilla p5.js per comunicar-vos en sèrie. Per configurar-lo, inseriu el nom de port sèrie correcte per a portName a la línia 12. Aquest és el nom que hem descobert al pas 2.
3. Connecteu el vostre micro: bit a l'ordinador
4. Obriu l'aplicació sèrie p5.js.
5. Seleccioneu el port de la llista de ports i no feu res més. Ni tan sols premeu obert. Només heu de seleccionar el port de la llista.
6. Premeu Executa a la plantilla sèrie p5.js. Hauríeu de poder-lo veure obert i us llegirà un valor nul, ja que encara no hem escrit cap codi per analitzar la nostra sortida en sèrie.

Ara podem comunicar-nos en sèrie des del nostre Micro: bit fins a p5.js.

Pas 9: Codi P5.js

Ara anirem al codi p5.js. Aquí és on llegim els valors de sortida sèrie i els fem servir per crear art.

1. Com he esmentat al pas anterior, assegureu-vos que el portName de la línia 12 sigui el nom del port de l'ordinador específic.
2. A la funció setup (), a les línies 32-33, he afegit el botó esquerre i dret amb createGraphics, ho he fet per separar el llenç de manera que s’utilitzi una part per dibuixar i l’altra pot mostrar indicacions i mostrar quin gràfic estàs veient o desplaçant-te.
3. La funció draw () crida a les funcions que he fet per crear el leftBuffer i el rightBuffer per separat. També defineix on comença la cantonada superior esquerra de cada memòria intermèdia.
4. La funció drawRightBuffer () mostra tot el text per a les direccions i les seleccions gràfiques

5. Les funcions drawLeftBuffer () mostren tots els gràfics.

   • La línia 93 genera aleatòriament un valor per al valor alfa. Això és així, tots els colors tenen valors de transparència diferents per fer que sembli més interessant. Si hagués tingut 4 sensors de flexió, hauria fet servir el quart per a això.
   • La línia 94 estableix el valor del traç als valors r, g, b determinats pels sensors flex
   • Les línies 96-102 es poden fer sense comentaris per provar el funcionament del guant sense tenir-ne el guant mitjançant el ratolí. Substitueix la línia 102 per gràfics de la resta de la funció.
6. 104-106 esborreu el llenç quan la mà tremola posant el fons del llenç a negre
7. 108-114 controla el farciment de les formes quan es prem i selecciona A + B i la forma actual és la mateixa
8. 117-312 són on es mostren els gràfics. Aquest és el gruix del codi i la part per ser creatiu. Us suggereixo mirar la referència p5.js per entendre millor com controlar les formes. He utilitzat el rotllo i el to per controlar les posicions x, y i canviar la mida de les formes i els gràfics i, com he esmentat anteriorment, he utilitzat el fitxer. Sensors de flexió per controlar el color. Aquí és on podeu ser creatius. Juga amb allò que p5.js té per oferir i crea els teus propis gràfics divertits per controlar. Aquí també he establert la descripció del currentShape que es mostra al Bufer dret.
9. 318-460 He definit la descripció de la forma seleccionada.

10. Les línies 478-498 són la funció serialEvent (). Aquí és on rebem les dades de sèrie.

    • A les línies 485-486 he establert el proll i el ppitch (roll and pitch anterior) als valors de roll and pitch anteriors.
    • A la línia 487 he dividit les dades a ",". Ho faig perquè he escrit les dades per separar-les amb comes. Posaries aquí el que separis amb les variables. Aquestes variables es posen a la matriu de nombres.
    • A continuació, a les línies 488-496 he establert les variables en l'element corresponent de la matriu i les tradueixo d'una cadena a un número. Faig servir aquestes variables a tota la funció drawLeftBuffer () per controlar els gràfics.

Això resumeix pràcticament el codi i acaba el projecte. Ara podem veure el guant treballant en acció.

Pas 10: producte final

Aquí teniu algunes imatges del guant acabat i algunes obres d'art que va generar. Mireu el vídeo de demostració per veure'l en acció.