Meno pirštinė: 10 žingsnių (su nuotraukomis)

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:44

„Art Glove“yra nešiojama pirštinė, kurioje yra įvairių tipų jutiklių, skirtų valdyti meno grafiką per „Micro: bit“ir „p5.js“. Pirštuose naudojami lenkimo jutikliai, valdantys r, g, b reikšmes, ir „Micro: bit“valdomų akselerometras x, y grafikos koordinatės. Sukūriau šį projektą kaip savo kurso projektą nešiojamųjų technologijų klasei, būdamas CU Boulder technologijų, menų ir žiniasklaidos programos vyresniuoju.

Priedai:

• Sodininkystės pirštinės
• „BBC Micro“: šiek tiek
• 3-4 „Flex“jutikliai
• 10K omų rezistoriai
• Prijungimo viela (raudona ir juoda)
• Vielos kirpimo mašinėlės
• Bandomoji Lenta
• Aligatoriaus spaustukai (dvipusis ir vienpusis)
• Lituoklis
• Lituoklis
• Adata
• Siūlai
• Vaškinis popierius
• Juosta
• Žirklės
• Rašiklis ir pieštukas

1 žingsnis: lenkimo jutiklių takeliai

Pirma, mes sutelksime dėmesį į aparatūros gamybą. Tokiu būdu, kai pradedame kodavimą, turime naudoti ir išbandyti tikrąjį pirštinių komponentą.

1. Norėdami pradėti, mes padarysime takelius ant pirštų, kurie išlaikys lenkimo jutiklius. Turėdami šiuos takelius, lenkimo jutikliai gali šiek tiek judėti pirmyn ir atgal, kartu laikydami juos tvirtai pritvirtinti prie piršto. Pirmiausia apverskite pirštinę į išorę.
2. Paimkite lenkimo jutiklį ir padėkite jį vidurinėje piršto keteroje. Rašikliu nubrėžkite lenkimo jutiklį
3. Perbraukite siūlą per adatą. Padovanok sau dosnų kūrinį. Siūlo gale suriškite mazgą.
4. Pradėdami nuo viršaus ir ties linija, tiesiog išpūskite lenkimo jutiklio lanką, perbraukite adatą per pirštinę per vidų ir stumkite ją atgal lygiagrečia linija. Ištraukite adatą iki galo, kad mazgas būtų ant jūsų nubrėžtos linijos.
5. Tvirtai traukdami, padarykite 2-3 mazgus kitoje pusėje. Tai užtikrins, kad siūlas neišeis. Įsitikinkite, kad jis yra sandarus, kad lenkimo jutiklis būtų apsaugotas nuo piršto
6. Nupjaukite siūlą, palikdami keletą cm. siūlų gale, kad mazgas nebūtų atsuktas.
7. Pakartokite 2–6 veiksmus visiems pirštams, prie kurių pritvirtinate lankstumo jutiklius, kol jis atrodys nuo trečio iki paskutinio vaizdo.
8. Apverskite pirštinę atgal, kad ji pasuktų teisingai. Perbraukite lenkimo jutiklius per takelius, kad įsitikintumėte, jog jie tinkamai priglunda prie rankos

2 veiksmas: nuoseklaus ryšio naudojimas su „Micro: bit“

Norėdami pamatyti jutiklių išvestį, naudosime nuoseklųjį ryšį. Kitame žingsnyje pamatysite, kaip nustatyti kodą „Makecode“, bet pirmiausia išmoksime jį skaityti iš savo terminalo. (Pastaba: naudoju „Mac“, todėl šie veiksmai gali skirtis priklausomai nuo jūsų operacinės sistemos. Kitų operacinių sistemų ieškokite čia).

1. Prijunkite „Micro: bit“
2. Atidarykite savo terminalą
3. įveskite „ls /dev/cu.*“
4. Turėtumėte pamatyti kažką panašaus į „/dev/cu.usbmodem1422“, tačiau tikslus skaičius priklausys nuo jūsų kompiuterio
5. Kai paleisite kodą, įvesdami „screen /dev/cu.usbmodem1422 115200“(nurodydami konkretų serijos prievado numerį) gausite „Micro: bit“serijos išvestį
6. Jūsų išvestis turėtų atrodyti maždaug taip, kaip parodyta aukščiau, priklausomai nuo to, kaip suformatavote išvestį!

3 žingsnis: grandinės prototipų kūrimas

Prieš lituodami visus savo komponentus, mes ketiname sukurti grandinės prototipą ir parašyti kelias kodo eilutes, kad nuskaitytume jutiklių vertes ir įsitikintume, kad mūsų komponentai veikia tinkamai.

