Umetniške rokavice: 10 korakov (s slikami)

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:02

Art Glove je nosljiva rokavica, ki vsebuje različne vrste senzorjev za krmiljenje umetniške grafike prek Micro: bita in p5.js. Prsti uporabljajo senzorje upogibanja, ki nadzorujejo vrednosti r, g, b, in merilnik pospeška v krmilniku Micro: bit x, y koordinate za grafiko. Ta projekt sem ustvaril kot moj termin za moj razred nosljive tehnologije kot višji v programu za tehnologijo, umetnost in medije na CU Boulder.

Zaloge:

• Vrtnarske rokavice
• BBC Micro: Bit
• 3-4 senzorji Flex
• 10K ohmski upori
• Priključna žica (rdeča in črna)
• Stroji za striženje žice
• Ogledna plošča
• Sponke iz aligatorja (dvostranske in enostranske)
• Spajkanje
• Spajkalnik
• Igla
• Nit
• Voščeni papir
• Trak
• Škarje
• Svinčnik in svinčnik

1. korak: Senzorske sledi upogiba

Najprej se bomo osredotočili na izdelavo strojne opreme. Na ta način, ko pridemo do kodiranja, imamo dejansko komponento rokavic za uporabo in testiranje.

1. Za začetek bomo naredili sledi na prstih, ki bodo obdržali senzorje upogibanja. S temi tiri omogoča, da se senzorji upogibanja rahlo premikajo naprej in nazaj, hkrati pa so pritrjeni na prst, da se upognejo. Najprej rokavico obrnite navznoter.
2. Vzemite senzor upogiba in ga postavite na srednji greben prsta. S peresom označite senzor upogiba
3. Potegnite nit skozi iglo. Podarite si velikodušen kos. Na koncu niti zavežite vozel.
4. Začnite na vrhu in na črti, samo pihajte lok senzorja upogiba, iglo potisnite skozi rokavico skozi notranjost in jo potisnite nazaj skozi vzporedno črto. Povlecite iglo do konca, tako da vozel sedi na črti, ki ste jo narisali.
5. Če na drugi strani močno povlečete, naredite 2-3 vozla na drugi strani, kar bo zagotovilo, da nit ne bo prišla ven. Prepričajte se, da je senzor upogiba pritrjen na prst
6. Prerežite nit in pustite nekaj cm. niti na koncu, da se vozel ne razveže.
7. Ponovite korake 2-6 za vse prste, na katere pritrdite senzorje upogibanja, dokler ne izgleda kot tretja do zadnja slika.
8. Rokavico obrnite nazaj, da se pravilno obrne. Senzorje upogiba potisnite skozi sledi, da se prepričate, da se pravilno prilegajo vaši roki

2. korak: Uporaba serijske komunikacije z Micro: bitom

Za ogled izhodov naših senzorjev bomo uporabili serijsko komunikacijo. V naslednjem koraku boste videli, kako nastaviti kodo v Makecode, najprej pa se bomo naučili, kako jo prebrati iz našega terminala. (Opomba: Uporabljam Mac, zato se ti koraki lahko razlikujejo glede na vaš operacijski sistem. Za ostale operacijske sisteme poglejte tukaj).

1. Priključite Micro: bit
2. Odprite svoj terminal
3. vnesite 'ls /dev/cu.*'
4. Videti bi morali nekaj, kar izgleda kot '/dev/cu.usbmodem1422', vendar bo natančno število odvisno od vašega računalnika
5. Ko zaženete kodo, boste z vnosom 'screen /dev/cu.usbmodem1422 115200' (z vašo specifično številko serijskega vhoda) dobili serijski izhod Micro: bit.
6. Vaš rezultat bi moral biti videti kot zgornja slika, odvisno od tega, kako ste formatirali izhod!

Korak: Prototipiranje vezja

Pred spajkanjem vseh komponent skupaj bomo izdelali prototip vezja in napisali nekaj vrstic z vzorčno kodo, da bomo prebrali vrednosti senzorjev in se prepričali, da naše komponente delujejo pravilno.

