So erstellen Sie beeindruckende Webcam-Effekte mit Java und Processing
Werbung
Die Verarbeitung ist ein leistungsstarkes Werkzeug, mit dem Kunst durch Code erstellt werden kann. Es ist die Kombination aus einer Java-Bibliothek für die Arbeit mit Grafiken und einer integrierten Entwicklungsumgebung (IDE), mit der Sie einfach Code schreiben und ausführen können.
Es gibt viele Grafik- und Animationsanfängerprojekte, die Processing verwenden, aber es ist auch in der Lage, Live-Videos zu bearbeiten.
Heute erstellen Sie mithilfe der Videobibliothek Processing eine Live-Diashow mit verschiedenen Effekten, die mit der Maus gesteuert werden. Sie können das Live-Video nicht nur spiegeln, sondern auch seine Größe und Farbe ändern und es dem Mauszeiger folgen lassen.
Projektaufbau
Laden Sie zunächst Processing herunter und öffnen Sie eine leere Skizze. Dieses Tutorial basiert auf einem Windows-System, sollte jedoch auf jedem Computer mit einer Webcam funktionieren.
Möglicherweise müssen Sie die Verarbeitungsvideobibliothek installieren, auf die Sie unter Skizze> Bibliothek importieren> Bibliothek hinzufügen zugreifen können . Suchen Sie im Suchfeld nach Video und installieren Sie die Bibliothek von The Processing Foundation .
Einmal installiert, können Sie loslegen. Wenn Sie die Codierung überspringen möchten, können Sie die vollständige Skizze herunterladen. Es ist jedoch viel besser, es selbst zu machen!
Verwenden einer Webcam mit Verarbeitung
Beginnen wir mit dem Importieren der Bibliothek und dem Erstellen einer Setup- Funktion. Geben Sie Folgendes in die leere Verarbeitungsskizze ein:
import processing.video.*; Capture cam; void setup(){ size(640, 480); cam = new Capture(this, 640, 480); cam.start(); } Nach dem Importieren der Videobibliothek erstellen Sie eine Capture- Instanz namens cam, um die Daten der Webcam zu speichern. Im Setup richtet die Größenfunktion ein Fenster mit einer Größe von 640 × 480 Pixel ein, in dem gearbeitet werden soll.
In der nächsten Zeile wird cam einer neuen Capture- Instanz zugewiesen . Diese Skizze hat die gleiche Größe wie das Fenster, bevor die Kamera mit cam.start () eingeschaltet wird .
Machen Sie sich keine Sorgen, wenn Sie vorerst nicht alles verstehen. Kurz gesagt, wir haben Processing angewiesen, ein Fenster zu erstellen, unsere Kamera zu finden und einzuschalten! Um es anzuzeigen, benötigen wir eine Zeichenfunktion . Geben Sie dies unterhalb des obigen Codes außerhalb der geschweiften Klammern ein.
void draw(){ if (cam.available()){ cam.read(); } image(cam, 0, 0); } Die Zeichenfunktion wird bei jedem Frame aufgerufen. Dies bedeutet, dass Sie, wenn in der Kamera Daten verfügbar sind , die Daten viele Male pro Sekunde lesen .
Diese Daten werden dann als Bild an der Position 0, 0 oben links im Fenster angezeigt.
Speichern Sie Ihre Skizze und drücken Sie die Wiedergabetaste oben auf dem Bildschirm.
Erfolg! Die von der Kamera gespeicherten Daten werden bei jedem Bild korrekt auf den Bildschirm gedruckt. Wenn Sie Probleme haben, überprüfen Sie Ihren Code gründlich. Java braucht jede Klammer und jedes Semikolon am richtigen Ort! Die Verarbeitung kann auch einige Sekunden dauern, um auf die Webcam zuzugreifen. Wenn Sie also glauben, dass sie nicht funktioniert, warten Sie einige Sekunden, nachdem Sie das Skript gestartet haben.
Das Bild spiegeln
Nun, da Sie ein Live-Webcam-Bild haben, können Sie es bearbeiten. Ersetzen Sie in der Zeichenfunktion das Bild (cam, 0, 0). mit diesen beiden Codezeilen.
scale(-1, 1); image(cam, -width, 0); Speichern Sie die Skizze und führen Sie sie erneut aus. Kannst du den Unterschied sehen? Bei Verwendung eines negativen Skalierungswerts werden jetzt alle x- Werte (die horizontalen Pixel) umgekehrt. Aus diesem Grund müssen wir den negativen Wert der Fensterbreite verwenden, um das Bild korrekt zu positionieren.
Das Umdrehen des Bildes erfordert nur ein paar kleine Änderungen.
scale(-1, -1); image(cam, -width, -height); 
Diesmal werden sowohl der x- als auch der y- Wert gespiegelt, wodurch das Live-Kamerabild auf den Kopf gestellt wird. Bisher haben Sie ein normales Bild, ein horizontal gespiegeltes Bild und ein vertikal gespiegeltes Bild codiert. Lassen Sie uns einen Weg finden, um zwischen ihnen zu wechseln.
Machen Sie es Zyklus
Anstatt Ihren Code jedes Mal neu zu schreiben, können wir Zahlen verwenden, um sie durchzugehen. Erstellen Sie oben in Ihrem Code eine neue Ganzzahl mit dem Namen switcher .
import processing.video.*; int switcher = 0; Capture cam; Wir können den Wert von switcher verwenden, um zu bestimmen, was mit dem Kamerabild passiert. Wenn die Skizze beginnt, geben Sie den Wert 0 an . Jetzt können wir mit Logik ändern, was mit dem Bild passiert. Aktualisieren Sie Ihre Zeichenmethode wie folgt:
void draw(){ if (cam.available()){ cam.read(); } if(switcher==0){ image(cam, 0, 0); } else if(switcher == 1){ scale(-1, 1); image(cam, -width, 0); } else if(switcher == 2){ scale(-1, -1); image(cam, -width, -height); } else{ println("Switcher = 0 again"); switcher = 0; } } Jetzt werden alle drei Variationen des Codes abhängig vom Wert des Umschalters ausgelöst. Wenn es nicht mit einer unserer if- oder if- Anweisungen übereinstimmt, wird die else- Klausel auf 0 zurückgesetzt. Logik ist eine wichtige Fähigkeit für Anfänger, die Sie erlernen müssen, und Sie können sie und vieles mehr mit einem hervorragenden YouTube-Programmier-Tutorial herausfinden 17 besten YouTube-Programmier-Tutorials Die 17 besten YouTube-Programmier-Tutorials In diesem Beitrag möchten wir Sie auf einige der besten YouTube-Programmierserien hinweisen, die wir gefunden haben. All dies reicht aus, um als Programmierer-Neuling die Füße nass zu machen. Weiterlesen !
Mit der Maus
Die Verarbeitung verfügt über integrierte Methoden für den Zugriff auf die Maus. Um zu erkennen, wann der Benutzer mit der Maus klickt, fügen Sie die mousePressed- Funktion am unteren Rand Ihres Skripts hinzu.
void mousePressed(){ switcher++; } Die Verarbeitung wartet auf Mausklicks und unterbricht das Programm, um diese Methode auszuführen, wenn sie einen erkennt. Jedes Mal, wenn die Methode aufgerufen wird, erhöht sich der Wert von switcher um eins. Speichern Sie Ihr Skript und führen Sie es aus.
Wenn Sie nun die Maustaste drücken, werden die verschiedenen Ausrichtungen der Videos durchlaufen, bevor Sie zum Original zurückkehren. Bisher haben Sie das Video nur umgedreht, jetzt machen wir etwas interessanteres.
Weitere Effekte hinzufügen
Jetzt codieren Sie einen Vierfarben-Livebildeffekt ähnlich den berühmten Andy Warhol-Kunstwerken. Das Hinzufügen weiterer Effekte ist so einfach wie das Hinzufügen einer weiteren Klausel zur Logik. Fügen Sie dies zu Ihrem Skript zwischen der letzten if- Anweisung und else hinzu .
else if(switcher == 3){ tint(256, 0, 0); image(cam, 0, 0, width/2, height/2); tint(0, 256, 0); image(cam, width/2, 0, width/2, height/2); tint(0, 0, 256); image(cam, 0, height/2, width/2, height/2); tint(256, 0, 256); image(cam, width/2, height/2, width/2, height/2); } Dieser Code verwendet die Bildfunktion, um vier separate Kamerabilder in jeder Ecke des Bildschirms zu erstellen und sie alle halb so groß zu machen.
Die Tönungsfunktion fügt jedem Kamerabild Farbe hinzu. Die Zahlen in Klammern sind die Werte für Rot, Grün und Blau (RGB) . Der Farbton färbt den gesamten folgenden Code mit der gewählten Farbe.
Speichern und spielen, um das Ergebnis zu sehen. Versuchen Sie, die RGB-Zahlen in jeder Farbtonfunktion zu ändern, um die Farben zu ändern!
Es der Maus folgen lassen
Lassen Sie das Livebild abschließend mit hilfreichen Funktionen aus der Verarbeitungsbibliothek der Mausposition folgen. Fügen Sie dies über dem else- Teil Ihrer Logik hinzu.
else if(switcher==4 ){ image(cam, mouseX, mouseY, width/2, height/2); } Hier positionieren Sie das Bild von Ihrer Kamera unter mouseX und mouseY . Diese sind in Verarbeitungswerte integriert, die zurückgeben, auf welches Pixel die Maus zeigt.
Das ist es! Fünf Variationen von Live-Video durch Code. Wenn Sie den Code ausführen, werden Sie jedoch einige Probleme bemerken.
Code fertigstellen
Der Code, den Sie bisher erstellt haben, funktioniert, aber Sie werden zwei Probleme bemerken. Erstens, sobald die vierfarbige Variante angezeigt wird, ist alles danach lila getönt. Zweitens hinterlässt das Bewegen des Videos mit der Maus eine Spur. Sie können das Problem beheben, indem Sie oben in der Zeichenfunktion ein paar Linien einfügen.
void draw(){ tint(256, 256, 256); background(0); //draw function continues normally here! Zu Beginn eines jeden Frames setzt dieser Code die Farbtonfarbe auf Weiß zurück und fügt eine Hintergrundfarbe Schwarz hinzu, um zu verhindern, dass das Video Spuren hinterlässt. Jetzt, wenn Sie das Programm testen, funktioniert alles perfekt!
Webcame-Effekte: Kunst aus Code
Die Verarbeitung ist sehr leistungsfähig und Sie können damit viele Dinge erledigen. Es ist eine hervorragende Plattform, um Kunst mit Code zu machen, aber es eignet sich auch zur Steuerung von Robotern!
Wenn Java nicht Ihr Ding ist, gibt es eine JavaScript-Bibliothek mit dem Namen p5.js, die auf Processing basiert. Es ist browserbasiert, und selbst Anfänger können damit fantastische reaktive Animationen erstellen. So erstellen Sie ein Skript für eine sprachempfindliche Roboteranimation in p5.js So erstellen Sie ein Skript für eine sprachempfindliche Roboteranimation in p5.js Sie möchten Ihre Kinder für das Programmieren interessieren ? Zeigen Sie ihnen diese Anleitung zum Aufbau eines akustisch reaktiven, animierten Roboterkopfs. Weiterlesen !
Bildnachweis: Syda_Productions / Depositphotos
Erfahren Sie mehr über: Lernprogramme für die Codierung, Java, Verarbeitung, Webcam.