1. Naudodami aukščiau pateiktą schemą, sukurkite savo grandinės prototipą ant duonos lentos, naudodami trumpiklius, rezistorius, vienpusius aligatoriaus spaustukus ir „Micro: bit“.
2. Prijunkite lenkimo jutiklius prie 0, 1 ir 2 kaiščių.
3. Naudojau šį kodą savo lankstumo jutikliams išbandyti
4. Keletą kartų sulenkite juos, kad pamatytumėte rodmenis ir įsitikintumėte, ar jie veikia tinkamai

Kode paskutinė eilutė „serial.writeLine“yra ta vieta, kur rašome į savo serijinę išvestį. Galite formatuoti šią išvestį, kaip norite, kiekvieną kintamąjį atskiriau kableliu, o vėliau padalinau ant kablelio, bet ši dalis priklauso nuo jūsų.

(Pastaba: Atlikęs šį veiksmą sužinojau, kad vienas iš mano lenkimo jutiklių turi lustą laidžiuose dažuose ir todėl negauna gerų rodmenų. Štai kodėl kai kuriose nuotraukose parodyta, kad dirbu su 4 jutikliais. Sužinojęs tai, nuėjau tik tris jutiklius ant rodyklės, vidurinio ir bevardžio piršto. Taip pat pastebėjau, kad mano lenkimo jutikliai turi plačiausią skaitymo diapazoną, lenkdami „priešingai“, todėl uždėjau juos ant pirštinės, kai atsparūs dažai nukreipti žemyn.)

4 žingsnis: pagreičio matuoklio ir šviesos jutiklio tikrinimas

Šiame etape aš taip pat nusprendžiau išbandyti akcelerometrą ir šviesos jutiklį „Micro: bit“

1. Prijunkite „Micro: bit“prie kompiuterio
2. Atsisiųskite šį kodą
3. Tada kartu su šiuo kodu išbandžiau akselerometrą, šviesos ir lenkimo jutiklius

(Pastaba: šiuo metu aš supratau, kad negalite vienu metu naudoti kaiščių ir šviesos jutiklio, todėl finale nenaudojau šviesos jutiklio, bet norėjau, kad galėtumėte pamatyti, kaip skaityti šviesos jutiklis, jei reikia!)

5 žingsnis: lenkimo jutiklių litavimas

Dabar mes pradėsime lituoti savo komponentus kartu! Tai įdomi dalis, tačiau svarbu eiti lėtai ir patikrinti, ar viskas vyksta, kad eitumėte iki galo, kad nepasiektumėte pabaigos, kažkas neveiktų ir nebūtų tikras, kur įvyko klaida! Siūlau čia naudoti savo dvipusius aligatoriaus spaustukus, kad patikrintumėte, ar kiekvienas jutiklis vis dar veikia, kai laidai ir rezistoriai yra lituojami.

1. Paimkite lenkimo jutiklį ir juostą arba uždėkite ant jo sunkų daiktą, kad jis laikytųsi vietoje.
2. Paimkite 10 K omų rezistorių ir nupjaukite didžiąją jo dalį, kad laidas būtų maždaug tiek pat ilgas, kaip ir lenkimo jutiklio laidas.
3. Paimkite lituoklį ir paspauskite jį ant rezistoriaus ir lenkimo jutiklio laido, kol jie įkais
4. Paimkite lituoklį ir paspauskite jį į karštą lygintuvą, kai jis pradeda tirpti virš komponentų. Jums tiesiog reikia pakankamai uždengti laidus.
5. Nuimkite lygintuvą. Čia užsidėjau kitą sodo pirštinę ir laikiau rezistorių bei laidą, kol lydmetalis atvės.
6. Nupjaukite ilgą raudonos vielos gabalėlį ir padėkite jį prie litavimo jungties, kur susitinka rezistorius ir lenkimo jutiklis. Pakartokite 4-5 veiksmus. Tai analoginis kaištis.
7. Iškirpkite ilgą juodos vielos gabalą ir padėkite jį kito laido gale. Pakartokite 4-5 veiksmus. Tai jūsų įžeminimo laidas.
8. Nukirpkite ilgą raudonos vielos gabalą ir kitą rezistoriaus galą, kad jis būtų maždaug tiek pat ilgas, kaip ir ankstesnė. Pakartokite 4-5 veiksmus. Tai jūsų maitinimo laidas.
9. Likusiems lenkimo jutikliams pakartokite 1–8 veiksmus.
10. Palikite laidus ilgus, kad galėtumėte laisvai dirbti, kad vėliau juos uždėtumėte ant „Micro: bit“.

