Művészi kesztyű: 10 lépés (képekkel)

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:39

Az Art Glove egy hordható kesztyű, amely különböző típusú érzékelőket tartalmaz a grafika vezérléséhez Micro: bit és p5.js segítségével. Az ujjak hajlítóérzékelőket használnak, amelyek szabályozzák az r, g, b értékeket, és a gyorsulásmérőt a Micro: bit vezérlőkben x, y koordináták a grafikához. Ezt a projektet a Cu Boulder Technológia, Művészet és Média program vezetőjeként hoztam létre, amikor a Wearable Technology Osztályomon dolgozom.

Kellékek:

• Kerti kesztyű
• BBC Micro: Kicsit
• 3-4 Flex érzékelő
• 10K ohmos ellenállások
• Csatlakozó vezeték (piros és fekete)
• Drótvágó
• Kenyeretábla
• Alligátor klipek (kétoldalas és egyoldalas)
• Forrasztó
• Forrasztópáka
• Tű
• cérna
• Zsírpapír
• Szalag
• Olló
• Toll és ceruza

1. lépés: Hajlítsa meg az érzékelő nyomvonalait

Először is a hardver gyártására összpontosítunk. Így a kódoláshoz a kesztyű -összetevőt kell használni és tesztelni.

1. Kezdésként elkészítjük a nyomokat az ujjakon, amelyek a kanyarérzékelőket a helyükön tartják. Ezeknek a nyomvonalaknak köszönhetően a hajlítóérzékelők kissé előre -hátra mozoghatnak, miközben biztonságban tartják őket az ujjhoz a hajlításhoz. Először fordítsa kifelé a kesztyűt.
2. Vegyünk egy hajlásérzékelőt, és helyezzük az ujj középső gerincébe. Toll segítségével körvonalazza a hajlításérzékelőt
3. Csúsztassa a cérnát a tűbe. Adj magadnak egy nagylelkű darabot. Csomót kötni a szál végén.
4. Kezdve a tetejétől és a vonaltól, csak fújja le a hajlítóérzékelő ívét, csúsztassa át a tűt a kesztyűn belül, és tolja vissza a párhuzamos vonalon. Húzza végig a tűt úgy, hogy a csomó a húzott vonalon üljön.
5. Szorosan húzva tegyen 2-3 csomót a másik oldalon. Ez biztosítja, hogy a szál ne jöjjön ki. Győződjön meg arról, hogy szoros, hogy a hajlításérzékelő biztonságosan rögzüljön az ujjával
6. Vágja le a cérnát, hagyva néhány cm -t. cérnát a végén, hogy a csomó ne szűnjön meg.
7. Ismételje meg a 2-6 lépéseket az összes ujjhoz, amelyhez a flex érzékelőket csatlakoztatja, amíg úgy nem tűnik, mint a harmadik az utolsó kép.
8. Fordítsa hátra a kesztyűt, hogy a megfelelő irányba forduljon. Csúsztassa a hajlítóérzékelőket a pályákon, hogy megbizonyosodjon arról, hogy helyesen illeszkednek a kezére

2. lépés: A soros kommunikáció használata a Micro: bittel

Az érzékelőink kimeneteinek megtekintéséhez soros kommunikációt fogunk használni. A következő lépésben látni fogja, hogyan kell beállítani a kódot a Makecode -ban, de először megtanuljuk, hogyan olvassuk el a terminálunkról. (Megjegyzés: Mac gépet használok, ezért ezek a lépések az operációs rendszertől függően eltérőek lehetnek. A többi operációs rendszert itt találja.)

1. Csatlakoztassa a Micro: bit -et
2. Nyissa meg a terminált
3. írja be: "ls /dev/cu.*"
4. Látnia kell valamit, amely így néz ki: "/dev/cu.usbmodem1422", de a pontos szám a számítógéptől függ
5. A kód futtatása után a „screen /dev/cu.usbmodem1422 115200” begépelésével (a saját soros portszámával) megadhatja a Micro: bit soros kimenetét
6. A kimenetnek valahogy hasonlítania kell a fenti képre, attól függően, hogy hogyan formázta a kimenetet!

3. lépés: Az áramkör prototípusának létrehozása

Mielőtt minden alkatrészünket összeforrasztanánk, prototípusba állítjuk az áramkört, és írunk néhány sor példakódot, hogy leolvassuk az érzékelő értékeinket, és megbizonyosodjunk arról, hogy alkatrészeink megfelelően működnek.

