Konsthandske: 10 steg (med bilder)

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:35

Art Glove är en bärbar handske som innehåller olika typer av sensorer för att styra konstgrafik genom en Micro: bit och p5.js Fingrarna använder böjsensorer som styr r, g, b värden och accelerometern i Micro: bit kontroller x, y -koordinater för grafiken. Jag skapade det här projektet som mitt terminsprojekt för min Wearable Technology Class som senior i programmet Technology, Arts and Media på CU Boulder.

Tillbehör:

• Trädgårdshandskar
• BBC Micro: Bit
• 3-4 Flex-sensorer
• 10K Ohm motstånd
• Anslutningstråd (röd och svart)
• Trådklippare
• Bakbord
• Alligatorklämmor (dubbelsidiga och enkelsidiga)
• Löda
• Lödkolv
• Nål
• Tråd
• Vaxpapper
• Tejp
• Sax
• Penna och penna

Steg 1: Böj sensor spår

Först ska vi fokusera på att göra hårdvaran. På det här sättet när vi kommer till kodning har vi själva handskkomponenten att använda och testa.

1. För att börja ska vi göra spåren på fingrarna som håller böjningssensorerna på plats. Att ha dessa spår gör att böjningssensorerna kan röra sig lite fram och tillbaka samtidigt som de hålls säkert vid fingret att böja. Vänd först handsken ut och in.
2. Ta en böjningssensor och placera den i mittkanten på fingret. Använd en penna och skissera böjningssensorn
3. Dra tråden genom nålen. Ge dig själv en generös bit. Knyt en knut i slutet av tråden.
4. Börja från toppen och på linan, bara blåsa böjningen av böjningssensorn, skjut nålen genom handsken genom insidan och tryck tillbaka den på parallelllinjen. Dra nålen hela vägen så att knuten sitter på linjen du drog.
5. Dra tätt, gör 2-3 knop på andra sidan. Detta säkerställer att tråden inte kommer ut. Se till att den är tätt så att böjningssensorn sitter säkert mot fingret
6. Klipp av tråden med några cm kvar. tråd i slutet så att knuten inte ångras.
7. Upprepa steg 2-6 för alla fingrar du fäster flexsensorer till tills det ser ut som den tredje till sista bilden.
8. Vänd tillbaka handsken så att den vänds på rätt sätt. Dra dina böjsensorer genom spåren för att se till att de passar korrekt på din hand

Steg 2: Använda seriell kommunikation med Micro: bit

För att se utgångarna från våra sensorer kommer vi att använda seriell kommunikation. Du kommer att se hur du ställer in koden i Makecode i nästa steg, men först ska vi lära oss att läsa den från vår terminal. (Obs! Jag använder en Mac så dessa steg kan vara olika beroende på ditt operativsystem. Se andra operativsystem här).

1. Anslut din Micro: bit
2. Öppna din terminal
3. skriv 'ls /dev/cu.*'
4. Du borde se något som ser ut som '/dev/cu.usbmodem1422' men det exakta antalet beror på din dator
5. När du har kört koden kommer du att skriva 'screen /dev/cu.usbmodem1422 115200' (med ditt specifika seriella portnummer) som ger dig din Micro: bits serieutgång
6. Din produktion ska se ut ungefär som på bilden ovan, beroende på hur du formaterade din utdata!

Steg 3: Prototyper kretsen

Innan vi lödar alla våra komponenter tillsammans ska vi prototyper kretsen och skriva några rader med exempelkod för att läsa våra sensorvärden och se till att våra komponenter fungerar korrekt.

1. Med hjälp av kretsschemat ovan prototyper du din krets på brödbrädan med hjälp av bygeltrådar, motstånd, de ensidiga krokodilklämmorna och din Micro: bit.
2. Anslut dina böjsensorer till stiften 0, 1 och 2.
3. Jag använde den här koden för att testa mina flexsensorer
4. Böj dem några gånger för att se deras avläsningar och se till att de fungerar korrekt

I koden är den sista raden "serial.writeLine" där vi skriver till vår serieutgång. Du kan formatera denna utgång hur du vill, jag separerade varje variabel med ett komma och delade den sedan på ett kommatecken senare, men den här delen är upp till dig.

(Obs: Efter att jag gjorde det här steget fick jag reda på att en av mina böjsensorer hade ett chip i den ledande färgen och fick därför inte bra avläsning. Det är därför som några av bilderna visar att jag arbetar med 4 sensorer. Efter att ha hittat detta gick jag ner till bara tre sensorer på pekaren, mitten och ringfingret. Jag fann också att mina böjsensorer hade det mest breda läsområdet som böjde det "motsatta" sättet, varför jag satte dem på handsken med den resistiva färgen nedåt.)

