Kunsthandschuh - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:15

Der Art Glove ist ein tragbarer Handschuh, der verschiedene Arten von Sensoren enthält, um Kunstgrafiken über ein Micro:bit und p5.js zu steuern, y-Koordinaten für die Grafiken. Ich habe dieses Projekt als mein Semesterprojekt für meine Wearable Technology Class als Senior im Technologie-, Kunst- und Medienprogramm an der CU Boulder erstellt.

Lieferungen:

• Gartenhandschuhe
• BBC Micro:Bit
• 3-4 Flexsensoren
• 10K Ohm Widerstände
• Anschlusskabel (Rot & Schwarz)
• Drahtschneider
• Steckbrett
• Krokodilklemmen (doppelseitig & einseitig)
• Lot
• Lötkolben
• Nadel
• Gewinde
• Wachspapier
• Band
• Schere
• Stift und Bleistift

Schritt 1: Sensorspuren biegen

Zuerst konzentrieren wir uns auf die Hardware. Auf diese Weise haben wir beim Codieren die eigentliche Handschuhkomponente, die wir verwenden und testen können.

1. Zu Beginn werden wir die Spuren auf den Fingern machen, die die Biegesensoren an Ort und Stelle halten. Mit diesen Spuren können sich die Biegesensoren leicht hin und her bewegen, während sie gleichzeitig sicher am Finger bleiben, um sich zu biegen. Drehen Sie zuerst Ihren Handschuh von innen nach außen.
2. Nehmen Sie einen Biegesensor und platzieren Sie ihn in der mittleren Kante des Fingers. Umreißen Sie mit einem Stift den Biegesensor
3. Schieben Sie Ihren Faden durch Ihre Nadel. Schenken Sie sich ein großzügiges Stück. Machen Sie einen Knoten am Ende des Fadens.
4. Beginnen Sie oben und auf der Linie, blasen Sie einfach den Bogen des Biegesensors, schieben Sie die Nadel durch den Handschuh durch die Innenseite und schieben Sie sie auf der parallelen Linie zurück. Ziehen Sie die Nadel ganz durch, so dass der Knoten auf der Linie liegt, die Sie gezeichnet haben.
5. Ziehen Sie fest und machen Sie 2-3 Knoten auf der anderen Seite. Dadurch wird sichergestellt, dass der Faden nicht herauskommt. Stellen Sie sicher, dass es fest sitzt, damit der Biegesensor sicher an Ihrem Finger sitzt
6. Schneiden Sie den Faden ab und lassen Sie einige cm übrig. Faden am Ende, damit sich der Knoten nicht auflöst.
7. Wiederholen Sie die Schritte 2 bis 6 für alle Finger, an denen Sie Flexsensoren befestigen, bis es wie das drittletzte Bild aussieht.
8. Drehen Sie Ihren Handschuh zurück, damit er richtig gedreht ist. Schieben Sie Ihre Biegesensoren durch die Schienen, um sicherzustellen, dass sie richtig auf Ihrer Hand liegen

Schritt 2: Verwenden der seriellen Kommunikation mit Micro:bit

Um die Ausgänge unserer Sensoren zu sehen, verwenden wir die serielle Kommunikation. Sie werden im nächsten Schritt sehen, wie Sie den Code in Makecode einrichten, aber zuerst werden wir lernen, wie Sie ihn von unserem Terminal aus lesen. (Hinweis: Ich verwende einen Mac, daher können diese Schritte je nach Betriebssystem unterschiedlich sein. Für andere Betriebssysteme siehe hier).

1. Stecken Sie Ihr Micro:bit. ein
2. Öffne dein Terminal
3. tippe 'ls /dev/cu.*'
4. Sie sollten etwas sehen, das wie ' /dev/cu.usbmodem1422 ' aussieht, aber die genaue Anzahl hängt von Ihrem Computer ab
5. Sobald Sie Code ausführen, geben Sie 'screen /dev/cu.usbmodem1422 115200' (mit Ihrer spezifischen seriellen Portnummer) ein, um die serielle Ausgabe Ihres Micro:bit zu erhalten
6. Ihre Ausgabe sollte in etwa wie das obige Bild aussehen, je nachdem, wie Sie Ihre Ausgabe formatiert haben!

