Processing で Webcam を使って遊ぶ。[基本編]

 

どんなものができるの？

僕が軽く作ってみたりしたやつ。

まあもっとたくさんあるんだけど。

こんなことが簡単にできます。

なんか面白そうでしょ？

右上から...

• 想像にお任せします (えｗ
• 輪郭検出的な？ピント合わせ的な
• 動き検出ストップウォッチ。

なプログラムです。

動画処理とか Webcam 使うとか言うと、すごい量のプログラムになりそうだけど、Processing 使えばかなりスマートに書くことができます。

(実際、C# とかでやろうと思うと、まず Directshow を使うのに苦労したりします)

Processing の言語仕様のおかげです。

工夫次第で、可能性は無限大。

 

やってみよう、そうしよう

ではでは、Processing ダウンロードして作ってみようよ。

• Download \ Processing 1.0 (BETA)

Processing のサイトから、開発環境一式がダウンロードできます。

簡単な IDE 的なものも含まれてるので、エディタとかもいらないのがいい。

ただ、一つ注意で Linux 版は processing.video 使えないっぽい。

今回は、Windows 版を前提に。

 

Processing 開発だけならこれだけでいいんだけど、Webcam 使うには WinVDIG が必要。

• Improved glm code

1.0.1 をダウンロード。

最新版だからと言って、1.0.5 をインストールすると...

1Trust Webcam 14823-WDM : Problem connecting Video Output to QuickTime

こんな感じで、取り返しのつかないことになるので、必ず 1.0.1 を。

 

これが、Processing の開発環境です。

ここに、プログラムを打ち込んで開発します。

コンパイルとか、実行もここからできます。(右上のスタートボタン)

 

とりあえず、まずはカメラの画像を表示してみようか。

import processing.video.*;

Capture cap;

void setup()
{
  size(320, 240);
  background(0);
  cap = new Capture(this, 320, 240);
  frameRate(10);
}

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

これを入力して、実行してみると...

コピペするのもいいけど、プログラミングは自分で入力したほうが覚える・・・よ？ｗ

 

 

こんな感じでウィンドウが現れて、Webcam の映像が表示されたかな？

なんと、これだけで Webcam を出力できるようなプログラム作れちゃうんです。

すごくね？ｗ

なんと、カメラを表示に実際に使っている命令は5行というねｗ

ああ、プログラム解説する、え？いらない、いらないよねｗ

ということで、独学でいろいろ調べてみてくださいｗ

• Language (API) \ Processing 1.0 (BETA)
• Video \ Libraries \ Processing 1.0 (BETA) \ Processing 1.0 (BETA)

Processing は、レファレンスが充実しているので、すぐにどんなことやっているかわかると思います。

 

カメラカメラ～

次に、クリックすると左側にその時の画像が表示されるみたいな。

静止画キャプチャみたいなものを作ってみます。

import processing.video.*;

Capture cap;
PImage img = new PImage(320, 240);

void setup()
{
  size(320 * 2, 240);
  background(0);
  cap = new Capture(this, 320, 240);
  frameRate(10);
}

void draw()
{
  if(cap.available()) {
    cap.read();
    image(cap, 0, 0);
    image(img, 320, 0);
  }
}

void mouseReleased() {
  img.copy(cap, 0, 0, 320, 240, 0, 0, 320, 240);
}

うん、段々面白くなってきた。

面白くなってきたよ～！！！

 

リアルタイムに、ゴニョゴニョ

次は、本格的な画像処理みたいなことをしてみよう。

まずは、白黒表示。モノクローム。

こんなことしたら、カクカク動画になりそうだけど、意外にいけます。

リアルタイムに画像処理も使えるっぽい。

import processing.video.*;

Capture cap;

void setup()
{
  size(320 * 2, 240);
  background(0);
  cap = new Capture(this, 320, 240);
  frameRate(10);
}

void draw()
{
  if(cap.available()) {
    cap.read();
    image(cap, 0, 0);
    image(mono(cap), 320, 0);
  }
}

PImage mono(PImage img)
{
  color c;
  int a;
  for(int x = 0; x < 320; x++) {
    for(int y = 0; y < 240; y++) {
      c = img.get(x, y);
      a = (int)(red(c) + green(c) + blue(c)) / 3;
      img.set(x, y, color(a));
    }
  }
  return img;
}

何となく、Webcam 遊びの面白さがわかったかな？

基本編はとりあえず、これで終わりにしよう。

 

応用編へつづく。

 

[補足]

もし、カメラの画像を表示させた時に、違うデバイスの映像が表示される場合。

例えば、キャプチャボードを積んでたりすると、テレビの入力が表示されちゃうかもしれない。

そんなときは、

import processing.video.*;
void setup()
{
  Capture cap;
  println(Capture.list());
}

これだけ実行させると、下のコンソールにこんなのが出てくる。

[0] "NEC61153 Capture-WDM"
[1] "TP6810 USB Video Camera-WDM"

これは、カメラデバイスの一覧。

で、これの Webcam っぽい方のデバイス名部分を控えて、

cap = new Capture(this, 320, 240);

この部分を、

cap = new Capture(this, 320, 240, "TP6810 USB Video Camera-WDM");

このようにすれば OK。

ちなみに、これを使うと、2つの Webcam を使って・・・という面白いことがｗ

うちに、Webcam が2個あるはずなんだけど、1つどこかに置いてきて紛失中・・・。