Mākslas cimds: 10 soļi (ar attēliem)

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:51

Art Glove ir valkājams cimds, kas satur dažāda veida sensorus, lai kontrolētu mākslas grafiku, izmantojot Micro: bit un p5.js. Pirksti izmanto saliekšanas sensorus, kas kontrolē r, g, b vērtības, un akselerometru Micro: bit kontrolē x, y grafikas koordinātas. Es izveidoju šo projektu kā savu termiņu projektu savai valkājamo tehnoloģiju klasei kā CU Boulder tehnoloģiju, mākslas un plašsaziņas līdzekļu programmas vecākajam.

Piegādes:

• Dārzkopības cimdi
• BBC Micro: mazliet
• 3-4 Flex sensori
• 10K omi rezistori
• Savienojuma vads (sarkans un melns)
• Stiepļu šķēres
• Maizes dēlis
• Aligatora skavas (divpusēji un vienpusēji)
• Lodēt
• Lodāmurs
• Adata
• Vītne
• Vaska papīrs
• Lente
• Šķēres
• Pildspalva un zīmulis

1. solis: saliekt sensora sliedes

Pirmkārt, mēs koncentrēsimies uz aparatūras izgatavošanu. Tādā veidā, kad mēs nonākam pie kodēšanas, mums ir jāizmanto un jāpārbauda faktiskais cimdu komponents.

1. Lai sāktu, mēs izveidosim pēdas uz pirkstiem, kas saglabās liekuma sensorus. Šo sliežu ceļu izmantošana ļauj līkuma sensoriem nedaudz pārvietoties uz priekšu un atpakaļ, vienlaikus saglabājot tos pie pirksta, lai saliektu. Vispirms pagrieziet cimdu uz āru.
2. Paņemiet līkuma sensoru un novietojiet to pirksta vidusdaļā. Izmantojot pildspalvu, ieskicējiet līkuma sensoru
3. Izvelciet pavedienu caur adatu. Uzdāviniet sev dāsnu gabalu. Vītnes galā sasien mezglu.
4. Sākot no augšas un uz līnijas, vienkārši izpūtiet līkuma sensora loku, izvelciet adatu cauri cimdam caur iekšpusi un nospiediet to atpakaļ pa paralēlo līniju. Pavelciet adatu līdz galam, lai mezgls atrastos uz jūsu novilktās līnijas.
5. Cieši pievelkot, izveidojiet 2-3 mezglus otrā pusē. Tas nodrošinās, ka pavediens neiznāks. Pārliecinieties, vai tas ir cieši, lai līkuma sensors būtu droši pret pirkstu
6. Izgrieziet pavedienu, atstājot dažus cm. pavedienu beigās, lai mezgls netiktu atsegts.
7. Atkārtojiet 2.-6. Darbību visiem pirkstiem, kuriem pievienojat elastīgos sensorus, līdz tas izskatās kā trešais līdz pēdējais attēls.
8. Pagrieziet cimdu atpakaļ, lai tas būtu pareizi pagriezts. Izvelciet līkuma sensorus pa sliedēm, lai pārliecinātos, ka tie pareizi pieguļ rokai

2. darbība. Seriālās komunikācijas izmantošana ar Micro: bit

Lai redzētu mūsu sensoru izejas, mēs izmantosim seriālo komunikāciju. Nākamajā solī jūs redzēsit, kā iestatīt kodu vietnē Makecode, bet vispirms mēs iemācīsimies to nolasīt no mūsu termināļa. (Piezīme. Es izmantoju Mac, tāpēc šīs darbības var atšķirties atkarībā no jūsu operētājsistēmas. Citas operētājsistēmas skatiet šeit).

1. Pievienojiet savu Micro: bit
2. Atveriet savu termināli
3. ierakstiet 'ls /dev/cu.*'
4. Jums vajadzētu redzēt kaut ko līdzīgu “/dev/cu.usbmodem1422”, bet precīzs skaitlis būs atkarīgs no datora
5. Kad esat palaidis kodu, ierakstot “screen /dev/cu.usbmodem1422 115200” (ar konkrēto sērijas porta numuru), tiks parādīta jūsu Micro: bit sērijas izeja
6. Jūsu izvadam vajadzētu izskatīties apmēram tāpat kā attēlā iepriekš, atkarībā no tā, kā formatējāt izvadi!

3. solis: ķēdes prototipēšana

Pirms visu sastāvdaļu lodēšanas mēs prototipēsim ķēdi un uzrakstīsim dažas koda rindas, lai nolasītu mūsu sensoru vērtības un pārliecinātos, ka mūsu komponenti darbojas pareizi.