Schritt 3: Prototyping der Schaltung

Bevor wir alle unsere Komponenten zusammenlöten, erstellen wir einen Prototyp der Schaltung und schreiben ein paar Zeilen Beispielcode, um unsere Sensorwerte zu lesen und sicherzustellen, dass unsere Komponenten richtig funktionieren.

1. Verwenden Sie den obigen Schaltplan, um Ihre Schaltung auf dem Steckbrett mit Überbrückungsdrähten, Widerständen, den einseitigen Krokodilklemmen und Ihrem Micro: Bit zu prototypieren.
2. Verbinden Sie Ihre Biegesensoren mit den Pins 0, 1 und 2.
3. Ich habe diesen Code verwendet, um meine Flexsensoren zu testen
4. Biegen Sie sie ein paar Mal, um ihre Messwerte zu sehen und sicherzustellen, dass sie richtig funktionieren

Im Code schreiben wir in die letzte Zeile "serial.writeLine" in unsere serielle Ausgabe. Sie können diese Ausgabe beliebig formatieren, ich habe jede Variable mit einem Komma getrennt und sie später durch ein Komma getrennt, aber dieser Teil liegt bei Ihnen.

(Hinweis: Nachdem ich diesen Schritt gemacht hatte, fand ich heraus, dass einer meiner Biegesensoren einen Chip in der leitfähigen Farbe hatte und daher keine guten Messwerte erhielt. Deshalb zeigen einige der Bilder, dass ich mit 4 Sensoren arbeite. Nachdem ich dies herausgefunden hatte, ging ich bis auf nur drei Sensoren am Zeiger, Mittel- und Ringfinger. Ich fand auch, dass meine Biegesensoren den größten Lesebereich hatten, wenn sie "entgegengesetzt" wurden, weshalb ich sie mit der Widerstandsfarbe nach unten auf den Handschuh legte.)

Schritt 4: Testen des Beschleunigungsmessers und des Lichtsensors

Zu diesem Zeitpunkt entschied ich mich auch, den Beschleunigungsmesser und den Lichtsensor des Micro:bit zu testen

1. Verbinden Sie Ihr Micro:bit mit Ihrem Computer
2. Diesen Code herunterladen
3. Dann habe ich den Beschleunigungs-, Licht- und Biegesensor zusammen mit diesem Code getestet

(Hinweis: An diesem Punkt habe ich herausgefunden, dass Sie die Stifte und den Lichtsensor nicht gleichzeitig verwenden können, also habe ich den Lichtsensor in meinem Finale nicht verwendet, aber ich wollte, dass Sie sehen, wie man liest den Lichtsensor, wenn Sie brauchen!)

Schritt 5: Löten der Biegesensoren

Jetzt fangen wir an, unsere Komponenten zusammenzulöten! Dies ist ein aufregender Teil, aber es ist wichtig, langsam vorzugehen und zu überprüfen, ob alles noch funktioniert, damit Sie nicht zum Ende kommen, etwas nicht funktioniert und nicht sicher ist, wo es schief gelaufen ist! Ich schlage vor, hier Ihre doppelseitigen Krokodilklemmen zu verwenden, um zu überprüfen, ob jeder Sensor noch funktioniert, sobald die Drähte und Widerstände zusammengelötet sind.