Steg 4: Testa accelerometer och ljussensor

I detta skede valde jag också att testa accelerometern och ljussensorn på Micro: bit

1. Anslut din Micro: bit till din dator
2. Ladda ner den här koden
3. Sedan testade jag accelerometer, ljus och böjsensorer tillsammans med denna kod

(Obs: Det var vid denna tidpunkt jag kom på att du inte kan använda stiften och ljussensorn samtidigt så jag använde inte ljussensorn i min final, men jag ville att du skulle kunna se hur du läser ljussensorn om du behöver!)

Steg 5: Lödning av böjsensorerna

Nu ska vi börja lödda våra komponenter tillsammans! Det här är en spännande del, men det är viktigt att gå långsamt och kontrollera att allt fortfarande fungerar under tiden så att du inte kommer till slutet, att något inte fungerar och inte är säker på var det gick fel! Jag föreslår att du använder dina dubbelsidiga krokodilklämmor här för att kontrollera att varje sensor fortfarande fungerar när ledningarna och motstånden är lödda ihop.

1. Ta din böjningssensor och tejp eller lägg ett tungt föremål på den för att hålla den på plats.
2. Ta ditt 10K Ohm -motstånd och skär av större delen av änden så att ledningen är ungefär lika lång som ledningen på böjningssensorn.
3. Ta ditt lödkolv och tryck på det på både motståndet och böj sensorledningen tills de är heta
4. Ta ditt löd och tryck in det i det heta järnet när det börjar smälta över komponenterna. Du behöver bara tillräckligt för att täcka trådarna.
5. Ta bort strykjärnet. Här tog jag på mig den andra trädgårdshandsken och höll motståndet och tråden på plats medan lödet svalnade.
6. Kläm fast en lång bit röd tråd och placera den vid lödfogen där motståndet och böjningssensorn möts. Upprepa steg 4-5. Detta är den analoga stifttråden.
7. Klipp en lång bit svart tråd och placera den i slutet av den andra kabeln. Upprepa steg 4-5. Detta är din jordtråd.
8. Klipp en lång bit röd tråd och klipp den andra änden av motståndet så att det är ungefär lika långt som föregående sida. Upprepa steg 4-5. Detta är din strömkabel.
9. Upprepa steg 1-8 för resten av dina böjsensorer.
10. Lämna dina ledningar långa så att du har utrymme att arbeta med för att göra dem i rätt längd senare när du sätter dem på Micro: bit.

Steg 6: Lödning till Micro: bit och montering av handske

Nu när våra sensorer är klara ska vi börja lödda till Micro: bit och montera handsken. Kom ihåg igen att testa medan du går, med hjälp av krokodilklämmor för att se till att komponenterna fortfarande fungerar efter att du lödt ihop dem.

1. Lägg sensorerna och Micro: bit på handsken för att få en uppfattning om var ledningarna behöver gå och hur långa de behöver vara.
2. Vik en röd tråd runt strömstiftet. Använd trådskärare för att ta bort tråden och lämna öppna luckor som du fäster din tråd till. Gör detta för jordkabeln också.
3. Beskriv handsken du inte använder. Detta hjälper oss att löda ihop allt och få längden på sakerna korrekta. Du kommer att göra allt bakåt men dubbelkolla att du lödar saker på rätt sätt!
4. Placera din Micro: bit ungefär där du vill att den ska ligga på din hand. Gör märken var marken och strömkablarna sitter.
5. Tejpa fast kabeln, ström eller jord på plats.
6. Tejpa din böjningssensor på plats.
7. Klipp av strömkabeln så att den går precis förbi märket på den övergripande kraftledningen.
8. Löd dessa bitar ihop.
9. Upprepa steg 5-8 för de andra strömkablarna och för jordledningarna.
10. Ta Micro: -biten och placera den under de nylödda trådarna. Löd kraften och marken till rätt stift.
11. Kläm fast de analoga trådarna så att de går precis förbi stiftets ände och kan linda runt till framsidan.
12. Löd trådarna till rätt stift.
13. Jag fann att mina avläsningar var bäst och mest konsekventa när alla trådar (kraft, jord och analog) rörde både framsidan och baksidan av stiften.
14. Ett spår för ett spår, tryck böjsensorerna uppåt fingrarna samtidigt.
15. När sensorerna är på plats, sätt på handsken och se till att passformen är rätt. Om du behöver lägga till spår eller fixa deras placering, gör det nu.
16. När sensorerna ligger där du vill att de ska, notera var du ska fästa Micro: bit på plats. Du kan använda de små hålen på vardera sidan av A- och B -knapparna eller använda hålen för stiften. Använd din nål och tråd för att binda den på plats på din hand

