level0をご覧の皆さん、生存戦略ー！　
今週はお休みで寂しいですね。
有明に出奔してる方も多そうですが、構わずエントリです！

ところでこんなデモを作ってみました

iPhoneのBluetoothでコントロールするプロジェクションゲーム from BMCL on Vimeo.

これはなに？

これはサイネージ的に外の施設でプレイすることを想定したゲームのプロトタイプです。画面内にある日記帳を、自機であるペンギンに取りに行かせます。

えっ？ どこかで見たことのある設定だって？
それはきっと、運命による偶然です。

ペンギンを移動させるためには、りんごを使います。
りんごには果たしてどういう意味があるのか・・

自分の端末で楽しむシングルモードと、サイネージを利用して楽しむバトルモードがあります。
バトルモードの時は、IPhoneの操作で壁面のペンギンを操ります。

BlueＴoothなら誰でも参加できる(比較的)

さて、今回のプロトタイプで重要だったのは、通信方法です。
このように、店舗やイベントなどのリアルスペースで楽しむコンテンツは、ネットとの接点をいかに持つのか？twitterアカウントとかスマホアプリとどうつなげるの？ということがしばしば重要になってきます。
幸いなことに、iPhoneにはこういうリアルスペースで活躍しそうな近距離無線通信の機能があります。それがBlueTooth。
BlueToothのいいところは、Wifi接続やソケットサーバ抜きで簡単に同時通信できてしまうところ。
何も考えずにとりあえずスマホにアクセスできてしまうわけです。
これを使えば解決！？　と思いきや、、
当然ながら、iPhoneはBlueToothを使ってPC（今回はMac）と通信します。
Macの側にもBlueToothの通信機能はついているのですが、MacとiPhoneがBlueToothを使ってシリアル通信をする方法はどうやらないようなのです。もしかしたらあるのかな・・　自分が探した限りではJailBreak以外は見つかりませんでした。

Mac側のBlueTooth通信方法

ではMacとiPhoneで通信することは難しいのか？
そんなことはありません。もともと、iPhone同士やiPad同士だとBlueTooth通信は簡単にできるのです。
そう、通信の仲介役に１体、iPhoneなりiPadなりを用意してあげればいいのです。 仲介役とMac間は、Wifiの環境さえあればOSCなり何なりでつなげちゃいますしね。

まとめと展望

さて、結果は冒頭の動画のとおり、iPhoneのGameKitフレームワークを使うことで、多人数プレイ可能な通信が実現できました。
また、ちょっと心配だったWifi通信とBlueTooth通信の並行も特に問題なく、遅延を感じることのない操作が実現できています。
これで、iPhoneさえ持ってればだれでも参加可能で、電子の世界に爪痕を残せるサイネージコンテンツが作れますね。夢が広がります。
ただ１点気になる点としては、通信を実現するために独自のアプリが必須であるということ。
サイネージを触るだけためにアプリをインストールする、ということはなかなか考えにくいので、
単体で遊べるアプリがあった上で楽しめるリアルコンテンツ、という状態で初めて成立する感じになります。が、それはそれでなかなか敷居が高いですね・・

Bluetooth通信で参考になったサイト

さて、前置きが長くなりましたが、iPhoneとBlueToothで通信させる時に参考になったサイトです。

GKTank

http://developer.apple.com/library/ios/#samplecode/GKTank/Introduction/Intro.html
Appleから出ている、BlueTooth通信の対戦ゲームのサンプル。
ゲームの状態の情報をどうやりとりするか、というところがこのサンプルから知ることができます。 また、普通にBlueTooth通信で動くサンプルなので、これだけで基本的なところが全て実装されていることになります。

Game Kitプログラミングガイド（pdf注意）

http://developer.apple.com/jp/devcenter/ios/library/documentation/GameKit_Guide.pdf
GameCenterの機能など、GameKitを包括的に解説する資料です。
パートII ピアツーピア接続の章で、ピアやセッションの概念などのGameKitを使った BlueTooth通信における概念についての解説が詳しく書かれています。

Gamekitを使ったiPad - iPhone間のBluetooth通信 - Meltdown Countdown

