だらっと学習帳

Processingとか p5.jsとか 好きです

カテゴリ： プロジェクションマッピング











このお仕事を通してProcessingの色んな一面を見た気がします。
ツイートにもありますが、技術的に書けることは書いていく予定です！よろしくお願いします！
このエントリーをはてなブックマークに追加

お仕事でLightformを触る機会があったので、検証ついでに色々遊んでみました(ブログ執筆許可もらい済)。
Lightform | The design tool for projected AR - Lightform
DSC_2968
Lightformはプロジェクションマッピングをさくっとやるためのガジェット&ソフトで、
投映先のDepthとColorのデータをカメラで取得し、それらふたつのデータからいいかんじにマッピングしてくれるという物です。
Lightformの一番の強みは、複雑な形状の物体に対してもあっという間に投映範囲が選択できるところです。
DepthとColorからフォトショの自動選択ツールみたいな感じでざくーっと投映範囲を決めてくれます。

今回はLightformを使って、GUで買った普通のワンピースに対してプロジェクションマッピングしてみました。
ふわっとした生地でドレープがあるワンピースです。普通にマッピングするとなかなか手間がかかりそうですね。
DSC_2966

Lightformをプロジェクターと接続し、付属ソフト「Lightform Creater」から対象をスキャンします。
接続しているプロジェクターから水玉模様や縞模様を投映してデータを取っているようです。ZOZOSUITSを投映しているような感じですね。
ちなみにわかりやすいように暗い中で撮影していますが、実際のスキャンは明るいところで行った方が上手くいきやすいです。



スキャンが終わるとLightform Createrにスキャンした内容が表示されます。


DepthとColorのデータ両方からいい感じに範囲選択していきます。
最終的にこうなりました。頂点数がエグい。


これにLightform Createrにデフォルトで入っているキラキラ宇宙な映像を投映すると……めちゃエモい！！！！！！！！！！！！！！！



ワンピースのドレープの谷の部分がちゃんと非投映箇所=黒い影になっていて、服の形状や立体感が表現できていると思います。
服の形でざっくり範囲選択するのではなく、DepthとColorから壁との境界/服のドレープなどを把握し、投映範囲を決めたからこそ実現できた表現です。

Lightform Createrには動画以外にも色や変化の度合いを調整できるエフェクトもデフォルトで搭載されています。
こんな感じのものとか。今回は色を赤に、オブジェクトの変化の度合いをぐにゃぐにゃに設定してあります。
はぁ〜〜〜エモい〜〜〜………



せっかくなのでp5.jsで作ったスケッチを動画にして当て込んでみました。
スケッチを動画にしてみたらちょっとカクカクになっちゃったんですが…それでもエモい！！！！！
Rows - OpenProcessing



こんな感じでさくっとプロジェクションマッピングが遊べる楽しいガジェットLightformなんですが、
FAQページ に "Lightform does not support real time tracking" とあるように、動くものに自動で追従しながら投映する機能はありません。
また、マッピングしたい時は必ず最初のスキャンを行う必要があり、それがだいたい2分少々かかります。
つまり、「常に動くものは投映対象にできない」「必ずスキャン画面が投映される(=舞台裏を見せたくない演出の場合は不向き)」という欠点はあります。
上記の洋服へのプロジェクションマッピングでいえば、一瞬でも風が吹いてドレープがずれてしまえばそれまで、ということです。
ただ、どんな形状のものも2分程度待てばさくっとプロジェクションマッピングできるというのはかなり面白い&心強いものではあります。
また、範囲選択のデータはLightform Createrに保存できるので、絶対に定位置から動かないものであればスキャン画面なしにプロジェクションマッピングすることも可能です。
もちろん、複数の領域選択とそれぞれ違うコンテンツの流し込みにも対応しているので、静止した物体に対するプロジェクションマッピングで「これやりたい！」と思うことはだいたいできるのではないか、と思います。
あと、まだ試せてはいないのですが、KinectやRealSense、LeapMotionと連携できるという特徴もあります。
Use Microsoft Kinect to send OSC Messages – Lightform Guide
この辺が入力機器として使えるなら、工夫次第で面白いインタラクションが作れそうです！
このエントリーをはてなブックマークに追加

スパイダーバース、めちゃ面白い映画ですよね。

まだ見ていない方はぜひ見に行ってください。劇場でたっぷり満足できる作品だと思います。
ちなみに私は吹替版で見たんですが声優さんがアニメやゲームで聞きなじみのある方ばかりでそういう意味でもウキウキしてました。

ビジュアル表現に特に力が入っている本作、ポップな色使いや軽快なエフェクトに目を奪われました。
P5erとしても学ぶ所が多かったです。
というわけで劇中再現ファンアートとして、Processingとプロジェクターで"別の次元へのワープホール"を制作してみました。

