Kunsthanske: 10 trinn (med bilder)

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:20

Art Glove er en bærbar hanske som inneholder forskjellige typer sensorer for å kontrollere kunstgrafikk gjennom en Micro: bit og p5.js Fingrene bruker bøyesensorer som styrer r, g, b verdier og akselerometeret i Micro: bit kontroller x, y koordinater for grafikken. Jeg opprettet dette prosjektet som mitt terminprosjekt for min Wearable Technology Class som senior i programmet Technology, Arts and Media ved CU Boulder.

Rekvisita:

• Hagehansker
• BBC Micro: Bit
• 3-4 Flex-sensorer
• 10K Ohm motstander
• Hook-up Wire (rød og svart)
• Wire Clippers
• Brødbrett
• Alligatorklipp (dobbeltsidig og ensidig)
• Lodding
• Loddejern
• Nål
• Tråd
• Vokspapir
• Teip
• Saks
• Penn og blyant

Trinn 1: Bøy sensor spor

Først skal vi fokusere på å lage maskinvaren. På denne måten har vi selve hanskekomponenten som skal brukes og testes når vi kommer til koding.

1. For å starte skal vi lage sporene på fingrene som vil holde bøyesensorene på plass. Å ha disse sporene gjør at bøyesensorene kan bevege seg litt frem og tilbake, samtidig som de holder dem festet til fingeren for å bøye seg. Vri først hansken på innsiden.
2. Ta en bøyesensor og plasser den i fingerens midterste kant. Bruk en penn til å skissere bøyesensoren
3. Trekk tråden gjennom nålen. Gi deg selv et sjenerøst stykke. Knyt en knute i enden av tråden.
4. Start på toppen og på linjen, bare blåse buen til bøyesensoren, skyv nålen gjennom hansken gjennom innsiden og skyv den tilbake på parallelllinjen. Trekk nålen helt gjennom slik at knuten sitter på linjen du tegnet.
5. Trekk tett, gjør 2-3 knop på den andre siden. Dette vil sikre at tråden ikke kommer ut. Sørg for at den er stram, slik at bøyesensoren er sikret mot fingeren
6. Klipp tråden med noen få cm. tråd på enden slik at knuten ikke løsner.
7. Gjenta trinn 2-6 for alle fingrene du fester flexsensorer til til det ser ut som det tredje til siste bildet.
8. Snu hansken tilbake slik at den dreies på riktig måte. Dra bøyesensorene dine gjennom sporene for å sikre at de sitter riktig på hånden din

Trinn 2: Bruke seriell kommunikasjon med Micro: bit

For å se utgangene fra sensorene våre kommer vi til å bruke seriell kommunikasjon. Du vil se hvordan du konfigurerer koden i Makecode i neste trinn, men først skal vi lære å lese den fra terminalen vår. (Merk: Jeg bruker en Mac, så disse trinnene kan være forskjellige avhengig av operativsystemet. Se andre operativsystemer her).

1. Koble til Micro: bit
2. Åpne terminalen din
3. skriv 'ls /dev/cu.*'
4. Du bør se noe som ser ut som '/dev/cu.usbmodem1422', men det eksakte tallet vil avhenge av datamaskinen din
5. Når du kjører kode, vil du skrive 'screen /dev/cu.usbmodem1422 115200' (med ditt spesifikke serielle portnummer) gi deg Micro: bits serieutgang
6. Utgangen din skal se ut som bildet ovenfor, avhengig av hvordan du formaterte utgangen!

Trinn 3: Prototyping av kretsen

Før vi lodder alle komponentene våre sammen, skal vi prototype kretsen og skrive noen linjer med eksempelkode for å lese våre sensorverdier og sørge for at komponentene våre fungerer som de skal.

1. Ved å bruke kretsdiagrammet ovenfor, prototyper du kretsen din på brødbrettet ved hjelp av jumpertråder, motstander, de ensidige krokodilleklippene og Micro: -biten.
2. Koble bøyesensorene til pinne 0, 1 og 2.
3. Jeg brukte denne koden til å teste flex -sensorene mine
4. Bøy dem noen ganger for å se avlesningene deres og sørg for at de fungerer som de skal

I koden er den siste linjen "serial.writeLine" der vi skriver til vår serieutgang. Du kan formatere denne utgangen slik du vil, jeg atskilt hver variabel med et komma, og deretter delte den på et komma senere, men denne delen er opp til deg.

(Merk: Etter at jeg gjorde dette trinnet fant jeg ut at en av bøyesensorene mine hadde en brikke i den ledende malingen og fikk derfor ikke gode avlesninger. Derfor viste noen av bildene meg å jobbe med 4 sensorer. Etter å ha funnet dette, gikk jeg ned til bare tre sensorer på pekeren, midten og ringfingeren. Jeg fant også at bøyesensorene mine hadde det mest brede avlesningsområdet som bøyde den "motsatte" måten, og derfor la jeg dem på hansken med den resistive malingen ned.)