http://d.hatena.ne.jp/marutanm/20100721/p1
iPhoneのBlueTooth通信で多人数参加にしたい場合、「GKPeerPickerController」を使ってしまうとこれができません。 GKTankは「GKPeerPickerController」を使っていて一対一通信のため、一体多通信の部分をアレンジする必要があります。 こちらのサイトに書いてある手順で実現できました。

すれ違い通信アプリ開発で得たBluetoothの知見まとめ - Over&Out その後

http://d.hatena.ne.jp/shu223/20110220/1298223410
弊社プログラマつっつんがアプリ「EncountMe」でBlueTooth通信を使った時の解説エントリです。 GameKitでのBlueTooth通信について色々と、特にGKPeerPickerControllerを使う場合／使わない場合についても解説されています。

openFrameworks

http://www.openframeworks.cc/download
さて、やっぱり今回もopenFrameworksです。 今回、仲介役のiPadにはBlueToothのサーバになってもらいつつ、MacとOSC通信をしています。 OSCの部分はoFのofxOSCアドオン、BlueTooth通信はGameKitを使っています。 Objective-Cのファイルとc++（oF）のファイルを混在してコンパイル可能だったため今回の仕組みが実現できたというわけです。

こんにちは。NUI(Natural User Interface)への好奇心が止まらない原です。

ところでこんなゲームを試作してみました

Kinect for Windows SDK GAME Test from BMCL on Vimeo.

止まらない好奇心がゆえに、Kinect for Windows SDKを使ってこのようなゲームの試作品を作ってしまいました。往年の名作「ナイツ」風に並んでるアイテムを飛行しながら拾っていきます。
基本的な操作は、過去に作った「電脳空間システム」を流用しておりますが、何より大きく変わったところはこのポーズがいらなくなったことです。




映像を見てもらうとお分かりになると思いますが、ユーザが切り替わる時に何のポーズも取っておらず、瞬時にコントロールが取れています。

この体験を実現しているのは、Microsoftの公式SDK、Kinect for Windows SDKです。

Kinect for Windows SDKってなに？

Microsoftが発表した、Kinectを使ったアプリを作るための開発キットです。 電脳空間の時に使っていたOpenNIとの大きな違いは、
・ポーズを取らずに骨格が取れる
・首振りができる
・音声が取れる
ということ。

ダウンロードはこちらから。
http://research.microsoft.com/en-us/um/redmond/projects/kinectsdk/download.aspx
リンク先にも書いてありますが、開発するにはWindows7、およびVisual Studioが必要です。
また、仮想環境では動かないのでご注意ください。

こんな環境で作りました

一応大まかな構成を説明いたしますと、

図のようなかたちで、Kinectの情報はWindowsPCおよびKinect for Windows SDKで、ゲーム本体の方はMacおよびopenFrameworksで作成いたしました。 WindowsとMac間でOSC通信させ、骨格情報をゲーム側に伝えています。

Kinect for Windows SDKを使う時に参考になるサイト

さて、デモを試作するにあたって色々なサイトを参考にしましたので、こちらでご紹介いたします。

Kosaka laboratory Interactive System　tips

http://www.kosaka-lab.com/tips/
XNAでkinect for Windows SDKを動かすサンプルコード多数。今回試作したkinectコントロールの部分はKinect SDK XNAで骨格情報の取得　その１の記事を参考にさせていただきました。

かおるんダイアリー

http://d.hatena.ne.jp/kaorun55/
Kinectセンサープログラミングの著者、かおるんさんのブログ。OpenNIの解説も多く書かれており、kinectドライバの現在がよくわかります。

Kinect for Windows SDKとOpenNIの比較

http://d.hatena.ne.jp/kaorun55/20110606/1307331384
かおるんさんのブログより、２つのkinectコントローラの比較。

channel9 coding for fun

http://channel9.msdn.com/coding4fun/kinect
MS公式のデベロッパコミュニティサイト。kinectの事例たくさん

川西 裕幸のブログ

http://blogs.msdn.com/b/hiroyuk/
kinectカテゴリで、Kinect for windows SDKの有用なサンプルが紹介されています。特にCodePlex：Kinect Audio Positioningの記事では、他ではあまり見られない音声による位置検出が紹介されており、必見です。