6 žingsnis: litavimas prie „Micro: bit“ir pirštinės surinkimas

Dabar, kai mūsų jutikliai yra paruošti, mes pradėsime lituoti prie „Micro: bit“ir surinkti pirštinę. Dar kartą nepamirškite išbandyti eidami, naudodami aligatoriaus spaustukus, kad įsitikintumėte, jog komponentai vis dar veikia po to, kai juos lituojate.

1. Uždėkite jutiklius ir „Micro: bit“ant pirštinės, kad suprastumėte, kur ir kur turi būti laidai.
2. Apvyniokite raudoną laidą aplink maitinimo kaištį. Naudokite vielos pjaustytuvus, kad nuvalytumėte laidą, ir palikite atviras spragas, prie kurių pritvirtinsite laidą. Padarykite tai ir su įžeminimo laidu.
3. Apibrėžkite pirštinę, kurios nenaudojate. Tai padės mums viską sulituoti ir teisingai nustatyti dalykų ilgį. Nors viską darysite atgal, todėl dar kartą patikrinkite, ar teisingai lituojate daiktus!
4. Padėkite „Micro: bit“maždaug ten, kur norite, kad jis būtų ant jūsų rankos. Pažymėkite žemę ir maitinimo laidus.
5. Užfiksuokite laidą, maitinimą ar įžeminimą.
6. Įklijuokite lenkimo jutiklį į vietą.
7. Nupjaukite maitinimo laidą taip, kad jis praeitų per žymę ant visos elektros linijos.
8. Lituokite šiuos gabalus kartu.
9. Pakartokite 5–8 veiksmus kitiems maitinimo laidams ir įžeminimo laidams.
10. Paimkite „Micro: bit“ir padėkite po naujai prilituotais laidais. Lituokite maitinimą ir įžeminimą iki tinkamų kaiščių.
11. Užfiksuokite analoginius laidus taip, kad jie praeitų tik už kaiščių galo ir galėtų apsisukti iki priekinės pusės.
12. Lituokite laidus prie tinkamų kaiščių.
13. Radau, kad mano rodmenys buvo geriausi ir nuosekliausi, kai visi laidai (maitinimo, įžeminimo ir analoginiai) palietė kaiščių priekį ir galą.
14. Po vieną takelį vienu metu stumkite lenkimo jutiklius aukštyn pirštais.
15. Kai jutikliai yra vietoje, užsimaukite pirštinę ir įsitikinkite, kad ji tinka. Jei reikia pridėti takelių arba pataisyti jų vietą, padarykite tai dabar.
16. Kai jutikliai atsidurs ten, kur norite, pažymėkite, kur pririšti „Micro: bit“. Galite naudoti mažas skylutes abiejose A ir B mygtukų pusėse arba naudoti kaiščius. Naudodami adatą ir siūlą, suriškite jį ant rankos

Sveikinimai! Pirštinės aparatinės įrangos komponentai jau baigti!

7 žingsnis: „Micro: bit“kodas

Dabar aš jus supažindinsiu su „Micro: bit“kodu. Kviečiame padaryti šį kodą tokį, kokio norite, bet aš norėjau viską išsiaiškinti, kad pamatytumėte, ką aš padariau, kaip tai padariau ir kodėl! Mano kodą rasite čia.

1. 1-31 eilutės. Čia aš naudoju iš anksto nustatytas funkcijas: „Micro: bit“.

   • Paspaudus A, sumažėja skaičius, kuris yra galimų grafinių elementų pasirinkimas. Kai pasieksite 0, jis grįš į didžiausią skaičių.
   • Paspaudus B, skaičius padidėja, kai pasiekiamas didžiausias galimų grafikų skaičius, jis grįžta į 0.
   • Jei pasirinkta dabartinė grafika nėra ta, kuri šiuo metu yra piešiama, paspaudus A ir B vienu metu pasirenkama nauja grafika.
   • Jei pasirinkta dabartinė grafika yra tokia pati, kaip ir piešiama, paspaudus A ir B vienu metu užpildoma forma, jei ji gali būti užpildyta.
   • Sukrėtus „Micro: bit“, nustatomas ištrynimo kintamasis į 1, kuris nurodo „p5.js“ištrinti drobę ir pradėti nuo juodos spalvos. Jis sekundei pristabdo vykdymą ir tada grąžina jį į 0, kad vartotojas galėtų tęsti piešimą.

