Video Processing

In diesem Tutorial werden wir uns ansehen, wie wir mit einem Live-Bild arbeiten können. Glücklicherweise haben die neuesten Notebook-Computer eigebaute Web-Kameras und wir können deren Informationen direkt verwenden.

Kamerabild auslesen

In einem ersten Schritt wollen wir das Kamerabild auslesen und auf der Zeichenfläche darstellen. Dazu verwenden wir die Video Libary, welche schon n der Standart-Installation von Processing enthalten ist.
Um die Kamera auszulesen importieren wir die Libary und deklarieren einen Namen:

import processing.video.*;
Capture video;

In der setup() Funktion initialisieren wir die Library und starten die Aufnahme:

video = new Capture(this, width, height, 30);
video.start();

Die verschiedenen Auflösungen können wir mit println(Capture.list()); uns in die Konsole schreiben lassen.

In der draw() Fuktion fragen wir ab, ob ein neues Bild vorhanden ist und lesen dieses dann ein:

if (video.available()) {
  video.read();
}

Zum Schluss zeichnen wir das Bild auf die Zeichenfläche:

image(video, 0, 0);

Folgend das komplette Processing-Sketch:

import processing.video.*;
Capture video;

void setup()  {
  size(640, 480);
  video = new Capture(this, width, height, 30);
  video.start();
}

void draw() {
  if (video.available()) {
    video.read();
  }
  
  image(video, 0, 0);
}

Filter und Video

Grundsätzlich lassen sich alle Filter und Effekte, welche wir auf statische Bilder angewendet haben auch auf Video-Sourcen anwenden.

Pixelate

Das folgende Beispiel verwendet den den "Pixelate" Filter um das Video grober aufzulösen:

import processing.video.*;
Capture video;

int pixelSize = 20;

void setup() {
  size(640, 480);
  video = new Capture(this, width, height, 30);
  video.start();
}

void draw() {
  if (video.available()) {
    video.read();
  }
  
  for(int x=0; x<width; x+=pixelSize) {
    for(int y=0; y<height; y+=pixelSize) {
      int loc = x+y*width;
      
      color c = video.pixels[loc];
      
      fill(c);
      noStroke();
      rect(x, y, pixelSize, pixelSize);
    }
  }
}

Threshold

Das folgende Beispiel arbeitet mit einem Grenzwert und zeigt die Pixel entweder Schwarz oder Weiss dar:

import processing.video.*;
Capture video;

int threshold = 100;

void setup() {
  size(640, 480);
  video = new Capture(this, width, height, 30);
  video.start();
}

void draw() {
  if (video.available()) {
    video.read();
  }
  
  loadPixels();
  
  for(int x=0; x<width; x++) {
    for(int y=0; y<height; y++) {
      int loc = x+y*width;
      
      if(brightness(video.pixels[loc])<threshold) {
        pixels[loc] = color(255);
      } else {
        pixels[loc] = color(0);
      }
    }
  }

  updatePixels();
}

Spiegeln

Je nach Anwendung kann es von Vorteil sein, wenn man das Bild spiegelt. Vor allem bei Interaktionen vor einem Bildschirm macht dies Sinn. Im Prinzip drehen wir das komplette Video horizontal um 180°:

pushMatrix();
scale(-1,1);
image(video, -width, 0);
popMatrix();

Folgend das komplette Processing-Sketch:

import processing.video.*;
Capture video;

void setup() {
  size(640, 480);
  video = new Capture(this, width, height, 30);
  video.start();
}

void draw() {
  if (video.available()) {
    video.read();
  }
  
  pushMatrix();
  scale(-1,1);
  image(video, -width, 0);
  popMatrix();
}

Weitere Filter

Für Bilder gibt es auch schon eine Menge von vorgefertigten Filtern. Diese können unter diesem Link gefunden werden.

Weiteres

• Video – Referenz auf processing.org