Kinect for Windows SDK FAQ - Microsoft Research

http://research.microsoft.com/en-us/um/redmond/projects/kinectsdk/faq.aspx
英語ですがkinectを使う際の注意点をまとめており、ライセンス的なNGを知りたい時には こちらのfaqから判断することができます。

Making Things for .NET

http://www.makingthings.com/resources/downloads
kinectとは違いますが、kinectの信号をoFに伝えるために重要だったのがこちらのライブラリ。 OSCをC#で扱うことができます。
これでkinectの座標データをOSCでMacに送り、oFで読み取っていました。

openFrameworks

http://www.openframeworks.cc/
言わずと知れたopenFrameworks。ゲーム本体部分はこちらで作成しています。

ということで

Windows PC必須ですが、kinect for Windows SDK はOpenNIに比べて導入がとても簡単でした。また、キャリブレーションのポーズがない、というのはそれだけで圧倒的な体験の違いをもたらします。
これらのサイトを参考に、みなさんもレッツNUI！

さて、前エントリで光の女神プロジェクションについて紹介させていただきましたが、
今回はそれをどうやって作ったかについて解説いたします。
普段ではやらないようなDIYな作業が多かったので、文化祭のようでなかなか楽しかったです。

さて、まず今回のソースは一式githubに上げちゃいました。
https://github.com/haramakoto/MuseofJiyugaoka
興味ある方は見てみるとよいかと思います。

アプローチ

今回は「服状のものに投影したら色々いい演出ができるんじゃないか」という考えから出発しています。
服状のものに投影するということは、
・服が必要
・できるだけリアリティを出すためには複数台の投影、マッピングプロジェクション的な調整が必要
ということになります。

概要

図のような感じで、２カ所から映像を投影して中央の服に表情をつけます。

 

服

投影用の服ですが、今回は「ターポリン」というテントに使われるシートを使っています。
この素材が探しうる限りでは最も投影に適した（というかスクリーン用によく使われる）ものでした。
あとはフリーダウンロードの服の型紙を探し、型紙の裾を無理矢理引き延ばしたものを作り、
型紙の形状に沿ってシートを切り取ります。
高さ3mはなかなかの重量となるため、服の接合部はそれなりに丈夫である必要がありました。
今回は接合部にハトメ玉を打ち、接合には内径2mmのカードリングを用いて楽に着脱できるようにしました。
そこそこハードな扱いでも壊れなかったので、この方法で間違いなかったようです。

２画面打ちのプロジェクション

今回は立体に投影することもあり、複数台のプロジェクタによって多面をカバーすることは必須でした。
問題はどうやって複数画面に出力するかですが、今回は２台のMacからそれぞれ映像を出力するという方法を取っています。
これは、
・１台で２レンダリング走らせるのが処理能力的に怖い
という理由につきます。イベントで投影するため、途中で落ちるという可能性はできるだけつぶしておきたかったというわけです。
２台のMacからの出力でつじつまをあわせるために、下記のような工夫をしています。

3Dオブジェクトを表示し、半分ずつレンダリングする

２つのマシンで１つの物体を表現するのだから、２つのマシンで同じプログラムを走らせ、片方は前半分、もう片方は後半分を表示すればいいわけです。
今回は服に合わせて3Dオブジェクトを作成し、テクスチャをアニメーションさせているので、要するにレンダリングを半分ずつ分ければいいということになります。

ifdefを使って、「_CONTROLLER」が定義されていたら前半、立ってなければ後半をレンダリングし、カメラの位置もそれぞれで調整するようにします。

testApp.cpp冒頭

https://github.com/haramakoto/MuseofJiyugaoka/blob/master/MuseJiyugaoka/src/testApp.cpp

#include "testApp.h"
#define MAP_X 512
#define MAP_Z 512

#define _CONTROLLER

「#define _CONTROLLER」をコメントするしないで処理が分かれるようにします。

あとは、２台のマシンをクロスケーブルでつなぎ、
ファイル共有状態にして、メインマシンでサブマシン用のビルドを作成し、サブマシンのドロップフォルダに送ります。

ただし、これだけでは不充分です。

