Kunsthandske: 10 trin (med billeder)

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:25

Art Glove er en bærbar handske, der indeholder forskellige typer sensorer til at styre kunstgrafik gennem en Micro: bit og p5.js Fingrene anvender bøjningssensorer, der styrer r, g, b værdier og accelerometeret i Micro: bit kontroller x, y koordinater for grafikken. Jeg skabte dette projekt som mit projekt for min Wearable Technology Class som senior i programmet Technology, Arts and Media på CU Boulder.

Tilbehør:

• Havearbejde handsker
• BBC Micro: Bit
• 3-4 Flex-sensorer
• 10K Ohm modstande
• Tilslutningstråd (rød og sort)
• Wire Clippers
• Brødbræt
• Alligator klip (dobbeltsidet og enkeltsidet)
• Lodde
• Loddekolbe
• Nål
• Tråd
• Voks papir
• Tape
• Saks
• Pen og blyant

Trin 1: Bøj sensor spor

Først vil vi fokusere på at lave hardwaren. På denne måde, når vi kommer til kodning, har vi den egentlige handskekomponent til brug og test.

1. For at starte vil vi lave sporene på fingrene, der holder bøjningssensorerne på plads. At have disse spor gør det muligt for bøjningssensorerne at bevæge sig lidt frem og tilbage, samtidig med at de holder dem fast til fingeren for at bøje. Først vender du handsken ud og ind.
2. Tag en bøjningssensor og placer den i den midterste højderyg. Brug en pen til at skitsere bøjningssensoren
3. Stik tråden gennem nålen. Giv dig selv et generøst stykke. Bind en knude for enden af tråden.
4. Start fra toppen og på linjen, bare blæs buen i bøjningssensoren, skub nålen gennem handsken gennem indersiden, og skub den tilbage igennem på den parallelle linje. Træk nålen helt igennem, så knuden sidder på den linje, du tegnede.
5. Træk stramt, lav 2-3 knob på den anden side. Dette sikrer, at tråden ikke kommer ud. Sørg for, at den er stram, så bøjningssensoren er sikret mod din finger
6. Klip tråden tilbage et par cm. tråd i enden, så knuden ikke bliver fortrudt.
7. Gentag trin 2-6 for alle de fingre, du vedhæfter flexsensorer til, indtil det ligner det tredje til sidste billede.
8. Vend handsken tilbage, så den vendes på den rigtige måde. Slip dine bøjningssensorer gennem sporene for at sikre, at de passer korrekt på din hånd

Trin 2: Brug af seriel kommunikation med Micro: bit

For at se output fra vores sensorer bruger vi seriel kommunikation. Du kan se, hvordan du konfigurerer koden i Makecode i det næste trin, men først skal vi lære at læse den fra vores terminal. (Bemærk: Jeg bruger en Mac, så disse trin kan variere afhængigt af dit operativsystem. Se andre operativsystemer her).

1. Tilslut din Micro: bit
2. Åbn din terminal
3. skriv 'ls /dev/cu.*'
4. Du skulle se noget, der ligner '/dev/cu.usbmodem1422', men det nøjagtige antal afhænger af din computer
5. Når du kører kode, vil du skrive 'screen /dev/cu.usbmodem1422 115200' (med dit specifikke serielle portnummer) give dig din Micro: bits serielle output
6. Dit output skal ligne billedet ovenfor, afhængigt af hvordan du formaterede dit output!

Trin 3: Prototyping af kredsløbet

Inden vi lodder alle vores komponenter sammen, skal vi prototype kredsløbet og skrive et par linjer med eksempelkode for at læse vores sensorværdier og sikre, at vores komponenter fungerer korrekt.

1. Brug kredsløbsdiagrammet ovenfor til at prototype dit kredsløb på brødbrættet ved hjælp af jumperwires, modstande, de ensidige alligatorklemmer og din Micro: bit.
2. Tilslut dine bøjningssensorer til ben 0, 1 og 2.
3. Jeg brugte denne kode til at teste mine flexsensorer
4. Bøj dem et par gange for at se deres aflæsninger og sørg for, at de fungerer korrekt

I koden er den sidste linje "serial.writeLine", hvor vi skriver til vores serielle output. Du kan formatere dette output, som du vil, jeg adskilte hver variabel med et komma og derefter opdelte det på et komma senere, men denne del er op til dig.

(Bemærk: Efter jeg gjorde dette trin fandt jeg ud af, at en af mine bøjningssensorer havde en chip i den ledende maling og derfor ikke fik gode aflæsninger. Derfor viser nogle af billederne mig, at jeg arbejder med 4 sensorer. Efter at have fundet ud af dette gik jeg ned til kun tre sensorer på markøren, midten og ringfingeren. Jeg fandt også, at mine bøjningssensorer havde den mest brede vifte af læsning, der bøjede den "modsatte" måde, og derfor lagde jeg dem på handsken med den resistive maling nedad.)

