Umělecká rukavice: 10 kroků (s obrázky)

2025 Autor: John Day | [email protected]. Naposledy změněno: 2025-01-13 06:57

The Art Glove je nositelná rukavice, která obsahuje různé typy senzorů pro ovládání umělecké grafiky pomocí Micro: bit a p5.js. Prsty využívají snímače ohybu, které ovládají hodnoty r, g, b a akcelerometr v Micro: bit control x Souřadnice y pro grafiku. Tento projekt jsem vytvořil jako svůj termínový projekt pro svou třídu nositelných technologií jako senior v programu Technologie, umění a média na CU Boulder.

Zásoby:

• Zahradnické rukavice
• BBC Micro: Bit
• 3-4 Flex senzory
• Rezistory 10K Ohm
• Propojovací vodič (červený a černý)
• Nůžky na drát
• Prkénko
• Klipy aligátora (oboustranné a jednostranné)
• Pájka
• Páječka
• Jehla
• Vlákno
• Voskový papír
• Páska
• Nůžky
• Pero a tužka

Krok 1: Stopy snímače ohybu

Nejprve se zaměříme na výrobu hardwaru. Tímto způsobem, když se dostaneme ke kódování, máme skutečnou součást rukavice, kterou můžeme použít a vyzkoušet.

1. Pro začátek uděláme stopy na prstech, které udrží snímače ohybu na místě. Díky těmto stopám se senzory ohybu mohou mírně pohybovat tam a zpět a současně je udržovat v bezpečí ohýbat prstem. Nejprve si otočte rukavici naruby.
2. Vezměte snímač ohybu a umístěte jej do středního hřebene prstu. Pomocí pera načrtněte snímač ohybu
3. Protáhněte nit přes jehlu. Darujte si velkorysý kousek. Uvazujte uzel na konci nitě.
4. Začněte nahoře a na lajně, stačí vyfouknout oblouk snímače ohybu, protáhnout jehlu skrz rukavici dovnitř a protlačit ji zpět na rovnoběžnou čáru. Vytáhněte jehlu úplně skrz, aby uzel seděl na čáře, kterou jste nakreslili.
5. Pevně zatáhněte a na druhé straně udělejte 2–3 uzly, čímž zajistíte, že nit nevyjde. Ujistěte se, že je těsný, aby byl snímač ohybu zajištěn proti vašemu prstu
6. Odřízněte nit a nechte několik cm. nitě na konci, aby se uzel nevrátil.
7. Kroky 2-6 opakujte pro všechny prsty, ke kterým připevňujete flex senzory, dokud to nevypadá jako třetí až poslední obrázek.
8. Otočte rukavici dozadu tak, aby byla otočena správným způsobem. Protáhněte senzory ohybu po kolejích, abyste se ujistili, že vám správně padnou na ruku

Krok 2: Použití sériové komunikace s Micro: bit

Abychom viděli výstupy z našich senzorů, budeme používat sériovou komunikaci. V dalším kroku uvidíte, jak nastavit kód v Makecode, ale nejprve se naučíme, jak jej přečíst z našeho terminálu. (Poznámka: Používám počítač Mac, takže tyto kroky se mohou lišit v závislosti na vašem operačním systému. Další operační systémy najdete zde).

1. Připojte svůj Micro: bit
2. Otevřete terminál
3. zadejte 'ls /dev/cu.*'
4. Měli byste vidět něco, co vypadá jako '/dev/cu.usbmodem1422', ale přesné číslo bude záviset na vašem počítači
5. Jakmile spustíte kód, zadáním 'screen /dev/cu.usbmodem1422 115200' (s konkrétním číslem sériového portu) získáte sériový výstup vašeho Micro: bit
6. Váš výstup by měl vypadat podobně jako na obrázku výše, v závislosti na tom, jak jste výstup naformátovali!

Krok 3: Prototypování obvodu

Před pájením všech našich komponent k sobě provedeme prototyp obvodu a napíšeme několik řádků ukázkového kódu, abychom přečetli hodnoty našich senzorů a ujistili se, že naše komponenty fungují správně.

