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。
実際に動く映像をリアルタイムに扱うことで面白さも倍増します。かなり初心者向けの荒いプログラムとなっていますが、まずは第一段階としてはよいのではないかと思います。
次回以降ももう少し追いかけていきたいと思います。


建築学ランキング
にほんブログ村 デザインブログ 建築デザインへ
にほんブログ村

↑建築系のブログランキング。建築やデザイン好きな人はこちらから見てみてもらえるとうれしいです^^

■他にもこんな記事がおススメです
・目黒区総合庁舎がスゴイ!村野藤吾の傑作建築を徹底レポート【東京中目黒】
・表参道は建築の聖地!建築見学におススメの作品厳選15選
・都電荒川線で行く建築巡りの旅!おススメ建築味わい尽し決定版
・本のプレゼントで迷った時に!オススメのギフト本ジャンル別20選

コメント

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