Kinectをデジタルサイネージに利用するハックの第一弾です。
Visual C# 2010 Express と XNA Game Studio 4.0、そしてKinect for Windows SDK Beta2を使用して制作します。
今回は第一弾という事で、非常にシンプルではありますが、
「人が居る・居ないを判断して画面表示を変える」プログラムを作ってみたいと思います。
Kinectで人が居るか居ないかを判断するには、骨格トラッキングの他に深度カメラのプレイヤーインデックスを利用する方法がありますが、骨格トラッキングは人がKinectの前に入ってから骨格の認識をするまでに時間がかかる上に同時に2人までしか認識できないので、今回は人の認識が高速で同時に6人まで認識できる深度カメラのプレイヤーインデックスを利用します。
例えば、デジタルサイネージを見ている人が居ない時にはCM動画等をループ再生させておき、人が近くに来たら操作画面に切り替える。といったシチュエーションで役に立つのではないかと思います。
Read More
Kinectのスケルトントラッキングで取得した関節の座標データは、生の値をそのまま使ってしまうと取得の際の誤差等ですこしカクカクしてしまいます。
Kinectに限らずセンサーで取得したデータを使用する際には、過去数フレーム間の平均値を使用してスムージングをかける事がしばしばあります。いわゆる「丸める」というやつです。
そこでKinectのスケルトントラッキングの値も同じようにスムージングをかけようとしていたのですが、調べてみるとKinect for Windows SDKには初めからスムージングの機能が用意されていたのでメモしておきます。
人が居る・居ないを判断して画面表示を変える のTipsでも同じような事をしていますが、
Kinect SDK + VisualC# + XNA で、必要最低限の人数をカウントするソースを書いておきます。
もっとシンプルなやり方あるかも？
もしあったら教えてください・・・。
Read More
今年のSIGGRAPHで展示されていた作品から、私のお気に入りをご紹介致します。
Recompose from Matthew Blackshaw on Vimeo.
■Recompose
Kinectを使用した3D彫刻が出来る作品。
単純に手で操作できるだけでも楽しいデバイスなのに、プロジェクションマッピングを利用することで、
操作もグラフィカルで楽しい作品になっています。
リニアモーターを使ってピンの高さを変えているみたいなのですが、このあたりの技術詳しく知りたいですね。
MoleBot: Mole in a Table from Woohun Lee on Vimeo.
■MoleBot
もぐらを表現した作品。
もぐら本体は出てきませんが、ぽこっと盛り上がる面を見てるとなんだかだんだん可愛らしく見えてきます。
動画の後半を見てもらうとわかるのですが、このもぐらを使った新感覚のゲームまでできるみたいで、
すごく面白いし、新しい表現方法だなぁと感心してしまいました。
■POCOPOCO（首都大学東京）
POCOPOCOシーケンサ。
その名の通りポコポコっとボタンが飛び出て音を創りだすことができる作品です。
完成度がとても高くそのまま商品として売りだせますよねこれ。もちろん今のままではコストが掛かり過ぎるとは思いますが。
最初はTENORI-ONっぽいなぁと思いましたが、やっぱり物理フィードバックがある作品は楽しいですし、
ポコポコ飛び出る作品を見ているだけでも飽きないですね。
■InteractiveTop（電気通信大学小池研究室）
コマを使った作品とは、日本人ならでは発想ですよね。
コマがぶつかり合うと派手な音やエフェクトが出るという、
まさにアニメの中のベイブレードを具現化したような作品です。
コマの回転速度もコマの隣に表示されるみたいですね。ライフ表示みたいで面白い。
技術的にはコマの下部に取り付けられた4つの赤外線LEDを台のしたの高速赤外線カメラが撮影しているようです。
さらに赤外線の部分と、台に偏光版がはられていて、高速に回転するコマほど早く点滅するようにカメラに映るようです。
そして、手に持っているコマ回し機？みたいなのを近づけると回転速度を上げたり、コマを誘導したりできるようです。
偏光板で回転数を取得するとか、回ってるコマの回転数を上げるとか、発想がすばらしい。
またお気に入りの作品が増えたら紹介していくことにします。お楽しみに。
■VJ（Visual Jockey）
VJは「Visual Jockey」の略で、DJが音楽をMixして流すように、映像をリアルタイムでMix(もしくは生成)してイベントで流す役です。
主にDJのプレイを演出し盛り上げる、照明さんと同じような裏方ですね。
-----
私がVJを初めて8か月が経ちますが、今まで17のイベントに出演してきました。平均したら月2回以上になりますねー。
そんなにたくさんイベントに出てきたのに、今まで自分のVJプレイ映像って今までちゃんと残した事がなかったんです。
・・・が、この間の5月7日（土）に出演したLow Pitch × 80KIDZ “Weekend Warrior” Release Tour @ MANIERでは、イベントがイベントだけにちゃーんと映像を残して頂いてたみたいです
↓こちらがその映像。この日はVJは2人で同時にやってました。
80KIDZという有名アーティストのリリースツアー最終日ということで当日は入場制限がかかるほどの多くのお客さんが来てくださいました。80KIDZさまさまです！
イベントの写真を撮っていただいていた方のブログで当日の雰囲気がわかると思います
http://ameblo.jp/camelife-org/entry-10890849829.html
自分のVJプレイ映像ちゃんと見るのも初めてなので少し恥ずかしいけど、やっぱりVJやってて映像が音楽の雰囲気と完璧にシンクロした時は最高に楽しいですね。もっとレベルアップして行きたいです！
最近はプログラミングVJに転向すべく、openFrameworksでVJのプログラムをいじったりしてます。
目指すは来場者参加型VJですね！
Xbox360用モーションコントローラー Kinectが日本で発売されてから3週間が経ちました。
Kinectはコントローラーや装置を一切身に付けず、体だけで操作ができるようになるモーションコントローラーで、Xbox360用にMicrosoftが開発したデバイスですが、内蔵されたセンサ類によってプレイヤーの３次元的な位置の取得や声＆顔認識、さらには体勢のトラッキングまでできてしまう夢のようなデバイスです。
USB接続ということもありPCに接続して操作のできるドライバがユーザーによって開発されてオープンソースで公開されているので、15000円ほどで誰でも最新の技術を使って開発ができてしまいます。
今では世界中でKinectの様々な使い方が開拓されていますので、私の気になった物の一部をご紹介させていただきます。
↑記事の上下にあるバー（文字以外の場所）をクリックすると記事を折りたためるようにしました。
久しぶりの更新ですが、最近javascriptを触るようになり、fc2ブログでもjsを使う方法がわかったので実装してみました。
使ったのはjQueryというJavaScriptライブラリですが、これを使えばWeb上で見かける動的な演出を簡単に使う事ができるようです。本当に簡単なのでその方法を解説していきたいとおもいます。
①jQueryをダウンロードする。
公式HP(http://jquery.com/)からjQueryをダウンロードして適当な場所に保存。(ファイル名はjquery.jsとします)
②保存したjquery.jsをサーバーにアップロードする。
■普通のサーバーで使用する場合
FTPソフト等で自分のホームページと同じ場所へアップロードする。
フォルダを作って/js/jquery.jsとかにしてもOK
■fc2ブログで使う場合
管理ページ＞ファイルのアップロードからjquery.jsをアップロードする。
アップロードしたパス（アドレス）をコピーしておいてください。
③htmlにjQueryを参照するタグを追加する。
HTMLの<head>タグの中に
<script type="text/javascript" src="○○○○○/jquery.js"></script>
と追加して、先ほどコピーしたアドレスを○○○の部分へ入れてください。
④続いて反映させたい効果を書いていく。
今回はこのサイトにも実装した、スライドトグル（折りたたみ）をつけてみたいと思います。
とりあえず<head>タグ内の先ほど書いた記述に続けて↓の8行を貼り付けてください。
<script type="text/javascript"> $(document).ready(function(){ $("dt").click(function(){ var index = $("dt").index(this); $("dd").eq(index).slideToggle("slow"); }).css("cursor","pointer"); }); </script>
これを解説していきますね。↓↓↓
$("dt").click(function(){
dtをクリックした時に実行する処理ってこと。
var index = $("dt").index(this);
何番目のdtなのかをindexに保存。
$("dd").eq(index).slideToggle("slow");
↑ ↑ ↑
どれか 何番目か 開閉の早さ
となっているのでこの文だと･･･
「dtがクリックされたら、index番目のddをslowの速さで開閉する」ということになります。
最後に･･･
⑤HTMLの中で<dl><dt><dd>タグを書く。
<dl> <dt>クリックしてね</dt> <dd> 中身が <br> 開閉 <br> するよ <br> ！！！ </dd> </dl>
試しにこんな感じに書くだけでなんとなんと、アニメーション付の開閉記事がつくれちゃう訳です。
実際に動かすとこうなります↓
ちなみにfc2ブログの記事を開閉したい場合は、
記事のタイトルがクラス「entry_header」、
記事の中身がクラス「entry_body」という名前なので、
名前の前にクラスをあらわす「.」ドットをつけて、
$(".entry_header").click(function(){ var index = $(".entry_header").index(this); $(".entry_body").eq(index).slideToggle("slow");
という感じになります。
これであなたのホームページもひとつ上へレベルアップ！
なんとか研究の方も道が見え始めたので、ここらで過去に作ったボツ作品達を振り返りつつ紹介したいと思います。
こんなWiiリモコンの使い方もあるんだなぁと思いながら見ていただけるといいとおもいます。
■どこでもスクリーン（仮）
壁でも地面でも天井でも、手に持った紙でもなんでもスクリーンにしてしまうというソフト。
スクリーンがまるでそこに印刷されてるかのように追従して動きます。
プロジェクターの映像を変形して投影しているわけですね。
仕組みはこんな感じ。
①Wiiリモコンの位置から赤外線LEDで赤外線を照射。
②紙の端についている再帰性反射材に反射した４点の座標をWiiリモコン先端の赤外線カメラで読み取る。
※再帰性反射材：光源の方向に光を反射させる素材。
③４点に三角ポリゴンを二つ表示し、画像テクスチャを貼り付ける。
･･･と、こんな感じです。
お気づきかもしれませんが、テクスチャを貼っているだけなのでデスクトップぽいのはフェイクです（笑）
実はすでにJohnny Lee氏がもっと色々な物に投影するのに成功していて、その動画を見て感動したので、それを独自実装してみただけです。実装しきれてないですが(´Д｀；)
本当はこの技術を使ってスクリーンを持ち歩きながら遊ぶゲームのような物を考えていたのですが、プロジェクタの投影範囲等色々な問題が出てきたので結局ボツになりました･･･。
■FLASHとWiiリモコンで体感ゲーム
こんなのも作りました。
これは大学のオープンキャンパスで高校生にFLASHでゲームを作らせるためのサンプル的な感じで２，３日くらいで作りました。
プロジェクターの位置にWiiリモコンをスクリーンに向けた状態で設置し、あとは手に持った赤外線LEDで画面のドラ○もんみたいなキャラクターを操作します。
この動画はちょっと古いので移動だけですが、オープンキャンパスで公開した時には弾も撃てるようになって点数も付くようにしました。
単純ですがWiiリモコンの面白さを知ってもらうにはちょうど良いものになったと思います。
■WiiFitを使った何か
ちゃんとしたコンテンツにはなってませんが、WiiFitも組み合わせてみました。
体重移動で中央の機械みたいなのが移動するようになってます。
実際に乗ってみると体の動きにあわせてモデルが移動するので没入感がありましたが、単純なのとこれを使って面白いコンテンツを作るという所で良いアイディアが思い浮かばなかったので結局ボツになりました。
■全身でマリオ
画像はありませんが、WiiFitとWiiリモコンで全身を使って初代マリオブラザーズを遊べるソフトを作りました。
操作方法は、WiiFitの前部分で足踏みすると前進して後ろで足踏みで後退。早く足踏みでダッシュ。
ジャンプはWiiFit上でジャンプ。ファイアーは実際にライターで火をつけるとファイアーを打てるようにしました。
できるだけマリオの気持ちを味わえるように実際の動きに近づけました。
で、実際にプレイしてみるとクソムズイ＆超疲れる！！
思う様に操作できなくて、１－１クリアするのに２０分くらいかかりましたorz…
･･･とまぁ、たかがWiiリモコンですが使い方次第でこんな多様な楽しみ方が出来ちゃいます。
アイディアさえ出れば他にももっと色んな使い方があるとおもいます。なにか面白い使い方が思いついた方は是非ご連絡ください。ｍ(_ _)ｍ
今回はボツになった作品集でしたが、次回は卒研で現在誠意製作中の作品の概要を紹介したいと思ってます。お楽しみに！！
![[Kinect SDK][C#][XNA]人が居る・居ないを判断して画面表示を変える](http://teruaki-tsubokura.com/Lab/wp-content/uploads/2011/12/capture0071.png)