Jeffrey Cross
Jeffrey Cross

Codebox: Erschaffe einen Zauberstab

Die Farbverfolgung ist eine einfache, aber leistungsfähige Methode, um auf spielerische Weise neue Möglichkeiten der Interaktion mit Software zu schaffen. Mit einer Webcam als Sensor wird ein Programm darauf trainiert, eine bestimmte Farbe auf einem physischen Zeiger zu finden. Der farbige Zeiger wird beim Verschieben auf eine (x, y) -Koordinate abgebildet. In Echtzeit ausgeführt, können Sie den Mauszeiger wie eine Maus verwenden und so viele interessante Möglichkeiten eröffnen. In dieser Codebox-Installation erfahren Sie, wie Sie mit Processing und der Webcam Ihres Computers arbeiten (in diesem Beispiel habe ich die integrierte iSight-Kamera meines MacBook verwendet), um einen virtuellen "Zauberstab" zu erstellen, der beim Cue die Farbe ändern kann.

Das Beispiel selbst ist zwar einfach, aber der Code ist ein Baustein für eine Vielzahl von Projekten, die ich später in dieser Serie untersuchen werde.

Einrichten der Verarbeitung

Bevor wir in dieses Projekt einsteigen, nehmen wir uns ein paar Minuten Zeit und schauen uns ein wenig über die Verarbeitung an. Wenn Sie mit dem Programm noch nicht vertraut sind, sollten Sie zunächst einige Zeit damit verbringen, die Sprache auf Processing.org zu lernen, oder indem Sie sich eine Kopie von Getting Started with Processing, die von Ben Fry und Casey Reas, den Mitgestaltern von die Verarbeitungssprache. Während ich unterwegs auf unterstützendes Material und Referenzen hinweise, sind Sie wahrscheinlich sehr frustriert, es sei denn, Sie verfügen über grundlegende Kenntnisse im System. Wenn Sie es noch nicht getan haben, laden Sie Processing für Ihre Plattform herunter und installieren Sie es.

Mach einen "Zauberstab"

Sobald die Verarbeitung eingerichtet ist und die Skizze ausgeführt wird, müssen Sie einen „Zauberstab“ erstellen. (Ich füge den Zauberstab in Anführungszeichen ein, da Sie wirklich jedes Objekt mit einer bestimmten Farbe verwenden können.) Instructables hat viele wirklich coole Beispiele Dies ist wie „Mache aus einem Blatt Papier und einem Klebepistolenkleber einen fantastischen Harry Potter-Zauberstab“. Das Schlüsselelement, zumindest aus der Sicht von Processing, ist, dass der Stab an der Spitze eine unverwechselbare Farbe hat. Als schnelle und schmutzige Lösung wickelte ich einen Day-Glo-orange Post-it-Zettel um das Ende eines Essstäbchens. Nicht gerade Harry Potter, aber die Arbeit wird erledigt.

Starten Sie die Skizze

Sobald Ihr Zauberstab fertig ist, können Sie die Skizze ausprobieren. Starten Sie die Verarbeitung und fügen Sie den folgenden Code in das Hauptfenster ein. Sie können entweder die erste Zeile markieren, ganz nach unten scrollen und dann Strg-C (hart) verwenden, oder Sie können auf diesen Link (magic_wand.pde) klicken, Strg + a drücken, um den gesamten Text auszuwählen, und dann Strg drücken + c, um es zu kopieren (einfacher).

Wenn Sie den Code eingefügt haben, drücken Sie die Start-Taste in der oberen linken Ecke des Verarbeitungsfensters.

Treten Sie schließlich vor Ihre Webcam. Sie können jetzt mit der Farbverfolgung spielen.

Erfassen Sie die Trackingfarbe

Der erste Schritt ist das Einstellen der Farbe, die von Processing erfasst wird. Bewegen Sie dazu die Spitze des Stabes in das weiße Feld in der oberen linken Ecke. Sie sehen, dass das Feld oben eine Farbe annimmt, die meistens wie die Spitze Ihres Zauberstabs aussieht. (Mehr dazu in einer Sekunde.) Sobald die Farbe eingestellt ist, drücken Sie eine beliebige Taste.

