Umelecká rukavica: 10 krokov (s obrázkami)

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:55

The Art Glove je nositeľná rukavica, ktorá obsahuje rôzne typy senzorov na ovládanie umeleckej grafiky pomocou Micro: bit a p5.js. Prsty používajú snímače ohybu, ktoré ovládajú hodnoty r, g, b a akcelerometer v ovládači Micro: bit x, súradnice y pre grafiku. Tento projekt som vytvoril ako svoj semestrálny projekt pre svoju triedu nositeľných technológií ako senior v programe Technológia, umenie a médiá na UK Boulder.

Zásoby:

• Záhradnícke rukavice
• BBC Micro: Bit
• 3-4 snímače Flex
• Rezistory 10K Ohm
• Zapojovací vodič (červený a čierny)
• Nožnice na drôt
• Breadboard
• Klipy aligátora (obojstranné a jednostranné)
• Spájka
• Spájkovačka
• Ihla
• Závit
• Voskový papier
• Páska
• Nožnice
• Pero a ceruzka

Krok 1: Stopy snímača ohybu

Najprv sa zameriame na výrobu hardvéru. Týmto spôsobom, keď sa dostaneme k kódovaniu, máme skutočnú súčasť rukavice, ktorú musíme použiť a otestovať.

1. Na začiatok urobíme stopy na prstoch, ktoré udržia snímače ohybu na svojom mieste. Vďaka týmto koľajniciam sa senzory ohybu môžu mierne pohybovať tam a späť a zároveň ich zaistiť k ohnutiu prstom. Najprv si prevráťte rukavicu naruby.
2. Vezmite snímač ohybu a umiestnite ho do stredného hrebeňa prsta. Pomocou pera načrtnite snímač ohybu
3. Prevlečte niť cez ihlu. Dajte si veľkorysý kúsok. Na konci nite uviažte uzol.
4. Začnite zhora a na čiare, jednoducho vyfúknite oblúk senzora ohybu, prevlečte ihlu rukavicou dovnútra a zatlačte ju späť na rovnobežnú čiaru. Vytiahnite ihlu úplne skrz, aby uzol sedel na línii, ktorú ste nakreslili.
5. Pevne zatiahnite a urobte 2-3 uzly na druhej strane. Tým sa zabezpečí, že niť nevyjde. Uistite sa, že je tesný, aby bol snímač ohybu zaistený proti prstu
6. Niť odstrihnite a nechajte niekoľko cm. nite na konci, aby sa uzol nevrátil.
7. Kroky 2 až 6 opakujte pre všetky prsty, ku ktorým pripevňujete ohybné senzory, až kým to nevyzerá ako tretí až posledný obrázok.
8. Otočte rukavicu dozadu tak, aby bola obrátená správnym spôsobom. Presuňte snímače ohybu medzi koľaje a uistite sa, že vám správne sadnú na ruku

Krok 2: Použitie sériovej komunikácie s mikro: bitom

Aby sme videli výstupy z našich senzorov, budeme používať sériovú komunikáciu. V nasledujúcom kroku uvidíte, ako nastaviť kód v programe Makecode, ale najskôr sa naučíme, ako ho čítať z nášho terminálu. (Poznámka: Používam počítač Mac, takže tieto kroky sa môžu líšiť v závislosti od vášho operačného systému. Ostatné operačné systémy nájdete tu).

1. Pripojte svoj Micro: bit
2. Otvorte terminál
3. zadajte „ls /dev/cu.*“
4. Mali by ste vidieť niečo, čo vyzerá ako „/dev/cu.usbmodem1422“, ale presné číslo bude závisieť od vášho počítača
5. Akonáhle spustíte kód, zadaním 'screen /dev/cu.usbmodem1422 115200' (s vašim konkrétnym číslom sériového portu) získate svoj sériový výstup Micro: bit
6. Váš výstup by mal vyzerať niečo ako obrázok vyššie, v závislosti od toho, ako ste výstup naformátovali!

Krok 3: Prototypovanie obvodu

Pred spájkovaním všetkých našich komponentov ideme na prototyp obvodu a napíšeme niekoľko riadkov ukážkového kódu, aby sme mohli prečítať hodnoty našich senzorov a zaistiť správnu funkciu našich komponentov.

