Art Glove: 10 pași (cu imagini)

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:41

Art Glove este o mănușă portabilă care conține diferite tipuri de senzori pentru a controla grafica de artă printr-un Micro: bit și p5.js Degetele utilizează senzori de îndoire care controlează valorile r, g, b și accelerometrul din micro: bit controlează x, coordonatele y pentru grafică. Am creat acest proiect ca proiect pe termen lung pentru clasa mea de tehnologie portabilă ca senior în programul de tehnologie, arte și media de la CU Boulder.

Provizii:

• Manusi de gradinarit
• BBC Micro: Bit
• 3-4 senzori Flex
• Rezistențe 10K Ohm
• Sârmă de conectare (roșu și negru)
• Tăietoare de sârmă
• Pană de pâine
• Cleme de aligator (cu două fețe și cu o singură față)
• Solder
• Ciocan de lipit
• Ac
• Fir
• Hartie cerata
• Bandă
• Foarfece
• Stilou și creion

Pasul 1: Piesele senzorului de îndoire

În primul rând, ne vom concentra pe realizarea hardware-ului. În acest fel, când ajungem la codificare, avem componenta reală de mănușă de utilizat și testat.

1. Pentru început, vom face urmele de pe degete care vor menține senzorii de îndoire la locul lor. Având aceste piste, senzorii de îndoire se pot mișca ușor înainte și înapoi, păstrându-i, de asemenea, fixați de deget pentru a se îndoaie. Mai întâi, întoarce-ți mănușa pe dinăuntru.
2. Luați un senzor de îndoire și plasați-l în creasta mijlocie a degetului. Cu ajutorul unui stilou, conturați senzorul de îndoire
3. Strecurați-vă firul prin ac. Oferă-ți o piesă generoasă. Legați un nod la capătul firului.
4. Începând din partea de sus și pe linie, trebuie doar să suflați arcul senzorului de îndoire, glisați acul prin mănușă prin interior și împingeți-l înapoi pe linia paralelă. Trageți acul până la capăt, astfel încât nodul să se așeze pe linia pe care ați tras-o.
5. Trăgând strâns, faceți 2-3 noduri pe cealaltă parte, ceea ce va asigura că firul nu va ieși. Asigurați-vă că este strâns, astfel încât senzorul de îndoire să fie fixat împotriva degetului
6. Tăiați firul lăsând câțiva cm. de fir la capăt, astfel încât nodul să nu se desfacă.
7. Repetați pașii 2-6 pentru toate degetele la care atașați senzori flex până când arată ca a treia până la ultima imagine.
8. Întoarceți mănușa înapoi, astfel încât să fie întoarsă în mod corect. Glisați senzorii de îndoire prin șenile pentru a vă asigura că se potrivesc corect pe mâna dvs.

Pasul 2: Utilizarea comunicării seriale cu Micro: bit

Pentru a vedea ieșirile de la senzorii noștri, vom folosi comunicarea în serie. Veți vedea cum să configurați codul în Makecode în pasul următor, dar mai întâi vom învăța cum să-l citiți de la terminalul nostru. (Notă: folosesc un Mac, astfel încât acești pași pot fi diferiți în funcție de sistemul dvs. de operare. Pentru alte sisteme de operare uitați-vă aici).

1. Conectați-vă Micro: bit
2. Deschideți terminalul
3. tastați 'ls /dev/cu.*'
4. Ar trebui să vedeți ceva care arată ca „/dev/cu.usbmodem1422”, dar numărul exact va depinde de computerul dvs.
5. Odată ce executați codul, tastând „ecran /dev/cu.usbmodem1422 115200” (cu numărul de port serial specific) vă va da ieșirea serială a Micro: bitului
6. Rezultatul dvs. ar trebui să arate ca imaginea de mai sus, în funcție de modul în care ați formatat ieșirea!

Pasul 3: Prototiparea circuitului

Înainte de a lipi toate componentele noastre împreună, vom prototipa circuitul și vom scrie câteva linii de cod de exemplu pentru a citi valorile senzorilor și pentru a ne asigura că componentele noastre funcționează corect.

