第71回Smalltalk勉強会でのLT内容(後編)

12/25に年末恒例のSmalltalk勉強会があり今年も参加してきた。昨年はビデオ参加で他の方の発表がちゃんと聞けなかったのだけど、今年はいろんな方の発表が聞けて多いに楽しんだ。
せっかくのチャンスなので自分も発表をしたけど、他の方の真面目な取り組みに対してかなり緊張感のない内容で申し訳なかった。
パワポなども一切持って行かずにその場でのぶっつけデモだったので、せめて発表内容についての簡単な説明をしてお詫びしたいと思う。

なお、記事が長くなりすぎたので、前編・後編に分けて公開する。

LTでは前半にRoassal3dのデモを行い、後半はLeapMotionと接続するデモを行った。
別にLeapMotionでなくとも良かったのだが、他にネタが思いつかなかったのとデバイスが小さく持ち運びやすかったから選んだに過ぎない。
LeapMotionはKinectのように人体の位置を測定する入力デバイスであるが、Kinectと異なる点は身体全体ではなく、肘から指までの測定に特化していることである。
LeapMotionはSDKが公開されており、自分のアプリケーションと連携させることができる。

Roassal3dの準備とFluoのインストール

今回の内容を再現するには、第71回Smalltalk勉強会でのLT内容(前編)に従って必要なパッケージをインストールする必要がある。

LeapMotionとの接続

Pharoとの接続については、前回の記事でインストールしたFluo DevicesにNativeBoost経由でデータを得るパッケージを組み込んであるが、NariveBoost用の共有ライブラリは別途インストールする必要がある。
まだ開発途中でMac OS X版しか作成していないため、ここから直接共有ライブラリ(NBLeapMotion.dylib)をダウンロードする。
ダウンロードしたらMac版のPharo VMのフォルダを開き、Contents/MacOS/Pluginsフォルダの中にダウンロードしたNBLeapMotion.dylibと、LeapMotion SDKに含まれているlibLeap.dylibをコピーしておく。

動作確認

LeapMotionをPCに接続し、メニューバー上のインジケータが緑色に変わったことを確認したら、Fluo上での動作確認を行う。
左側のメニューからloadをクリックしてNBLeapMotionTest1を選ぶ。

NBLeapMotionTest1
NBLeapMotionTest1

左側のメニューからopen allをクリックしてノードをスタートさせてLeapMotionの上に手をかざすと、LeapMotionFingerBehaviorのプロパティボックスに読み取った指や掌の位置が表示される。

LeapMotionFingerBehavior
LeapMotionFingerBehavior

手の動きにあわせて立方体を動かす

後半のデモのハイライトは、LeapMotionで読み取った手の動きに従って、Roassal3dの3Dビュー上の立方体を動かすというものであった。
このデモはRoassal3dのサンプルを改造しながら行っていった。
まず、Roassal3dDemo1をloadしておく。次に、LeapMotionに関係するプロキシであるNBLeapMotionProxyを追加し、さらに階層的なデータを取得するトピックであるNBLeapMotionTopicを追加する。トピックからどんなデータが得られるかを調べるためにInspectBehaviorも追加して下図のように接続しておく。

LeapMotionFingerBehavior
LeapMotionFingerBehavior

NBLeapMotionProxyのチェックボックスをオンにするとデータの取り込みが始まる。InspectBehaviorのInspectボタンを押すと最初に到着したデータをInspectorウィンドウで調べることができる。dataをダブルクリックすると上図のようにDictionary形式のデータがあり、#id, #left, #rightの3つのキーがあることがわかる。
このトピックはLeapMotionから得られたデータを階層的なDictionaryデータとして送信する機能を持つ。

デモでは右手の掌の座標を用いたので、#right から #palm へとデータを掘り下げる必要がある。
これをFluoのノードで実現するには、DataUnpackBehaviorを用いる。このビヘイビアはDictionaryを分解して、キーの名前のついたアークにデータを送信するというものである。
なお、アークに名前を付けるにはアーク上で右クリックしてadd labelを選べば良い。
DataUnpackBehaviorを用いてグラフを下図のように変更する。

DataUnpackBehavior
DataUnpackBehavior

InspectBehaviorでClearを押して再度データを取り込み直すと、x,y,zをキーとするDictionaryデータが得られることがわかる。

後はこの3次元座標をRoassalに送れば良いのだが、LeapMotionから得られたデータはcm単位で大きいためデータを小さくする。この役割はScaleBehaviroが担う。これは得られた数値データに一定の倍率を掛けて送信するという単純なものである。
不要となったTimerBehaviorやJoystickBehaviorを取り除き、ScaleBehaviorを通してFluoR3AbsolutePositionに接続したグラフは以下のようになる。

LeapMotion to Roassal3d
LeapMotion to Roassal3d

以上のデモが動いたところで発表を終えた。ということで、この記事もおしまい。

(Smalltalk勉強会ではご清聴ありがとうございました)