1. Podľa schémy zapojenia vyššie prototypujte svoj obvod na doske pomocou prepojovacích vodičov, odporov, jednostranných krokosvoriek a mikro: bitu.
2. Pripojte snímače ohybu k kolíkom 0, 1 a 2.
3. Tento kód som použil na testovanie svojich flex senzorov
4. Niekoľkokrát ich ohnite, aby ste videli ich hodnoty a ubezpečili sa, že fungujú správne

V kóde je posledný riadok „serial.writeLine“, kde píšeme na náš sériový výstup. Tento výstup môžete formátovať, ako chcete, každú premennú som oddelil čiarkou a neskôr rozdelil na čiarku, ale táto časť je na vás.

(Poznámka: Potom, čo som urobil tento krok, zistil som, že jeden z mojich senzorov ohybu má čip vo vodivej farbe, a preto nedostáva dobré hodnoty. Preto mi niektoré obrázky ukazujú prácu so 4 senzormi. Keď som to zistil, išiel som až na tri senzory na ukazovateli, strednom a prstenníku. Tiež som zistil, že moje senzory ohybu mali najširší rozsah čítania ohýbajúceho sa „opačným“spôsobom, a preto som ich nasadil na rukavicu odporovou farbou smerom nadol.)

Krok 4: Testovanie akcelerometra a svetelného senzora

V tejto fáze som sa tiež rozhodol otestovať akcelerometer a svetelný senzor na Micro: bit

1. Pripojte svoj Micro: bit k počítaču
2. Stiahnite si tento kód
3. Potom som spolu s týmto kódom testoval akcelerometer, svetlo a senzory ohybu

(Poznámka: V tomto mieste som prišiel na to, že nemôžete používať kolíky a svetelný senzor súčasne, takže som svetelný senzor vo finále nepoužíval, ale chcel som, aby ste videli, ako čítať. svetelný senzor, ak potrebujete!)

Krok 5: Spájkovanie snímačov ohybu

Teraz začneme spájkovať naše komponenty dohromady! Je to vzrušujúca časť, ale je dôležité postupovať pomaly a kontrolovať, či všetko stále funguje, aby ste sa nedostali na koniec, niečo nefungovalo a neboli si istí, kde sa stala chyba! Odporúčame tu použiť vaše obojstranné krokosvorky, aby ste skontrolovali, či každý snímač stále funguje, aj keď sú vodiče a odpory spájkované dohromady.

1. Vezmite snímač ohybu a pásku alebo naň položte ťažký predmet, aby držal na mieste.
2. Vezmite odpor 10K Ohm a odstrihnite väčšinu konca tak, aby bol zvod asi taký dlhý ako zvod na snímači ohybu.
3. Vezmite svoju spájkovačku a zatlačte ju na kábel rezistora a snímača ohybu, kým nie sú horúce
4. Vezmite spájku a zatlačte ju do horúcej žehličky, keď sa začne topiť nad súčasťami. Na zakrytie drôtov potrebujete len toľko.
5. Odstráňte žehličku. Tu som si dal druhú záhradnícku rukavicu a držal odpor a drôt na mieste, kým spájka chladla.
6. Orezajte dlhý kus červeného drôtu a umiestnite ho na spájkovací spoj, kde sa stretávajú odpor a snímač ohybu. Opakujte kroky 4-5. Toto je analógový kolíkový vodič.
7. Orezajte dlhý kus čierneho drôtu a umiestnite ho na koniec druhého vodiča. Opakujte kroky 4-5. Toto je váš uzemňovací vodič.
8. Pripojte dlhý kus červeného drôtu a zapojte druhý koniec rezistora tak, aby bol zhruba taký dlhý ako predchádzajúca strana. Opakujte kroky 4-5. Toto je váš napájací kábel.
9. Zopakujte kroky 1-8 pre ostatné senzory ohybov.
10. Nechajte svoje káble dlhé, aby ste mali priestor na prácu, aby ich neskôr pri vkladaní na Micro: bit mala správna dĺžka.

Krok 6: Spájkovanie na mikro: bit a montáž rukavice