Trinn 4: Testing av akselerometer og lyssensor

På dette stadiet valgte jeg også å teste akselerometeret og lyssensoren på Micro: bit

1. Koble Micro: bit til datamaskinen
2. Last ned denne koden
3. Så testet jeg akselerometer, lys og bøyesensorer sammen med denne koden

(Merk: Det var på dette tidspunktet jeg fant ut at du ikke kan bruke pinnene og lyssensoren samtidig, så jeg brukte ikke lyssensoren i finalen min, men jeg ville at du skulle kunne se hvordan du leser lyssensoren hvis du trenger!)

Trinn 5: Lodding av bøyesensorene

Nå skal vi begynne å lodde komponentene våre sammen! Dette er en spennende del, men det er viktig å gå sakte og kontrollere at alt fortsatt fungerer mens du går, slik at du ikke kommer til slutten, at noe ikke fungerer, og ikke er sikker på hvor det gikk galt! Jeg foreslår at du bruker dine tosidige krokodilleklipp her for å kontrollere at hver sensor fortsatt fungerer når ledningene og motstandene er loddet sammen.

1. Ta bøyesensoren og tape eller sett en tung gjenstand på den for å holde den på plass.
2. Ta 10K Ohm -motstanden din og kutt det meste av enden slik at ledningen er omtrent like lang som ledningen på bøyesensoren.
3. Ta loddejernet og trykk det på både motstanden og bøy sensorledningen til de er varme
4. Ta loddetinnet og trykk det inn i det varme jernet når det begynner å smelte over komponentene. Du trenger bare nok til å dekke ledningene.
5. Fjern strykejernet. Her tok jeg på meg den andre hagehansken og holdt motstanden og ledningen på plass mens loddet avkjøltes.
6. Klipp et langt stykke rød ledning og legg det på loddetinnet der motstanden og bøyesensoren møtes. Gjenta trinn 4-5. Dette er den analoge pinnetråden.
7. Klipp et langt stykke svart ledning og legg den på enden av den andre ledningen. Gjenta trinn 4-5. Dette er din jordledning.
8. Klipp et langt stykke rød ledning og klipp den andre enden av motstanden, så den er omtrent like lang som forrige side. Gjenta trinn 4-5. Dette er strømledningen din.
9. Gjenta trinn 1-8 for resten av bøyesensorene.
10. La ledningene være lange, slik at du har plass til å jobbe med for å gjøre dem i riktig lengde senere når du setter dem på Micro: bit.

Trinn 6: Lodding til Micro: bit og montering av hansken

Nå som sensorene våre er klare, skal vi begynne å lodde til Micro: bit og montere hansken. Husk igjen å teste mens du bruker alligatorklipp for å sikre at komponentene fortsatt fungerer etter at du har loddet dem sammen.

1. Legg sensorene og Micro: bit på hansken for å få en ide om hvor ledningene må gå og hvor lenge de må være.
2. Vikle en rød ledning rundt strømnålen. Bruk wire cutters til å fjerne ledningen og la åpne hull som du vil feste ledningen til. Gjør dette også for jordledningen.
3. Skissere hansken du ikke bruker. Dette vil hjelpe oss med å lodde alt sammen og få lengden på tingene riktige. Du vil gjøre alt bakover, men så sjekk at du lodder ting på riktig måte!
4. Plasser din Micro: bit omtrent der du vil at den skal ligge på hånden. Lag merker der bakken og strømledningene sitter.
5. Tape ledningen, strøm eller jord, på plass.
6. Tape bøyesensoren på plass.
7. Kutt strømledningen slik at den går forbi merket på den overordnede kraftledningen.
8. Lodd disse bitene sammen.
9. Gjenta trinn 5-8 for de andre strømledningene og for jordledningene.
10. Ta Micro: -biten og legg den under de nylig loddede ledningene. Lodd kraften og bakken til de riktige pinnene.
11. Fest de analoge ledningene slik at de går rett forbi enden av pinnene og kan vikle rundt til forsiden.
12. Lodd ledningene til de riktige pinnene.
13. Jeg fant ut at avlesningene mine var best og mest konsistente når alle ledningene (kraft, bakke og analog) berørte både forsiden og baksiden av pinnene.
14. Ett spor etter ett spor, skyv bøyesensorene opp fingrene samtidig.
15. Når sensorene er på plass, ta på hansken og sørg for at passformen er riktig. Hvis du trenger å legge til spor, eller fikse plasseringen, gjør du det nå.
16. Når sensorene ligger der du vil ha dem, noterer du hvor Micro: -biten skal festes. Du kan bruke de små hullene på hver side av A- og B -knappene eller bruke hullene til pinnene. Bruk nålen og tråden til å knytte den på plass på hånden