1. Folosind schema de circuite de mai sus, prototipați-vă circuitul pe placa de masă folosind fire jumper, rezistențe, clemele de aligator cu o singură față și micro: bitul dvs.
2. Conectați senzorii de îndoire la pinii 0, 1 și 2.
3. Am folosit acest cod pentru a-mi testa senzorii flex
4. Îndoiți-le de câteva ori pentru a vedea lecturile lor și asigurați-vă că funcționează corect

În cod, ultima linie „serial.writeLine” este locul în care scriem la ieșirea noastră serială. Puteți formata această ieșire oricum doriți, am separat fiecare variabilă cu o virgulă și apoi am împărțit-o pe o virgulă mai târziu, dar această parte depinde de dvs.

(Notă: După ce am făcut acest pas, am aflat că unul dintre senzorii de îndoire avea un cip în vopseaua conductivă și, prin urmare, nu obținea citiri bune. De aceea, unele dintre imagini îmi arată că lucrez cu 4 senzori. După ce am aflat acest lucru, am mers până la doar trei senzori de pe indicator, de la mijloc și degetul inelar. Am constatat, de asemenea, că senzorii de îndoire aveau cea mai largă gamă de citire îndoită în sensul „opus”, motiv pentru care i-am pus pe mănușă cu vopseaua rezistivă orientată în jos.)

Pasul 4: Testarea accelerometrului și a senzorului de lumină

În această etapă am ales, de asemenea, să testez accelerometrul și senzorul de lumină pe Micro: bit

1. Conectați-vă Micro: bit la computer
2. Descărcați acest cod
3. Apoi am testat accelerometrul, lumina și senzorii de îndoire împreună cu acest cod

(Notă: În acest moment mi-am dat seama că nu puteți utiliza pinii și senzorul de lumină în același timp, așa că nu am folosit senzorul de lumină în finalul meu, dar am vrut să puteți vedea cum să citiți senzorul de lumină dacă aveți nevoie!)

Pasul 5: lipirea senzorilor de îndoire

Acum vom începe să lipim componentele noastre împreună! Aceasta este o parte interesantă, dar este important să mergeți încet și să verificați dacă totul funcționează în continuare în timp ce mergeți, astfel încât să nu ajungeți la final, să nu aveți ceva care să nu funcționeze și să nu fiți sigur unde a mers prost! Vă sugerez să folosiți clemele de aligator dublu față aici pentru a verifica dacă fiecare senzor funcționează încă odată ce firele și rezistențele sunt lipite împreună.

1. Luați senzorul de îndoire și banda sau puneți un obiect greu pe el pentru a-l ține în poziție.
2. Luați rezistorul de 10K Ohm și tăiați cea mai mare parte a capătului, astfel încât cablul să fie aproximativ atât de lung cât cel de pe senzorul de îndoire.
3. Luați fierul de lipit și apăsați-l atât pe rezistor, cât și pe cablul senzorului de îndoire până când sunt fierbinți
4. Luați lipitul și apăsați-l în fierul fierbinte, deoarece începe să se topească peste componente. Ai nevoie doar de suficient pentru a acoperi firele.
5. Scoateți fierul de călcat. Aici am îmbrăcat cealaltă mănușă de grădinărit și am ținut rezistența și firul în loc, în timp ce lipirea se răcea.
6. Prindeți o bucată lungă de sârmă roșie și așezați-o la îmbinarea de lipit unde se întâlnesc rezistorul și senzorul de îndoire. Repetați pașii 4-5. Acesta este firul analogic.
7. Tăiați o bucată lungă de sârmă neagră și așezați-o la capătul celuilalt fir. Repetați pașii 4-5. Acesta este firul tău de masă.
8. Decupați o bucată lungă de sârmă roșie și fixați celălalt capăt al rezistorului, astfel încât să fie aproximativ atât de lung cât partea anterioară. Repetați pașii 4-5. Acesta este firul tău de alimentare.
9. Repetați pașii 1-8 pentru restul senzorilor de îndoire.
10. Lăsați firele lungi, astfel încât să aveți loc cu care să lucrați pentru a le face lungimea corectă mai târziu atunci când le puneți pe micro: bit.

