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;

Im setup() initialisieren wir die Library und starten die Aufnahme:

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

Im draw() fragen wir ab, ob ein neuer Frame vorhanden ist und lesen diesen dann ein:

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

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

image(video, 0, 0);
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.

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);
    }
  }
}


Processing_04_2

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();
}

Processing_04_3

Weitere Filter

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

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 Beispiel “P04_4_Video_Kamerabild_spiegeln” ist gezeigt wie es geht. Im Prinzip drehen wir das komplette Video horizontal um 180°. Dies machen wir mit:

pushMatrix();
scale(-1,1);
image(video, -width, 0);
popMatrix();
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();
}

Weiteres