Teraz, keď sú naše senzory pripravené, začneme spájkovať s bitom Micro: bit a zostavovať rukavicu. Nezabudnite znova testovať za pochodu pomocou aligátorových svoriek, aby ste sa presvedčili, že súčiastky stále fungujú, aj keď ich spájkujete.

1. Položte senzory a Micro: bit na rukavicu, aby ste získali predstavu o tom, kam majú vodiče viesť a ako dlho musia byť.
2. Omotajte červený vodič okolo napájacieho kolíka. Pomocou nožov na drôt odizolujte drôt a nechajte otvorené medzery, ku ktorým kábel pripevníte. Vykonajte to aj pre uzemňovací vodič.
3. Načrtnite rukavicu, ktorú nepoužívate. Pomôže nám to spájkovať všetko dohromady a správne nastaviť dĺžku vecí. Budete však robiť všetko naopak, preto dvakrát skontrolujte, či veci spájkujete správnym spôsobom!
4. Položte svoj Micro: bit približne na miesto, kde ho chcete položiť na ruku. Urobte značky na mieste, kde sú uzemnené a napájacie vodiče.
5. Pripojte vodič, napájanie alebo uzemnenie, na miesto.
6. Prilepte snímač ohybu na miesto.
7. Odrežte napájací kábel tak, aby prechádzal tesne po značke na celom elektrickom vedení.
8. Tieto diely spájkujte dohromady.
9. Zopakujte kroky 5-8 pre ostatné napájacie vodiče a pre uzemňovacie vodiče.
10. Vezmite bit Micro: bit a umiestnite ho pod novo spájkované vodiče. Spájajte napájanie a uzemnenie na správne kolíky.
11. Pripojte analógové vodiče tak, aby prechádzali tesne za koncom kolíkov a mohli sa omotať na prednú stranu.
12. Spájkujte vodiče na správne kolíky.
13. Zistil som, že moje hodnoty boli najlepšie a najkonzistentnejšie, keď sa všetky vodiče (napájacie, uzemňovacie a analógové) dotýkali predného aj zadného kolíka.
14. Po jednej stope po jednej stope súčasne zatlačte senzory ohybu nahor.
15. Akonáhle sú senzory na mieste, nasaďte si rukavicu a uistite sa, že sedí správne. Ak potrebujete pridať stopy alebo opraviť ich umiestnenie, urobte to teraz.
16. Akonáhle senzory ležia tam, kde ich chcete mať, poznačte si, kam pripevnite bit Micro: na miesto. Môžete použiť malé otvory na oboch stranách tlačidiel A a B alebo použiť otvory pre kolíky. Pomocou ihly a nite ho zaviažte na miesto na ruke

Gratulujem! Hardvérové komponenty rukavice sú teraz kompletné!

Krok 7: Mikro: bitový kód

Teraz vás prevediem kódom Micro: bit. Ste viac ako vítaní, aby ste urobili tento kód tým, čo chcete, ale chcel som všetko prejsť a vysvetliť, aby ste videli, čo som urobil, ako som to urobil a prečo! Môj kód nájdete tu.

1. Riadky 1-31. Tu používam prednastavené funkcie, s ktorými Micro: bit prichádza.

   • Stlačenie A zníži počet, čo je výber dostupnej grafiky. Keď dosiahnete 0, vráti sa na najvyššie číslo.
   • Stlačenie B zvýši počet, akonáhle dosiahnete najvyšší počet dostupných grafík, vráti sa na 0.
   • Ak aktuálna grafika, ktorú ste vybrali, nie je tá, ktorá sa práve kreslí, stlačením A a B súčasne vyberiete novú grafiku.
   • Ak je aktuálna grafika, ktorú ste vybrali, rovnaká ako tá, ktorá sa kreslí, stlačením A a B sa súčasne vyplní tvar, ak môže mať výplň.
   • Shaking the Micro: bit nastaví premennú na vymazanie na 1, ktorá príkazu p5.js povie, aby vymazal plátno a začal na čierno. Preruší beh na sekundu a potom ho vráti späť na 0, aby užívateľ mohol pokračovať v kreslení.

