Home-theater-designers
Processing ist ein mächtiges Werkzeug, das die Erstellung von Kunst durch Code ermöglicht. 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 Animations-Anfängerprojekte, die Processing verwenden, aber es ist auch in der Lage, Live-Videos zu manipulieren.
Heute erstellen Sie mit der Videobibliothek Processing eine Live-Video-Diashow mit verschiedenen Effekten, die mit der Maus gesteuert werden. Sie können das Live-Video nicht nur umdrehen, sondern auch die Größe und Farbe ändern und es dem Mauszeiger folgen lassen.
Projektaufbau
Beginnen, Download Verarbeitung und öffnen Sie eine leere Skizze. Dieses Tutorial basiert auf einem Windows-System, sollte aber auf jedem Computer mit Webcam funktionieren.
Möglicherweise müssen Sie die Processing Video-Bibliothek installieren, die unter . zugänglich ist Sketch > Bibliothek importieren > Bibliothek hinzufügen . Suchen nach Video im Suchfeld und installieren Sie die Bibliothek von Die Verarbeitungsstiftung .
Nach der Installation können Sie loslegen. Wenn Sie die Codierung überspringen möchten, können Sie Laden Sie die komplette Skizze herunter . Es ist jedoch viel besser, es von Grund auf selbst zu machen!
Verwenden einer Webcam mit Verarbeitung
Beginnen wir mit dem Importieren der Bibliothek und dem Erstellen eines erstellen Funktion. Tragen Sie in die leere Verarbeitungsskizze Folgendes 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 Ergreifen Instanz aufgerufen Orange um die Daten von der Webcam zu speichern. In erstellen , das Größe Funktion richtet ein 640x480 Pixelgroßes Fenster zum Arbeiten.
Die nächste Zeile weist zu Orange zu einer neuen Instanz von Ergreifen , zum Dies Skizze, die die gleiche Größe wie das Fenster hat, bevor Sie der Kamera sagen, dass sie sich mit einschalten soll cam.start() .
Machen Sie sich keine Sorgen, wenn Sie im Moment nicht jeden Teil davon verstehen. Kurz gesagt, wir haben Processing angewiesen, ein Fenster zu machen, unsere Kamera zu finden und sie einzuschalten! Um es anzuzeigen, brauchen wir a zeichnen Funktion. 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 zeichnen Funktion wird jeden Frame aufgerufen. Dies bedeutet, dass viele Male pro Sekunde wenn die kamera hat daten erhältlich Sie lesen die Daten daraus.
Diese Daten werden dann als ein Bild , an der Stelle 0, 0 , die sich oben links im Fenster befindet.
Speichern Sie Ihre Skizze und drücken Sie die Wiedergabetaste oben auf dem Bildschirm.
Erfolg! Die gespeicherten Daten von Orange wird bei jedem Frame korrekt auf den Bildschirm gedruckt. Wenn Sie Probleme haben, überprüfen Sie Ihren Code gründlich. Java braucht jede Klammer und jedes Semikolon an der richtigen Stelle! Die Verarbeitung kann auch einige Sekunden dauern, um auf die Webcam zuzugreifen. Wenn Sie also der Meinung sind, dass sie nicht funktioniert, warten Sie nach dem Start des Skripts einige Sekunden.
Spiegeln des Bildes
Nun, da Sie ein Live-Webcam-Bild haben, können wir es bearbeiten. Ersetzen Sie in der Zeichenfunktion 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? Durch die Verwendung eines Negativs Skala Wert, alle x Werte (die horizontalen Pixel) werden jetzt umgekehrt. Aus diesem Grund müssen wir den negativen Wert des Fensters verwenden Breite um das Bild richtig zu positionieren.
Um das Bild auf den Kopf zu stellen, sind nur ein paar kleine Änderungen erforderlich.
scale(-1,-1);
image(cam,-width,-height);
Diesmal sind beide x und und Werte werden umgedreht, 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 eine Möglichkeit einrichten, zwischen ihnen zu wechseln.
Zyklus machen
Anstatt Ihren Code jedes Mal neu zu schreiben, können wir Zahlen verwenden, um sie durchzugehen. Erstelle eine neue ganze Zahl oben in deinem Code namens Umschalter .
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 ihr einen Wert von 0 . Jetzt können wir Logik verwenden, um zu ändern, was mit dem Bild passiert. Aktualisieren Sie Ihr zeichnen Methode, um so auszusehen:
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 von Switcher ausgelöst. Wenn es nicht zu einem unserer passt wenn oder ansonsten Aussagen, die anders -Klausel wird auf 0 zurückgesetzt. Logik ist eine wichtige Anfängerfähigkeit, die es zu erlernen gilt, und Sie können sie und vieles mehr mit einem ausgezeichneten YouTube-Programmier-Tutorial herausfinden!
Verwenden der Maus
Die Verarbeitung verfügt über integrierte Methoden für den Zugriff auf die Maus. Um zu erkennen, wenn der Benutzer mit der Maus klickt, fügen Sie das MausGedrückt Funktion am Ende Ihres Skripts.
Was tun mit einem alten PC?
void mousePressed(){
switcher++;
}
Die Verarbeitung lauscht auf Mausklicks und unterbricht das Programm, um diese Methode auszuführen, wenn es einen erkennt. Jedes Mal, wenn die Methode aufgerufen wird, wird der Wert von switcher um eins größer. Speichern Sie Ihr Skript und führen Sie es aus.
Wenn Sie jetzt die Maustaste drücken, durchläuft es die verschiedenen Ausrichtungen der Videos, bevor es zum Original zurückkehrt. Bisher haben Sie das Video nur umgedreht, jetzt machen wir etwas Interessanteres.
Hinzufügen weiterer Effekte
Jetzt codieren Sie einen vierfarbigen Livebild-Effekt, der den berühmten Kunstwerken von Andy Warhol ähnelt. Das Hinzufügen weiterer Effekte ist so einfach wie das Hinzufügen einer weiteren Klausel zur Logik. Fügen Sie dies Ihrem Skript zwischen den letzten hinzu sonst wenn Aussage, und anders .
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 Bild Funktion, um vier separate Kamerabilder in jeder Ecke des Bildschirms zu erstellen und sie alle auf halbe Größe zu bringen.
Die Farbton Funktion fügt jedem Kamerabild Farbe hinzu. Die Zahlen in den Klammern sind rot, grün und blau (RGB) Werte. Tönung färbt alle folgenden Codes mit der gewählten Farbe ein.
Speichern und spielen Sie, um das Ergebnis zu sehen. Versuchen Sie, die RGB-Zahlen in jedem zu ändern Farbton Funktion zum Ändern der Farben!
Damit es der Maus folgt
Lassen Sie uns schließlich das Live-Bild mit Hilfe hilfreicher Funktionen aus der Processing-Bibliothek der Mausposition folgen. Fügen Sie dies über dem hinzu anders Teil deiner Logik.
else if(switcher==4 ){
image(cam, mouseX, mouseY, width/2, height/2);
}
Hier positionieren Sie das Bild Ihrer Kamera auf MausX und MausY . Diese sind in Verarbeitungswerte eingebaut, 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.
Den Code fertigstellen
Der Code, den Sie bisher erstellt haben, funktioniert, aber Sie werden zwei Probleme bemerken. Erstens, sobald sich die vierfarbige Variante zeigt, ist danach alles lila getönt. Zweitens, wenn Sie das Video mit der Maus bewegen, hinterlässt es eine Spur. Sie können dies beheben, indem Sie oben in der Zeichenfunktion ein paar Linien hinzufügen.
void draw(){
tint(256,256,256);
background(0);
//draw function continues normally here!
Am Anfang jedes Frames setzt dieser Code die Tönungsfarbe auf Weiß zurück und fügt eine schwarze Hintergrundfarbe hinzu, um zu verhindern, dass das Video Spuren hinterlässt. Wenn Sie das Programm jetzt testen, funktioniert alles perfekt!
Webcam-Effekte: Kunst aus Code
Die Verarbeitung ist sehr leistungsstark und Sie können damit viele Dinge tun. Es ist eine ausgezeichnete Plattform, um Kunst mit Code zu machen, aber es ist genauso gut geeignet, um Roboter zu steuern!
Wenn Java nicht Ihr Ding ist, gibt es eine auf Processing basierende JavaScript-Bibliothek namens p5.js. Es ist browserbasiert und sogar Anfänger können damit fantastische reaktive Animationen erstellen!
Bildquelle: Syda_Productions / Depositphotos
Teilen Teilen Tweet Email 3 Möglichkeiten, um zu überprüfen, ob eine E-Mail echt oder gefälscht istWenn Sie eine E-Mail erhalten haben, die etwas zweifelhaft aussieht, ist es immer am besten, die Echtheit zu überprüfen. Hier sind drei Möglichkeiten, um festzustellen, ob eine E-Mail echt ist.
Weiter lesen Verwandte Themen- Programmierung
- Java
- Webcam
- wird bearbeitet
- Codierungs-Tutorials
Ian Buckley lebt als freiberuflicher Journalist, Musiker, Performer und Videoproduzent in Berlin. Wenn er nicht gerade schreibt oder auf der Bühne steht, bastelt er an DIY-Elektronik oder Code herum, in der Hoffnung, ein verrückter Wissenschaftler zu werden.
Mehr von Ian BuckleyAbonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um sich zu abonnieren