1. Nehmen Sie Ihren Biegesensor und Klebeband oder legen Sie einen schweren Gegenstand darauf, um ihn an Ort und Stelle zu halten.
2. Nehmen Sie Ihren 10K Ohm Widerstand und schneiden Sie den größten Teil des Endes ab, so dass die Leitung ungefähr so lang ist wie die Leitung am Biegesensor.
3. Nehmen Sie Ihren Lötkolben und drücken Sie ihn sowohl auf den Widerstand als auch auf das Biegesensorkabel, bis sie heiß sind
4. Nehmen Sie Ihr Lot und drücken Sie es in das heiße Eisen, während es über den Komponenten zu schmelzen beginnt. Sie brauchen nur genug, um die Drähte abzudecken.
5. Entfernen Sie das Bügeleisen. Hier zog ich den anderen Gartenhandschuh an und hielt den Widerstand und den Draht fest, während das Lot abkühlte.
6. Klemmen Sie ein langes Stück rotes Kabel ab und platzieren Sie es an der Lötstelle, an der sich Widerstand und Biegesensor treffen. Wiederholen Sie die Schritte 4-5. Dies ist der analoge Stiftdraht.
7. Klemmen Sie ein langes Stück schwarzen Drahtes ab und platzieren Sie es am Ende des anderen Kabels. Wiederholen Sie die Schritte 4-5. Dies ist Ihr Erdungskabel.
8. Schneiden Sie ein langes Stück rotes Kabel ab und klemmen Sie das andere Ende des Widerstands so ab, dass es ungefähr so lang ist wie die vorherige Seite. Wiederholen Sie die Schritte 4-5. Dies ist Ihr Stromkabel.
9. Wiederholen Sie die Schritte 1-8 für den Rest Ihrer Biegesensoren.
10. Lassen Sie Ihre Drähte lang, damit Sie Platz zum Arbeiten haben, um sie später beim Aufstecken auf das Micro:bit auf die richtige Länge zu bringen.

Schritt 6: Löten an das Micro: Bit und Zusammenbauen des Handschuhs

Jetzt, da unsere Sensoren fertig sind, werden wir mit dem Löten an das Micro:bit beginnen und den Handschuh zusammenbauen. Denken Sie noch einmal daran, zu testen, indem Sie Krokodilklemmen verwenden, um sicherzustellen, dass die Komponenten nach dem Zusammenlöten noch funktionieren.

1. Legen Sie die Sensoren und das Micro:bit auf den Handschuh, um eine Vorstellung davon zu bekommen, wohin die Drähte gehen müssen und wie lang sie sein müssen.
2. Wickeln Sie ein rotes Kabel um den Stromstift. Verwenden Sie einen Drahtschneider, um den Draht abzuisolieren und offene Lücken zu lassen, an denen Sie Ihren Draht befestigen. Tun Sie dies auch für das Erdungskabel.
3. Umreißen Sie den Handschuh, den Sie nicht verwenden. Dies wird uns helfen, alles zusammenzulöten und die Länge der Dinge richtig zu machen. Sie werden jedoch alles rückwärts machen, also überprüfen Sie, ob Sie die Dinge richtig löten!
4. Platzieren Sie Ihr Micro:bit ungefähr dort, wo Sie es auf Ihrer Hand haben möchten. Machen Sie Markierungen, wo die Masse und die Stromkabel sitzen.
5. Kleben Sie das Kabel, Strom oder Masse, an Ort und Stelle.
6. Kleben Sie Ihren Biegesensor an Ort und Stelle.
7. Schneiden Sie das Stromkabel so ab, dass es knapp über die Markierung auf der gesamten Stromleitung hinausgeht.
8. Löten Sie diese Stücke zusammen.
9. Wiederholen Sie die Schritte 5-8 für die anderen Stromkabel und für die Erdungskabel.
10. Nehmen Sie das Micro:bit und legen Sie es unter die neu gelöteten Drähte. Löten Sie die Stromversorgung und Masse an die richtigen Pins.
11. Klemmen Sie die analogen Drähte so ab, dass sie knapp über das Ende der Stifte hinausgehen und sich zur Vorderseite wickeln können.
12. Löten Sie die Drähte an die richtigen Pins.
13. Ich fand, dass meine Messwerte am besten und konsistentesten waren, wenn alle Drähte (Strom, Masse und Analog) sowohl die Vorder- als auch die Rückseite der Stifte berührten.
14. Schieben Sie Spur für Spur die Biegesensoren gleichzeitig die Finger hoch.
15. Sobald die Sensoren angebracht sind, ziehen Sie den Handschuh an und stellen Sie sicher, dass die Passform richtig ist. Wenn Sie Spuren hinzufügen oder ihre Platzierung korrigieren müssen, tun Sie dies jetzt.
16. Sobald die Sensoren dort liegen, wo Sie sie haben möchten, notieren Sie sich, wo Sie das Micro:bit befestigen müssen. Sie können die kleinen Löcher auf beiden Seiten der A- und B-Knöpfe verwenden oder die Löcher für die Stifte verwenden. Verwenden Sie Nadel und Faden, um es an Ihrer Hand zu binden

