Processingによるメディアアート製作記録6 作品:机上の江戸【プログラミング】

メディアアート超入門記録

メディアアート超入門の第6回目は、いよいよ前回までのウェブカメラを使ったプログラムを仕上げて「机上の江戸」ができるまでを見ていきたいと思います。

【メディアアート超入門】Processingによるメディアアート製作記録4 ウェブカメラを取り込む
【メディアアート超入門】Processingによるメディアアート製作記録5 ウェブカメラをジャックする
【メディアアート超入門】Processingによる表現6-1
机に置いた紙の向こうに東京の古地図が現れる「机上の江戸」

とはいっても実は前回までのプログラムにたった2行追加するだけです。
前回は「 fill(255)」と塗りつぶし色を指定していました。これを「fill(myPhoto.pixels[y*width + x]);」に変更するだけです。
【メディアアート超入門】Processingによるメディアアート製作記録3 作品:銀河鉄道の夜の時と同じくあらかじめ用意した画像を参照します。
「void setup」にも1行追記します。
————————————————————–

void setup() {
  size(640, 480);
  video = new Capture(this, width, height,30);
  video.start();
  myPhoto = loadImage(“edo_map.jpg”); //画像を読み込み
}

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

【メディアアート超入門】Processingによる表現6-2
これでカメラでとらえた緑色部分に「edo_map.jpg」がリアルタイムで置き換えられます。

【メディアアート超入門】Processingによる表現6-3
紙を追加するとリアルタイムで地図が拡張されていきます。若干のタイムロスはありますね。

【メディアアート超入門】Processingによる表現6-5
色紙に限らずRGBの条件を満たしていれば色鉛筆でも同様に地図が描かれます。

最終的に出来上がった作品はこちら。

まだまだやりたいこと・バージョンアップしたいアイディアはたくさんあるのですが、ひとまず1つの作品となりました。

意外と簡単にできるウェブカメラを使ったProcessing。
実際に動く映像をリアルタイムに扱うことで面白さも倍増します。かなり初心者向けの荒いプログラムとなっていますが、まずは第一段階としてはよいのではないかと思います。
次回以降ももう少し追いかけていきたいと思います。

コメント

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