2. Riadky 32-64 nastavujú moje premenné. Aby väčšina hodnôt nebola pevne zakódovaná, bolo dôležité použiť veľa premenných. Môžu sa meniť v rukavici a tiež sa dajú ľahko meniť na jednom mieste namiesto aktualizácie celého radu hodnôt na celom mieste. Poukážem na niekoľko dôležitých.

   • Veľkosť plátna je taká, ktorú je príjemné aktualizovať v jednej premennej v závislosti od veľkosti môjho plátna. To isté s tvarom Vysoký. Keď pridám alebo sa zbavím grafiky, môžem toto číslo aktualizovať tu.
   • Vysoké a nízke premenné mi umožňujú sledovať aktuálne najvyššie a najnižšie hodnoty senzorov a majú kontinuálny rozsah kalibrácie. To je dôležité, pretože každá osoba, ktorá nosí rukavice, bude mať iný rozsah pohybu, a teda rôzne výšky a minimá, ktoré dokáže dosiahnuť.
3. Riadky 66-68 čítajú analógové hodnoty z kolíkov ohybných senzorov

4. Riadky 69-74 kalibrujú vysokú hodnotu pre ukazovák.

   • Ak sa dosiahne nové maximum, nastaví sa ako vysoké.
   • Rekalibruje rozsah tohto prsta.
   • Tento nový rozsah používa na mapovanie farieb
5. Riadky 75-80 kalibrujú nízku hodnotu pre ukazovák.
6. Riadky 81-104 robia to isté ako 4 a 5 pre stredný a prstenník.

7. Riadky 105-107 mapujú moje hodnoty senzora flex na farebné hodnoty 0-255 (alebo colorLow to colorHigh, ak nerobím celý rozsah)

   • Vstavaná funkcia mapy z Makecode mi neposkytovala skvelé mapovanie, vzhľadom na obmedzený dosah, ktorý som dostával zo svojich senzorov. Vytvoril som si teda vlastnú funkciu mapovania.
   • Funguje to takto. Vstupný rozsah každého prsta je určený jeho (najvyššia hodnota - je to najnižšia hodnota). Farebný rozsah, ktorý je tiež (najvyššia hodnota farby - najnižšia hodnota farby), je vydelený každým rozsahom prstov. Toto číslo je zaokrúhlené na najnižšie celé číslo a je kvocientom.
   • (Skutočná hodnota snímača - najnižšia hodnota snímača) vám poskytne hodnotu v rozsahu. Vynásobením tohto kvocientu, ktorý sme našli vyššie, a pridaním najnižších hodnôt farieb získate namapovanú hodnotu zo senzora na farbu v rámci farebného rozsahu.
8. Riadok 109 číta hodnotu výšky tónu (hore a dole).
9. Riadky 110-115 kalibrujú pre túto hodnotu najvyššiu a najnižšiu hodnotu
10. Riadok 116 číta hodnotu zvitku (vľavo a vpravo).
11. Riadky 117-122 kalibrujú pre túto hodnotu najvyššiu a najnižšiu hodnotu
12. Riadky 123-126 mapujú hodnoty rozstupu a rolovania na veľkosť plátna a zaokrúhľujú ich na celé čísla.
13. Riadok 127 zapíše premenné do sériového výstupu pomocou serial.writeLine, pričom každú hodnotu oddelí čiarkou a medzerou „,“, aby sa neskôr analyzovali.

Akonáhle budete mať kód, ako sa vám páči, stiahnite si ho a presuňte ho zo svojich stiahnutých súborov do svojho mikro: bitu (mali by ste ho vidieť na „Miestach“na ľavej strane vyhľadávača), aby ste kód nahrali do mikro: bitu

Krok 8: Sériová komunikácia s P5.js

Na sériovú komunikáciu s súborom p5.js potrebujeme ďalší nástroj. Ak sa chcete dozvedieť viac o zákulisí sériovej komunikácie, navrhujem prečítať si tento článok.

1. Stiahnite si verziu aplikácie p5.js z tohto odkazu. Mám verziu Alpha 6, ale každá bude fungovať.
2. Túto šablónu p5.js použite na sériovú komunikáciu. Ak ho chcete nastaviť, zadajte do riadka 12 svoj správny názov sériového portu pre portName. Toto je názov, ktorý sme zistili v kroku 2.
3. Pripojte svoj Micro: bit k počítaču
4. Otvorte sériovú aplikáciu p5.js.
5. Vyberte svoj port zo zoznamu portov a nerobte nič iné. Dokonca ani otvoriť! Stačí si vybrať port zo zoznamu.
6. Stlačte tlačidlo Spustiť v sériovej šablóne p5.js. Mali by ste to vidieť otvorené a bude vám to čítať nulové hodnoty, pretože sme ešte nenapísali kód na analýzu nášho sériového výstupu.