Herzlichen Glückwunsch! Die Hardwarekomponenten für den Handschuh sind nun komplett!

Schritt 7: Mikro: Bit-Code

Jetzt werde ich Sie durch den Micro:bit-Code führen. Sie können diesen Code gerne nach Ihren Wünschen gestalten, aber ich wollte alles durchgehen und erklären, damit Sie sehen können, was ich getan habe, wie ich es gemacht habe und warum! Meinen Code findest du hier.

1. Zeilen 1-31. Hier verwende ich voreingestellte Funktionen, die das Micro:bit mitbringt.

   • Durch Drücken von A wird die Anzahl der verfügbaren Grafiken verringert. Sobald Sie 0 erreichen, geht es zurück zur höchsten Zahl.
   • Durch Drücken von B erhöht sich die Anzahl, sobald Sie die höchste Anzahl verfügbarer Grafiken erreicht haben, geht sie auf 0 zurück.
   • Wenn die aktuell ausgewählte Grafik nicht diejenige ist, die gerade gezeichnet wird, wird durch gleichzeitiges Drücken von A und B die neue Grafik ausgewählt.
   • Wenn die aktuell ausgewählte Grafik mit der gerade gezeichneten identisch ist, wird durch gleichzeitiges Drücken von A und B die Form gefüllt, wenn sie eine Füllung haben kann.
   • Durch Schütteln des Micro:bit wird die Erase-Variable auf 1 gesetzt, was p5.js anweist, die Leinwand zu löschen und auf Schwarz zu beginnen. Es pausiert den Lauf für eine Sekunde und setzt ihn dann auf 0 zurück, damit der Benutzer mit dem Zeichnen fortfahren kann.

2. Zeilen 32-64 richten meine Variablen ein. Es war wichtig, viele Variablen zu verwenden, damit die meisten Werte nicht hartcodiert waren. Sie können mit dem Handschuh geändert und auch leicht an einer Stelle geändert werden, anstatt eine Reihe von Werten überall zu aktualisieren. Ich werde einige der wichtigsten hervorheben.

   • Die Leinwandgröße ist eine Variable, die je nach Größe meiner Leinwand aktualisiert werden kann. Gleiches gilt für die shapeHigh. Wenn ich Grafiken hinzufüge oder entferne, kann ich diese Nummer hier aktualisieren.
   • Die High- und Low-Variablen ermöglichen es mir, das aktuelle High und Low für Sensoren zu verfolgen und einen kontinuierlich kalibrierenden Bereich zu haben. Dies ist wichtig, da jede Person, die die Handschuhe trägt, einen anderen Bewegungsbereich und damit unterschiedliche Höhen und Tiefen hat, die sie erreichen kann.
3. Die Zeilen 66-68 lesen die Analogwerte von den Pins für die Flexsensoren ein

4. Die Zeilen 69-74 kalibrieren den hohen Wert für den Zeigefinger.

   • Wird ein neues Hoch erreicht, setzt es dieses als Hoch.
   • Kalibriert die Reichweite dieses Fingers neu.
   • Verwendet diesen neuen Bereich für die Farbzuordnung