1. Z zgornjo shemo vezja izdelajte prototip svojega vezja na plošči z uporabo mostičnih žic, uporov, enostranskih sponk aligatorja in vašega Micro: bita.
2. Senzorje upogibanja priključite na nožice 0, 1 in 2.
3. S to kodo sem preizkusil svoje senzorje upogibanja
4. Nekajkrat jih upognite, da vidite njihove odčitke in se prepričajte, da delujejo pravilno

V kodi je zadnja vrstica "serial.writeLine", kjer pišemo v naš serijski izhod. Ta izhod lahko formatirate, kakor želite, vsako spremenljivko sem ločil z vejico, nato pa jo kasneje razdelil na vejico, vendar je ta del vaš.

(Opomba: Ko sem naredil ta korak, sem ugotovil, da ima eden od mojih senzorjev upogibanja čip v prevodni barvi in zato ni imel dobrih odčitkov. Zato me nekatere slike prikazujejo pri delu s štirimi senzorji. Po tem sem odšel vse do treh senzorjev na kazalcu, srednjem in prstnem prstu. Ugotovil sem tudi, da imajo moji senzorji za upogibanje najširši obseg branja, ki upognejo "nasprotno" smer, zato sem jih dal na rokavico z uporovno barvo navzdol.)

4. korak: Preizkus merilnika pospeška in senzorja svetlobe

Na tej stopnji sem se odločil tudi preizkusiti merilnik pospeška in svetlobni senzor na Micro: bit

1. Priključite Micro: bit na računalnik
2. Prenesite to kodo
3. Nato sem skupaj s to kodo preizkusil merilnike pospeška, svetlobo in upogibanje

(Opomba: Na tej točki sem ugotovil, da ne morete uporabljati zatičev in senzorja svetlobe hkrati, zato v zadnjem delu nisem uporabil svetlobnega senzorja, vendar sem želel, da vidite, kako brati svetlobni senzor, če ga potrebujete!)

5. korak: Spajkanje senzorjev upogibanja

Zdaj bomo skupaj začeli spajkati naše komponente! To je vznemirljiv del, vendar je pomembno, da počasi preverite, ali vse še vedno deluje, da ne pridete do konca, da kaj ne deluje in da niste prepričani, kje je šlo narobe! Predlagam, da tukaj uporabite svoje dvostranske zaponke iz aligatorja, da preverite, ali senzor še vedno deluje, ko so žice in upori spajani skupaj.

1. Vzemite senzor upogiba in trak ali nanj položite težek predmet, da ga drži na mestu.
2. Vzemite 10K ohmski upor in mu odrežite večino konca, tako da bo kabel približno tako dolg kot kabel na upogibnem senzorju.
3. Vzemite spajkalnik in ga pritisnite na upor in na upogibni kabel senzorja, dokler se ne segreta
4. Vzemite spajkalnik in ga pritisnite v vroč likalnik, ko se začne topiti nad sestavnimi deli. Potrebujete le dovolj, da pokrijete žice.
5. Odstranite likalnik. Tu sem si nadel drugo vrtnarsko rokavico in držal upor in žico na mestu, medtem ko se je spajka ohladila.
6. Pripnite dolg kos rdeče žice in ga postavite na spajkalni spoj, kjer se stikata upor in senzor upogiba. Ponovite korake 4-5. To je analogna žica.
7. Pripnite dolg kos črne žice in ga položite na konec drugega kabla. Ponovite korake 4-5. To je vaša ozemljitvena žica.
8. Pripnite dolg kos rdeče žice in pritrdite drugi konec upora, tako da bo približno tako dolg kot prejšnja stran. Ponovite korake 4-5. To je vaš napajalni kabel.
9. Ponovite korake 1-8 za ostale senzorje upogibanja.
10. Pustite svoje žice dolge, tako da boste imeli prostora za delo, da bodo pozneje pravilne dolžine, ko jih postavite na Micro: bit.