1. Izmantojot iepriekš minēto shēmu, izveidojiet prototipa shēmu uz maizes dēļa, izmantojot džemperu vadus, rezistorus, vienpusējos aligatora skavas un savu Micro: bit.
2. Pievienojiet līkuma sensorus 0, 1 un 2 tapām.
3. Es izmantoju šo kodu, lai pārbaudītu savus elastīgos sensorus
4. Pāris reizes salieciet tos, lai redzētu to rādījumus un pārliecinātos, ka tie darbojas pareizi

Kodā pēdējā sērija "serial.writeLine" ir vieta, kur mēs rakstām uz mūsu sērijas izvadi. Jūs varat formatēt šo izvadi, kā vēlaties, es katru mainīgo atdalīju ar komatu un pēc tam sadalīju uz komata, bet šī daļa ir jūsu ziņā.

(Piezīme. Pēc šī soļa veikšanas es uzzināju, ka vienā no maniem līkuma sensoriem ir mikroshēma vadošā krāsā, un tāpēc tas nesaņem labus rādījumus. Tāpēc daži attēli rāda, ka es strādāju ar 4 sensoriem. Pēc tam, kad to uzzināju, es devos līdz pat trim sensoriem uz rādītāja, vidējā un gredzenveida pirksta. Es arī atklāju, ka maniem līkuma sensoriem ir visplašākais lasīšanas diapazons, kas noliecas "pretējā" veidā, tāpēc es tos uzvilku uz cimda ar pretestības krāsu uz leju.)

4. darbība: akselerometra un gaismas sensora pārbaude

Šajā posmā es arī izvēlējos pārbaudīt akselerometru un gaismas sensoru Micro: bit

1. Pievienojiet savu Micro: bit datoram
2. Lejupielādējiet šo kodu
3. Tad es pārbaudīju akselerometru, gaismas un saliekuma sensorus kopā ar šo kodu

(Piezīme: Šajā brīdī es sapratu, ka jūs nevarat vienlaikus izmantot tapas un gaismas sensoru, tāpēc es neizmantoju gaismas sensoru savā finālā, bet es gribēju, lai jūs varētu redzēt, kā lasīt gaismas sensors, ja nepieciešams!)

5. solis: Liekuma sensoru lodēšana

Tagad mēs kopā sāksim lodēt savas sastāvdaļas! Šī ir aizraujoša daļa, taču ir svarīgi iet lēni un pārbaudīt, vai viss joprojām darbojas, lai jūs nenonāktu līdz galam, kaut kas nedarbotos un nebūtu pārliecināts, kur tas noticis nepareizi! Es iesaku šeit izmantot savus divpusējos aligatora skavas, lai pārbaudītu, vai katrs sensors joprojām darbojas, kad vadi un rezistori ir pielodēti kopā.

1. Paņemiet lieces sensoru un lenti vai uzlieciet uz tā smagu priekšmetu, lai to noturētu.
2. Paņemiet savu 10K omu rezistoru un nogrieziet lielāko daļu tā, lai vads būtu apmēram tikpat garš kā līkuma sensora vads.
3. Paņemiet lodāmuru un nospiediet to uz rezistora un saliekt sensora vadu, līdz tie ir karsti
4. Paņemiet lodmetālu un nospiediet to karstajā gludeklī, kad tas sāk izkausēt virs detaļām. Jums vienkārši vajag pietiekami, lai pārklātu vadus.
5. Noņemiet dzelzi. Šeit es uzvilku otru dārzkopības cimdu un turēju rezistoru un vadu vietā, kamēr lodmetāls atdzisa.
6. Saspraudiet garu sarkano vadu un novietojiet to pie lodēšanas savienojuma vietā, kur saskaras rezistors un liekuma sensors. Atkārtojiet 4.-5. Darbību. Šis ir analogās tapas vads.
7. Saspraudiet garu melnas stieples gabalu un novietojiet to otra vadu galā. Atkārtojiet 4.-5. Darbību. Tas ir jūsu zemējuma vads.
8. Saspraudiet garu sarkano vadu un piestipriniet pretestības otru galu tā, lai tas būtu apmēram tikpat garš kā iepriekšējā puse. Atkārtojiet 4.-5. Darbību. Tas ir jūsu barošanas vads.
9. Atkārtojiet 1. – 8. Darbību pārējiem līkuma sensoriem.
10. Atstājiet vadus garus, lai jums būtu kur strādāt, lai vēlāk, uzliekot tos uz Micro: bit, tie būtu pareiza garuma.