ofxOscを用いてオブジェクト位置の同期をとる

同じプログラムとはいえ別のビルドが別のマシンで動くので、表示している内容はだんだんずれていきます。
なので、定期的に同期させる命令を書きます。
マシン間でやりとりする時には、ofxOscが便利です。

ofxOscのおおまかな使い方を書きますと、

ofxOscSender（送る側）とofxOscReceiver（受け取る側）のインスタンスを作る

•  ofxOscSender sender;
•  ofxOscReceiver receiver;

送る側は相手のipアドレスとポート番号を指定する

• sender.setup("111.111.1.111",3001);

受け取る側はポート番号を指定する

• receiver.setup(3000);

senderでパラメータを送る

• ofxOscMessageインスタンスに名前と引数を設定してsender.sendMessageに渡す、というかたちになります。
• ofxOscMessage m;
• m.setAddress( "/texChange" );
• m.addIntArg( 0 );
• sender.sendMessage( m );
   

receiverでパラメータを受け取る

• updateのメソッドで
•  
• while(receiver.hasWaitingMessages()){
•      ofxOscMessage m;
•      receiver.getNextMessage(&m);
• }

• を走らせます。
• getNextMessageをはreceiver中の複数のメッセージを１つずつ取り出すので、こうしてhasWaitingMessagesの条件でwhile文を走らせることで、全てのメッセージを取り出しています。
•  
• 受け取った場合には
•  
• if ( m.getAddress() == "/texChange" ){
•      texIndex = m.getArgAsInt32(0);
•      textureChange(texIndex);
• }
• のようにして、sendの時に設定した名前によって処理を分けます。
• ちなみにm.getArgAsInt32(0);とあり数値をしていますが、これはリストの番号になっていて、
• 複数指定している場合は番号の指定を変えてアクセスすることで全て取り出すことができます。

ofxOscを使っている処理は、全てtestApp.cppに書いています。

https://github.com/haramakoto/MuseofJiyugaoka/blob/master/MuseJiyugaoka/src/testApp.cpp

また、ofxOscについての解説は
openFrameworks中級編4：アドオンを使う3 - ofxOsc | yoppa org の記事が詳しいです。

アニメーションの貼り付け

さて、今回はテクスチャにはりつける画像をアニメーションさせていますが、具体的にはこのようなプロセスになります。
２次元のアニメを走らせる→oFの画面キャプチャを取る→oFの画面をクリアする→3Dオブジェクトを描画し、画面キャプチャを貼付ける
スクリーンのキャプチャはofImageのインスタンスにgrabScreenのメソッドを走らせると取ることができます。

_ofimage.grabScreen(0, 0, 800, 600);

最初はこの方法を知らずに悩んでいました。結局のところ、oFにはFlashのようなSpriteの概念がないので、（ofImageがBitmapに近い概念ではありますが）作成したアニメーションを簡単に3Dテクスチャにはできないのではないかと思われます。

この処理はCloth.Appの362行目にあります。

https://github.com/haramakoto/MuseofJiyugaoka/blob/master/MuseJiyugaoka/src/cloths/Cloth.cpp

アニメーションの調整

今回は相手が布ということもあり、投影物を3Dモデルで再現したものを投射、ということまではできていません。なので、そのままではどうしても投影にはずれがでてきます。
そこで、双方の3Dモデルのつなぎめの端点をキー操作で移動できるようにしておきます。

これで最後のずれの微調整ができるので、「２投影には見えない程度の」見た目のつじつまは合わせられたようです。

この処理はCloth.cppの94〜110行目あたりになります。

https://github.com/haramakoto/MuseofJiyugaoka/blob/master/MuseJiyugaoka/src/cloths/Cloth.cpp

まとめ

今回、技術的に一番の収穫はスクリーンキャプチャをテクスチャに貼る方法がわかったこと。
これでかなり手軽にマッピングプロジェクションにアプローチできる予感がします。
しかし、実はこの方法は手軽でいい方法である一方で、あまり安定しない方法でもあります。
プログラム実行中にウィンドウの状態が変わる（移動、隠すなど）と表示が壊れてしまうのです。
冒頭あたりで書いた、「パフォーマンス中に壊れない」というポリシーからはかなり反するので
できれば他の方法がいいですが、現状わかっている範囲ではこれが一番有効な方法になるのでした。

