Kunshandskoen: 10 stappe (met foto's)

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:23

Die Art Glove is 'n draagbare handskoen wat verskillende tipes sensors bevat om kunsgrafika te beheer deur middel van 'n Micro: bit en p5.js Die vingers gebruik buigsensors wat r, g, b waardes en die versnellingsmeter in die Micro: bit kontrole x beheer, y koördinate vir die grafika. Ek het hierdie projek geskep as my termynprojek vir my Wearable Technology -klas as senior in die tegnologie-, kunste- en mediaprogram by CU Boulder.

Benodighede:

• Tuinhandskoene
• BBC Micro: bietjie
• 3-4 Flex-sensors
• 10K Ohm weerstande
• Aansluitdraad (rooi en swart)
• Draadknippers
• Broodbord
• Alligator clips (dubbelzijdig en enkelsydig)
• Soldeer
• Soldeerbout
• Naald
• Draad
• Waspapier
• Band
• Skêr
• Pen en potlood

Stap 1: Buig sensorspore

Eerstens gaan ons fokus op die vervaardiging van die hardeware. Op hierdie manier het ons die werklike handskoenkomponent om te gebruik en te toets wanneer ons by kodering kom.

1. Om mee te begin, maak ons die spore op die vingers wat die buigsensors op hul plek hou. Deur hierdie spore te hê, kan die buigsensors effens heen en weer beweeg, terwyl hulle ook teen die vinger kan buig. Draai eers jou handskoen binne -in.
2. Neem 'n buigsensor en plaas dit in die middelste rand van die vinger. Skets die buigsensor met 'n pen
3. Steek jou draad deur jou naald. Gee jouself 'n ruim stuk. Bind 'n knoop aan die einde van die draad.
4. Begin bo en op die lyn, blaas net die boog van die buigsensor, steek die naald deur die handskoen deur die binnekant en druk dit weer deur op die parallelle lyn. Trek die naald heeltemal deur sodat die knoop op die lyn sit wat u getrek het.
5. Trek styf en maak 2-3 knope aan die ander kant, sodat die draad nie uitkom nie. Maak seker dat dit buig sodat die buigsensor teen u vinger vas is
6. Sny die draad 'n paar cm. draad aan die einde sodat die knoop nie ongedaan word nie.
7. Herhaal stappe 2-6 vir al die vingers waaraan u buigsensors heg, totdat dit soos die derde tot laaste prentjie lyk.
8. Draai jou handskoen terug sodat dit op die regte manier gedraai word. Trek u buigsensors deur die spore om seker te maak dat dit reg op u hand pas

Stap 2: Gebruik seriële kommunikasie met Micro: bit

Om die uitsette van ons sensors te sien, gaan ons seriële kommunikasie gebruik. U sal in die volgende stap sien hoe u die kode in Makecode instel, maar eers gaan ons leer hoe om dit vanaf ons terminale te lees. (Let wel: ek gebruik 'n Mac, dus hierdie stappe kan verskil, afhangende van u bedryfstelsel. Kyk hier na ander bedryfstelsels).

1. Koppel u Micro: bit aan
2. Maak u terminale oop
3. tik 'ls /dev/cu.*'
4. U behoort iets te sien wat lyk soos '/dev/cu.usbmodem1422', maar die presiese getal hang af van u rekenaar
5. Sodra u die kode gebruik het, sal u 'screen /dev/cu.usbmodem1422 115200' tik (met u spesifieke seriële poortnommer), u die seriële uitset van u Micro: bit
6. U uitset moet ongeveer soos die prentjie hierbo lyk, afhangende van hoe u u uitvoer geformateer het!

Stap 3: Prototipeer die stroombaan

Voordat ons al ons komponente aanmekaar soldeer, gaan ons die stroombaan prototipe en 'n paar reëls voorbeeldkode skryf om ons sensorwaardes te lees en seker te maak dat ons komponente korrek werk.

1. Gebruik die kringsdiagram hierbo en prototeer u stroombaan op die broodbord met behulp van draaddrade, weerstande, die eensydige krokodilleklemme en u Micro: bit.
2. Koppel u buigsensors aan penne 0, 1 en 2.
3. Ek het hierdie kode gebruik om my buigsensors te toets
4. Buig hulle 'n paar keer om hul lesings te sien en maak seker dat hulle korrek werk

In die kode is die laaste reël 'serial.writeLine' waar ons na ons reeksuitset skryf. U kan hierdie uitset formateer soos u wil; ek het elke veranderlike met 'n komma geskei en dit later op 'n komma verdeel, maar hierdie deel is aan u.

(Let wel: nadat ek hierdie stap gedoen het, het ek agtergekom dat een van my buigsensors 'n skyfie in die geleidende verf het, en ek kry dus nie goeie lesings nie. Daarom wys sommige foto's dat ek met 4 sensors werk. Nadat ek dit agtergekom het, het ek gegaan tot net drie sensors op die wyser, middel en ringvinger. Ek het ook gevind my buigsensors het die grootste wyse van lees wat die "teenoorgestelde" manier buig, en daarom het ek dit op die handskoen gesit met die weerstandsverf na onder.)

Stap 4: Toets die versnellingsmeter en ligsensor

In hierdie stadium het ek ook gekies om die versnellingsmeter en ligsensor op die Micro: bit te toets

1. Koppel jou Micro: bit aan jou rekenaar
2. Laai hierdie kode af
3. Toe toets ek die versnellingsmeter, die lig en die buigsensors saam met hierdie kode

(Nota: Ek het op hierdie stadium agtergekom dat u nie die penne en die ligsensor terselfdertyd kan gebruik nie, so ek het nie die ligsensor in my finale gebruik nie, maar ek wou hê u moet kan sien hoe om te lees die ligsensor indien nodig!)

Stap 5: soldeer die buigsensors

Nou gaan ons begin om ons komponente saam te soldeer! Dit is 'n opwindende deel, maar dit is belangrik om stadig te gaan en te kyk of alles nog steeds werk, sodat u nie tot die einde toe kom nie, dat iets nie werk nie en nie seker is waar dit verkeerd gegaan het nie! Ek stel voor dat u u dubbelzijdige krokodilleknipsels hier gebruik om te kontroleer dat elke sensor nog steeds werk sodra die drade en weerstande aanmekaar gesoldeer is.

1. Neem u buigsensor en plakband of sit 'n swaar voorwerp daarop om dit vas te hou.
2. Neem u 10K Ohm -weerstand en sny die grootste deel van die punt af sodat die lood ongeveer so lank is as die lood op die buigsensor.
3. Neem u soldeerbout en druk dit op beide die weerstand en buig die sensorkabel totdat dit warm is
4. Neem u soldeer en druk dit in die warm yster terwyl dit oor die komponente begin smelt. U benodig net genoeg om die drade te bedek.
5. Verwyder die yster. Hier trek ek die ander tuinhandskoen aan en hou die weerstand en draad vas terwyl die soldeer afkoel.
6. Knip 'n lang stuk rooi draad vas en plaas dit by die soldeerverbinding waar die weerstand en buigsensor ontmoet. Herhaal stappe 4-5. Dit is die analoog pen draad.
7. Knip 'n lang stuk swart draad vas en plaas dit aan die einde van die ander draad. Herhaal stappe 4-5. Dit is jou gronddraad.
8. Knip 'n lang stuk rooi draad vas en knip die ander kant van die weerstand vas sodat dit ongeveer so lank soos die vorige kant is. Herhaal stappe 4-5. Dit is jou kragdraad.
9. Herhaal stappe 1-8 vir die res van u buigsensors.
10. Laat u drade lank sodat u ruimte het om mee te werk om hulle later die regte lengte te maak wanneer u dit op die Micro: bit plaas.

Stap 6: Soldeer aan die mikro: bietjie en monteer die handskoen

Noudat ons sensors gereed is, gaan ons aan die Micro: bit begin soldeer en die handskoen aanmekaar sit. Onthou weer om te toets terwyl u gaan, met behulp van krokodilleklemme om seker te maak dat die komponente steeds werk nadat u dit saamgesoldeer het.

1. Plaas die sensors en Micro: bit op die handskoen om 'n idee te kry van waar die drade moet gaan en hoe lank dit moet wees.
2. Draai 'n rooi draad om die kragpen. Gebruik draadknipsels om die draad te stroop en laat oop gapings waaraan u die draad sal heg. Doen dit ook vir die gronddraad.
3. Skets die handskoen wat jy nie gebruik nie. Dit sal ons help om alles saam te soldeer en die lengte van die dinge korrek te maak. U sal egter alles agteruit doen, dus kyk of u dinge op die regte manier soldeer!
4. Plaas u Micro: ongeveer op die plek waar u dit op u hand wil lê. Maak merke op die grond en kragdrade.
5. Plak die draad vas, krag of grond, op sy plek.
6. Plak u buigsensor vas.
7. Sny die kragdraad sodat dit net verby die merk op die oor die hele kraglyn gaan.
8. Soldeer hierdie stukke saam.
9. Herhaal stappe 5-8 vir die ander kragdrade en vir die gronddrade.
10. Neem die Micro: bit en plaas dit onder die nuut gesoldeerde drade. Soldeer die krag en grond aan die regte penne.
11. Maak die analoogdrade vas sodat hulle net verby die einde van die penne gaan en aan die voorkant kan draai.
12. Soldeer die drade aan die regte penne.
13. Ek het gevind dat my lesings die beste en mees konsekwente was toe al die drade (krag, grond en analoog) aan die voorkant en agterkant van die penne geraak het.
14. Druk een snit vir een spoor gelyktydig die buigsensors op die vingers.
15. Sodra die sensors in plek is, trek die handskoen aan en maak seker dat die pasmaat reg is. As u snitte wil byvoeg of die plasing daarvan wil regstel, doen dit dan nou.
16. Sodra die sensors lê waar u dit wil hê, let op waar u die Micro: bit moet vasmaak. U kan die klein gaatjies aan weerskante van die A- en B -knoppies gebruik, of die gate vir die penne gebruik. Gebruik u naald en draad om dit op u hand vas te maak

Geluk! Die hardeware -komponente vir die handskoen is nou voltooi!

Stap 7: Micro: bit -kode

Nou gaan ek u deur die Micro: bit -kode lei. U is meer as welkom om hierdie kode te maak wat u wil, maar ek wou alles deurgaan en verduidelik, sodat u kan sien wat ek gedoen het, hoe ek dit gedoen het en waarom! U kan my kode hier vind.

1. Reëls 1-31. Hier gebruik ek vooraf ingestelde funksies waarmee die Micro: bit kom.

   • Deur op A te druk, verminder die telling, wat die keuse van beskikbare grafika is. Sodra u 0 bereik, gaan dit terug na die hoogste getal.
   • As u op B druk, word die telling verhoog, sodra u die grootste aantal beskikbare grafika bereik het, gaan dit terug na 0.
   • As die huidige grafika wat u gekies het, nie die een is wat tans geteken word nie, kies die nuwe grafika gelyktydig deur op A en B te druk.
   • As die huidige grafika wat u gekies het dieselfde is as die een wat geteken word, word die vorm gelyktydig gevul deur op A en B te druk as dit gevul kan word.
   • Deur die Micro: bit te skud, stel die uitvee veranderlike op 1, wat p5.js vertel om die doek uit te vee en op swart te begin. Dit onderbreek die lopie vir 'n sekonde en stel dit dan terug na 0 sodat die gebruiker kan voortgaan om te teken.

2. Reëls 32-64 stel my veranderlikes op. Dit was belangrik om baie veranderlikes te gebruik sodat die meeste waardes nie hardkodeerbaar was nie. Hulle kan verander met die handskoen en kan ook maklik op een plek verander word in plaas daarvan om 'n klomp waardes oral op te dateer. Ek sal enkele van die belangrikste beklemtoon.

   • Afhangend van die grootte van my doek, is die grootte van die doek in een veranderlike om in te verander. Dieselfde met die vorm Hoog. Terwyl ek grafika byvoeg of ontslae raak, kan ek die nommer hier opdateer.
   • Met die hoë en lae veranderlikes kan ek tred hou met die huidige hoog en laag vir sensors en het ek 'n deurlopend kalibreerbereik. Dit is belangrik, aangesien elke persoon wat handskoene dra, verskillende bewegings kan bereik en dus verskillende hoogte- en laagtepunte kan bereik.
3. Lyne 66-68 lees die analoogwaardes van die penne vir die buigsensors in

4. Lyne 69-74 kalibreer die hoë waarde vir die wysvinger.

   • As 'n nuwe hoogtepunt bereik word, stel dit dit as die hoogtepunt.
   • Herkalibreer die reikwydte van die vinger.
   • Gebruik die nuwe reeks vir kleurkaarte
5. Lyne 75-80 kalibreer die lae waarde vir die wysvinger.
6. Lyne 81-104 doen dieselfde as 4 en 5 vir die middel- en ringvingers.

7. Lyne 105-107 karteer my waardes van my flex sensor na kleurwaardes 0-255 (of kleur Laag na colorHigh, as ek nie die volle reeks doen nie)

   • Die ingeboude kaartfunksie van Makecode gee my nie 'n goeie kartering nie, gegewe die beperkte reikafstand wat ek van my sensors kry. Ek het dus my eie karteringsfunksie gemaak.
   • Hier is hoe dit werk. Die invoerreeks van elke vinger word bepaal deur dit (hoogste waarde - die laagste waarde). Die kleurreeks, wat ook die (hoogste kleurwaarde - laagste kleurwaarde) is, word gedeel deur elke vingervlak. Hierdie getal word afgerond met die laagste heelgetal en is die kwosiënt.
   • Die (werklike sensorwaarde - die laagste sensorwaarde) gee u die waarde binne die omvang. Deur dit te vermenigvuldig met die kwosiënt wat ons hierbo gevind het en die laagste kleurwaardes by te voeg, kry u 'n gekarteerde waarde van die sensor na die kleur binne die kleurbereik.
8. Reël 109 lees die toonhoogtewaarde (op en af).
9. Lyne 110-115 kalibreer die hoë en lae vir hierdie waarde
10. Reël 116 lees die rolwaarde in (links en regs).
11. Lyne 117-122 kalibreer die hoë en lae vir hierdie waarde
12. Lyne 123-126 karteer die toonhoogte- en rolwaardes na die grootte van die doek en rond dit af tot heelgetalle.
13. Reël 127 skryf die veranderlikes na die seriële uitvoer met behulp van serial.writeLine en skei elke waarde deur 'n komma en spasie ",", om later te ontleed.

Sodra u die kode gekry het hoe u daarvan hou, laai dit af en sleep dit van u aflaaie na u Micro: bit (u moet dit sien op 'Locations' aan die linkerkant van u finder) om die kode na die Micro: bit op te laai

Stap 8: Seriële kommunikasie met P5.js

Om 'n reeks met p5.js te kommunikeer, benodig ons 'n ekstra hulpmiddel. Om meer te wete te kom oor wat agter die skerms van seriële kommunikasie gaan, stel ek voor dat u hierdie artikel lees.

1. Laai 'n weergawe van die p5.js -app af vanaf hierdie skakel. Ek het die Alpha 6 weergawe, maar enige sal werk.
2. Gebruik hierdie p5.js -sjabloon om serieel te kommunikeer. Om dit op te stel, moet u die korrekte seriële poortnaam vir poortnaam op reël 12 invul. Dit is die naam wat ons in stap 2 uitgevind het.
3. Koppel jou Micro: bit aan jou rekenaar
4. Maak die seriële app p5.js oop.
5. Kies u poort uit die poortlys en doen niks anders nie. Druk nie eers oop nie! Kies net u poort uit u lys.
6. Druk run in die p5.js seriële sjabloon. U moet dit oop kan sien, en dit sal u nulwaardes lees, aangesien ons nog nie kode geskryf het om ons seriële uitset te ontleed nie.

Nou kan ons serieel kommunikeer vanaf ons Micro: bit na p5.js!

Stap 9: P5.js -kode

Nou spring ons in die p5.js -kode. Hier lees ons die reeksuitsetwaardes in en gebruik dit om kuns te skep.

1. Soos ek in die vorige stap genoem het, moet u seker maak dat die poortnaam op reël 12 u spesifieke rekenaarpoortnaam is.
2. In die opset () -funksie, op reëls 32-33, het ek die linker- en regterbuffer bygevoeg met createGraphics, ek het dit gedoen om die doek te skei sodat een deel gebruik word om te teken, en die ander deel kon aanwysings vertoon en wys watter grafika jy kyk of blaai deur.
3. Die draw () -funksie noem funksies wat ek gemaak het om die leftBuffer en rightBuffer afsonderlik te skep. Dit definieer ook waar die linker boonste hoek van elke buffer begin.
4. Die drawRightBuffer () -funksie vertoon al die teks vir die aanwysings en grafiese keuses

5. Die drawLeftBuffer () -funksies vertoon al die grafika.

   • Reël 93 genereer lukraak 'n waarde vir die alfa -waarde. Dit het dus al die kleure verskillende deursigtigheidswaardes om dit interessanter te laat lyk. As ek 4 buigsensors gehad het, sou ek die vierde hiervoor gebruik het!
   • Lyn 94 stel die slagwaarde op die r, g, b waardes bepaal deur die buigsensors
   • Reëls 96-102 kan sonder kommentaar getoets word om te toets hoe die handskoen werk sonder om die handskoen te hê deur u muis te gebruik. Vervang reël 102 met grafika van die res van die funksie.
6. 104-106 vee die doek uit wanneer die hand bewe deur die doekagtergrond op swart te stel
7. 108-114 beheer die vul van die vorms wanneer A+B ingedruk en gekies word en die huidige vorm dieselfde is
8. 117-312 is waar die grafika vertoon word. Dit is die grootste deel van die kode en die deel om kreatief te word! Ek stel voor dat u na die p5.js -verwysing kyk om beter te verstaan hoe u die vorms kan beheer. Ek het die rol en toonhoogte gebruik om x, y posisies te beheer en die grootte van die vorms en grafika te verander, en soos ek vroeër genoem het, het ek die. buig sensors om die kleur te beheer. Dit is waar u kreatief kan raak! Speel met wat p5.js bied en kom met u eie prettige grafika om te beheer! Hier stel ek ook die beskrywing in vir die currentShape wat aan die regterbuffer verskyn.
9. 318-460 Ek stel die beskrywing vir die geselekteerde vorm in.

10. Lyne 478-498 is die serialEvent () -funksie. Dit is waar ons die reeks data ontvang.

    • Op reëls 485-486 stel ek die loop en ppitch (vorige rol en toonhoogte) op die vorige rol en toonhoogte.
    • Op reël 487 verdeel ek die data oor ",". Ek doen dit omdat ek die data geskryf het wat deur kommas geskei moet word. U sou alles waarmee u u veranderlikes geskei het, hier plaas. Hierdie veranderlikes word in die getalreeks geplaas.
    • Dan, in reëls 488-496, stel ek die veranderlikes op die ooreenstemmende element in die skikking en vertaal dit van 'n string na 'n getal. Ek gebruik hierdie veranderlikes gedurende die drawLeftBuffer () -funksie om die grafika te beheer.

Dit som die kode amper op en voltooi die projek! Nou kan ons die handskoen in aksie sien werk.

Stap 10: Finale produk

Hier is 'n paar foto's van die voltooide handskoen, asook 'n paar kunswerke wat dit gemaak het! Kyk na die demo -video om dit in aksie te sien!