6. solis: lodēšana pie Micro: bit un cimda salikšana

Tagad, kad mūsu sensori ir gatavi, mēs sāksim lodēt pie Micro: bit un salikt cimdu. Atcerieties vēlreiz pārbaudīt, ejot, izmantojot aligatora skavas, lai pārliecinātos, ka komponenti joprojām darbojas pēc to salodēšanas.

1. Novietojiet sensorus un Micro: bit uz cimda, lai gūtu priekšstatu par to, kur ir jānovieto vadi un cik ilgi tiem jābūt.
2. Aptiniet sarkano vadu ap kontaktdakšu. Izmantojiet stieples griezējus, lai noņemtu vadu un atstātu atvērtas spraugas, pie kurām piestiprināsit vadu. Dariet to arī zemējuma vadam.
3. Apzīmējiet cimdu, kuru neizmantojat. Tas palīdzēs mums visu salodēt kopā un pareizi noteikt lietu garumu. Tomēr jūs darīsit visu atpakaļ, tāpēc vēlreiz pārbaudiet, vai lodējat lietas pareizi!
4. Novietojiet Micro: bit apmēram vietā, kur vēlaties to novietot uz rokas. Atzīmējiet zemi un strāvas vadus.
5. Līmējiet vadu, strāvu vai zemi, vietā.
6. Līmējiet savu līkuma sensoru vietā.
7. Izgrieziet strāvas vadu tā, lai tas aizietu pāri atzīmei uz visas elektrības līnijas.
8. Lodējiet šos gabalus kopā.
9. Atkārtojiet 5. – 8. Darbību citiem strāvas vadiem un zemējuma vadiem.
10. Paņemiet Micro: bit un novietojiet to zem tikko pielodētiem vadiem. Lodējiet jaudu un zemi līdz pareizajām tapām.
11. Saspraudiet analogos vadus tā, lai tie aizietu tikai aiz tapām un varētu aptīties līdz priekšpusei.
12. Lodējiet vadus pareizajās tapās.
13. Es atklāju, ka mani rādījumi bija vislabākie un konsekventākie, kad visi vadi (strāvas, zemes un analogie) pieskārās gan tapu priekšpusei, gan aizmugurei.
14. Vienu celiņu pa vienam celim, vienlaicīgi spiediet saliekšanas sensorus augšup pa pirkstiem.
15. Kad sensori ir ievietoti, uzvelciet cimdu un pārliecinieties, vai tas ir pareizi. Ja jums ir jāpievieno celiņi vai jālabo to izvietojums, dariet to tūlīt.
16. Kad sensori atrodas tur, kur vēlaties, atzīmējiet, kur piesiet Micro: uzgali. Jūs varat izmantot mazos caurumus abās A un B pogu pusēs vai caurumus tapām. Izmantojiet adatu un diegu, lai to piestiprinātu pie rokas

Apsveicu! Cimdu aparatūras komponenti ir pabeigti!

7. darbība: mikro: bitu kods

Tagad es iepazīstināšu jūs ar Micro: bit kodu. Jūs esat laipni gaidīti, lai padarītu šo kodu tādu, kādu vēlaties, bet es gribēju visu izskaidrot, lai jūs varētu redzēt, ko es darīju, kā es to darīju un kāpēc! Manu kodu varat atrast šeit.

1. 1.-31. Šeit es izmantoju iepriekš iestatītās funkcijas Micro: bit.

   • Nospiežot A, tiek samazināts skaits, kas ir pieejamo grafiku izvēle. Kad esat sasniedzis 0, tas atgriežas pie augstākā skaitļa.
   • Nospiežot taustiņu B, tiek palielināts skaits, kad sasniegsit vislielāko pieejamo grafiku skaitu, tas atgriezīsies 0.
   • Ja jūsu atlasītā pašreizējā grafika nav tā, kas pašlaik tiek zīmēta, vienlaikus nospiežot A un B, tiek izvēlēta jaunā grafika.
   • Ja pašreizējā atlasītā grafika ir tāda pati kā zīmējamā, tad, nospiežot A un B, vienlaikus tiek aizpildīta forma, ja tai var būt aizpildījums.
   • Kratot Micro: bitu, dzēšanas mainīgais tiek iestatīts uz 1, kas liek p5.js izdzēst audeklu un sākt ar melnu krāsu. Tas uz sekundi aptur palaišanu un pēc tam atgriež to uz 0, lai lietotājs varētu turpināt zīmēšanu.