5. Die Zeilen 75-80 kalibrieren den unteren Wert für den Zeigefinger.
6. Die Zeilen 81-104 machen dasselbe wie 4 & 5 für den Mittel- und Ringfinger.

7. Die Zeilen 105-107 ordnen meine Flex-Sensorwerte den Farbwerten 0-255 zu (oder colorLow zu colorHigh, wenn ich nicht den vollen Bereich mache)

   • Die eingebaute Kartenfunktion von Makecode gab mir keine großartige Karte, da ich die begrenzte Reichweite meiner Sensoren hatte. Also habe ich meine eigene Mapping-Funktion erstellt.
   • So funktioniert das. Der Eingabebereich jedes Fingers wird durch seinen (höchster Wert - niedrigster Wert) bestimmt. Der Farbbereich, der auch der (höchste Farbwert - niedrigster Farbwert) ist, wird durch jeden Fingerbereich geteilt. Diese Zahl wird auf die kleinste ganze Zahl gerundet und ist der Quotient.
   • Der (tatsächlicher Sensorwert - der niedrigste Sensorwert) gibt Ihnen den Wert innerhalb des Bereichs an. Wenn Sie dies mit dem oben gefundenen Quotienten multiplizieren und die niedrigsten Farbwerte addieren, erhalten Sie einen vom Sensor auf die Farbe abgebildeten Wert innerhalb des Farbbereichs.
8. Zeile 109 liest den Tonhöhenwert ein (auf und ab).
9. Die Zeilen 110-115 kalibrieren das Hoch und das Tief für diesen Wert
10. Zeile 116 liest den Rollwert ein (links und rechts).
11. Die Zeilen 117-122 kalibrieren das Hoch und das Tief für diesen Wert
12. Die Zeilen 123-126 ordnen die Pitch- und Roll-Werte der Leinwandgröße zu und runden sie auf ganze Zahlen.
13. Zeile 127 schreibt die Variablen mit serial.writeLine in die serielle Ausgabe, wobei jeder Wert durch ein Komma und ein Leerzeichen ", " getrennt wird, um später zu parsen.

Sobald Sie den Code haben, wie er Ihnen gefällt, laden Sie ihn herunter und ziehen ihn aus Ihren Downloads auf Ihr Micro:bit (Sie sollten ihn unter "Standorte" auf der linken Seite Ihres Finder sehen), um den Code auf das Micro:bit hochzuladen

Schritt 8: Serielle Kommunikation mit P5.js

Um seriell mit p5.js zu kommunizieren, benötigen wir ein zusätzliches Tool. Um mehr darüber zu erfahren, was sich hinter den Kulissen der seriellen Kommunikation verbirgt, schlage ich vor, diesen Artikel zu lesen.

1. Laden Sie über diesen Link eine Version der p5.js-App herunter. Ich habe die Alpha 6-Version, aber jede wird funktionieren.
2. Verwenden Sie diese p5.js-Vorlage für die serielle Kommunikation. Um es einzurichten, geben Sie Ihren korrekten seriellen Portnamen für portName in Zeile 12 ein. Dies ist der Name, den wir in Schritt 2 herausgefunden haben.
3. Verbinden Sie Ihr Micro:bit mit Ihrem Computer
4. Öffnen Sie die serielle p5.js-App.
5. Wählen Sie Ihren Port aus der Portliste aus und tun Sie nichts anderes. Nicht einmal aufdrücken! Wählen Sie einfach Ihren Port aus Ihrer Liste aus.
6. Drücken Sie in der seriellen Vorlage p5.js auf Ausführen. Sie sollten es geöffnet sehen können und es wird Ihnen Nullwerte lesen, da wir noch keinen Code zum Parsen unserer seriellen Ausgabe geschrieben haben.

Jetzt können wir seriell von unserem Micro:bit zu p5.js kommunizieren!

Schritt 9: P5.js-Code

Jetzt springen wir in den p5.js-Code. Hier lesen wir die seriellen Ausgabewerte ein und verwenden sie, um Kunst zu erstellen.