Pasul 6: lipirea la micro: bit și asamblarea mănușii

Acum, când senzorii noștri sunt gata, vom începe să lipim cu micro: bit și să asamblăm mănușa. Nu uitați din nou să testați pe măsură ce folosiți cleme de aligator pentru a vă asigura că componentele funcționează în continuare după ce le lipiți împreună.

1. Așezați senzorii și Micro: bit pe mănușă pentru a vă face o idee despre unde trebuie să ajungă firele și cât timp trebuie să fie.
2. Înfășurați un fir roșu în jurul știftului de alimentare. Folosiți tăietori de sârmă pentru a dezbrăca firul și lăsați goluri deschise la care veți atașa firul. Faceți acest lucru și pentru firul de masă.
3. Descrieți mănușa pe care nu o folosiți. Acest lucru ne va ajuta să lipim totul împreună și să corectăm lungimea lucrurilor. Veți face totul înapoi, deși verificați atât de bine că lipiți lucrurile în modul corect!
4. Așezați Micro: bit aproximativ în locul în care doriți să vă pună pe mână. Faceți semne la sol și firele de alimentare stau.
5. Bandați firul, alimentarea sau împământarea, la locul său.
6. Bandați senzorul de îndoire în poziție.
7. Tăiați firul de alimentare astfel încât să treacă cu ușurință peste semnul de pe linia de alimentare.
8. Lipiți aceste piese împreună.
9. Repetați pașii 5-8 pentru celelalte fire de alimentare și pentru firele de masă.
10. Luați Micro: bit și așezați-l sub firele nou lipite. Lipiți puterea și împământarea la pinii corecți.
11. Decupați firele analogice, astfel încât acestea să treacă peste capătul pinilor și să se înfășoare în partea din față.
12. Lipiți firele pe pinii corecți.
13. Am constatat că citirile mele au fost cele mai bune și mai consistente atunci când toate firele (alimentare, masă și analog) au atins atât fața, cât și partea din spate a pinilor.
14. O pistă cu pistă, împingeți simultan senzorii de îndoire în sus degetele.
15. Odată ce senzorii sunt la locul lor, puneți mănușa și asigurați-vă că potrivirea este corectă. Dacă trebuie să adăugați melodii sau să le remediați plasarea, faceți acest lucru acum.
16. Odată ce senzorii se află acolo unde doriți, notați unde să legați bitul Micro: în loc. Puteți utiliza găurile mici de pe ambele părți ale butoanelor A și B sau puteți folosi găurile pentru știfturi. Folosiți acul și firul pentru a-l lega pe mână

Felicitări! Componentele hardware pentru mănușă sunt acum complete!

Pasul 7: Cod Micro: bit

Acum o să vă trec prin codul Micro: bit. Sunteți mai mult decât binevenit să faceți acest cod ceea ce doriți, dar am vrut să trec și să explic totul, astfel încât să puteți vedea ce am făcut, cum am făcut-o și de ce! Puteți găsi codul meu aici.

1. Liniile 1-31. Aici folosesc funcții presetate cu care vine Micro: bit.

   • Apăsarea A scade numărul, care este selecția graficelor disponibile. După ce ajungeți la 0, acesta revine la cel mai mare număr.
   • Apăsând B crește numărul, odată ce ai atins cel mai mare număr de grafică disponibilă, acesta revine la 0.
   • Dacă graficul curent pe care l-ați selectat nu este cel care este desenat în prezent, apăsând simultan pe A și B se selectează noul grafic.
   • Dacă graficul curent pe care l-ați selectat este același cu cel care este desenat, apăsând simultan A și B umple forma dacă poate avea o umplere.
   • Shaking the Micro: bit setează variabila de ștergere la 1, care îi spune lui p5.js să șteargă pânza și să înceapă pe negru. Se întrerupe cursa pentru o secundă și apoi o setează înapoi la 0, astfel încât utilizatorul să poată continua să deseneze.

