Processingによるメディアアート製作記録5 ウェブカメラをジャックする【プログラミング】

メディアアート超入門記録
メディアアート超入門の第5回目は、前回のウェブカメラを扱った応用です。
前回はProcessingを使ってウェブカメラで撮影しているライブ動画の任意の場所の色情報を取り出す、ということを行いました。

今回は取り出した色情報を条件に利用して、動画の中の特定の色の位置に図形を描画することを行ってみたいと思います。
早速ですがカメラの動画の中の黒い場所に、白い四角を描画するということを行ってみます。

【メディアアート超入門】processingによる表現作品作成記5-1

前回のプラグラムに以下のように書き足します。

————————————————————–

 video.loadPixels();//カメラ画像のpixel情報を読み込み
  int d = 10; //四角形の大きさを定義
  for(int y = d / 2 ; y < height ; y += d) {
    for(int x = d / 2 ; x < width ; x += d) {
      color myvideoColor = video.pixels[y*width+x];
      if(red(myvideoColor)<60 &&red(myvideoColor)<60 &&green(myvideoColor)<60)
      fill(255);
   rect(x, y, d, d);
      strokeWeight(0);

————————————————————–

「d」は四角形の大きさです。ここれは10ピクセルとしています。
「myvideoColor」はビデオに映し出されたピクセルごとの色情報です。
ここでは四角の大きさ「d」の中心(半分の値)ごとに色を調べて、「fill(255)」=白く塗りつぶされた四角形を描いていくプログラムです。
条件式の中には「myvideoColor」のR(赤)G(緑)B(青)の値がすべて60以下の場合のみ図形を描くという条件を入れました。

かなりいい加減な条件ですが、そこはご愛嬌です。
【メディアアート超入門】processingによる表現作品作成記5-2

ここで「 int d = 10」を 「int d = 1」にしてみました。
1ピクセルごとに資格を描くのでだいぶ精度が上がりましたね。

ここで色の条件を変えて緑のコースターにのみ反応するように少し修正してみます。
【メディアアート超入門】processingによる表現作品作成記5-5
元のコースターはこんな感じ。わかりやすいように緑色のものを選びました。

左上に映し出されるRGBの情報を参考にしながら、if~の部分を調整していきます。
【メディアアート超入門】processingによる表現作品作成記5-3

————————————————————–
if(red(myvideoColor)>120 &&red(myvideoColor)<200 && green(myvideoColor)<230 && blue(myvideoColor)<170)
————————————————————–

200>R(赤)>120
230>G(緑)
B(青)>170

緑には反応しましたが、他の色でも反応してしまいますね。

「green(myvideoColor)>140」を加えて

200>R(赤)>120
230>G(緑)>120
B(青)>170
の条件に修正してみます。
【メディアアート超入門】processingによる表現作品作成記5-4
上手くいきました。
背景や照明等の条件によっても変わりますが、今回のコースターではこの値でやるとうまくいきそうです。

上の図は静止画ですが、リアルタイムの動画で起動しているので緑のコースターの移動に合わせて描画される図形も追随します。
これは面白いです。

今回は取り込んだ映像の中から特定の色を検知して、図形を描画することを行いました。
ここまでくれば後は描画する図形を単なる四角形から自分で用意した画像に変えるだけで一気に作品としてみえてくるプログラムができます。
次回は今回の記事にちょっと仕掛けを加えて作った「机上の江戸」という作品についてみていきたいと思います。


触ってみると意外と簡単。次回もProcessingの世界に一緒にトリップしましょう。

コメント

タイトルとURLをコピーしました