1. A fenti kapcsolási rajz segítségével prototipizálja az áramkört a kenyértáblán jumper vezetékek, ellenállások, az egyoldalú aligátor klipek és a Micro: bit segítségével.
2. Csatlakoztassa a hajlításérzékelőket a 0, 1 és 2 csapokhoz.
3. Ezt a kódot használtam a flex érzékelőim tesztelésére
4. Hajlítsa meg őket néhányszor, hogy lássa a leolvasott értékeket, és győződjön meg arról, hogy megfelelően működnek

A kódban a "serial.writeLine" utolsó sorban írjuk a soros kimenetünket. Ezt a kimenetet tetszés szerint formázhatja, minden változót vesszővel elválasztottam, majd később vesszőre osztottam, de ez a rész rajtad múlik.

(Megjegyzés: Miután megtettem ezt a lépést, rájöttem, hogy az egyik hajlítóérzékelőmben van egy chip a vezető festékben, és ezért nem kapok jó leolvasást. Ezért néhány kép azt mutatja, hogy 4 érzékelővel dolgozom. Miután ezt megtudtam, elmentem A mutató, a középső és a gyűrűsujj mindössze három érzékelője volt. Azt is megállapítottam, hogy a hajlítóérzékelőim a legszélesebb olvasási tartományt hajlítják az "ellentétes" módon, ezért tettem fel őket a kesztyűre úgy, hogy az ellenálló festék lefelé nézzen.)

4. lépés: A gyorsulásmérő és a fényérzékelő tesztelése

Ebben a szakaszban úgy döntöttem, hogy kipróbálom a gyorsulásmérőt és a fényérzékelőt a Micro: bit -en

1. Csatlakoztassa a Micro: bitet a számítógéphez
2. Töltse le ezt a kódot
3. Ezután ezzel a kóddal teszteltem a gyorsulásmérőt, a fény- és kanyarérzékelőket

(Megjegyzés: Ezen a ponton rájöttem, hogy nem használhatja egyszerre a csapokat és a fényérzékelőt, így nem használtam a fényérzékelőt a döntőben, de azt akartam, hogy lássa az olvasást ha szükséges, a fényérzékelőt!)

5. lépés: A hajlításérzékelők forrasztása

Most elkezdjük együtt forrasztani az alkatrészeket! Ez egy izgalmas rész, de fontos, hogy lassan haladjunk, és ellenőrizzük, hogy minden működik -e menet közben, nehogy a végére érjünk, valami ne működjön, és ne legyünk biztosak abban, hogy hol történt a hiba! Azt javaslom, hogy használja a kétoldalas aligátor klipjeit, hogy ellenőrizze, hogy minden érzékelő működik -e, ha a vezetékek és az ellenállások össze vannak forrasztva.

1. Fogja meg a hajlításérzékelőt és a szalagot, vagy tegyen rá egy nehéz tárgyat, hogy a helyén tartsa.
2. Vegye ki a 10K ohmos ellenállását, és vágja le a végét úgy, hogy a vezeték körülbelül olyan hosszú legyen, mint a hajlításérzékelő vezeték.
3. Fogja meg a forrasztópákaját, és nyomja meg mind az ellenállást, mind a hajlítóérzékelő vezetékét, amíg felforrósodnak
4. Fogja meg a forrasztót, és nyomja be a forró vasalóba, miközben olvadni kezd az alkatrészek felett. Csak annyi kell, hogy lefedje a vezetékeket.
5. Távolítsa el a vasalót. Itt felvettem a másik kerti kesztyűt, és tartottam a helyén az ellenállást és a vezetéket, amíg a forrasztás lehűlt.
6. Vágja le a vörös drót hosszú darabját, és helyezze a forrasztási kötésre, ahol az ellenállás és a hajlításérzékelő találkozik. Ismételje meg a 4-5. Ez az analóg tűs vezeték.
7. Vágja le a fekete drót hosszú darabját, és helyezze a másik vezeték végére. Ismételje meg a 4-5. Ez a földelő vezetéked.
8. Csíptessen le egy hosszú piros drótot, és csipje le az ellenállás másik végét, hogy körülbelül olyan hosszú legyen, mint az előző oldal. Ismételje meg a 4-5. Ez a tápkábel.
9. Ismételje meg az 1-8 lépéseket a többi hajlítóérzékelőhöz.
10. Hagyja hosszú ideig a vezetékeket, hogy legyen helyük dolgozni, hogy később megfelelő hosszúságúak legyenek, amikor a Micro: bitre helyezi őket.