Gratulerer! Maskinvarekomponentene til hansken er nå ferdige!

Trinn 7: Micro: bit Code

Nå skal jeg lede deg gjennom Micro: bit -koden. Du er mer enn velkommen til å gjøre denne koden til det du vil ha, men jeg ville gå gjennom og forklare alt slik at du kan se hva jeg gjorde, hvordan jeg gjorde det og hvorfor! Du finner koden min her.

1. Linje 1-31. Her bruker jeg forhåndsinnstilte funksjoner som Micro: bit kommer med.

   • Ved å trykke på A reduseres antallet, som er utvalget av tilgjengelig grafikk. Når du når 0, går det tilbake til det høyeste tallet.
   • Ved å trykke på B øker antallet, når du når det høyeste antallet tilgjengelige grafikk, går det tilbake til 0.
   • Hvis den nåværende grafikken du har valgt ikke er den som tegnes for øyeblikket, trykker du på A og B samtidig for å velge den nye grafikken.
   • Hvis den nåværende grafikken du har valgt er den samme som den som tegnes, fylles formen samtidig ved å trykke på A og B hvis den kan fylles ut.
   • Risting av Micro: bit setter slettevariabelen til 1 som forteller p5.js å slette lerretet og starte på svart. Den stopper kjøringen et sekund og setter den deretter tilbake til 0 slik at brukeren kan fortsette å tegne.

2. Linje 32-64 setter opp mine variabler. Det var viktig å bruke mange variabler slik at de fleste verdiene ikke ble hardkodet. De kan endres med hansken og kan enkelt endres på ett sted i stedet for å oppdatere en haug med verdier overalt. Jeg vil trekke frem noen av de viktige.

   • Lerretstørrelsen er en som er fin å ha i en variabel å oppdatere avhengig av størrelsen på lerretet mitt. Samme med formen Høy. Når jeg legger til eller blir kvitt grafikk, kan jeg oppdatere dette nummeret her.
   • Høye og lave variabler lar meg holde oversikt over gjeldende høy og lav for sensorer og har et kontinuerlig kalibreringsområde. Dette er viktig siden hver person som bruker hanskene vil ha forskjellige bevegelsesområder og derfor forskjellige høyder og nedturer de kan nå.
3. Linje 66-68 leser inn de analoge verdiene fra pinnene for flex-sensorene

4. Linje 69-74 kalibrerer den høye verdien for pekefingeren.

   • Hvis en ny høyde er nådd, setter den dette som høyden.
   • Rekalibrerer rekkevidden til den fingeren.
   • Bruker det nye området for fargekartlegging
5. Linje 75-80 kalibrerer den lave verdien for pekefingeren.
6. Linje 81-104 gjør det samme som 4 og 5 for mellom- og ringfingrene.

7. Linje 105-107 kartlegger flex-sensorverdiene mine til fargeverdier 0-255 (eller colorLow til colorHigh, hvis jeg ikke gjør hele området)

   • Den innebygde kartfunksjonen fra Makecode ga meg ingen god kartlegging, gitt det begrensede området jeg fikk fra sensorene mine. Så jeg lagde min egen kartfunksjon.
   • Slik fungerer det. Inngangsområdet for hver finger bestemmes av den (høyeste verdi - den laveste verdien). Fargeområdet, som også er (høyeste fargeverdi - laveste fargeverdi) er delt med hvert fingerområde. Dette tallet er avrundet med det laveste hele tallet og er kvoten.
   • Den (faktiske sensorverdien - den laveste sensorverdien) gir deg verdien innenfor området. Multiplisere dette med kvoten vi fant ovenfor og legge til de laveste fargeverdiene gir deg en kartlagt verdi fra sensoren, til fargen, innenfor fargeområdet.
8. Linje 109 leser inn tonehøydeverdien (opp og ned).
9. Linje 110-115 kalibrerer høy og lav for denne verdien
10. Linje 116 leser inn rulleverdien (venstre og høyre).
11. Linje 117-122 kalibrerer høy og lav for denne verdien
12. Linjene 123-126 kartlegger pitch and roll-verdiene til lerretstørrelsen og avrund dem til hele tall.
13. Linje 127 skriver variablene til den serielle utgangen ved hjelp av serial.writeLine, og separerer hver verdi med komma og mellomrom ",", for å analysere med senere.

Når du har koden slik du liker den, kan du laste den ned og dra den fra nedlastingene til Micro: bit (du bør se den på "Steder" på venstre side av søkeren) for å laste opp koden til Micro: bit