作品のみ動画にするとこんな感じです。
画質荒くてすみません…

画像だとこんな感じです。
0001

コードは以下にあげてます。
verse.pde - gist
写真素材は以下のサイトからお借りしました。
写真素材ならフリー素材のぱくたそ

パーティクルを4色用意してくるくる回しつつ、町並みや自然の写真をランダムにぐにゃぐにゃにしながら表示しつつ、
beginContour/endContourを利用して円形に穴のあいた図形を用意して写真をマスクし…という感じで動いています。
そしてそれをfullScreenにしてプロジェクターで天井に向かって投影しています。
それぞれ過去の記事にそれっぽいことを書いているので、気になる方は以下もぜひご覧ください。
▼写真をぐにゃぐにゃに
Processing で VHS っぽい画像をつくろう！ : だらっと学習帳
▼beginContour/endContourでマスク用の図形を描く
Processing / p5.js で穴あき図形を描く beginContour() : だらっと学習帳
▼プロジェクターの話
ポータブルプロジェクターを買ったのでProcessingで投影チェックしたりプロジェクションマッピングしたり : だらっと学習帳

プロジェクションマッピング(？)楽しいですねー。プロジェクター買ってよかった。
スパイダーバースもまた見たいなー。
このエントリーをはてなブックマークに追加

ポータブルプロジェクターを買いました。

収納バッグ付きのほんとに小さくて軽いやつです。
amazonのタイムセールで半額くらいになっていて、しかも「あと30分でタイムセール終わるよ！」となっていたので買いました。チョロい。
crenova XPE498プロジェクター 小型 3200ルーメン 1080PフルHD対応 ビジネス/ホーム/アウトドア/ビデオゲーム用 PC/Mac/TV/DVD/iPhone/iPad/USB/SD/AV/HDMIに対応 強化版 1年間の保証
crenova XPE498プロジェクター 小型 3200ルーメン 1080PフルHD対応 ビジネス/ホーム/アウトドア/ビデオゲーム用 PC/Mac/TV/DVD/iPhone/iPad/USB/SD/AV/HDMIに対応 強化版 1年間の保証 [エレクトロニクス]
crenova


Processingの作品展示やプロジェクションマッピング制作に使いたいと思い購入しました。
さらっとテストした感じ、特に問題はないかなという感じです。
暗い所であれば十分はっきり作品を投影できました。
ただ、ピント調整用のダイアルや台形補正用のバーがクソ固くて不便っちゃ不便です。
あと付属のHDMIケーブルが接触不良っぽかったです。ケーブル替えたら正常に動作したんで本体はまあ大丈夫かなと…。
それと音がうるさいんで映画鑑賞とかには向いていないのでは…とも思います。
あと付属の説明書に"役立つヒント___ビジネス向けプレゼンテーションのご使用はお勧めできません。"とわざわざ書かれているのがめちゃくちゃ気になっています。なぜパワポ用途はダメなのか…。
色々あれやこれやとありますが、起動と終了は爆速です。そこだけは間違いないです。

プロジェクションマッピングもやってみるかー、と思いさくっと試してみました。
以下のProcessing.jsスケッチをリメイクして箱の側面に合わせて投影してみました。
Vapor_Shapes - OpenProcessing

写り悪すぎる。すみません。
ダンボールの上に黒い箱を立てて置き、その側面に投影しています。
これが
DSC_2784
こうなって
DSC_2785
こうじゃ
DSC_2782
投影したいオブジェクト周辺がプロジェクターの投影範囲分だけ明るくなってしまうのがダサいですがとりあえずはヨシです。
DSC_2783

ProcessingでのプロジェクションマッピングはKeystoneというライブラリを使用しました。
以下の資料を参考にさせていただきました。
yoppa org – 第2回: Processingでプロジェクション・マッピングをプログラミング

やっぱりリアル物体の角に映像をぴたっとつけると「おー、プロジェクションマッピングしとるなぁ〜」となりますね。
それにProcessing内だけで完結するのもありがたいです。

ちなみに「P3Dしつつセカンドディスプレイ(この場合はプロジェクター)に全画面表示」は以下でできました。
  fullScreen(P3D, 2);

何はともあれMy New Gear! このプロジェクターも機材としてガンガン使い倒していこうと思います。
このエントリーをはてなブックマークに追加

Processing から Syphon を使って MadMapper に実行結果を送信する - Qiita
投稿しました。
プロジェクションマッピングやVJにご興味ある方はぜひ。

もともとは以下の記事の派生になります。
MacとUnity2017.4.1f1とMadMapperでプロジェクションマッピング - Qiita

こちらもどうぞよろしくお願いします！(๑•̀ㅂ•́)و✧
このエントリーをはてなブックマークに追加

↑このページのトップヘ