Trin 4: Test af accelerometer og lyssensor

På dette tidspunkt valgte jeg også at teste accelerometeret og lyssensoren på Micro: bit

1. Tilslut din Micro: bit til din computer
2. Download denne kode
3. Derefter testede jeg accelerometeret, lyset og bøjningssensorerne sammen med denne kode

(Bemærk: Det var på dette tidspunkt, jeg fandt ud af, at du ikke kan bruge stifterne og lyssensoren på samme tid, så jeg brugte ikke lyssensoren i min sidste, men jeg ville have, at du kunne se, hvordan du læser lyssensoren, hvis du har brug for det!)

Trin 5: Lodning af bøjningssensorerne

Nu skal vi begynde at lodde vores komponenter sammen! Dette er en spændende del, men det er vigtigt at gå langsomt og kontrollere, at alt stadig fungerer, mens du går, så du ikke kommer til slutningen, at noget ikke virker, og ikke er sikker på, hvor det gik galt! Jeg foreslår, at du bruger dine dobbeltsidede krokodilleklip her for at kontrollere, at hver sensor stadig fungerer, når ledningerne og modstandene er loddet sammen.

1. Tag din bøjningssensor og tape eller sæt en tung genstand på den for at holde den på plads.
2. Tag din 10K Ohm modstand og skær det meste af enden af, så ledningen er omtrent lige så lang som ledningen på bøjningssensoren.
3. Tag dit loddejern, og tryk det på både modstanden og bøj sensorkablet, indtil de er varme
4. Tag dit loddemateriale og pres det ind i det varme jern, da det begynder at smelte over komponenterne. Du har bare brug for nok til at dække ledningerne.
5. Fjern jernet. Her tog jeg den anden havehandske på og holdt modstanden og ledningen på plads, mens loddet var afkølet.
6. Klip et langt stykke rød ledning og anbring det ved loddetappen, hvor modstanden og bøjningssensoren mødes. Gentag trin 4-5. Dette er den analoge pin wire.
7. Klip et langt stykke sort ledning og anbring det for enden af den anden ledning. Gentag trin 4-5. Dette er din jordledning.
8. Klip et langt stykke rød ledning og klip den anden ende af modstanden, så den er omtrent lige så lang som den forrige side. Gentag trin 4-5. Dette er din strømledning.
9. Gentag trin 1-8 for resten af dine bøjningssensorer.
10. Lad dine ledninger være lange, så du har plads til at arbejde med for at gøre dem til den korrekte længde senere, når du sætter dem på Micro: bit.

Trin 6: Lodning til Micro: bit og samling af handske

Nu hvor vores sensorer er klar, skal vi begynde at lodde til Micro: bit og samle handsken. Husk igen at teste, mens du går, ved hjælp af krokodilleklip for at sikre, at komponenterne stadig fungerer, efter at du har loddet dem sammen.

1. Læg sensorerne og Micro: bit på handsken for at få en idé om, hvor ledningerne skal gå, og hvor længe de skal være.
2. Sæt en rød ledning omkring strømstiften. Brug wire cutters til at fjerne tråden og efterlade åbne huller, som du vil vedhæfte din wire til. Gør dette også for jordledningen.
3. Skitsér handsken, du ikke bruger. Dette vil hjælpe os med at lodde alt sammen og få længden på tingene korrekte. Du vil gøre alt baglæns, men så tjek, at du lodder ting på den rigtige måde!
4. Placer din Micro: bit omtrent, hvor du vil have den til at ligge på din hånd. Lav mærker, hvor jorden og strømkablerne sidder.
5. Tape ledningen, strøm eller jord, på plads.
6. Tape din bøjningssensor på plads.
7. Skær strømkablet, så det går lige forbi dets mærke på den overordnede strømledning.
8. Lod disse stykker sammen.
9. Gentag trin 5-8 for de andre strømledninger og for jordledningerne.
10. Tag Micro: bit og læg den under de nyligt lodde ledninger. Lodde strømmen og jorden til de korrekte stifter.
11. Klip de analoge ledninger, så de går lige forbi enden af stifterne og kan vikle rundt til forsiden.
12. Lod lodningerne til de korrekte stifter.
13. Jeg fandt ud af, at mine aflæsninger var de bedste og mest konsekvente, når alle ledninger (strøm, jord og analog) rørte både forsiden og bagsiden af stifterne.
14. Et spor efter et spor, skub bøjningssensorerne op ad fingrene samtidigt.
15. Når sensorerne er på plads, skal du tage handsken på og kontrollere, at pasformen er den rigtige. Hvis du har brug for at tilføje spor eller rette deres placering, skal du gøre det nu.
16. Når sensorerne ligger, hvor du vil have dem, skal du notere, hvor du skal binde Micro: bit på plads. Du kan bruge de små huller på hver side af A- og B -knapperne eller bruge hullerne til stifterne. Brug din nål og tråd til at binde den på plads på din hånd

