カテゴリー: programming

BNNから出版されているProcessing:ビジュアルデザイナーとアーティストのためのプログラミング入門の電子書籍が発売されました。

（電子版）Processing―ビジュアルデザイナーとアーティストのためのプログラミング入門

紙版は7000円（＋税）で電子版は6300円（＋税）ですが、8月末まで3600円（＋税）の特別価格となっています！

Processinglueには，Processingを出力できる仮想ディスプレイだけでなく，Processingの入力として使うことができる仮想カメラもあります．

Processingでカメラを使う際には processing.video.Captureクラスを使いますが，仮想カメラはCaptureクラスのサブクラスとして実装しているので，同じようにPAppletから扱うことができます．

その一例としてPerfume Official Global Websiteで公開されているPerfumeのモーションデータを再生するProcessingのサンプルを拡張しました．Perfumeの前に仮想カメラを置き，その画像をオプティカルフローを出力するProcessingに渡し，その出力をPerfumeの後ろに置いた大きなディスプレイに出力しました．

右のウィンドウがシミュレーションをするProcessing，左上のウィンドウが画像処理を行っているProcessing，左下のウィンドウが仮想カメラの画像です．

Capture and Display Test0

シミュレーションを行うPAppletの中では下記のような手順でインタンスを生成します．

capture = new P4PCapture(this,320,240);//仮想カメラのインスタンスをnew
opticalflow opt = new opticalflow();//オプティカルフローのPAppletをnew
opt.setCapture(capture);//仮想カメラをオプティカルフローのPAppletに渡す
display = new P4PDisplay(this, 1600, 1200, opt, 320, 240, true);//オプティカルフローのPAppletを引数にして仮想ディスプレイのインスタンスをnew


オプティカルフローを計算するProcessingはOpenProcessingで公開されているものを使いました．そのソースの中に画像を反転する／しないを決めるパラメータがありますが，反転せずに出力してみました．

Capture and Display Test1

画像処理を使ってビデオエフェクトをかける時には，画像が入れ子になっていくビデオフィードバックがかからないようカメラにフィルタをかけることがあります．ビデオフィードバックがかからないようシミュレーションしてみました．

Capture and Display Test2

フィルタをかける／かけないを仮想空間でも可能にするために，PAppletがimplementするインタフェース：Draw2PGraphics3Dを定義してあります．
カメラには写したくない＋3D空間の中に表示するものはdraw()の中でhoge.draw();等として描画をします．
カメラに写したい＋3D空間の中にも表示したいものはdraw2PGraphics3D()の中でfuga.draw();などとしておき，draw()の中でdraw2PGraphics3D(this);と呼び出すようにしています．
少しややこしい気もするので，写さないオブジェクト／写すオブジェクトをリストで管理しても良いかな…とも思うのですが，PAppletのサブクラスを作って隠蔽することが分かりにくさを生む場合もあると考え，今はこうした実装にしています．
（良い実装の方針があったらぜひ教えて下さい）

Cpatureクラスを使って画像を処理するPAppletは少しだけ拡張を行います．

public boolean realDeployment = false;

という変数と下記のようなメソッドを追加します．

public void setCapture(Capture capture){ // added for P4P
this.video = capture;
}

setup()の中で

if(realDeployment) { // added for P4P
video = new Capture(this, wscreen, hscreen, fps);
video.start();
}

とすることで，シミュレーションの際にはリアルなカメラをnewしないでおき，シミュレーションのコードでnewした仮想カメラをsetCapture(capture);します．

draw()の中で仮想カメラ／リアルカメラからの画像を読み込みますが，

if(realDeployment == true)
video.read();
else
video.loadPixels();

として仮想カメラ／リアルカメラを使い分けています．他の部分は元のソースコードと同じです．こうした実装をすることで

• 仮想カメラからの入力を仮想ディスプレイに出力
• リアルカメラからの入力を仮想ディスプレイに出力

を行ったり来たりしながらプロトタイピングを行い，最終的には

• リアルカメラからの入力をリアルディスプレイに出力

するという形でプロトタイピングを進めることができる，というのがProcessinglueの大きな特長になっています．

https://github.com/yasutonakanishi/Processinglue

Processingはインタラクティブなシステムのプロトタイピングやメディアアートの制作に良く使われるJavaベースのプログラミング環境です．公式サイトでもProcessingを使った作品がたくさん紹介されています．

Processingを使って作品を作るといっても，Processingが動いているパソコンをそのままポンと置くことはほとんどないと思います．カメラやセンサやモータを使ったり，プロジェクタや大きなディスプレイを使うことがほとんどです．そうした時に，コンピュータで何度も試行錯誤してから実際に展示してみると，思った通りには動かなかったり，映像の大きさや動くスピードから感じるものが画面の時とは違う…（それが良い方向に転ぶ場合ももちろんあります）という事が結構あるものです．

そこで，作品が空間に置かれた様子をシミュレーションしながらプログラミングを進められるような環境である”CityCompiler”というライブラリをこれまで作ってきました．
jMonkeyEngineというゲームエンジンの中で動く仮想のディスプレイやプロジェクタ，仮想のカメラやセンサを使って，Processingが動く様子をシミュレーションできるというものです．CityCompilerの使い方や使った例などはこちらへ．
　CityCompilerワークショップ「空間をプログラミングしよう！」向け資料
　CityCompiler Examples on vimeo

CityCompilerを使ってProcessingのシミュレーションをするにはjMonkeyEngineをちょっと理解しないといけないので，それが少しハードルになっていました．