2. 32–64 eilutės nustato mano kintamuosius. Buvo svarbu naudoti daug kintamųjų, kad dauguma reikšmių nebūtų užkoduotos. Jie gali keistis su pirštine ir taip pat lengvai pakeisti vienoje vietoje, o ne atnaujinti daugybę vertybių. Išvardinsiu keletą svarbių.

   • Drobės dydis yra toks, kurį būtų malonu turėti viename kintamajame, kad būtų galima atnaujinti, atsižvelgiant į mano drobės dydį. Tas pats ir su aukšta forma. Pridėdamas ar atsikratydamas grafikos galiu atnaujinti šį numerį čia.
   • Dideli ir žemi kintamieji leidžia man sekti dabartinę aukščiausią ir žemiausią jutiklių padėtį ir nuolat kalibruoti. Tai svarbu, nes kiekvienas asmuo, dėvintis pirštines, turės skirtingą judesių amplitudę, todėl gali pasiekti aukštumų ir žemumų.
3. 66-68 eilutės skaito analogines vertes iš lanksčių jutiklių kaiščių

4. 69–74 eilutės kalibruoja didelę rodyklės piršto vertę.

   • Jei pasiekiamas naujas aukštumas, tai nustatoma kaip aukščiausia.
   • Iš naujo kalibruojamas to piršto diapazonas.
   • Naudoja tą naują spalvų atvaizdavimo diapazoną
5. 75–80 eilutės kalibruoja mažą rodyklės piršto vertę.
6. 81-104 eilutės vidurio ir bevardžiams pirštams daro tą patį, ką 4 ir 5.

7. 105–107 eilutės mano lanksčiojo jutiklio reikšmes susieja su spalvų reikšmėmis 0–255 (arba spalva „Mažai spalvota“, jei nesiimu viso diapazono)

   • Integruota „Makecode“žemėlapio funkcija nesuteikė man didelio žemėlapio, atsižvelgiant į ribotą diapazoną, kurį gavau iš savo jutiklių. Taigi aš sukūriau savo žemėlapio funkciją.
   • Štai kaip tai veikia. Kiekvieno piršto įvesties diapazonas nustatomas pagal jį (didžiausia vertė - tai mažiausia vertė). Spalvų diapazonas, kuris taip pat yra (didžiausia spalvų vertė - mažiausia spalvų vertė), yra padalintas iš kiekvieno piršto diapazono. Šis skaičius suapvalinamas iki mažiausio sveikojo skaičiaus ir yra koeficientas.
   • (Faktinė jutiklio reikšmė - mažiausia jutiklio vertė) suteikia vertę diapazone. Padauginus tai iš aukščiau nustatyto koeficiento ir pridedant mažiausius spalvų dydžius, gaunama susietos jutiklio vertės, nurodytos spalvų diapazone.
8. 109 eilutė skaito aukščio vertę (aukštyn ir žemyn).
9. 110-115 eilutės kalibruoja aukščiausią ir žemiausią vertes
10. 116 eilutė rodo ritinio vertę (kairė ir dešinė).
11. 117-122 eilutės kalibruoja aukščiausią ir žemiausią vertes
12. 123–126 eilutės susieja pikio ir ritinio reikšmes pagal drobės dydį ir apvalina jas iki sveikų skaičių.
13. 127 eilutėje kintamieji įrašomi į serijinę išvestį naudojant serial.writeLine, kiekvieną reikšmę atskiriant kableliu ir tarpais „,“, kad vėliau būtų galima išanalizuoti.

Kai turėsite kodą, kuris jums patinka, atsisiųskite jį ir nuvilkite jį iš atsisiuntimų į „Micro: bit“(jį turėtumėte pamatyti kairėje ieškiklio pusėje esančioje skiltyje „Vietovės“), kad įkeltumėte kodą į „Micro: bit“

8 veiksmas: nuoseklus bendravimas su P5.js

Norint bendrauti nuosekliai su p5.js, mums reikia papildomo įrankio. Norėdami sužinoti daugiau apie tai, kas vyksta serijinio bendravimo užkulisiuose, siūlau perskaityti šį straipsnį.

1. Atsisiųskite „p5.js“programos versiją iš šios nuorodos. Turiu „Alpha 6“versiją, bet bet kuri veiks.
2. Naudokite šį p5.js šabloną bendravimui serijiniu būdu. Norėdami jį nustatyti, 12 eilutėje įveskite teisingą portName serijinio prievado pavadinimą. Šį pavadinimą išsiaiškinome atlikdami 2 veiksmą.
3. Prijunkite „Micro: bit“prie kompiuterio
4. Atidarykite p5.js serijos programą.
5. Pasirinkite prievadą iš prievadų sąrašo ir nieko daugiau nedarykite. Net nespauskite atidarymo! Tiesiog pasirinkite savo prievadą iš savo sąrašo.
6. Paspauskite paleisti p5.js serijos šablone. Turėtumėte matyti, kad jis atidarytas, ir jis skaitys jums nulines vertes, nes mes dar neparašėme kodo, kad galėtume išanalizuoti serijinę išvestį.