1. Stellen Sie, wie im vorherigen Schritt erwähnt, sicher, dass der PortName in Zeile 12 Ihr spezifischer Computer-Port-Name ist.
2. In der setup()-Funktion habe ich in den Zeilen 32-33 den left und rightBuffer mit createGraphics hinzugefügt Sie sehen oder scrollen durch.
3. Die Funktion draw() ruft Funktionen auf, die ich erstellt habe, um leftBuffer und rightBuffer separat zu erstellen. Es definiert auch, wo die obere linke Ecke jedes Puffers beginnt.
4. Die Funktion drawRightBuffer() zeigt den gesamten Text für die Routen- und Grafikauswahl an

5. Die Funktionen drawLeftBuffer() zeigen alle Grafiken an.

   • Zeile 93 generiert zufällig einen Wert für den Alpha-Wert. Dies ist so, dass alle Farben unterschiedliche Transparenzwerte haben, um es interessanter aussehen zu lassen. Hätte ich 4 Flexsensoren gehabt, hätte ich den 4. dafür verwendet!
   • Zeile 94 setzt den Hubwert auf die von den Flexsensoren ermittelten r-, g-, b-Werte
   • Die Zeilen 96-102 können unkommentiert werden, um zu testen, wie der Handschuh funktioniert, ohne den Handschuh zu haben, indem Sie stattdessen Ihre Maus verwenden. Ersetzen Sie Zeile 102 durch Grafiken aus dem Rest der Funktion.
6. 104-106 Löschen Sie die Leinwand, wenn die Hand zittert, indem Sie den Leinwandhintergrund auf Schwarz setzen
7. 108-114 steuern die Füllung der Formen, wenn A+B gedrückt und ausgewählt wird und die aktuelle Form gleich ist
8. 117-312 sind dort, wo die Grafiken angezeigt werden. Dies ist der Großteil des Codes und der Teil, um kreativ zu werden! Ich schlage vor, sich die Referenz p5.js anzusehen, um besser zu verstehen, wie die Formen gesteuert werden. Ich habe Roll und Pitch verwendet, um die x-, y-Positionen zu steuern und die Größe der Formen und Grafiken zu ändern, und wie ich bereits erwähnt habe, habe ich die verwendet. Biegesensoren zur Kontrolle der Farbe. Hier können Sie kreativ werden! Spielen Sie mit dem, was p5.js zu bieten hat, und entwickeln Sie Ihre eigenen lustigen Grafiken, die Sie steuern können! Hier setze ich auch die Beschreibung für die currentShape, die im rightBuffer angezeigt wird.
9. 318-460 Ich habe die Beschreibung für die ausgewählte Form festgelegt.

10. Die Zeilen 478-498 sind die serialEvent()-Funktion. Hier erhalten wir die seriellen Daten.

    • In den Zeilen 485-486 setze ich Proll und Pitch (vorherige Roll- und Pitch-Werte) auf die vorherigen Roll- und Pitch-Werte.
    • In Zeile 487 habe ich die Daten auf ", " aufgeteilt. Ich tue dies, weil ich die Daten durch Kommas getrennt geschrieben habe. Sie würden hier alles einfügen, womit Sie Ihre Variablen getrennt haben. Diese Variablen werden in das Zahlen-Array eingefügt.
    • Dann setze ich in den Zeilen 488-496 die Variablen auf das entsprechende Element im Array und übersetze sie von einem String in eine Zahl. Ich verwende diese Variablen überall in der drawLeftBuffer()-Funktion, um die Grafiken zu steuern.

Das fasst den Code so ziemlich zusammen und beendet das Projekt! Jetzt können wir den Handschuh in Aktion sehen.

Schritt 10: Endprodukt

Hier sind einige Bilder des fertigen Handschuhs sowie einige daraus entstandene Kunstwerke! Sehen Sie sich das Demo-Video an, um es in Aktion zu sehen!