Trinn 8: Seriell kommunikasjon med P5.js

For å kommunisere serielt med p5.js trenger vi et ekstra verktøy. For å lære mer om hva som ligger bak kulissene i seriell kommunikasjon, foreslår jeg at du leser denne artikkelen.

1. Last ned en versjon av p5.js -appen fra denne lenken. Jeg har Alpha 6 -versjonen, men noen vil fungere.
2. Bruk denne p5.js -malen for å kommunisere i serie. For å sette det opp, sett inn riktig seriell portnavn for portnavn på linje 12. Dette er navnet vi fant ut i trinn 2.
3. Koble Micro: bit til datamaskinen
4. Åpne den serielle appen p5.js.
5. Velg porten din fra portlisten, og ikke gjør noe annet. Ikke engang trykke åpen! Bare velg porten din fra listen.
6. Trykk på run i p5.js seriell mal. Du bør kunne se den åpen, og den vil lese deg nullverdier siden vi ikke har skrevet kode for å analysere vår serielle utgang ennå.

Nå kan vi kommunisere serielt fra Micro: bit til p5.js!

Trinn 9: P5.js -kode

Nå skal vi hoppe inn i p5.js -koden. Her leser vi inn de serielle utgangsverdiene og bruker dem til å lage kunst.

1. Som jeg nevnte i forrige trinn, må du kontrollere at portnavnet på linje 12 er ditt spesifikke datamaskinportnavn.
2. I oppsett () -funksjonen, på linje 32-33, la jeg til venstre og høyre buffer med createGraphics, jeg gjorde dette for å skille lerretet slik at den ene delen brukes til å tegne, og den andre delen kunne vise retninger og vise hvilken grafikk du ser på eller ruller gjennom.
3. Draw () -funksjonen kaller funksjoner jeg laget for å lage leftBuffer og rightBuffer separat. Den definerer også hvor det øvre venstre hjørnet av hver buffer starter.
4. DrawRightBuffer () -funksjonen viser all teksten for retninger og grafikkvalg

5. DrawLeftBuffer () -funksjonene viser all grafikk.

   • Linje 93 genererer tilfeldig en verdi for alfa -verdien. Dette er slik at alle fargene har forskjellige gjennomsiktighetsverdier for å få det til å se mer interessant ut. Hadde jeg hatt 4 flex -sensorer hadde jeg brukt den fjerde til dette!
   • Linje 94 setter slagverdien til r, g, b -verdiene som er bestemt av flex -sensorene
   • Linje 96-102 kan ikke kommenteres for å teste hvordan hansken fungerer uten å ha hansken ved å bruke musen i stedet. Erstatt linje 102 med grafikk fra resten av funksjonen.
6. 104-106 sletter lerretet når hånden rister ved å sette lerretbakgrunnen til svart
7. 108-114 styre fyllingen av figurene når A+B trykkes og velges og gjeldende form er den samme
8. 117-312 er der grafikken vises. Dette er hoveddelen av koden og delen for å bli kreativ! Jeg foreslår at du ser på p5.js -referansen for å bedre forstå hvordan du kontrollerer figurene. Jeg brukte rull og tonehøyde til å kontrollere x, y posisjoner og endre størrelsen på figurene og grafikken, og som jeg nevnte tidligere brukte jeg. bøyesensorer for å kontrollere fargen. Det er her du kan bli kreativ! Spill med det p5.js har å tilby og kom med din egen morsomme grafikk å kontrollere! Her har jeg også angitt beskrivelsen for currentShape som vises på høyre buffer.
9. 318-460 Jeg angir beskrivelsen for det valgte Shape.

10. Linje 478-498 er serialEvent () -funksjonen. Det er her vi mottar serielle data.

    • På linjene 485-486 satte jeg proll og ppitch (forrige rulle og tonehøyde) til forrige rulle og tonehøyde.
    • På linje 487 delte jeg dataene på ",". Jeg gjør dette fordi jeg skrev dataene som skulle skilles med kommaer. Du vil sette det du skilte variablene dine med her. Disse variablene blir satt inn i tallmatrisen.
    • Så i linjer 488-496 satte jeg variablene til det tilsvarende elementet i matrisen og oversatte dem fra en streng til et tall. Jeg bruker disse variablene gjennom drawLeftBuffer () -funksjonen for å kontrollere grafikken.

Det oppsummerer ganske mye koden og fullfører prosjektet! Nå kan vi se hansken arbeide i aksjon.

Trinn 10: Sluttprodukt

Her er noen bilder av den ferdige hansken, samt noen kunstverk den genererte! Se demovideoen for å se den i aksjon!