6. korak: Spajkanje na Micro: bit in sestavljanje rokavice

Zdaj, ko so naši senzorji pripravljeni, bomo začeli spajkati na Micro: bit in sestavljati rokavico. Ne pozabite še enkrat preizkusiti z uporabo aligatorskih sponk, da se prepričate, da komponente še vedno delujejo, potem ko jih spajkate.

1. Senzorje in Micro: bit položite na rokavico, da dobite predstavo o tem, kam morajo žice iti in kako dolge morajo biti.
2. Okoli napajalnega zatiča ovijemo rdečo žico. Z rezalniki za žico odstranite žico in pustite odprte vrzeli, na katere boste pritrdili žico. To naredite tudi za ozemljitveno žico.
3. Očrtajte rokavico, ki je ne uporabljate. To nam bo pomagalo spajati vse skupaj in popraviti dolžino stvari. Vse boste počeli nazaj, zato dvakrat preverite, ali spajkate stvari na pravi način!
4. Postavite Micro: bit približno tam, kjer ga želite položiti na roko. Označite tla in ožičite napajalne žice.
5. Nalepite žico, napajanje ali ozemljitev.
6. Senzor upogiba pritrdite na mesto.
7. Prerežite napajalni kabel tako, da gre tik nad oznako na celotnem daljnovodu.
8. Te dele spajkajte skupaj.
9. Ponovite korake 5-8 za druge napajalne žice in za ozemljitvene žice.
10. Vzemite Micro: bit in ga postavite pod na novo spajkane žice. Spajajte napajanje in ozemljite na pravilne zatiče.
11. Pripnite analogne žice, tako da gredo tik ob koncu zatičev in se lahko ovijejo na sprednjo stran.
12. Spajkajte žice na pravilne zatiče.
13. Ugotovil sem, da so bili moji odčitki najboljši in najbolj dosledni, ko so se vse žice (napajalna, ozemljitvena in analogna) dotaknile sprednje in zadnje strani nožic.
14. En posnetek za enim posnetkom, istočasno potisnite senzorje upogiba navzgor s prsti.
15. Ko so senzorji nameščeni, nataknite rokavico in se prepričajte, da je pravilno pritrjena. Če morate dodati skladbe ali popraviti njihovo umestitev, to storite zdaj.
16. Ko senzorji ležijo tam, kjer želite, si zapomnite, kje pritrdite Micro: bit. Uporabite lahko majhne luknje na obeh straneh gumbov A in B ali pa uporabite luknje za zatiče. Z iglo in sukancem ga pripnite na roko

Čestitke! Sestavni deli strojne opreme za rokavice so zdaj končani!

7. korak: Micro: bitna koda

Zdaj vas bom popeljal skozi kodo Micro: bit. Več kot dobrodošli, da naredite to kodo, kar želite, vendar sem želel vse razložiti, da boste lahko videli, kaj sem naredil, kako sem to storil in zakaj! Mojo kodo najdete tukaj.

1. Vrstice 1-31. Tukaj uporabljam prednastavljene funkcije, ki so priložene Micro: bit.

   • S pritiskom na A se zmanjša število, kar je izbira razpoložljive grafike. Ko dosežete 0, se vrne na najvišjo številko.
   • Če pritisnete B, se število poveča, ko dosežete največje število razpoložljivih grafik, se vrne na 0.
   • Če trenutna slika, ki ste jo izbrali, ni tista, ki je trenutno narisana, hkrati pritisnite A in B, da izberete novo sliko.
   • Če je trenutna grafika, ki ste jo izbrali, enaka tisti, ki je narisana, hkrati pritisnete A in B, če lahko izpolnite obliko.
   • Shaking the Micro: bit nastavi spremenljivko brisanja na 1, ki pove p5.js, naj izbriše platno in začne črno. Za trenutek zaustavi izvajanje in ga nato nastavi na 0, tako da lahko uporabnik nadaljuje z risanjem.