2. 32. – 64. Rindā tiek iestatīti mani mainīgie. Bija svarīgi izmantot daudzus mainīgos, lai lielākā daļa vērtību netiktu kodētas. Tās var mainīties kopā ar cimdu, kā arī viegli nomainīt vienā vietā, nevis atjaunināt virkni vērtību visā vietā. Es uzsvēru dažus no svarīgākajiem.

   • Audekla izmērs ir tāds, kas ir jauki, ja ir viens mainīgais, kas jāatjaunina atkarībā no mana audekla lieluma. Tas pats ar formuHigh. Pievienojot vai atbrīvojoties no grafikas, es varu atjaunināt šo numuru šeit.
   • Augstie un zemie mainīgie ļauj izsekot sensoru pašreizējam augstajam un zemākajam līmenim, un tiem ir nepārtraukti kalibrējams diapazons. Tas ir svarīgi, jo katrai personai, kas valkā cimdus, būs atšķirīga kustību amplitūda un līdz ar to dažādi augstumi un kritumi, ko viņi var sasniegt.
3. 66.-68. Rindā tiek lasītas analogās vērtības no elastīgo sensoru tapām

4. 69.-74. Rindā tiek kalibrēta rādītāja pirksta augstā vērtība.

   • Ja tiek sasniegts jauns maksimums, tas to nosaka kā augstāko.
   • Pārkalibrē šī pirksta diapazonu.
   • Izmanto šo jauno krāsu kartēšanas diapazonu
5. Līnijas 75–80 kalibrē rādītājpirksta zemo vērtību.
6. 81.-104.līnija vidējiem un gredzenveida pirkstiem dara to pašu, ko 4. un 5.līnija.

7. Līnijas 105–107 attēlo manu elastīgo sensoru vērtības ar krāsu vērtībām 0–255 (vai krāsu no zemas līdz krāsai augstas, ja neveicu pilnu diapazonu)

   • Iebūvētā kartes funkcija no Makecode nesniedza man lielisku kartēšanu, ņemot vērā ierobežoto diapazonu, ko saņēmu no sensoriem. Tāpēc es izveidoju savu kartēšanas funkciju.
   • Lūk, kā tas darbojas. Katra pirksta ievades diapazonu nosaka tas (augstākā vērtība - tā ir zemākā vērtība). Krāsu diapazons, kas ir arī (augstākā krāsu vērtība - zemākā krāsu vērtība), tiek dalīts ar katru pirkstu diapazonu. Šis skaitlis ir noapaļots līdz mazākajam veselajam skaitlim un ir koeficients.
   • (Faktiskā sensora vērtība - zemākā sensora vērtība) norāda vērtību diapazonā. Reizinot to ar koeficientu, ko atradām iepriekš, un pievienojot zemākās krāsu vērtības, iegūstat kartētā vērtību no sensora līdz krāsai krāsu diapazonā.
8. 109. rindā tiek lasīta piķa vērtība (uz augšu un uz leju).
9. Līnijas 110-115 kalibrē augstāko un zemāko vērtību
10. 116. rindā tiek rādīta ruļļa vērtība (pa kreisi un pa labi).
11. Līnijas 117-122 kalibrē augstāko un zemāko vērtību
12. Līnijas 123-126 kartē piķa un ritināšanas vērtības atbilstoši audekla izmēram un noapaļo līdz veseliem skaitļiem.
13. 127. rindā mainīgie tiek ierakstīti sērijas izvadē, izmantojot serial.writeLine, atdalot katru vērtību ar komatu un atstarpi ",", lai parsētu ar vēlāk.

Kad esat ieguvis kodu, kas jums patīk, lejupielādējiet to un velciet to no lejupielādes uz savu Micro: bit (tas būtu jāredz sadaļā “Atrašanās vietas” meklētāja kreisajā pusē), lai augšupielādētu kodu Micro: bit.

8. darbība. Sērijas komunikācija ar P5.js

Lai sērijveidā sazinātos ar p5.js, mums ir nepieciešams papildu rīks. Lai uzzinātu vairāk par to, kas notiek sērijveida komunikācijas aizkulisēs, iesaku izlasīt šo rakstu.