Processing2.0がOpenGLを全面的に取り入れたこともあり，CityCompilerと同じような仮想カメラと仮想ディスプレイをProcessingで実装したのがProcessinglueです．
Glueは糊のことですが，ProcessingをProcessingにくっ付ける糊，というイメージで名前を付けました．これでProcessingをシミュレーションするのにProcessingの知識があればOKになりました．

FlatDisplay Test0 from Yasuto Nakanishi on Vimeo.

このムービーではProcessingのExamplesにあるDistance2DというPAppletを仮想ディスプレイに表示して，それをお姉さんが見ている様子をシミュレーションしています．シミュレーションを始めると，「ディスプレイを回してみるとどうかな？」「回るディスプレイにどんなProcessingを表示するとオモシロいかな？」「横長と縦長だったらどう違うかな？」なんて事を考え始めるようになります．Processinglueを使えば色々なアイデアをシミュレーションしながら発展させることができます．

仮想ディスプレイを実装するにあたってキーになるのはPAppletの
public void registerMethod(String methodName, Object target)
というメソッドです．

PAppletの中でdraw()メソッドが初めて実行される時や実行された直後，スケッチが停止したり再開した時，mouseEventやkeEvent,touchEventが起きた直後などに，呼んでもらいたいオリジナルのメソッドをPAppletに登録することが出来ます．

仮想ディスプレイは，表示するアプレットのdrawメソッドが呼ばれた直後に，いま描かれたホヤホヤのpilxels[]の中身をコピーしたPImageを作る，ということをします．
表示するアプレットが描画をする度にPImageを作り直し，そのPImageをP3Dの中にテクスチャとして表示することで，Processingが動く様子をP3Dの中で見ることができます．

テクスチャの貼り方を変えるだけで円柱型ディスプレイや曲面ディスプレイも簡単に作れます．なのでこれらは平面の仮想ディスプレイのサブクラスとして作りました．

BezierDisplaysScape

CylinderDisplays Test

マウスによるインタラクションがあるPAppletは別ウィンドウを作って表示するオプションをtrueにして，普通のPAppletと同じようにそのウィンドウをアクティブにしてマウスを動かします．
マウスの動きに応じて作り替えられたpixels[]が毎フレーム毎にコピーされてテクスチャとして貼り直されるので，マウスの動きがシミュレーションにも反映されます．↑の円柱ディスプレイのサンプルがそうした例になっています．

Processingの開発環境であるPDEは一つのフォルダにPAppletが一つだけあるという前提を置いているので，PAppletを複数使うProcessinglueはPDEでは実行できません．そのためEclipseを使って開発を行います．ソースコードを含んだプロジェクトをGitHubに上げてありますので，ぜひ一度試してみてください．

https://github.com/yasutonakanishi/Processinglue
https://github.com/yasutonakanishi/Processinglue/archive/master.zip

仮想カメラについては次のエントリーで紹介したいと思います．

ワークショップも今週末に迫ってきました！

サンプルを色々と追加しているところです．
・変わったカタチのディスプレイを作る ＋それに表示する映像も一緒に考える
・ディスプレイの数を増やしてその配置を考える＋それに表示する映像も一緒に考える
・プロジェクションする有名な建築などを考える＋それに表示する映像も一緒に考える
といったところから参加いただく皆さんとアイデアを膨らましたいと思っています．

そうした例をまずはちょっと作ってみました．

モフモフした球体を描くアプレットがあったので，球体のディスプレイに貼付けてみました．アプレットへのマウスのインタラクションも球体ディスプレイに反映されます．思ったのと違った感じで貼付けられたのですが，ちょっと羽っぽくもあり，立体的な太極図みたいでもあり，試しに水面の上に置いてみたのですが，ちょっと不思議な感じがしたので，球体ディスプレイも回転する様にしてみました．

SphereDisplayOnTheWater from Yasuto Nakanishi on Vimeo.

水面に球体が浮かぶのが面白かったので，ディスプレイをたくさん水の中に入れてみたくなりました．宮島達雄さんの作品のような黒いディスプレイに赤い数字を表示させてみました．複数のアプレットを管理するクラスを作り，Timerで表示を切り替えるタイミングをあわせています．上のサンプルでは水面に波が立たないようパラメータの値を設定しましたが，今回は少し水面を揺らしてみました．実世界でこうなるかどうかは分からないのですが，水面に反射する画面と水の中の画面がゆらゆらと両方見える感じがオモシロいと思いました．

SynchronizedDisplaysOnTheWater from Yasuto Nakanishi on Vimeo.

東京駅のリニューアルオープンのイベントでプロジェクションマッピングが行われたのは記憶に新しいところです．お金と名声？がないとあぁした機会を得ることは難しいですが，仮想空間の強みを活かして僕もやってみました．Google SketchUpの3Dギャラリーにあった東京駅をダウンロードして配置します．プロジェクタの配置がしやすいように，xyz軸に合うように東京駅を移動・回転している内に，東京駅と皇居との関係が明確になるような映像を表示したいと思いました．たまたま使ったパーティクルのPAppletを仮想プロジェクタで投影してみたら，東京駅から皇居外苑に入る行幸通りにうまい具合に光の道を作ることができました．

ProjectionMapping on TokyoStation from Yasuto Nakanishi on Vimeo.

CityCompilerを使って仮想空間でシミュレーションを色々とやってみると，「予期せぬ発見」をすることがあります．それを下にアイデアを膨らませていくのがけっこう楽しいです．妄想したイメージとは違うイメージが現れることで，またイメージが膨らむんですよね．どんな想像やイメージが現れるか，楽しみです．