Tillykke! Hardwarekomponenterne til handsken er nu færdige!

Trin 7: Micro: bit kode

Nu vil jeg lede dig gennem Micro: bit -koden. Du er mere end velkommen til at gøre denne kode til det, du vil have, men jeg ville gå igennem og forklare alt, så du kan se, hvad jeg gjorde, hvordan jeg gjorde det, og hvorfor! Du kan finde min kode her.

1. Linje 1-31. Her bruger jeg forudindstillede funktioner, som Micro: bit kommer med.

   • Ved at trykke på A reduceres antallet, hvilket er udvalget af tilgængelig grafik. Når du når 0, går det tilbage til det højeste tal.
   • Ved at trykke på B øges antallet, når du når det højeste antal tilgængelige grafik, går det tilbage til 0.
   • Hvis den aktuelle grafik, du har valgt, ikke er den, der i øjeblikket tegnes, vælges den nye grafik samtidigt ved at trykke på A og B.
   • Hvis den aktuelle grafik, du har valgt, er den samme som den, der tegnes, udfyldes samtidig tryk på A og B, hvis den kan få et fyld.
   • Ved at ryste Micro: bit indstilles slettevariablen til 1, der fortæller p5.js at slette lærredet og starte med sort. Det sætter kørslen på pause et sekund og sætter det derefter tilbage til 0, så brugeren kan fortsætte med at tegne.

2. Linje 32-64 opsætter mine variabler. Det var vigtigt at bruge mange variabler, så de fleste af værdierne ikke blev hardcoded. De kan ændres med handsken og også let ændres ét sted i stedet for at opdatere en masse værdier overalt. Jeg vil fremhæve et par af de vigtige.

   • Lærredsstørrelsen er en, der er god at have i en variabel, der skal opdateres afhængigt af størrelsen på mit lærred. Samme med formen Høj. Når jeg tilføjer eller slipper for grafik, kan jeg opdatere dette nummer her.
   • De høje og lave variabler lader mig holde styr på den aktuelle høj og lav for sensorer og har et kontinuerligt kalibreringsområde. Dette er vigtigt, da hver person, der bærer handskerne, vil have forskellige bevægelsesområder og derfor forskellige op- og nedture, som de kan nå.
3. Linjerne 66-68 læser de analoge værdier ind fra benene til flexsensorerne

4. Linje 69-74 kalibrerer den høje værdi for pegefingeren.

   • Hvis en ny højde er nået, sætter den denne som høj.
   • Rekalibrerer rækkevidden for den finger.
   • Bruger det nye sortiment til farvekortlægningen
5. Linje 75-80 kalibrerer den lave værdi for pegefingeren.
6. Linje 81-104 gør det samme som 4 & 5 for mellem- og ringfingrene.

7. Linje 105-107 kortlægger mine flexsensorværdier til farveværdier 0-255 (eller colorLow til colorHigh, hvis jeg ikke gør hele området)

   • Den indbyggede kortfunktion fra Makecode gav mig ikke en god kortlægning i betragtning af det begrænsede område, jeg fik fra mine sensorer. Så jeg lavede min egen kortlægningsfunktion.
   • Sådan fungerer det. Inputområdet for hver finger bestemmes af den (højeste værdi - den laveste værdi). Farveområdet, som også er (højeste farveværdi - laveste farveværdi) divideres med hvert fingers område. Dette tal afrundes med det laveste hele tal og er kvotienten.
   • Den (faktiske sensorværdi - den laveste sensorværdi) giver dig værdien inden for området. Multiplicering af dette med kvotien, vi fandt ovenfor og tilføjede de laveste farveværdier, giver dig en kortlagt værdi fra sensoren til farven inden for farveområdet.
8. Linje 109 læser tonehøjdeværdien (op og ned).
9. Linje 110-115 kalibrerer høj og lav for denne værdi
10. Linje 116 læser rulleværdien (venstre og højre).
11. Linje 117-122 kalibrerer høj og lav for denne værdi
12. Linjer 123-126 kortlægger pitch and roll-værdierne til lærredets størrelse og afrund dem til hele tal.
13. Linje 127 skriver variablerne til det serielle output ved hjælp af serial.writeLine, adskiller hver værdi med et komma og mellemrum ",", til analyse med senere.