1. Lejupielādējiet lietotnes p5.js versiju no šīs saites. Man ir Alpha 6 versija, bet jebkura darbosies.
2. Izmantojiet šo p5.js veidni, lai sazinātos sērijveidā. Lai to iestatītu, 12. rindā ievietojiet pareizo portName seriālā porta nosaukumu. Šo nosaukumu mēs noskaidrojām 2. darbībā.
3. Pievienojiet savu Micro: bit datoram
4. Atveriet sērijas lietotni p5.js.
5. Izvēlieties portu no portu saraksta un nedariet neko citu. Pat nospiediet vaļā! Vienkārši izvēlieties savu portu no sava saraksta.
6. Sērijas veidnē p5.js nospiediet palaist. Jums vajadzētu redzēt to atvērtu, un tas nolasīs jums nulles vērtības, jo mēs vēl neesam uzrakstījuši kodu sērijas izvades parsēšanai.

Tagad mēs varam sērijveidā sazināties no sava Micro: bit uz p5.js!

9. darbība: kods P5.js

Tagad mēs pāriesim pie p5.js koda. Šeit mēs lasām sērijas izvades vērtības un izmantojam tās, lai radītu mākslu.

1. Kā jau minēju iepriekšējā solī, pārliecinieties, vai porta nosaukums 12. rindā ir jūsu datora porta nosaukums.
2. Funkcijā setup () 32.-33. Rindā es pievienoju kreiso un labo buferi ar createGraphics, es to darīju, lai atdalītu audeklu tā, lai viena daļa tiktu izmantota zīmēšanai, bet otra daļa varētu parādīt norādes un parādīt, kura grafika jūs skatāties vai ritiniet.
3. Funkcija draw () izsauc manis izveidotās funkcijas, lai atsevišķi izveidotu leftBuffer un rightBuffer. Tas arī nosaka, kur sākas katra bufera augšējais kreisais stūris.
4. Funkcija drawRightBuffer () parāda visu norāžu un grafikas atlases tekstu

5. Funkcijas drawLeftBuffer () parāda visu grafiku.

   • 93. rinda nejauši ģenerē alfa vērtības vērtību. Tas nozīmē, ka visām krāsām ir dažādas caurspīdīguma vērtības, lai tās izskatītos interesantākas. Ja man būtu 4 elastīgie sensori, es šim nolūkam būtu izmantojis ceturto!
   • 94. rindā gājiena vērtība tiek iestatīta uz r, g, b vērtībām, kuras nosaka elastīgie sensori
   • 96-102. Rindas var bez komentāriem pārbaudīt, kā cimds darbojas bez cimda, izmantojot peli. Aizstājiet 102. rindu ar grafiku no pārējās funkcijas.
6. 104-106 izdzēsiet audeklu, kad roka trīc, iestatot audekla fonu uz melnu
7. 108-114 kontrolē formu aizpildīšanu, nospiežot un atlasot A+B, un pašreizējā forma ir vienāda
8. 117-312 ir vieta, kur tiek parādīta grafika. Šī ir lielākā daļa koda un daļa radošuma! Es iesaku aplūkot p5.js atsauci, lai labāk saprastu, kā kontrolēt formas. Es izmantoju rulli un piķi, lai kontrolētu x, y pozīcijas un mainītu formu un grafikas lielumu, un, kā jau minēju iepriekš, izmantoju. saliekt sensorus, lai kontrolētu krāsu. Šeit jūs varat būt radoši! Spēlējiet ar to, ko piedāvā p5.js, un izdomājiet savu jautro grafiku, ko kontrolēt! Šeit es arī iestatīju aprakstu pašreizējai formai, kas tiek parādīta labajā buferī.
9. 318-460 Es iestatīju atlasītās formas aprakstu.

10. Līnijas 478-498 ir funkcija serialEvent (). Šeit mēs saņemam sērijas datus.

    • 485. – 486. Rindā es iestatīju proll un ppitch (iepriekšējais roll un pitch) uz iepriekšējām roll and pitch vērtībām.
    • 487. rindā es sadalīju datus uz ",". Es to daru, jo datus rakstīju, lai tos atdalītu ar komatiem. Šeit jūs ievietojat visu, ar ko atdalījāt savus mainīgos. Šie mainīgie tiek ievietoti skaitļu masīvā.
    • Tad 488.-496. Rindā es iestatīju mainīgos uz atbilstošo elementu masīvā un tulkoju tos no virknes uz skaitli. Es izmantoju šos mainīgos visā drawLeftBuffer () funkcijā, lai kontrolētu grafiku.

Tas diezgan daudz apkopo kodu un pabeidz projektu! Tagad mēs varam redzēt cimdu darbībā.

10. solis: galaprodukts

Šeit ir daži gatavā cimda attēli, kā arī daži tā radītie mākslas darbi! Noskatieties demonstrācijas video, lai redzētu to darbībā!