2. Vrstice 32-64 nastavljajo moje spremenljivke. Pomembno je bilo uporabiti veliko spremenljivk, da večina vrednosti ni bila trdo kodirana. Lahko se spremenijo z rokavico in se zlahka spremenijo na enem mestu, namesto da bi posodobili kup vrednosti povsod. Izpostavil bom nekaj pomembnih.

   • Velikost platna je lepa v eni spremenljivki za posodobitev, odvisno od velikosti mojega platna. Enako z oblikoHigh. Ko dodam ali se znebim grafike, lahko tukaj posodobim to številko.
   • Visoke in nizke spremenljivke mi omogočajo, da spremljam trenutne visoke in nizke vrednosti senzorjev in imam stalno območje umerjanja. To je pomembno, saj ima vsaka oseba, ki nosi rokavice, različen obseg gibanja in zato različne vzpone in padce, ki jih lahko doseže.
3. Vrstice 66-68 berejo analogne vrednosti iz nožic za upogljive senzorje

4. Vrstice 69-74 umerjajo visoko vrednost kazalca.

   • Če je dosežen nov maksimum, se to nastavi kot najvišje.
   • Ponovno umerja obseg tega prsta.
   • Uporablja nov obseg za barvno preslikavo
5. Vrstice 75-80 umerjajo nizko vrednost kazalca.
6. Vrstice 81-104 delajo enako kot 4 in 5 za srednji in prstance.

7. Črte 105-107 preslikavajo vrednosti mojih senzorjev fleksa v vrednosti barv 0-255 (ali barvo nizko barvo visoko, če ne izvajam celotnega obsega)

   • Vgrajena funkcija zemljevida podjetja Makecode mi ni dala dobrega kartiranja, glede na omejen obseg, ki sem ga dobil od svojih senzorjev. Tako sem naredil svojo funkcijo preslikave.
   • Evo, kako to deluje. Območje vnosa vsakega prsta je določeno z (najvišja vrednost - to je najnižja vrednost). Barvno območje, ki je tudi (najvišja barvna vrednost - najnižja barvna vrednost), je razdeljeno na vsako območje prstov. To število je zaokroženo na najnižje celo število in je količnik.
   • (Dejanska vrednost senzorja - najnižja vrednost senzorja) vam daje vrednost v razponu. Če pomnožite to s količnikom, ki smo ga našli zgoraj, in dodate najnižje barvne vrednosti, dobite preslikano vrednost od senzorja do barve v barvnem območju.
8. Vrstica 109 bere vrednost višine tona (gor in dol).
9. Vrstice 110-115 umerjajo visoko in nizko vrednost za to vrednost
10. Vrstica 116 bere vrednost zvitka (levo in desno).
11. Vrstice 117-122 umerjajo visoko in nizko vrednost za to vrednost
12. Vrstice 123-126 preslikajo vrednosti nagiba in zvitka na velikost platna ter jih zaokrožijo na cela števila.
13. Vrstica 127 zapisuje spremenljivke v serijski izhod z uporabo serial.writeLine, pri čemer vsako vrednost loči z vejico in presledkom ",", za kasnejšo razčlenitev.

Ko imate kodo, ki vam je všeč, jo prenesite in povlecite iz prenosov v Micro: bit (morali bi jo videti na "Lokacije" na levi strani iskalnika), da jo naložite v Micro: bit

8. korak: Serijska komunikacija s P5.js

Za serijsko komunikacijo s p5.js potrebujemo dodatno orodje. Če želite izvedeti več o tem, kaj se skriva v ozadju serijske komunikacije, predlagam branje tega članka.

1. Prenesite različico aplikacije p5.js s te povezave. Imam različico Alpha 6, vendar bo katera delovala.
2. Za serijsko komuniciranje uporabite to predlogo p5.js. Če ga želite nastaviti, v vrstico 12. vnesite pravilno ime serijskega vhoda za portName. To ime smo ugotovili v 2. koraku.
3. Priključite Micro: bit na računalnik
4. Odprite serijsko aplikacijo p5.js.
5. Izberite vrata s seznama vrat in ne delajte ničesar drugega. Sploh ne pritisnite odprto! Samo izberite vrata s svojega seznama.
6. Pritisnite run v serijski predlogi p5.js. Morali bi ga videti odprtega in prebral vam bo ničelne vrednosti, saj še nismo napisali kode za razčlenitev našega serijskega izhoda.