Dabar galime nuosekliai bendrauti iš „Micro: bit“į p5.js!

9 veiksmas: P5.js kodas

Dabar pereisime prie p5.js kodo. Čia mes skaitome serijinės išvesties vertes ir naudojame jas kurdami meną.

1. Kaip minėjau ankstesniame žingsnyje, įsitikinkite, kad 12 eilutėje esantis portName yra jūsų kompiuterio prievado pavadinimas.
2. Funkcijoje setup () 32–33 eilutėse pridėjau kairįjį ir dešinįjį buferį su „createGraphics“, tai padariau norėdamas atskirti drobę, kad viena dalis būtų naudojama piešimui, o kita dalis galėtų rodyti kryptis ir parodyti, kokia grafika jūs žiūrite arba slinkiate.
3. Funkcija draw () iškviečia funkcijas, kurias sukūriau, kad sukurtumėte „leftBuffer“ir „rightBuffer“atskirai. Taip pat nustatoma, kur prasideda kiekvieno buferio viršutinis kairysis kampas.
4. Funkcija drawRightBuffer () rodo visą nuorodų ir grafikos pasirinkimų tekstą

5. Funkcijose drawLeftBuffer () rodoma visa grafika.

   • 93 eilutė atsitiktinai sugeneruoja alfa reikšmę. Taip yra todėl, kad visos spalvos turi skirtingas skaidrumo vertes, kad atrodytų įdomiau. Jei turėčiau 4 lankstumo jutiklius, tam būčiau panaudojęs ketvirtąjį!
   • 94 eilutėje eigos reikšmė nustatoma į r, g, b reikšmes, nustatytas lanksčių jutiklių
   • 96-102 eilutės gali būti nekomentuojamos, kad būtų galima patikrinti, kaip pirštinė veikia be pirštinės, naudodami pelę. 102 eilutę pakeiskite grafika iš likusios funkcijos.
6. 104-106 ištrinkite drobę, kai ranka dreba, nustatydami drobės foną į juodą
7. 108-114 valdo formų užpildymą, kai paspaudžiami A+B ir pasirenkami, o dabartinė forma yra ta pati
8. 117-312 yra ten, kur rodoma grafika. Tai yra didžioji kodo dalis ir dalis kūrybiškumo! Siūlau pažvelgti į p5.js nuorodą, kad geriau suprastumėte, kaip valdyti figūras. Aš naudoju ritinį ir žingsnį, norėdamas valdyti x, y pozicijas ir pakeisti formų bei grafikos dydį, ir, kaip minėjau anksčiau, naudoju. sulenkite jutiklius, kad galėtumėte valdyti spalvą. Čia galite būti kūrybingi! Žaisk su tuo, ką gali pasiūlyti „p5.js“, ir sugalvok savo linksmą grafiką! Čia taip pat nustatiau „currentShape“, kuris rodomas dešinėje pusėje, aprašymą.
9. 318-460 Nustatiau pasirinktos formos aprašymą.

10. 478-498 eilutės yra funkcija serialEvent (). Čia mes gauname serijinius duomenis.

    • 485-486 eilutėse nustatiau proll ir ppitch (ankstesnį ritinį ir žingsnį) į ankstesnes ritinio ir žingsnio reikšmes.
    • 487 eilutėje padalijau duomenis į „“. Taip darau, nes duomenis parašiau taip, kad jie būtų atskirti kableliais. Čia įdėtumėte viską, su kuo atskirtumėte savo kintamuosius. Šie kintamieji įtraukiami į skaičių masyvą.
    • Tada 488-496 eilutėse nustatau kintamuosius į atitinkamą masyvo elementą ir iš eilutės išverčiu į skaičių. Aš naudoju šiuos kintamuosius visoje DrawLeftBuffer () funkcijoje grafikai valdyti.

Tai beveik apibendrina kodą ir užbaigia projektą! Dabar matome, kaip pirštinė veikia.

10 žingsnis: galutinis produktas

Štai keletas gatavų pirštinių nuotraukų ir keletas jos sukurtų meno kūrinių! Žiūrėkite demonstracinį vaizdo įrašą, kad pamatytumėte jo veikimą!