2. Liniile 32-64 îmi configurează variabilele. A fost important să se utilizeze o mulțime de variabile, astfel încât majoritatea valorilor să nu fie codificate în mod dur. Se pot schimba cu mănușa și, de asemenea, pot fi schimbate cu ușurință într-un singur loc, în loc să actualizeze o grămadă de valori peste tot. Voi evidenția câteva dintre cele importante.

   • Dimensiunea pânzei este una pe care este plăcută să o aveți într-o singură variabilă de actualizat în funcție de dimensiunea pânzei mele. La fel cu formaHigh. Pe măsură ce adaug sau scap de grafică, pot actualiza acel număr aici.
   • Variabilele ridicate și scăzute îmi permit să urmăresc curentul ridicat și scăzut pentru senzori și să am o gamă de calibrare continuă. Acest lucru este important, deoarece fiecare persoană care poartă mănușile va avea o gamă diferită de mișcare și, prin urmare, diferite maxime și minime pe care le poate atinge.
3. Liniile 66-68 citesc valorile analogice de la pinii pentru senzorii flex

4. Liniile 69-74 calibrează valoarea ridicată pentru degetul indicator.

   • Dacă se atinge un nou maxim, acesta îl stabilește ca fiind cel mai înalt.
   • Recalibrează intervalul degetului respectiv.
   • Folosește noua gamă pentru maparea culorilor
5. Liniile 75-80 calibrează valoarea scăzută pentru degetul indicator.
6. Liniile 81-104 fac același lucru ca 4 și 5 pentru degetele mijlocii și inelare.

7. Liniile 105-107 mapează valorile senzorului meu flexibil la valorile de culoare 0-255 (sau color Low to colorHigh, dacă nu fac gama completă)

   • Funcția de hartă încorporată de la Makecode nu mi-a oferit o cartografiere excelentă, având în vedere gama limitată pe care o obțineam de la senzori. Așa că mi-am creat propria funcție de cartografiere.
   • Iată cum funcționează. Gama de intrare a fiecărui deget este determinată de acesta (cea mai mare valoare - este cea mai mică valoare). Gama de culori, care este, de asemenea, (cea mai mare valoare a culorii - cea mai mică valoare a culorii) este împărțită la fiecare gamă de degete. Acest număr este rotunjit cel mai mic număr întreg și este coeficientul.
   • (Valoarea reală a senzorului - cea mai mică valoare a senzorului) vă oferă valoarea din interval. Înmulțind acest lucru cu coeficientul pe care l-am găsit mai sus și adăugând cele mai mici valori ale culorii vă oferă o valoare mapată de la senzor, la culoare, în intervalul de culori.
8. Linia 109 citește valoarea tonului (în sus și în jos).
9. Liniile 110-115 calibrează înalte și joase pentru această valoare
10. Linia 116 citește valoarea rulării (stânga și dreapta).
11. Liniile 117-122 calibrează înalte și joase pentru această valoare
12. Liniile 123-126 mapează valorile pitch și roll la dimensiunea pânzei și le rotunjesc la numere întregi.
13. Linia 127 scrie variabilele la ieșirea serială utilizând serial.writeLine, separând fiecare valoare printr-o virgulă și spațiul ",", pentru a analiza ulterior.

Odată ce ai codul cum îți place, descarcă-l și trage-l din descărcările tale pe Micro: bit (ar trebui să îl vezi în „Locații” din partea stângă a căutătorului) pentru a încărca codul pe Micro: bit

Pasul 8: Comunicare în serie cu P5.js

Pentru a comunica în serie cu p5.js, avem nevoie de un instrument suplimentar. Pentru a afla mai multe despre ceea ce se întâmplă în culisele comunicării seriale, vă sugerez să citiți acest articol.