1. Pomocí schématu zapojení výše prototypujte svůj obvod na propojovací desce pomocí propojovacích vodičů, rezistorů, jednostranných krokosvorek a vašeho mikro: bitu.
2. Připojte senzory ohybu k pinům 0, 1 a 2.
3. Pomocí tohoto kódu jsem otestoval své flex senzory
4. Několikrát je ohněte, abyste viděli jejich hodnoty a ujistili se, že fungují správně

V kódu je poslední řádek „serial.writeLine“, kde píšeme na náš sériový výstup. Tento výstup můžete formátovat, jak chcete, každou proměnnou jsem oddělil čárkou a později rozdělil na čárku, ale tato část je na vás.

(Poznámka: Poté, co jsem udělal tento krok, zjistil jsem, že jeden z mých snímačů ohybu měl čip ve vodivé barvě, a proto nedostával dobré hodnoty. Proto mi některé obrázky ukazují práci se 4 senzory. Po zjištění tohoto jsem šel až na tři senzory na ukazateli, prostředku a prsteníku. Také jsem zjistil, že moje senzory ohybu měly nejširší rozsah čtení ohýbajícího se „opačným“způsobem, a proto jsem je nasadil na rukavici odporovou barvou dolů.)

Krok 4: Testování akcelerometru a světelného senzoru

V této fázi jsem také zvolil test akcelerometru a světelného senzoru na Micro: bit

1. Připojte svůj Micro: bit k počítači
2. Stáhněte si tento kód
3. Poté jsem testoval akcelerometr, světlo a snímače ohybu společně s tímto kódem

(Poznámka: V tu chvíli jsem přišel na to, že nemůžete používat kolíky a světelný senzor současně, takže jsem ve finále nepoužil světelný senzor, ale chtěl jsem, abyste viděli, jak číst světelný senzor, pokud potřebujete!)

Krok 5: Pájení snímačů ohybu

Nyní začneme pájet naše součásti dohromady! Je to vzrušující část, ale je důležité jít pomalu a kontrolovat, zda vše stále funguje, abyste se nedostali na konec, něco nefungovalo a nebyli si jisti, kde se stala chyba! Doporučuji použít zde vaše oboustranné krokosvorky, abyste zkontrolovali, zda každý senzor stále funguje, i když jsou k sobě pájeny vodiče a odpory.

1. Vezměte snímač ohybu a pásku nebo na něj položte těžký předmět, aby držel na místě.
2. Vezměte si odpor 10K Ohm a odřízněte většinu konce tak, aby byl vývod zhruba stejně dlouhý jako vývod na senzoru ohybu.
3. Vezměte páječku a přitlačte ji na odpor a vodič snímače ohybu, dokud nejsou horké
4. Vezměte pájku a zatlačte ji do horké žehličky, když se začne roztavit nad součástmi. Potřebujete jen tolik, abyste zakryli dráty.
5. Vyjměte žehličku. Zde jsem si nasadil druhou zahradnickou rukavici a držel odpor a drát na místě, zatímco pájka chladla.
6. Připněte dlouhý kus červeného drátu a umístěte jej na místo pájení, kde se setkávají odpor a snímač ohybu. Opakujte kroky 4-5. Toto je analogový pinový vodič.
7. Připněte dlouhý kus černého drátu a umístěte jej na konec druhého vodiče. Opakujte kroky 4-5. Toto je váš zemnící vodič.
8. Připněte dlouhý kus červeného drátu a druhý konec rezistoru, aby byl zhruba tak dlouhý jako předchozí strana. Opakujte kroky 4-5. Toto je váš napájecí vodič.
9. Opakujte kroky 1-8 pro ostatní senzory ohybu.
10. Nechte své dráty dlouhé, abyste měli prostor s nimi pracovat, aby byly později správné délky, když je nasadíte na Micro: bit.

Krok 6: Pájení na Micro: bit a montáž rukavice

