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


建築学ランキング
にほんブログ村 美術ブログ 建築・建築物へにほんブログ村

↑建築系のブログランキング。よければ応援してもらえると嬉しいです。
建築やデザイン好きな人は他にも面白いブログがいっぱいあるので是非見てみてください^^

■他にもこんな記事がおススメです
・ゴンノベーカリーがスゴい!街に開いた名建築パン屋さんを徹底レポート【東京葛西】
・ヤキトリてっちゃんがスゴい!隈研吾氏デザインの下北駅上店舗をレポート【東京下北沢】
・スペースを有効活用して部屋をオシャレに魅せるインテリアアイディア6選

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