Hinter den Kulissen liest Processing jedes Bild, das von der Webcam kommt, und verwendet einen wundervollen kleinen Hack von Processing-Guru Daniel Shiffman, der das Bild horizontal dreht, um eine natürlichere Interaktion mit der Skizze zu erzeugen. Andernfalls werden alle Ihre Bewegungen als gespiegeltes Bild dargestellt. Wenn Sie den Zauberstab nach rechts bewegen, erscheint er als Bewegung nach links und umgekehrt. Das alles geschieht im folgenden Code-Snippet:

if (cam.available ()) {cam.read (); // Dies ist ein kleiner Trick von Processing-Guru Daniel Shiffman, um // den Spiegelbildeffekt für Ihre Bewegungen in der Webcam zu überprüfen. PushMatrix (); Skala (-1,0, 1,0); Bild (cam, -cam.width, 0); popMatrix (); Bild (Nocken, 0,0); }

Nachdem das Bild eingelesen wurde Nocken Variable wird es an die übergeben searchForTargetColor () Funktion (Funktionen sind in Kapitel 8 von beschrieben Erste Schritte mit der Verarbeitung). Diese Funktion scannt die Pixel im Erfassungsfeld für weiße Ziele und mittelt deren rote, grüne und blaue Komponente, um eine Gesamtfarbe zu erhalten, die die Zielfarbe darstellt. Das passiert hier:

color collectTargetColor () {int r = 0; int g = 0; int b = 0; int cnt = 0; for (int i = 0; i <targetSide; i ++) {für (int j = 0; j <targetSide; j ++) {cnt + = 1; int x = targetX + i; // x Punkt innerhalb der Zielbox int y = targetY + j; // y Punkt innerhalb des Zielfelds // Aktuelle Farbe der Pixelfarbe herausziehen c = cam.pixels [y * width + x]; r + = rot (c); g + = grün (c); b + = blau (c); }} targetColor = color (r / cnt, g / cnt, b / cnt); return targetColor; }

Suchen Sie nach der Zielfarbe

Sobald Sie eine Taste drücken, um die Farbe des Ziels festzulegen (die jetzt im targetColor Variable), wechselt die Skizze zwischen dem Erfassen der Zielfarbe und der Suche nach der Zielfarbe. Diese Aufgabe erledigt der searchForTargetColor () Funktion, die jedes Pixel im Bild scannt und mit dem verglichen targetColor. Wenn der Abstand zwischen den beiden Farben weniger als 50 Einheiten beträgt (oder dem von Ihnen eingestellten Wert) colorDist), dann ist es eine Übereinstimmung. (Ein kurzer Hinweis zur Entfernung: Dies bedeutet, dass Sie die RGB-Farben als ein "Leerzeichen" behandeln, das eine rote, grüne und blaue Achse hat. Der Abstand zwischen zwei Farben ist nur der euklidische Abstand zwischen zwei Punkten von der Basisalgebra .) Wenn das Pixel mit der Zielfarbe übereinstimmt, wird es zu einer laufenden Summe von übereinstimmenden Pixeln hinzugefügt. Sobald jedes Pixel getestet wurde, ermitteln wir den Durchschnitt aller übereinstimmenden Farben, um eine Gesamtposition für die Spitze des Stabes zu ermitteln. Das alles passiert hier:

void searchForTargetColor () {// Zauberstab zurücksetzen wandX = 0; wandY = 0; wandFound = false; // Suche nun nach Pixeln, die der Zielfarbe entsprechen int numPoints = 0; // Anzahl der gefundenen Punkte int sx = 0; // Summe aller gefundenen x-Koordinaten int sy = 0; // Summe aller gefundenen y-Koordinaten für (int i = 0; i <Breite; i ++) {für (int j = 0; j <Höhe; j ++) {color pix = cam.pixels [j * width + i] ; // Bildpixel bei i, j festhalten float dr = rot (targetColor) - rot (pix); float dg = grün (targetColor) - grün (pix); float db = blau (targetColor) - blau (pix); float d = sqrt (pow (dr, 2) + pow (dg, 2) + pow (db, 2)); // Wenn es eine Übereinstimmung ist, dann halte eine laufende Summe, wenn (d <colorDist) {numPoints + = 1; sx + = i; sy + = j; }}} // Wenn wir die Zielfarbe gefunden haben, legen Sie die Stabkoordinaten fest, wenn (numPoints> 0) {wandX = sx / numPoints; wandY = sy / numPoints; wandFound = true; }}

Dieses durchschnittliche Positionskonzept ist der Grund, warum es so wichtig ist, eine eindeutige Farbe an der Spitze zu verwenden. Wenn Sie eine gewöhnliche Farbe auswählen würden, z. B. Weiß, könnte Ihre durchschnittliche Position nicht nur den Stab, sondern auch den Türrahmen, Ihr Hemd, ein Paar Schuhe oder was auch immer andere zufällige weiße Objekte im Sichtfeld befinden, enthalten .

Sobald der Standort des Ziels berechnet wurde, erstellt die Skizze eine Reihe von Strahlen, die von der Spitze des Stabes ausgehen. Dies wird in der behandelt drawWand () Funktion, die mithilfe eines Timers steuert, wie schnell die Strahlen auftauchen. (Die Timer werden in Beispiel 7-11 des Handbuchs "Erste Schritte" beschrieben). Hier ist der Ausschnitt dafür:

void drawWand (int N, int R) {strokeWeight (6); Schlaganfall (WandColor); glatt(); int elapsedTime = Millis () - oldTime; float r = map (abgelaufene Zeit, 0, wandFrequency, 0, R); für (int i = 0; i <N; i ++) {Gleitschritt = Radiant (360,0 / N); float dx = r * sin (i * step) + wandX; float dy = r * cos (i * step) + wandY; Linie (wandX + 10 * sin (i * step), wandY + 10 * cos (i * step), dx, dy); } if (elapsedTime> wandFrequency) {oldTime = Millis (); }}

Führen Sie eine Aktion aus

Der letzte Schritt ist, den Stab mit dem Verhalten der Skizze zu steuern. In diesem Beispiel habe ich in der oberen linken Ecke des Bildschirms einen kleinen Kreis hinzugefügt, der die Farben aufgrund eines einstellbaren Timers ändert. Wenn Sie die Spitze des Stabes in den Kreis bewegen, wird der Strahl des Stabes auf die neue Farbe umgestellt. Dies ist nur eine geringfügige Modifikation von Beispiel 5-16 aus Erste Schritte:

// Setzt den Farbkreis auf eine neue zufällige Farbe. Void setColorCircleColor () {int elapsedTime = millis () - colorCircleMillis; if (abgelaufene Zeit> colorCircleFrequency) {colorCircleMillis = millis (); colorCircleColor = color (int (zufällig (255)), int (zufällig (255)), int (zufällig (255))); // zufällige Farbe}} void testControlBounds () {float d = dist (wandX, wandY, cX, cY); if (d <cR) {wandColor = colorCircleColor; }}

In der nächsten Codebox-Installation bauen wir auf diesem Beispiel auf, indem Sie mehrere sich bewegende Ziele erstellen. Egal, ob Sie Spiele, Partikelsysteme oder eine Zauberstab-gesteuerte, von Arduino betriebene Zaubershow schreiben (das Thema eines zukünftigen Posts, aber es dauert ein wenig, um dorthin zu gelangen), diese Werkzeuge werden Sie immer wieder verwenden wie Sie weiter mit der Verarbeitung gehen.

Mehr:
Sehen Sie alle Raten von Codebox

In der Schuppenhalle:


Erste Schritte mit Processing Lernen Sie die Computerprogrammierung auf einfache Weise mit Processing, einer einfachen Sprache, mit der Sie Code zum Erstellen von Zeichnungen, Animationen und interaktiven Grafiken verwenden können. Programmierkurse beginnen normalerweise mit der Theorie, aber in diesem Buch können Sie direkt in kreative und unterhaltsame Projekte einsteigen. Es ist ideal für alle, die grundlegende Programmierung erlernen möchten, und ist eine einfache Einführung in die Grafik für Personen mit Programmierkenntnissen.

Aktie

Leave A Comment