6. lépés: Forrasztás a Micro: bithez és a kesztyű összeszerelése

Most, hogy az érzékelőink készen állnak, elkezdjük a Micro: bit forrasztását és a kesztyű összeszerelését. Ne felejtse el újra tesztelni menet közben, aligátorcsipeszekkel, hogy megbizonyosodjon arról, hogy az alkatrészek továbbra is működnek, miután összeforrasztották őket.

1. Helyezze a szenzorokat és a Micro: bit -et a kesztyűre, hogy képet kapjon arról, hová kell vezetnie a vezetékeket, és mennyi ideig kell lenniük.
2. Tekerjen egy piros vezetéket a hálózati táp körül. Használjon drótvágókat a vezeték eltávolításához, és hagyjon nyitott réseket, amelyekhez a vezetéket rögzíti. Tegye ezt a földelő vezetékhez is.
3. Vázolja fel a nem használt kesztyűt. Ez segít nekünk mindent összeforrasztani, és helyesen beállítani a dolgok hosszát. Visszafelé viszont mindent megtesz, ezért ellenőrizze kétszer, hogy a megfelelő módon forrasztja -e a dolgokat!
4. Helyezze a Micro: bit -t nagyjából oda, ahol szeretné, hogy a kezére fektesse. Jelölje meg, hogy a föld és a tápvezetékek ülnek.
5. Ragassza a helyére a vezetéket, tápellátást vagy földelést.
6. Ragassza be a hajlításérzékelőt a helyére.
7. Vágja el a tápkábelt úgy, hogy az csak túlmegy a jelzésen az összes vezetéken.
8. Forrasztja össze ezeket a darabokat.
9. Ismételje meg az 5-8 lépést a többi tápvezetékhez és a földelő vezetékekhez.
10. Fogja meg a Micro: bitet és helyezze az újonnan forrasztott vezetékek alá. Forrasztja az áramot és a földelést a megfelelő csapokhoz.
11. Vágja le az analóg vezetékeket úgy, hogy azok éppen a csapok vége mellett haladjanak, és az elülső oldalra tekerhessenek.
12. Forrasztja a vezetékeket a megfelelő csapokhoz.
13. Azt tapasztaltam, hogy a leolvasásaim akkor voltak a legjobbak és a legkövetkezetesebbek, amikor az összes vezeték (táp, föld és analóg) hozzáér a csapok elejéhez és hátuljához.
14. Egy -egy sávonként nyomja egyidejűleg felfelé a hajlításérzékelőket az ujjakon.
15. Ha az érzékelők a helyükön vannak, vegye fel a kesztyűt, és győződjön meg arról, hogy az illeszkedés megfelelő. Ha zeneszámokat kell hozzáadnia, vagy javítaniuk kell az elhelyezésüket, most tegye meg.
16. Amint az érzékelők a kívánt helyen fekszenek, jegyezze fel, hogy a Micro: bit hova kösse a helyére. Használhatja az A és B gombok mindkét oldalán található kis lyukakat, vagy használhatja a csapok lyukait. A tűvel és a cérnával rögzítse a helyére a kezén

Gratula! A kesztyű hardver alkatrészei most elkészültek!

7. lépés: Micro: bit kód

Most végigvezetem a Micro: bit kódon. Szívesen látjuk, hogy ezt a kódot olyanná tesszük, amit akarunk, de át akartam menni és mindent elmagyarázni, hogy lássátok, mit tettem, hogyan csináltam és miért! A kódomat itt találod.

1. 1-31 sor. Itt a Micro: bit előre beállított funkcióit használom.

   • Az A gomb megnyomásával csökken a szám, ami a rendelkezésre álló grafikák választéka. Ha eléri a 0 értéket, akkor visszaáll a legmagasabb számra.
   • Ha megnyomja a B gombot, akkor növeli a számot, ha eléri a rendelkezésre álló grafikák legnagyobb számát, az visszaáll 0 -ra.
   • Ha az éppen kiválasztott grafika nem az, amelyet éppen rajzol, az A és B gombok egyidejű megnyomásával kiválaszthatja az új grafikát.
   • Ha a kiválasztott aktuális grafika megegyezik a rajzolt grafikával, az A és B gombok egyidejű megnyomásával kitölti az alakzatot, ha lehet kitöltés.
   • A Micro: bit rázása a törlési változót 1 -re állítja, amely azt mondja a p5.js -nek, hogy törölje a vásznat, és feketén kezdje. Egy másodpercre szünetelteti a futást, majd visszaállítja 0 -ra, hogy a felhasználó folytathassa a rajzolást.