Nyní, když jsou naše senzory připraveny, začneme pájet na Micro: bit a sestavovat rukavici. Nezapomeňte znovu testovat za pochodu pomocí aligátorových spon, abyste se ujistili, že součásti po jejich pájení stále fungují.

1. Položte senzory a Micro: bit na rukavici, abyste získali představu o tom, kam musí kabely vést a jak dlouhé musí být.
2. Omotejte červený vodič kolem napájecího kolíku. Použijte drátové řezačky k odizolování drátu a ponechte otevřené mezery, ke kterým drát připojíte. Udělejte to také pro zemnící vodič.
3. Popište rukavici, kterou nepoužíváte. To nám pomůže vše pájet dohromady a správně nastavit délku věcí. Budete však dělat všechno pozpátku, takže si dvakrát zkontrolujte, že pájíte věci správným způsobem!
4. Umístěte svůj Micro: bit přibližně tam, kde chcete, aby vám ležel na ruce. Udělejte značky, když zem a napájecí kabely sedí.
5. Olepte vodič, napájení nebo zem, na místě.
6. Přilepte snímač ohybu na místo.
7. Odřízněte napájecí kabel tak, aby procházel těsně kolem jeho značky na celém elektrickém vedení.
8. Tyto kusy spojte dohromady.
9. Opakujte kroky 5-8 pro ostatní napájecí vodiče a pro zemnící vodiče.
10. Vezměte bit Micro: bit a umístěte jej pod nově připájené dráty. Zapájejte napájení a uzemnění na správné piny.
11. Připněte analogové vodiče tak, aby procházely těsně za koncem kolíků a mohly se omotat na přední stranu.
12. Pájejte vodiče na správné kolíky.
13. Zjistil jsem, že moje hodnoty byly nejlepší a nejkonzistentnější, když se všechny vodiče (napájecí, uzemňovací a analogové) dotýkaly přední i zadní strany kolíků.
14. Jedna stopa po jedné stopě, současně zatlačte senzory ohybu nahoru po prstech.
15. Jakmile jsou senzory na svém místě, nasaďte si rukavice a ujistěte se, že sedí správně. Pokud potřebujete přidat stopy nebo opravit jejich umístění, udělejte to hned.
16. Jakmile senzory leží tam, kde je chcete mít, poznamenejte si, kam připevnit Micro: bit na místo. Můžete použít malé otvory na obou stranách tlačítek A a B nebo použít otvory pro kolíky. Pomocí jehly a nitě ji zavažte na místo na ruce

Gratuluji! Hardwarové komponenty rukavice jsou nyní kompletní!

Krok 7: Micro: bitový kód

Nyní vás provedu mikro: bitovým kódem. Jste více než vítáni, abyste z tohoto kódu udělali to, co chcete, ale chtěl jsem vše projít a vysvětlit, abyste viděli, co jsem udělal, jak jsem to udělal a proč! Můj kód najdete zde.

1. Řádky 1-31. Zde používám přednastavené funkce, s nimiž Micro: bit přichází.

   • Stisknutím klávesy A snížíte počet, což je výběr dostupné grafiky. Jakmile dosáhnete 0, vrátí se na nejvyšší číslo.
   • Stisknutím B se počet zvýší, jakmile dosáhnete nejvyššího počtu dostupných grafik, vrátí se zpět na 0.
   • Pokud aktuální grafika, kterou jste vybrali, není ta, která se právě kreslí, stisknutím A a B současně vyberete novou grafiku.
   • Pokud je aktuální grafika, kterou jste vybrali, stejná jako ta, která se kreslí, stisknutím A a B současně vyplní tvar, pokud může mít výplň.
   • Shaking the Micro: bit nastaví proměnnou mazání na 1, která řekne p5.js, aby vymazal plátno a začal na černo. Pozastaví běh na sekundu a poté jej nastaví zpět na 0, aby uživatel mohl pokračovat ve kreslení.