Når du har koden, hvordan du kan lide den, skal du downloade den og trække den fra dine downloads til din Micro: bit (du skal se den på "Steder" i venstre side af din finder) for at uploade koden til Micro: bit

Trin 8: Seriel kommunikation med P5.js

For at kommunikere serielt med p5.js har vi brug for et ekstra værktøj. For at lære mere om, hvad der foregår bag kulisserne i seriel kommunikation, foreslår jeg at læse denne artikel.

1. Download en version af p5.js -appen fra dette link. Jeg har Alpha 6 -versionen, men enhver vil fungere.
2. Brug denne p5.js -skabelon til seriel kommunikation. For at konfigurere det skal du indsætte dit korrekte serielle portnavn for portnavn på linje 12. Dette er det navn, vi fandt ud af i trin 2.
3. Tilslut din Micro: bit til din computer
4. Åbn den serielle app p5.js.
5. Vælg din port fra portlisten, og gør ikke andet. Ikke engang trykke åben! Vælg bare din port fra din liste.
6. Tryk på kør i p5.js serielle skabelon. Du burde kunne se den åben, og den vil læse dig nulværdier, da vi ikke har skrevet kode for at analysere vores serielle output endnu.

Nu kan vi kommunikere serielt fra vores Micro: bit til p5.js!

Trin 9: P5.js -kode

Nu hopper vi ind i p5.js -koden. Her læser vi de serielle outputværdier og bruger dem til at skabe kunst.

1. Som jeg nævnte i det foregående trin, skal du sørge for, at portnavnet på linje 12 er dit specifikke computerportnavn.
2. I funktionen setup (), på linjer 32-33, tilføjede jeg venstre og højre buffer med createGraphics, jeg gjorde dette for at adskille lærredet, så den ene del bruges til at tegne, og den anden del kunne vise retninger og vise hvilken grafik du kigger på eller ruller igennem.
3. Funktionen draw () kalder funktioner, jeg lavede for at oprette venstreBuffer og højreBuffer separat. Det definerer også, hvor det øverste venstre hjørne af hver buffer starter.
4. DrawRightBuffer () -funktionen viser al teksten til retninger og grafikvalg

5. DrawLeftBuffer () -funktionerne viser al grafikken.

   • Linje 93 genererer tilfældigt en værdi for alfa -værdien. Dette er så alle farverne har forskellige gennemsigtighedsværdier for at få det til at se mere interessant ud. Havde jeg haft 4 flex -sensorer, havde jeg brugt den fjerde til dette!
   • Linje 94 indstiller slagværdien til r, g, b -værdierne bestemt af flex -sensorerne
   • Linje 96-102 kan ikke kommenteres for at teste, hvordan handsken fungerer uden at have handsken ved at bruge musen i stedet. Udskift linje 102 med grafik fra resten af funktionen.
6. 104-106 sletter lærredet, når hånden ryster ved at indstille lærredets baggrund til sort
7. 108-114 styrer udfyldningen af figurerne, når der trykkes på A+B og vælges, og den aktuelle form er den samme
8. 117-312 er, hvor grafikken vises. Dette er hovedparten af koden og delen for at blive kreativ! Jeg foreslår, at man kigger på p5.js -referencen for bedre at forstå, hvordan man styrer formerne. Jeg brugte rullen og tonehøjden til at styre x, y positioner og ændre størrelsen på figurerne og grafikken, og som jeg nævnte tidligere brugte jeg. bøjningssensorer for at styre farven. Det er her, du kan blive kreativ! Spil med hvad p5.js har at tilbyde, og kom med din egen sjove grafik til at styre! Her har jeg også angivet beskrivelsen for currentShape, der vises til højreBuffer.
9. 318-460 Jeg har angivet beskrivelsen for det valgte Shape.

10. Linjer 478-498 er serialEvent () -funktionen. Det er her, vi modtager de serielle data.

    • På linje 485-486 indstillede jeg proll og ppitch (tidligere roll og pitch) til de tidligere roll- og pitch-værdier.
    • På linje 487 delte jeg dataene på ",". Jeg gør dette, fordi jeg skrev de data, der skulle adskilles med kommaer. Du ville sætte det, du adskilte dine variabler med her. Disse variabler lægges i talrækken.
    • Så i linjer 488-496 satte jeg variablerne til det tilsvarende element i arrayet og oversatte dem fra en streng til et tal. Jeg bruger disse variabler i hele drawLeftBuffer () -funktionen til at styre grafikken.

Det opsummerer stort set koden og afslutter projektet! Nu kan vi se handsken arbejde i aktion.

Trin 10: Slutprodukt

Her er nogle billeder af den færdige handske samt nogle kunstværker, den genererede! Se demovideoen for at se den i aktion!