年の瀬も押し迫ってきました昨今、皆様いかがお過ごしですか。
haraです。

今回は、先日12月5日に自由が丘で投影いたしましたインスタレーションを紹介いたします。

このコンテンツは、自由が丘駅前で行われたクリスマスイベントで展示されたものです。
高さ約3mのドレス状に組まれたシートに対して映像を投影し、ゴスペルコンサートの
賑やかし要素として入れさせていただきました。

基本的に「女神のドレスが変容していく」という設定で映像を展開し、
最後はクリスマスツリー風の演出で締めくくりました。

普段あまり見かけないビジュアルに仕上がったので、街の皆様にはいつもと違う夜を体験いただけたのではないでしょうか。

実装はopenFrameworksを用い、プロジェクタはEPSONのEB-G5350を使っています。街灯が明るい中でしたが、特に問題とならない明るさ・鮮やかさが出ていると思います。

詳しい技術解説については、また後日投稿いたします。

こんにちは、haraです。

今回はopenFrameworksとプロジェクションマッピングという、およそFlasherにはなじみがあるのかないのかわからないテーマについて紹介します。

プロジェクションマッピングって？

プロジェクションマッピングとは、ビルとか車のような、実在する物体があたかも「変性」したり「拡張」しているように見えるように、映像をプロジェクションして見せるコンテンツのジャンルの名前です。（大意）
 

海外ではよくやられているようで、ちょっと紹介させていただくと
こういうのとか
 

こういうのとか

あるいはこういうのとか。すごいですね。

P.O.P. | 3D video mapping | experimental study from urbanscreen on Vimeo.

インターンのいぶくろくんのブログに詳しく解説があるので、ひとまずこちらをご確認を。

http://d.hatena.ne.jp/asus4/20090514/1242330024

 

openFrameworksって？

http://www.openframeworks.cc/

主にメディアアートやパフォーマンスでの使用に特化されたC++のライブラリです。
processingとほぼ同じ記法、構成で組む事ができて、導入はとてもお手軽。
さらに出版されている日本語の参考書には、OpenCVやらBox2Dやらがセットになったサンプルの解説があるので
http://openframeworks.jp/download.html
特に何も考えなくてもすごいコンテンツが作れちゃうようなチート感すらあります。
 

ちょっと前にやくしまるえつこのPVで使われていて話題になっていましたね。

openFrameworksのサイトに作品ギャラリーがあります。

http://www.openframeworks.cc/gallery

 

プロジェクションマッピングの第一歩

このプロジェクションマッピングっていい概念ですね。
ちょっとした工夫で世界が違って見えてくる、最近はやりのARと近いというか、ARの実現方法の１つという感じでしょうか。
よくある「モニターごしのオーバーレイ映像」（iPhoneのカメラと組み合わせてるやつとか）と違って多くのユーザに配布することはできないですが、 １カ所で見せるものとしてはこの方法の方がずっと「現実拡張感」がありますね。

これはぜひぜひやってみたい！ということで、openFrameWorksでプロジェクションマッピング、いやプロジェクションマッピング的な？現実拡張なコンテンツの実験をしてみました。それがこちら。

ART-Meterで飾ってる絵に、あら不思議、映像であるはずのボールが跳ね返ってますねー不思議ですねー・・

まあ、普通にFlashをやってるかたであれば、これが単純にBox2Dの領域を絵の場所にあてただけだ、ということはすぐにわかるとは思います。
でも、たったこれだけでも不思議と現実が拡張されたような、ダイナミックな面白さが発生するのがプロジェクションマッピングのいいところなのだと思います。

インスタレーション

さて、今回紹介したのは実験でしたが、来週の日曜日と月曜日、この実験をもとにつくりましたARToysというインスタレーションをART-Meterに設置します。
 

AR と ART のおもちゃシリーズってことで。
この日は自由が丘女神まつりという、イベントもりだくさんのお祭りが自由が丘で開催されます。
http://www.jiyugaoka.or.jp/index.html
ぜひぜひ遊びに来てくださいませ。