Zdaj lahko serijsko komuniciramo iz našega Micro: bita v p5.js!

9. korak: Koda P5.js

Zdaj bomo skočili v kodo p5.js. Tukaj beremo vrednosti serijskih izhodov in jih uporabljamo za ustvarjanje umetnosti.

1. Kot sem omenil v prejšnjem koraku, se prepričajte, da je ime vrat v vrstici 12 ime vašega računalniškega vmesnika.
2. V funkciji setup () sem v vrsticah 32-33 dodal levi in desni medpomnilnik z createGraphics, to sem naredil, da sem ločil platno, tako da se en del uporablja za risanje, drugi del pa lahko prikazuje smeri in prikazuje, katera grafika gledate ali listate.
3. Funkcija draw () kliče funkcije, ki sem jih naredil za ločeno ustvarjanje leftBuffer in rightBuffer. Določa tudi, kje se začne zgornji levi kot vsakega medpomnilnika.
4. Funkcija drawRightBuffer () prikaže vse besedilo za izbiro smeri in grafike

5. Funkcije drawLeftBuffer () prikažejo vse grafike.

   • Vrstica 93 naključno ustvari vrednost za vrednost alfa. Tako je, da imajo vse barve različne vrednosti preglednosti, da je videti bolj zanimivo. Če bi imel 4 senzorje upogibanja, bi za to uporabil četrtega!
   • Vrstica 94 nastavi vrednost hoda na vrednosti r, g, b, ki jih določijo senzorji upogibanja
   • Črte 96-102 je mogoče razkomentirati, da z uporabo miške preizkusite, kako rokavice delujejo brez rokavice. Vrstico 102 zamenjajte z grafiko iz preostale funkcije.
6. 104-106 izbrišete platno, ko se roka trese, tako da ozadje platna nastavite na črno
7. 108-114 nadzoruje polnjenje oblik, ko pritisnete in izberete A+B in je trenutna oblika enaka
8. Slike 117-312 so prikazane. To je večina kode in del za ustvarjanje! Predlagam, da si ogledate referenco p5.js, da boste bolje razumeli, kako nadzorovati oblike. Za nadzor x, y položajev in spreminjanje velikosti oblik in grafik sem uporabil roll and pitch in kot sem že omenil, sem uporabil. senzorji upogibanja za nadzor barve. Tukaj lahko postanete ustvarjalni! Igrajte se s tem, kar ponuja p5.js, in si omislite svojo zabavno grafiko za nadzor! Tu sem nastavil tudi opis trenutne oblike, ki se prikaže na desnem vmesniku.
9. 318-460 Za izbrano obliko sem nastavil opis.

10. Vrstice 478-498 so funkcija serialEvent (). Tu prejmemo serijske podatke.

    • Na vrsticah 485-486 sem nastavil proll in ppitch (prejšnji roll and pitch) na prejšnje vrednosti roll and pitch.
    • Na vrstici 487 sem podatke razdelil na ",". To počnem, ker sem podatke zapisal tako, da jih ločimo z vejicami. Tukaj bi postavili vse, s čimer ste ločili spremenljivke. Te spremenljivke se vnesejo v matriko številk.
    • Nato sem v vrsticah 488-496 spremenljivke nastavil na ustrezen element v matriki in jih prevedel iz niza v številko. Te spremenljivke uporabljam v celotni funkciji drawLeftBuffer () za nadzor grafike.

To precej povzame kodo in konča projekt! Zdaj lahko vidimo, da rokavice delujejo.

10. korak: Končni izdelek

Tukaj je nekaj slik dokončane rokavice in nekaj umetniških del, ki jih je ustvarila! Oglejte si predstavitveni videoposnetek, da ga vidite v akciji!