grattis! Hårdvarukomponenterna för handsken är nu färdiga!

Steg 7: Micro: bit -kod

Nu kommer jag att gå dig igenom Micro: bitkoden. Du är mer än välkommen att göra den här koden till vad du vill, men jag ville gå igenom och förklara allt så att du kan se vad jag gjorde, hur jag gjorde det och varför! Du hittar min kod här.

1. Linjerna 1-31. Här använder jag förinställda funktioner som Micro: bit kommer med.

   • Genom att trycka på A minskar antalet, vilket är valet av tillgänglig grafik. När du når 0 går det tillbaka till det högsta talet.
   • Om du trycker på B ökar antalet, när du når det högsta antalet tillgängliga grafik går det tillbaka till 0.
   • Om den aktuella grafiken du har valt inte är den som ritas för när du trycker på A och B samtidigt väljer du den nya grafiken.
   • Om den aktuella grafiken du har valt är samma som den som ritas, fylls formen om du trycker på A och B samtidigt om den kan fyllas.
   • Om du skakar om Micro: -biten ställs raderingsvariabeln till 1 som säger åt p5.js att radera duken och börja med svart. Den pausar körningen en sekund och ställer den sedan tillbaka till 0 så att användaren kan fortsätta rita.

2. Linjer 32-64 konfigurerar mina variabler. Det var viktigt att använda många variabler så att de flesta värdena inte var hårdkodade. De kan bytas med handsken och kan också enkelt bytas på ett ställe istället för att uppdatera ett gäng värden överallt. Jag lyfter fram några av de viktiga.

   • Canvasstorleken är en som är trevlig att ha i en variabel att uppdatera beroende på storleken på min duk. Samma med formen Hög. När jag lägger till eller blir av med grafik kan jag uppdatera det numret här.
   • De höga och låga variablerna låter mig hålla koll på det aktuella högt och lågt för sensorer och har ett kontinuerligt kalibreringsområde. Detta är viktigt eftersom varje person som bär handskarna kommer att ha olika rörelseomfång och därför olika toppar och dalar som de kan nå.
3. Linjerna 66-68 läser in de analoga värdena från stiften för flexsensorerna

4. Linjer 69-74 kalibrerar det höga värdet för pekarfingret.

   • Om en ny höjd uppnås, sätter den detta som hög.
   • Omkalibrerar räckvidden för det fingret.
   • Använder det nya sortimentet för färgkartläggningen
5. Linjer 75-80 kalibrerar det låga värdet för pekarfingret.
6. Linjer 81-104 gör samma sak som 4 & 5 för mellan- och ringfingrarna.

7. Linjer 105-107 kartlägger mina flexsensorvärden till färgvärden 0-255 (eller colorLow till colorHigh, om jag inte gör hela intervallet)

   • Den inbyggda kartfunktionen från Makecode gav mig ingen bra kartläggning, med tanke på det begränsade räckvidd jag fick från mina sensorer. Så jag gjorde min egen kartfunktion.
   • Så här fungerar det. Inmatningsområdet för varje finger bestäms av dess (högsta värde - det lägsta värdet). Färgintervallet, som också är det (högsta färgvärdet - lägsta färgvärdet) divideras med varje fingerintervall. Detta tal avrundas med det lägsta heltalet och är kvoten.
   • Det (faktiska sensorvärdet - det lägsta sensorvärdet) ger dig värdet inom intervallet. Multiplicera detta med kvot vi hittade ovan och lägga till de lägsta färgvärdena ger dig ett mappat värde från sensorn, till färgen, inom färgintervallet.
8. Rad 109 läser in tonvärdet (upp och ner).
9. Linjerna 110-115 kalibrerar hög och låg för detta värde
10. Rad 116 läser in rullevärdet (vänster och höger).
11. Linjer 117-122 kalibrerar hög och låg för detta värde
12. Linjer 123-126 kartlägger pitch- och roll-värdena till dukstorleken och rundar dem till hela tal.
13. Rad 127 skriver variablerna till den seriella utmatningen med serial.writeLine och separerar varje värde med ett kommatecken och mellanslag "," att analysera med senare.