2. Řádky 32-64 nastavují mé proměnné. Bylo důležité použít mnoho proměnných, aby většina hodnot nebyla pevně zakódována. Mohou se měnit v rukavici a také je lze snadno měnit na jednom místě namísto aktualizace spousty hodnot všude. Zdůrazním několik důležitých.

   • Velikost plátna je taková, kterou je příjemné mít v jedné proměnné k aktualizaci v závislosti na velikosti mého plátna. Totéž s tvarem Vysoký. Když přidám nebo se zbavím grafiky, mohu toto číslo aktualizovat zde.
   • Vysoké a nízké proměnné mi umožňují sledovat aktuální vysoké a nízké hodnoty pro senzory a mají kontinuálně kalibrační rozsah. To je důležité, protože každý člověk, který nosí rukavice, bude mít jiný rozsah pohybu, a tedy různé výšky a minima, kterých je schopen dosáhnout.
3. Řádky 66-68 čtou analogové hodnoty z kolíků pro snímače flex

4. Řádky 69-74 kalibrují vysokou hodnotu ukazováčku.

   • Pokud je dosaženo nového maxima, nastaví se jako vysoké.
   • Překalibruje rozsah tohoto prstu.
   • Používá tento nový rozsah pro mapování barev
5. Řádky 75-80 kalibrují nízkou hodnotu ukazováčku.
6. Řádky 81-104 dělají totéž jako 4 a 5 pro prostřední a prsteníky.

7. Řádky 105-107 mapují mé hodnoty flex senzoru na hodnoty barev 0-255 (nebo colorLow to colorHigh, pokud nedělám celý rozsah)

   • Vestavěná funkce mapy z Makecode mi nedala skvělé mapování, vzhledem k omezenému dosahu, který jsem dostával ze svých senzorů. Vytvořil jsem si tedy vlastní mapovací funkci.
   • Zde je návod, jak to funguje. Vstupní rozsah každého prstu je určen jeho (nejvyšší hodnota - je to nejnižší hodnota). Barevný rozsah, který je také (nejvyšší hodnota barvy - nejnižší hodnota barvy), je dělen každý rozsahem prstů. Toto číslo je zaokrouhleno na nejnižší celé číslo a je kvocientem.
   • (Skutečná hodnota senzoru - nejnižší hodnota senzoru) vám poskytne hodnotu v rozsahu. Vynásobením tohoto kvocientu, který jsme našli výše, a přidáním nejnižších hodnot barev získáte namapovanou hodnotu ze senzoru do barvy v rámci barevného rozsahu.
8. Řádek 109 čte hodnotu výšky tónu (nahoru a dolů).
9. Řádky 110-115 kalibrují vysokou a nízkou hodnotu pro tuto hodnotu
10. Řádek 116 čte hodnotu role (vlevo a vpravo).
11. Řádky 117-122 kalibrují pro tuto hodnotu nejvyšší a nejnižší hodnoty
12. Řádky 123-126 mapují hodnoty rozteče a rolování na velikost plátna a zaokrouhlují je na celá čísla.
13. Řádek 127 zapisuje proměnné do sériového výstupu pomocí serial.writeLine, přičemž každou hodnotu odděluje čárkou a mezerou ",", aby bylo možné je analyzovat později.

Jakmile budete mít kód, jak se vám líbí, stáhněte si ho a přetáhněte ze stažených souborů do svého Micro: bitu (měli byste ho vidět na „Umístění“na levé straně vašeho vyhledávače) a nahrajte kód do Micro: bitu

Krok 8: Sériová komunikace s P5.js

K sériové komunikaci s p5.js potřebujeme další nástroj. Chcete -li se dozvědět více o tom, co se děje v zákulisí sériové komunikace, doporučujeme přečíst si tento článek.

1. Stáhněte si verzi aplikace p5.js z tohoto odkazu. Mám verzi Alpha 6, ale každá bude fungovat.
2. Tuto šablonu p5.js použijte pro sériovou komunikaci. Chcete -li jej nastavit, vložte správný správný název sériového portu pro portName na řádek 12. Toto je název, který jsme zjistili v kroku 2.
3. Připojte svůj Micro: bit k počítači
4. Otevřete sériovou aplikaci p5.js.
5. Vyberte svůj port ze seznamu portů a nedělejte nic jiného. Dokonce ani otevřít! Stačí si ze seznamu vybrat svůj port.
6. Stiskněte spustit v sériové šabloně p5.js. Měli byste to vidět otevřené a bude vám to číst hodnoty null, protože jsme dosud nenapsali kód pro analýzu našeho sériového výstupu.