Teraz môžeme sériovo komunikovať z nášho Micro: bit na p5.js!

Krok 9: Kód P5.js

Teraz skočíme do kódu p5.js. Tu čítame sériové výstupné hodnoty a používame ich na tvorbu umenia.

1. Ako som už spomenul v predchádzajúcom kroku, uistite sa, že portName na riadku 12 je názov vášho konkrétneho počítačového portu.
2. Vo funkcii setup (), na riadky 32-33, som pridal ľavý a pravý Buffer s createGraphics, urobil som to tak, aby som oddelil plátno tak, aby jedna časť slúžila na kreslenie a druhá časť mohla zobrazovať smery a ukazovať, ktorá grafika prezeráte alebo listujete.
3. Funkcia draw () volá funkcie, ktoré som vytvoril na vytvorenie oddelene leftBuffer a rightBuffer. Tiež definuje, kde začína ľavý horný roh každej vyrovnávacej pamäte.
4. Funkcia drawRightBuffer () zobrazuje všetok text pre výber smerov a grafiky

5. Funkcie drawLeftBuffer () zobrazujú všetku grafiku.

   • Riadok 93 náhodne vygeneruje hodnotu pre hodnotu alfa. Je to tak, pretože všetky farby majú rôzne hodnoty priehľadnosti, aby vyzerali zaujímavejšie. Keby som mal 4 flexibilné snímače, použil by som na to štvrtý!
   • Riadok 94 nastavuje hodnotu zdvihu na hodnoty r, g, b určené snímačmi ohybu
   • Na riadky 96-102 môžete odkomentovať testovanie fungovania rukavíc bez toho, aby ste ich museli používať, a to namiesto toho, že použijete myš. Nahraďte riadok 102 grafikou zo zvyšku funkcie.
6. 104-106 vymažte plátno, keď sa ruka trasie, a nastavte pozadie plátna na čierne
7. 108-114 ovláda výplň tvarov, keď sú stlačené a vybraté A+B a aktuálny tvar sú rovnaké
8. 117-312 sú miesta, kde sú zobrazené grafiky. Toto je hlavná časť kódu a časť na kreativitu! Odporúčame vám pozrieť sa na odkaz p5.js, aby ste lepšie porozumeli ovládaniu tvarov. Roll and pitch som použil na ovládanie polôh x, y a zmenu veľkosti tvarov a grafiky, a ako som už spomenul, použil som. senzory ohybu na ovládanie farby. Tu môžete byť kreatívni! Hrajte s tým, čo p5.js ponúka, a vymyslite svoju vlastnú zábavnú grafiku na ovládanie! Tu som tiež nastavil popis pre currentShape, ktorý sa zobrazuje na rightBuffer.
9. 318-460 Nastavil som popis pre vybraný tvar.

10. Riadky 478-498 sú funkciou serialEvent (). Tu dostávame sériové údaje.

    • Na riadkoch 485-486 som nastavil proll a ppitch (predchádzajúci roll and pitch) na predchádzajúce hodnoty roll and pitch.
    • Na riadku 487 som rozdelil údaje na „,“. Robím to preto, že som napísal údaje, ktoré majú byť oddelené čiarkami. Dali by ste sem čokoľvek, s čím by ste oddelili premenné. Tieto premenné sa vložia do poľa čísel.
    • Potom v riadkoch 488-496 nastavím premenné na zodpovedajúci prvok v poli a preložím ich z reťazca na číslo. Tieto premenné používam v celej funkcii drawLeftBuffer () na ovládanie grafiky.

To do značnej miery zhrnie kód a dokončí projekt! Teraz vidíme rukavicu pracovať v akcii.

Krok 10: Konečný produkt

Tu je niekoľko fotografií hotových rukavíc a niektorých umeleckých diel, ktoré vygenerovali! Pozrite sa na demo video a uvidíte ho v akcii!