Interaction Design向けのC++ライブラリ "pocode"

祢次金 佑
エンジニア

2012-02-28 10:21:16

祢次金です。

今回はC++で書かれたオープンソースなライブラリ、pocodeを簡単にご紹介します。
pocodeはPotion社によって設計された、主にインタラクションデザインのためのライブラリであり、プラットフォームとしてはWindows、MacOS(Lion)、iOSに対応しています。オープンソースとして公開されたのは最近ですが、既にいくつかのプロジェクトで利用実績があるようです。

続きを読む »

EaselJSでインタラクティブなグラフを描こう

祢次金 佑
エンジニア

2011-12-04 23:35:36

先日、paper.jsによるグラフ描画について触れましたが、今回はflashのようにcanvasを使うことのできるJavascriptライブラリ「EaselJS」を使ったグラフ描画について少しご紹介したいと思います。

EaselJSでは、ShapeやBitmap、TextといったDisplayObjectをStageにaddChildしてディスプレイリストを作ることで、Stageに紐付けられたcanvasにその内容が描画されます。 ActionScriptに慣れている開発者には馴染みやすいやり方です。onClickなどのイベントハンドラもDisplayObjectごとに設定することができ、アニメーションも勿論可能。

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="easel.js"></script>
    <script type="text/javascript">
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var stage = new Stage(canvas);

        var shape = new Shape();
        shape.graphics.beginFill('#f00').drawCircle(100, 100, 100);
        stage.addChild(shape);

        var label = new Text("hoge", "30px Arial", "#000");
        label.x = 70;
        label.y = 110;
        stage.addChild(label);

        stage.update();
      };
    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="300" height="300"></canvas>
  </body>
</html>

先日の記事と同様、クリックに反応する棒グラフを実装してみました。見た目にはほとんど変わりませんが、EaselJSで実装しています。

bar graph using EaselJS – jsdo.it – share JavaScript, HTML5 and CSS

paper.jsと同じく、プロジェクトサイトにはデモやAPIドキュメントが揃っています。(冒頭の画像はEaselJSによるgameデモのスクリーンショットです。)

paper.jsでインタラクティブなグラフを描こう

祢次金 佑
エンジニア

2011-10-11 15:20:21

canvasベースのベクターグラフィクス描画用jsライブラリとして、既に各所で紹介されているpaper.jsですが、これを、ウェブに載せるグラフの描画に使ってみましょう、というお話です。

続きを読む »

AnaglyphとKinectを使った3DUI

祢次金 佑
エンジニア

2011-09-13 11:11:47

祢次金です。

最近、映画やテレビ、ゲームなど、色々な場面で3Dコンテンツに触れる機会が増えてきました。が、現状は3Dコンテンツは受動的に見ているだけ、あるいは旧来からある入力装置を介して操作する場合が多いかと思います。折角3Dで見えているなら、そのまま手で直接操作するかのようなUIを作れないかと思い、Kinectを使って実験してみました。(つまり、今回もKinectネタです。)

続きを読む »

Kinectでプロジェクタスクリーンをタッチパネル化

祢次金 佑
エンジニア

2011-06-03 22:01:00

祢次金です。

昨年末に話題になったKinectを使って、プロジェクタスクリーンをタッチパネル化するアプリケーションを作ってみましたのでご紹介したいと思います。

Kinect自体の説明については他所に譲りますが、オープンソースのKinectドライバが公開されてから今まで、実に多くの人々がKinectで面白い実験を行っています。Kinectでピアノを作った人までいます。

Kinectは赤外線によって深度情報が取れますので、単なる机や床に対しても擬似的にタッチを検出することができるわけです。
そこで私も先ほどの例に倣い、プロジェクタ画面に落書きをするアプリケーションを書いてみました。

KinectのドライバとしてはOpenKinectを使い、タッチの検出周りの実装にはopenFrameworksとそのアドオンであるofxKinectを使っています。またofxOscアドオンを利用し、検出したタッチ情報をOSCメッセージとして、描画担当のAdobe AIRアプリケーションに送出しています。AIR側でのOSCの受信にはTUIO as3ライブラリを使いました。

大まかには以下のような流れで処理が進みます。

  1. Kinectのカメラ映像の中でタッチスクリーン化したい平面を選ぶ。
  2. 選んだ平面から距離が一定以内にあるオブジェクトを検出。
  3. オブジェクトの検出をタッチと見なし、平面上でのその座標をOSCメッセージに載せ送出。
  4. AIRアプリケーションがOSCメッセージを受け取り、描画。
  5. あとは2から4の繰り返し。

ものすごい駆け足になりましたが、Kinectでプロジェクタスクリーンをタッチパネル化するアプリケーションをご紹介しました。誤差も大きくてまだまだ課題はありますが、これを色々な大画面タッチアプリケーションに応用できたら楽しそうです。

また、マイクロソフトから正式にKinect SDKも提供される予定だそうで、こちらにも非常に期待です。音声認識もできるとさらに夢が広がるのですが。皆さんもこの夏、Kinectを導入して面白いUIを作ってみてはいかがでしょうか?
それでは。