Nyní můžeme sériově komunikovat z našeho Micro: bit na p5.js!

Krok 9: Kód P5.js

Nyní skočíme do kódu p5.js. Zde čteme sériové výstupní hodnoty a používáme je k tvorbě umění.

1. Jak jsem zmínil v předchozím kroku, ujistěte se, že portName na řádku 12 je název vašeho konkrétního počítačového portu.
2. Ve funkci setup (), na řádcích 32-33, jsem přidal levý a pravý Buffer s createGraphics, udělal jsem to, abych oddělil plátno tak, aby jedna část byla použita pro kreslení a druhá část mohla zobrazovat směry a ukazovat, která grafika prohlížíte nebo procházíte.
3. Funkce draw () volá funkce, které jsem vytvořil, abych vytvořil samostatně leftBuffer a rightBuffer. Také definuje, kde začíná levý horní roh každé vyrovnávací paměti.
4. Funkce drawRightBuffer () zobrazuje veškerý text pro směry a grafické výběry

5. Funkce drawLeftBuffer () zobrazí veškerou grafiku.

   • Řádek 93 náhodně vygeneruje hodnotu pro hodnotu alfa. Je to tak proto, že všechny barvy mají různé hodnoty průhlednosti, aby vypadaly zajímavěji. Kdybych měl 4 flex senzory, použil bych k tomu čtvrtý!
   • Řádek 94 nastavuje hodnotu zdvihu na hodnoty r, g, b určené senzory flexe
   • Řádky 96-102 lze odkomentovat, abyste otestovali, jak rukavice fungují, aniž byste měli rukavice, místo toho pomocí myši. Nahraďte řádek 102 grafikou ze zbytku funkce.
6. 104-106 vymazat plátno, když se ruka třese, nastavením pozadí plátna na černou
7. 108-114 řídí výplň tvarů, když jsou stisknuty a vybrány A+B a aktuální tvar je stejný
8. 117-312 jsou místa, kde jsou zobrazeny grafiky. Toto je hlavní část kódu a část kreativity! Doporučuji podívat se na odkaz p5.js, abyste lépe porozuměli ovládání tvarů. Roll and pitch jsem použil k ovládání pozic x, y a změně velikosti tvarů a grafiky, a jak jsem již zmínil dříve, použil jsem. senzory ohybu pro ovládání barvy. Tady můžete být kreativní! Hrajte s tím, co p5.js může nabídnout, a vymyslete si vlastní zábavnou grafiku, kterou budete ovládat! Zde jsem také nastavil popis pro currentShape, který se zobrazuje na rightBuffer.
9. 318-460 Nastavil jsem popis pro vybraný tvar.

10. Řádky 478-498 jsou funkcí serialEvent (). Zde dostáváme sériová data.

    • Na linkách 485-486 jsem nastavil proll a ppitch (předchozí roll a pitch) na předchozí hodnoty roll a pitch.
    • Na řádku 487 jsem rozdělil data na „,“. Dělám to, protože jsem napsal data, která mají být oddělena čárkami. Dali byste sem cokoli, s čím jste oddělili proměnné. Tyto proměnné se vloží do pole čísel.
    • Poté v řádcích 488-496 nastavím proměnné na odpovídající prvek v poli a přeložím je z řetězce na číslo. Tyto proměnné používám v celé funkci drawLeftBuffer () k ovládání grafiky.

To do značné míry shrnuje kód a dokončuje projekt! Nyní vidíme rukavici pracovat v akci.

Krok 10: Konečný produkt

Zde jsou některé obrázky hotových rukavic a také umělecká díla, která vytvořila! Podívejte se na demo video a uvidíte ho v akci!