Processingによるメディアアート製作記録4 ウェブカメラを取り込む【プログラミング】

メディアアート超入門記録
メディアアート超入門の第4回目は、ウェブカメラを扱ってみたいと思います。
過去ログ
【メディアアート超入門】Processingによるメディアアート製作記録3 作品：銀河鉄道の夜Processingでカメラを扱うのは案外簡単で、基本的にはビデオライブラリをインポートしてくるだけでProcessingの実行画面にカメラの映像を反映できます。

【メディアアート超入門】processingによる表現作品作成記4-1
まずは[スケッチ]の[ライブラリをインポート]でビデオ用のライブラリをダウンロードしてきます。あとはビデオの定義や画面の大きさを定義するだけで簡単にウェブカメラの映像をリアルタイムで取り込めます。
【メディアアート超入門】processingによる表現作品作成記4-2
【メディアアート超入門】processingによる表現作品作成記4-3
こんな感じで取り込めます。描いたコードは10行ちょっとの短いコードのみです。

————————————————————–
import processing.video.*;
Capture video;
 
void setup() {
  size(640, 480);
  video = new Capture(this, width, height,30);
  video.start();  
}
 
void draw() {
  if (video.available() == true) {
    video.read();   
    image(video, 0, 0);    
  }
}
————————-————————————-

今回はここにちょっと修正を加え、マウスで指定した場所のカメラの映像の色の情報を引き出してみたいと思います。
といっても加えるのは以下の4行のみです。
————————-————————————-

 stroke(0);

 int x = mouseX;
 int y = mouseY;

 text(video.pixels[y*width + x],20,20);
————————————————————–
「mouseX」「mouseY」はマウスのカーソルの位置を表すProcessingの関数で、カーソルの場所が何ピクセル目にあるのかが自動で吐き出されます。
「text」でピクセルの位置の色を表示するようにしてあげれば、マウスのカーソルの位置の色情報が表示されます。
【メディアアート超入門】processingによる表現作品作成記4-4
少しわかりずらいですが、画面の右上に色の番号が表示されます。
マウスの移動に合わせてリアルタイムでカーソル位置のカメラの色が表示されます。

とはいってもこの単位だと何が何だか分りませんね。
そこでRGB情報に変換する為少しだけプログラムをいじります。
textの部分を以下のように修正してみます。
————————-————————————-

text(red(video.pixels[my*width + mx]),20,20);
text(green(video.pixels[my*width + mx]),20,40);
text(blue(video.pixels[my*width + mx]),20,60);
————————-————————————-

【メディアアート超入門】processingによる表現作品作成記4-5
分りやすいようにグリーンのオットマンにカメラを向けてみましたが、左上にRGBの値が表示されているのが分ると思います。

ここまででリアルタイムに表示したカメラの家象の色情報を取得するプログラムが完成しました。

 色情報が取得できれば、それによって様々な仕掛けや映像に応用できることがなんとなくわかると思います。次回はいよいよ取り込まれたウェブカメラ の画像と、色情報を利用して具体的な作品の製作プロセスまで紹介したいと思います。

Processingは原則無料のプログラムです。今回書いたようにカメラの映像や情報に も簡単にアクセスして応用ができますので気になった方は一度インストールして触ってみてはいかがでしょうか。

■ログ
前回：【メディアアート超入門】Processingによるメディアアート製作記録3 作品：銀河鉄道の夜
次回：【メディアアート超入門】Processingによるメディアアート製作記録5 ウェブカメラをジャックする

スポンサーリンク
タイトルとURLをコピーしました