1. Descărcați o versiune a aplicației p5.js de pe acest link. Am versiunea Alpha 6, dar oricare va funcționa.
2. Utilizați acest șablon p5.js pentru a comunica în serie. Pentru a-l configura, introduceți numele portului serial corect pentru portName pe linia 12. Acesta este numele pe care l-am descoperit la pasul 2.
3. Conectați-vă Micro: bit la computer
4. Deschideți aplicația serială p5.js.
5. Selectați-vă portul din lista de porturi și nu faceți altceva. Nici măcar apăsați deschis! Doar selectați-vă portul din listă.
6. Apăsați Run în șablonul serial p5.js. Ar trebui să îl puteți vedea deschis și vă va citi valori nule, deoarece nu am scris încă cod pentru a analiza ieșirea noastră serială.

Acum putem comunica în serie de la micro: bit la p5.js!

Pasul 9: Codul P5.js

Acum vom intra în codul p5.js. Aici citim valorile de ieșire serială și le folosim pentru a crea artă.

1. Așa cum am menționat în pasul anterior, asigurați-vă că portName de pe linia 12 este numele portului computerului dvs. specific.
2. În funcția setup (), pe liniile 32-33, am adăugat butonul stânga și dreapta cu createGraphics, am făcut acest lucru pentru a separa pânza, astfel încât o parte să fie folosită pentru desen, iar cealaltă parte să poată afișa direcții și să arate ce grafic te uiți sau derulezi.
3. Funcția draw () apelează funcțiile pe care le-am făcut pentru a crea separat leftBuffer și rightBuffer. De asemenea, definește de unde începe colțul din stânga sus al fiecărui buffer.
4. Funcția drawRightBuffer () afișează tot textul pentru direcții și selecții grafice

5. Funcțiile drawLeftBuffer () afișează toate elementele grafice.

   • Linia 93 generează aleatoriu o valoare pentru valoarea alfa. Astfel, toate culorile au valori de transparență diferite pentru a face să pară mai interesant. Dacă aș fi avut 4 senzori flex, l-aș fi folosit pe al patrulea pentru asta!
   • Linia 94 setează valoarea cursei la valorile r, g, b determinate de senzorii flex
   • Liniile 96-102 pot fi necomentate pentru a testa modul în care funcționează mănușa fără a avea mănușa folosind mouse-ul. Înlocuiți linia 102 cu grafică din restul funcției.
6. 104-106 ștergeți pânza atunci când mâna tremură setând fundalul pânzei la negru
7. 108-114 controlează umplerea formelor atunci când A + B sunt apăsate și selectate, iar forma actuală este aceeași
8. 117-312 sunt locurile unde sunt afișate graficele. Aceasta este cea mai mare parte a codului și partea pentru a deveni creativ! Vă sugerez să consultați referința p5.js pentru a înțelege mai bine cum să controlați formele. Am folosit rolul și pitch-ul pentru a controla pozițiile x, y și pentru a schimba dimensiunea formelor și a graficelor și, așa cum am menționat anterior, am folosit. indoiți senzorii pentru a controla culoarea. Aici puteți deveni creativi! Jucați-vă cu ceea ce p5.js are de oferit și veniți cu propria dvs. grafică distractivă de controlat! Aici am setat și descrierea pentru currentShape care se afișează pe butonul din dreapta.
9. 318-460 Am setat descrierea pentru Forma selectată.

10. Liniile 478-498 sunt funcția serialEvent (). Aici primim datele seriale.

    • Pe liniile 485-486 am setat proll și ppitch (rola și pitch-ul anterior) la valorile precedente de roll și pitch.
    • Pe linia 487 am împărțit datele pe ",". Fac asta pentru că am scris datele pentru a fi separate prin virgule. Ați pune aici orice ați separa variabilele. Aceste variabile sunt introduse în matricea numerelor.
    • Apoi, în liniile 488-496 am setat variabilele la elementul corespunzător din matrice și le traduc dintr-un șir într-un număr. Folosesc aceste variabile în funcția drawLeftBuffer () pentru a controla grafica.

Asta însumează destul de mult codul și finalizează proiectul! Acum putem vedea mănușa lucrând în acțiune.

Pasul 10: Produsul final

Iată câteva imagini ale mănușii terminate, precum și câteva piese de artă pe care le-a generat! Urmăriți videoclipul demonstrativ pentru a-l vedea în acțiune!