När du har koden hur du gillar den, ladda ner den och dra den från dina nedladdningar till din Micro: bit (du bör se den på "Platser" på vänster sida av din sökare) för att ladda upp koden till Micro: bit

Steg 8: Seriell kommunikation med P5.js

För att kommunicera seriellt med p5.js behöver vi ett extra verktyg. För att lära dig mer om vad som ligger bakom kulisserna för seriell kommunikation föreslår jag att du läser den här artikeln.

1. Ladda ner en version av appen p5.js från den här länken. Jag har Alpha 6 -versionen men alla fungerar.
2. Använd den här p5.js -mallen för att kommunicera i serie. För att ställa in det sätter du in ditt rätta serieportnamn för portnamn på rad 12. Detta är namnet vi tog reda på i steg 2.
3. Anslut din Micro: bit till din dator
4. Öppna den seriella appen p5.js.
5. Välj din port från portlistan och gör inget annat. Inte ens tryck öppen! Välj bara din port från listan.
6. Tryck på kör i seriemallen p5.js. Du bör kunna se den öppen, och den kommer att läsa dig nollvärden eftersom vi inte har skrivit kod för att analysera vår serieutmatning ännu.

Nu kan vi kommunicera seriellt från vår Micro: bit till p5.js!

Steg 9: P5.js -kod

Nu ska vi hoppa in i p5.js -koden. Här läser vi in de seriella utgångsvärdena och använder dem för att skapa konst.

1. Som jag nämnde i föregående steg, se till att portnamnet på rad 12 är ditt specifika datorportnamn.
2. I funktionen setup (), på raderna 32-33, lade jag till vänster och högerBuffer med createGraphics, jag gjorde detta för att separera duken så att en del används för ritning och den andra delen kunde visa riktningar och visa vilken grafik du tittar på eller rullar igenom.
3. Draw () -funktionen kallar funktioner jag gjorde för att skapa leftBuffer och rightBuffer separat. Det definierar också var det övre vänstra hörnet av varje buffert börjar.
4. DrawRightBuffer () -funktionen visar all text för vägbeskrivningar och grafikval

5. DrawLeftBuffer () -funktionerna visar all grafik.

   • Rad 93 genererar slumpmässigt ett värde för alfa -värdet. Detta är så att alla färger har olika transparensvärden för att få det att se mer intressant ut. Hade jag haft 4 flex -sensorer hade jag använt den fjärde för detta!
   • Linje 94 ställer in slagvärdet till r, g, b -värdena som bestäms av flex -sensorerna
   • Linjerna 96-102 kan inte kommenteras för att testa hur handsken fungerar utan att ha handsken genom att använda musen istället. Ersätt rad 102 med grafik från resten av funktionen.
6. 104-106 raderar duken när handen skakar genom att ställa in canvasens bakgrund till svart
7. 108-114 styr fyllningen av formerna när A+B trycks och väljs och aktuell form är densamma
8. 117-312 är där grafiken visas. Detta är huvuddelen av koden och delen för att bli kreativ! Jag föreslår att du tittar på p5.js -referensen för att bättre förstå hur du styr formerna. Jag använde rullen och tonhöjden för att styra x, y -positioner och ändra storlek på former och grafik, och som jag nämnde tidigare använde jag. böjsensorer för att styra färgen. Det är här du kan bli kreativ! Lek med vad p5.js har att erbjuda och kom med din egen roliga grafik att styra! Här ställer jag också in beskrivningen för currentShape som visas på högerBuffer.
9. 318-460 Jag ställde in beskrivningen för vald Shape.

10. Linjer 478-498 är serialEvent () -funktionen. Det är här vi tar emot seriedata.

    • På raderna 485-486 ställde jag in proll och ppitch (föregående rulle och tonhöjd) till föregående rulle- och tonhöjdsvärden.
    • På rad 487 delade jag upp data på ",". Jag gör detta för att jag skrev data som ska separeras med kommatecken. Du skulle lägga vad du än skilde dina variabler med här. Dessa variabler sätts in i talmatrisen.
    • Sedan på raderna 488-496 ställer jag in variablerna till motsvarande element i matrisen och översätter dem från en sträng till ett tal. Jag använder dessa variabler under drawLeftBuffer () -funktionen för att styra grafiken.

Det summerar i stort sett koden och avslutar projektet! Nu kan vi se handsken som fungerar.

Steg 10: Slutprodukt

Här är några bilder på den färdiga handsken samt några konstverk som den genererade! Se demofilmen för att se den i aktion!