2. A 32-64 sorok állítják be a változóimat. Fontos volt, hogy sok változót használjunk, hogy az értékek nagy része ne legyen keménykódolva. Változhatnak a kesztyűvel, és könnyen cserélhetők egy helyen, ahelyett, hogy egy csomó értéket frissítenének mindenhol. Kiemelnék néhány fontosat.

   • A vászon mérete olyan, amelyet jó, ha egy változóban frissíthet a vászonom méretétől függően. Ugyanez a formával High. Ahogy hozzáadok vagy megszabadulok a grafikától, itt frissíthetem ezt a számot.
   • A magas és az alacsony változók lehetővé teszik, hogy nyomon kövessem az érzékelők jelenlegi magas és alacsony szintjét, és folyamatosan kalibrálási tartományuk van. Ez azért fontos, mert a kesztyűt viselő személyek mozgástartománya eltérő lesz, ezért különböző magasságokat és mélységeket tudnak elérni.
3. A 66-68 sorok a flex érzékelők csapjainak analóg értékeit olvassák be

4. A 69-74. Sorok a mutatóujj magas értékét kalibrálják.

   • Ha új csúcsot érünk el, akkor ezt állítjuk magasnak.
   • Újrakalibrálja az ujj tartományát.
   • Ezt az új tartományt használja a színleképezéshez
5. A 75-80. Sorok a mutatóujj alacsony értékét kalibrálják.
6. A 81-104 sorok ugyanazt teszik, mint a 4 és 5 sorok a középső és a gyűrűs ujjak esetében.

7. A 105–107. Sorok leképezik a flex érzékelő értékeimet a 0–255 (vagy a szín alacsony

   • A Makecode beépített térképfunkciója nem adott nagyszerű leképezést, tekintettel az érzékelőim által kapott korlátozott hatótávolságra. Így elkészítettem saját térképészeti funkciómat.
   • Így működik. Az egyes ujjak bemeneti tartományát ez határozza meg (a legmagasabb érték - ez a legalacsonyabb érték). A színtartományt, amely egyben a (legmagasabb színérték - a legalacsonyabb színérték) is elosztja minden ujjtartomány. Ezt a számot a legalacsonyabb egész számra kerekítik, és ez a hányados.
   • A (tényleges érzékelőérték - a legalacsonyabb érzékelőérték) megadja a tartományon belüli értéket. Ha ezt megszorozzuk a fent talált hányadossal, és hozzáadjuk a legalacsonyabb színértékeket, akkor az érzékelőtől a színtartományon belül leképezett értéket kapunk.
8. A 109. sor a hangmagasság értékét olvassa (fel és le).
9. A 110-115 sorok a magas és az alacsony értéket kalibrálják erre az értékre
10. A 116. sor a tekercs értékét olvassa (balra és jobbra).
11. A 117-122 sorok kalibrálják a magas és az alacsony értéket ehhez az értékhez
12. A 123-126. Sorok a pálya méretét és a görgetési értékeket a vászon méretéhez rendelik, és egész számokra kerekítik.
13. A 127. sor írja be a változókat a soros kimenetre a serial.writeLine használatával, minden értéket vesszővel és "" "szóközzel elválasztva, későbbi elemzéshez.

Miután megkapta a kívánt kódot, töltse le, és húzza át a letöltésekből a Micro: bitre (ezt a kereső bal oldalán található "Helyek" részben kell látnia), hogy feltöltse a kódot a Micro: bitre

8. lépés: Soros kommunikáció a P5.js fájllal

Ahhoz, hogy sorozatosan kommunikálni tudjunk a p5.js fájllal, szükségünk van egy extra eszközre. Ha többet szeretne megtudni arról, hogy mi történik a soros kommunikáció kulisszái mögött, azt javaslom, olvassa el ezt a cikket.

1. Töltse le a p5.js alkalmazás verzióját erről a linkről. Nekem van Alpha 6 verzióm, de bármelyik működni fog.
2. Használja ezt a p5.js sablont a soros kommunikációhoz. A beállításhoz illessze be a megfelelő soros port nevét a portName névre a 12. sorban. Ezt a nevet találtuk ki a 2. lépésben.
3. Csatlakoztassa a Micro: bitet a számítógéphez
4. Nyissa meg a p5.js soros alkalmazást.
5. Válassza ki a portot a portlistából, és ne tegyen mást. Még csak nem is nyitva! Csak válassza ki a portot a listából.
6. Nyomja meg a futtatás gombot a p5.js soros sablonban. Látnia kell, hogy nyitva van, és null értékeket fog olvasni, mivel még nem írtunk kódot a soros kimenet elemzésére.

Most sorozatosan kommunikálhatunk a Micro: bitről a p5.js -re!

9. lépés: P5.js kód

Most ugrunk a p5.js kódba. Itt olvassuk be a soros kimeneti értékeket és használjuk fel őket művészet létrehozásához.

1. Amint azt az előző lépésben említettem, győződjön meg arról, hogy a 12. sorban található portName az Ön számítógépének portneve.
2. A setup () függvényben a 32-33. Sorokhoz hozzáadtam a bal és a jobb oldali puffert a createGraphics segítségével, ezt elválasztva a vásznat úgy, hogy az egyik részt rajzolásra használják, a másik rész pedig az irányokat jelenítse meg, és azt, hogy melyik grafika nézed vagy görgeted.
3. A draw () függvény az általam létrehozott függvényeket hívja meg, hogy a leftBuffer és a rightBuffer külön legyen létrehozva. Azt is meghatározza, hogy hol kezdődik az egyes pufferek bal felső sarka.
4. A drawRightBuffer () függvény megjeleníti az útvonalterv és a grafika kiválasztásának összes szövegét

5. A drawLeftBuffer () függvények megjelenítik az összes grafikát.

   • A 93. sor véletlenszerűen generál egy értéket az alfa értékhez. Ez azt jelenti, hogy minden színnek különböző átlátszósági értékei vannak, hogy érdekesebbé tegye. Ha volna 4 flex érzékelőm, akkor a negyediket használtam volna erre!
   • A 94. sor a löketértéket a flex érzékelők által meghatározott r, g, b értékekre állítja
   • A 96-102 sorokat megjegyzés nélkül lehet kipróbálni, hogy a kesztyű hogyan működik anélkül, hogy a kesztyűt használná az egér használatával. Cserélje ki a 102. sort a függvény többi részének grafikájára.
6. 104-106 törölje a vásznat, amikor a kéz remeg, és a vászon hátterét feketére állítja
7. 108-114 vezérli az alakzatok kitöltését, amikor az A+B gombokat megnyomja és kiválasztja, és az aktuális alakzat megegyezik
8. 117-312 a grafika. Ez a kód nagy része és a kreatív rész! Javaslom, hogy nézze meg a p5.js hivatkozást, hogy jobban megértse az alakzatok vezérlését. A tekercset és a hangmagasságot használtam az x, y pozíciók vezérlésére, valamint az alakzatok és a grafika méretének megváltoztatására, és ahogy korábban említettem, a. hajlító szenzorok a szín szabályozásához. Itt lehet kreatívkodni! Játssz azzal, amit a p5.js kínál, és állítsd elő saját szórakoztató grafikádat a vezérléshez! Itt állítom be a currentShape leírását is, amely megjelenik a jobb oldali pufferen.
9. 318-460 Beállítom a kijelöltAlak leírását.

10. A 478-498 sor a serialEvent () függvény. Itt kapjuk meg a soros adatokat.

    • A 485-486. Sorokban a proll és a ppitch (előző dobás és hangmagasság) értékét az előző dobási és hangmagasság értékekre állítottam.
    • A 487 -es sorban az adatokat "," -ra osztottam. Azért teszem ezt, mert az adatokat vesszővel elválasztva írtam. Ide bármit megadhat, amellyel elválasztotta a változóit. Ezek a változók bekerülnek a számok tömbjébe.
    • Ezután a 488-496. Sorokban beállítom a változókat a tömb megfelelő elemére, és lefordítom őket karakterláncból számgá. Ezeket a változókat a drawLeftBuffer () függvényben használom a grafika vezérléséhez.

Ez nagyjából összefoglalja a kódot és befejezi a projektet! Most láthatjuk a kesztyűt működés közben.

10. lépés: Végtermék

Íme néhány kép a kész kesztyűről, valamint néhány általa készített műalkotás! Nézze meg a bemutató videót, hogy lássa működés közben!