Processing #001 LeapMotion x Box2D from Takepepe on Vimeo.

ご無沙汰してます、Takepepeです。
世間は梅雨、ついにクーラーをかけながらデモムービーを撮る季節に突入しました。
すっかり月１更新になってしまった今日このごろ。反省しないと！

さて、今日は動画のとおり、Leapを使ってお絵描きするインスタレーションをProcessingで作成しました。
今回のキモはLeapSDKをラップしているライブラリから提供される
標準のジェスチャーや座標を、意図した値に変換するところです。

使用しているライブラリは以下

コードはEclipseで書いていますので、このままProcessingのIDEにはっつけても動かないのでご注意を。
OPENGLの恩恵を受けていないコードですが、レンダリングモードをOPENGLにしています。
EclipseでProcessingを書く場合、OPENGLの使用にはcore.jarだけではなく
他にも入れないといけない.jarがありますので適当にググってください。

いつもの様に、順をおって解説していきます。

1. LeapPointerP5の作成
2. Box2Dの初期設定
3. LeapPointerP5の座標をBox2Dに落とし込む
4. 両手の状態で描画判定

1.LeapPointerP5の作成

P001っていうのはPAppletを継承したやつです。
コンストラクタに引数として渡して保持しておけば、
Processingの便利APIを外からでも使用できます。

update()は、そのP001からdraw()内で呼ばれるループ関数です。
このクラスは、冒頭で述べたキモにあたる部分を担っています。

執筆時現在の開発環境での話ですが、
前回解説したとおり、LeapはFrameオブジェクトからpointable（指か棒）を取得できますが、
これらをロストした時のカバーを自分でやらなければいけません。

今回のインスタレーションでは、ポインターを１つに限定しています。
getPointable()でそのポインターを固定する処理をして、
ポインターが属する手と反対側の手が「グー」なら「つかんでいる」状態というのを
publicなisGrabbed()から参照出来るようになっています。

LeapPointerP5.java

import com.leapmotion.leap.Frame;
import com.leapmotion.leap.Pointable;
import com.leapmotion.leap.Hand;
import com.onformative.leap.LeapMotionP5;

public class LeapPointerP5 {
	
	private P001 p;
	
	private LeapMotionP5 leap;
	private Frame frame;
	private Pointable pointable;
	private Hand currentHand;
	private Hand contraryHand;
	
	private boolean isDoubleHand = false;
	private boolean isGrabbing = false;
	private float offset = 6.0f;
	private float x;
	private float y;
	
	public LeapPointerP5(P001 p,LeapMotionP5 leap){
		this.p = p;
		this.leap = leap;
		this.pointable = leap.getFrame().pointables().get(0);
	}

	//------------------------------------------------------------
	// @　Loop
	
	public void update(){
		
		frame = leap.getFrame();
		pointable = getPointable();
		setHands();
		setPosition();

	}
	
	//------------------------------------------------------------
	// @ private 
	
	private Pointable getPointable() {
		
		// 前のフレームで取得したPointableがある場合、前フレームで取得したPointableを返す。無ければ新しいPointableを返す。
		
		Pointable _pointable = frame.pointables().get(0);
		int count = frame.pointables().count();
		for(int i=0 ; i<count ; i++){
			if(pointable.id() == frame.pointables().get(i).id()){
				_pointable = frame.pointables().get(i);
			}
		}
		return _pointable;
	}
	
	private void setHands(){
		
		// pointableの手を格納。手を2つ取得できた場合、反対側の手を格納
		
		if(pointable.isFinger()){
			currentHand = pointable.hand();
			if(frame.hands().count() == 2){
				contraryHand = frame.hands().get(1);
				if(currentHand == contraryHand){
					contraryHand = frame.hands().get(0);
				}
				isDoubleHand = true;
			}else{
				contraryHand = null;
				isDoubleHand = false;
			}
		}
	}
	
	private void setPosition(){
		
		// pointableから、pointerの座標を算出
		
		float px = pointable.tipPosition().getX()*offset;
		float py = pointable.tipPosition().getY()*offset;
		this.x += ((p.width/2 + px) - this.x)/10;
		this.y += ((p.height/0.6 - py) - this.y)/10;
	}
	
	
	//------------------------------------------------------------
	// @ getter
	
	public float getX(){
		return this.x;
	}
	
	public float getY(){
		return this.y;
	}
	
	public boolean isPointed(){
		boolean res = false;
		if(frame.pointables().count() != 0){
			res = true;
		}
		return res;
	}
	
	public boolean isGrabbed(){
		
		// 描画している手と反対側の手が存在しつつ、その手がグーの時trueを返す。
		
		boolean res = false;
		if(isDoubleHand){
			if(!isGrabbing){
				if(contraryHand.fingers().count() == 0){
					res = true;
					isGrabbing = true;
				}
			}else{
				res = true;
				if(contraryHand.fingers().count() == 5){
					res = false;
					isGrabbing = false;
				}
			}
		}
		return res;
	}
	
}

2.Box2Dの初期設定

ここからはPAppletのコードです。
Box2Dはあんまり新しくはなく、日本語のドキュメントがかなり少ないため苦戦しました。
Physicsという、ProcessingでBox2Dを使用するためのインスタンスを生成し、
それに対して、jbox2dのクラス群を利用していく感じになります。
createPointerBody()ではLeapPointerP5で定義した座標をBox2D上に落とし込むためのインスタンスを生成しています。

P001.java(抜粋)

	private void createPysics(){
		float gravX = 0.0f;
		float gravY = -100.0f;
		float AABBWidth = 2*width;
		float AABBHeight = 2*height;
		float borderBoxWidth = width+11;
		float borderBoxHeight = height+11;
		physics = new Physics(this, width, height, gravX, gravY, AABBWidth, AABBHeight, borderBoxWidth, borderBoxHeight, pixelsPerMeter);
		physics.setDensity(110.1f);
		physics.setCustomRenderingMethod(this, "myCustomRenderer");
	}
	
	private void createPointerBody(){
		
		// LeapPointerP5の座標を用いたpointerBodyを生成。
		
		pointerDef = new BodyDef();
		pointerBody = physics.getWorld().createBody(pointerDef);
		pointerCircleDef = new CircleDef();
		pointerCircleDef.radius = 0.5f;
		pointerCircleDef.friction = physics.getFriction();
		pointerCircleDef.restitution = physics.getRestitution();
		pointerCircleDef.isSensor = physics.getSensor();
		pointerBody.createShape(pointerCircleDef);
		pointerBody.setMassFromShapes();
		updatePointerBody();
	}
	

3.LeapPointerP5の座標をBox2Dに落とし込む

以下のupdatePointerBody()はdraw()内でコールされている関数です。
getColor()は、フレームにあわせて虹色を返してくれる関数です。

P001.java(抜粋)

	private void updatePointerBody(){
		
		// 描画中は描画が始まった段階のpalletColorを使用。描画中でない時は随時描画色を更新。
		
		UserData data = new UserData();
		if(isDrawing){
			data.color = palletColor;
		}else{
			data.color = getColor();
		}
		pointerBody.setUserData(data);
		
		// Box2Dの座標系に変換しつつpointerBodyを移動。
		
		float x = (pointer.getX() - width/2)/pixelsPerMeter;
		float y = (-pointer.getY() + height/2)/pixelsPerMeter;
		pointerBody.setPosition(new Vec2(x,y));
		
	}

4.両手の状態で描画判定

LeapPointerP5で反対の手が「グー」と判定された場合、描画中になります。
まず、verticesというArrayListが生成され、
「グー」の間、ポインターの座標をどんどんverticesにつっこんでいき、
「パー」になった時、もしくは反対の手がなくなった時、
描画が終了し、verticesを使用したCircleが新しいbodyとして追加されます。

P001.java(抜粋)

	private void brushBody(){
		if(isDrawing != pointer.isGrabbed()){
			if(isDrawing){
				onEndDrawing();
			}else{
				onStartDrawing();
			}
		}
		if(isDrawing == pointer.isGrabbed() && isDrawing){
			onProcessDrawing();
		}

		// 描画中であれば、ProcessingのAPIでラインを描く。（ verticesの数だけellipseを描く ）
		
		if(isDrawing){
			this.fill(palletColor);
			for(int i=0 ; i<vertices.size() ; i++){
				this.ellipse(vertices.get(i).x*pixelsPerMeter+width/2, vertices.get(i).y*-pixelsPerMeter+height/2, 30 ,30);
			}
		}
	}
	
	private void onStartDrawing(){
		
		// 描画が開始した時の処理。 vertices に格納した座標を元に Box2D で body を生成。
		
		isDrawing = true;
		vertices = new ArrayList<Vec2>();
		palletColor = getColor();
	}
	
	private void onProcessDrawing(){
		
		// 描画中の処理。 vertices に格納した座標を格納。
		
		Vec2 point = physics.screenToWorld(pointer.getX(),pointer.getY());
		vertices.add(point);
	}
	
	private void onEndDrawing(){
		
		// 描画が終了した時の処理。verticesに格納した座標を元にBox2Dでbodyを生成。
		
		isDrawing = false;
		BodyDef bd = new BodyDef();
		Body body = physics.getWorld().createBody(bd);
		for(int i =0 ; i<vertices.size() ; i++){
			CircleDef cd = new CircleDef();
			cd.radius = 0.5f;
			cd.density = physics.getDensity();
			cd.friction = physics.getFriction();
			cd.restitution = physics.getRestitution();
			cd.isSensor = physics.getSensor();
			cd.localPosition.set(vertices.get(i));
			body.createShape(cd);
			body.setMassFromShapes();
		}
		
		// 描画したBodyに色を持たせる。必要なメンバはUserDataクラスで定義しておく。
		
		UserData data = new UserData();
		data.color = palletColor;
		body.setUserData(data);
		vertices = null;
	}

P001.java

import java.util.List;
import java.util.ArrayList;

import processing.core.PApplet;

import org.jbox2d.common.Vec2;
import org.jbox2d.dynamics.World;
import org.jbox2d.dynamics.Body;
import org.jbox2d.dynamics.BodyDef;
import org.jbox2d.collision.CircleShape;
import org.jbox2d.collision.CircleDef;
import org.jbox2d.collision.Shape;
import org.jbox2d.collision.ShapeType;
import org.jbox2d.p5.Physics;

import com.onformative.leap.LeapMotionP5;

public class P001 extends PApplet{
	private static final long serialVersionUID = 0;
	
	// @ Box2D (JBox2D + BoxWrap2d)
	// JBox2D : http://www.jbox2d.org/
	// BoxWrap2d : http://wiki.processing.org/w/BoxWrap2d
	private Physics physics;
	private List<Vec2> vertices;
	private float pixelsPerMeter = 30;
	private BodyDef pointerDef;
	private Body pointerBody;
	private CircleDef pointerCircleDef;
	
	//  LeapMotionP5
	//  https://github.com/mrzl/LeapMotionP5
	//  auther @ mrzl
	private LeapMotionP5 leap;
	
	//  LeapPointerP5
	//  auther @ Takeppe
	private LeapPointerP5 pointer;
	
	private int palletColor;
	private boolean isDrawing = false;
	
	//------------------------------------------------------------
	// @ Setup
		
	public void setup(){
		size(2560,1390,OPENGL);
		frameRate(60);
		colorMode(HSB, 360, 100, 100);
		noStroke();
		
		leap = new LeapMotionP5(this);
		pointer = new LeapPointerP5(this,leap);
		
		createPysics();
		createPointerBody();
	}
	
	//------------------------------------------------------------
	// @ Box2D 
	
	private void createPysics(){
		float gravX = 0.0f;
		float gravY = -100.0f;
		float AABBWidth = 2*width;
		float AABBHeight = 2*height;
		float borderBoxWidth = width+11;
		float borderBoxHeight = height+11;
		physics = new Physics(this, width, height, gravX, gravY, AABBWidth, AABBHeight, borderBoxWidth, borderBoxHeight, pixelsPerMeter);
		physics.setDensity(110.1f);
		physics.setCustomRenderingMethod(this, "myCustomRenderer");
	}
	
	private void createPointerBody(){
		
		// LeapPointerP5の座標を用いたpointerBodyを生成。
		
		pointerDef = new BodyDef();
		pointerBody = physics.getWorld().createBody(pointerDef);
		pointerCircleDef = new CircleDef();
		pointerCircleDef.radius = 0.5f;
		pointerCircleDef.friction = physics.getFriction();
		pointerCircleDef.restitution = physics.getRestitution();
		pointerCircleDef.isSensor = physics.getSensor();
		pointerBody.createShape(pointerCircleDef);
		pointerBody.setMassFromShapes();
		updatePointerBody();
	}
	
	public void myCustomRenderer(World world){
		
		// BoxWrap2d のカスタムレンダラーを使用。参照は以下。
		// http://wiki.processing.org/w/BoxWrap2d#Using_a_custom_renderer
		
		Body body;
		for (body = world.getBodyList(); body != null; body = body.getNext()) {
			Shape shape;
			for (shape = body.getShapeList(); shape != null; shape = shape.getNext()) {
				ShapeType st = shape.getType();
				if (st == ShapeType.POLYGON_SHAPE) {
				}else if (st == ShapeType.CIRCLE_SHAPE) {
					UserData data = (UserData)shape.getBody().getUserData();
					if(data != null){
						fill(data.color);
					}
					CircleShape circle = (CircleShape) shape;
					Vec2 pos = physics.worldToScreen(body.getWorldPoint(circle.getLocalPosition()));
					float radius = physics.worldToScreen(circle.getRadius());
					this.ellipseMode(CENTER);
					this.ellipse(pos.x, pos.y, radius*2, radius*2);
				}
			}
		}
	}
	
	//------------------------------------------------------------
	// @ Loop
	
	@Override
	public void draw() {
		this.background(0);
		pointer.update();
		updatePointerBody();
		brushBody();
	}
	
	private void updatePointerBody(){
		
		// 描画中は描画が始まった段階のpalletColorを使用。描画中でない時は随時描画色を更新。
		
		UserData data = new UserData();
		if(isDrawing){
			data.color = palletColor;
		}else{
			data.color = getColor();
		}
		pointerBody.setUserData(data);
		
		// Box2Dの座標系に変換しつつpointerBodyを移動。
		
		float x = (pointer.getX() - width/2)/pixelsPerMeter;
		float y = (-pointer.getY() + height/2)/pixelsPerMeter;
		pointerBody.setPosition(new Vec2(x,y));
		
	}
	
	private void brushBody(){
		if(isDrawing != pointer.isGrabbed()){
			if(isDrawing){
				onEndDrawing();
			}else{
				onStartDrawing();
			}
		}
		if(isDrawing == pointer.isGrabbed() && isDrawing){
			onProcessDrawing();
		}

		// 描画中であれば、ProcessingのAPIでラインを描く。（ verticesの数だけellipseを描く ）
		
		if(isDrawing){
			this.fill(palletColor);
			for(int i=0 ; i<vertices.size() ; i++){
				this.ellipse(vertices.get(i).x*pixelsPerMeter+width/2, vertices.get(i).y*-pixelsPerMeter+height/2, 30 ,30);
			}
		}
	}
	
	private void onStartDrawing(){
		
		// 描画が開始した時の処理。 vertices に格納した座標を元に Box2D で body を生成。
		
		isDrawing = true;
		vertices = new ArrayList<Vec2>();
		palletColor = getColor();
	}
	
	private void onProcessDrawing(){
		
		// 描画中の処理。 vertices に格納した座標を格納。
		
		Vec2 point = physics.screenToWorld(pointer.getX(),pointer.getY());
		vertices.add(point);
	}
	
	private void onEndDrawing(){
		
		// 描画が終了した時の処理。verticesに格納した座標を元にBox2Dでbodyを生成。
		
		isDrawing = false;
		BodyDef bd = new BodyDef();
		Body body = physics.getWorld().createBody(bd);
		for(int i =0 ; i<vertices.size() ; i++){
			CircleDef cd = new CircleDef();
			cd.radius = 0.5f;
			cd.density = physics.getDensity();
			cd.friction = physics.getFriction();
			cd.restitution = physics.getRestitution();
			cd.isSensor = physics.getSensor();
			cd.localPosition.set(vertices.get(i));
			body.createShape(cd);
			body.setMassFromShapes();
		}
		
		// 描画したBodyに色を持たせる。必要なメンバはUserDataクラスで定義しておく。
		
		UserData data = new UserData();
		data.color = palletColor;
		body.setUserData(data);
		vertices = null;
	}
	
	private int getColor(){
		int hue = this.frameCount%360;
		return this.color(hue,100,100);
	}

	//------------------------------------------------------------
	// @ KeybordEvent
		
	@Override
	public void keyPressed(){
		
		// 初期化処理
		
		World world = physics.getWorld();
		if(keyCode == 32){
			Body body;
			for (body = world.getBodyList(); body != null; body = body.getNext()) {
				world.destroyBody(body);
			}
			physics.destroy();
			createPysics();
			createPointerBody();
		}
	}
	
}

余談ですが、先日Processingが2になりましたね！
LeapSDKもバージョンアップがあった様子ですが、ちゃんと見れてません。
（というか、ライブラリ頼みなのでバージョンあがっても対応できないという…むむむ）

Processing x Android #001 from Takepepe on Vimeo.

最近春一番が吹き始めましたよ。
シーズンも終わりに近づき、悲しい限りです…。

今回はProcessing for Android について触れたいと思います。
Processing for AndroidはProcessingで比較的簡単にアプリをつくれる開発環境です。
ご存知のとおり、スマホ・タブレットにはたくさのセンサーが搭載されており、自分が使用しているNexus7には以下のセンサーが搭載されています。

・GPS
・電子コンパス
・光センサ
・加速度センサ
・ジャイロスコープ
・NFC
・磁気センサ

アイディア次第で何でも出来そうでワクワクしますね。特にNFCは今のところiOS端末には無いセンサーなので気になる人も多いのでは。
Processing for Androidなら、少ない手順でこれらにアクセス出来ます。

上の動画を見てのとおり、今回作成したアプリは端末の画面を見て遊ぶものではなく、センサー値やタッチ情報をiMacに送り、デスクトップで稼働しているProcessingを操作するものです。おおまかな流れを書いていきます。なお、開発環境の準備については良記事がたくさんありますので、そちらを参照してください。

1. 動作環境の準備
2. センサー値の取得
3. OSCによる通信
4. デスクトップアプリのスケッチ

1.動作環境の準備

今回はWifi環境のもと、OSCでAndroid・Mac間の値のやり取りを行っています。
まずはMacのIPアドレスをメモしておきましょう。
あとは、同じネットワークにAndroid端末を接続しておきます。
MacからAndroidに値を送る場合はAndroidのIPアドレスもメモしておきましょう。

Processing for Androidで、Androidアプリが開発できる環境が整ったら、
必要なライブラリを開発環境にインストールします。

ketai

https://code.google.com/p/ketai/

Androidの各センサーや、イベント、OSの標準UI、SQLなど扱うことが出来るライブラリです。
多くの端末でテストしていないため動作保証は出来ませんが、自分のNexus7は問題なく使えました。
ライブラリの作者も以下の環境でテストしている様です。今回は「Ketai_v8」を使います。

Test platforms : Android 4.1, 4.1.2, 4.0.2
Test Hardware: Nexus 7, Galaxy 3s, Nexus S, Transformer Prime

しかしながら、携帯から来ているらしいこのライブラリ名、違和感ありですね w（ケタイって）

oscP5

http://www.sojamo.de/libraries/oscP5/

OSCで値をやり取りするためにoscP5を使用します。
OSCはOpenSound Controlの略で、ネットワーク経由でリアルタイム通信が出来る通信プロトコルです。 http://ja.wikipedia.org/wiki/OpenSound_Control

2.センサー値の取得

さて、ここからコードに入ります。
が、その前に、先ほどダウンロードしたファイルに「examples」がありますので、いくつか気になるものをコンパイルしてみてください。

今回は「KetaiGesture」「KetaiSensor」の2つに焦点を絞っています。
まずはセンサーを有効にし、センサーイベントを受け取る関数を書きます。
今回有効にするのは「加速度センサ(Accelerometer)、ジャイロスコープ(Gyroscope)、電子コンパス(Orientation)、光センサ(Light)」です。

Android.pde

void setup(){

	gesture = new KetaiGesture(this);
    sensor = new KetaiSensor(this);
    
    sensor.enableAccelerometer();
    sensor.enableGyroscope();
    sensor.enableOrientation();
    sensor.enableLight();
    sensor.start();
    
}

public boolean surfaceTouchEvent(android.view.MotionEvent event) {
  
  super.surfaceTouchEvent(event);
  return gesture.surfaceTouchEvent(event);
  
}

配列に値を入れるまえに、ローパスフィルターを通しています。
センサー値は手ぶれや様々な誤差から、思った通りのスムーズな値が得られません。
今回は以下の記事を参考にセンサー値を調整しています。

アンドロイドな日々 http://android.ohwada.jp/archives/334

ピンチイベント、光センサーイベントの関数も書いておきます。

Android.pde

void onAccelerometerEvent(float x, float y, float z){
	
    float AX = 0.9*GValue.get(0)+0.1*x;
    float AY = 0.9*GValue.get(1)+0.1*y;
    float AZ = 0.9*GValue.get(2)+0.1*z;
    
    AValue.set(0,AX);
    AValue.set(1,AY);
    AValue.set(2,AZ);
  
}

void onGyroscopeEvent(float x, float y, float z){
	
    float GX = 0.9*GValue.get(0)+0.1*x;
    float GY = 0.9*GValue.get(1)+0.1*y;
    float GZ = 0.9*GValue.get(2)+0.1*z;
    
    GValue.set(0,GX);
    GValue.set(1,GY);
    GValue.set(2,GZ);
  
}

void onOrientationEvent(float x, float y, float z){
	
    float OX = 0.9*OValue.get(0)+0.1*x;
    float OY = 0.9*OValue.get(1)+0.1*y;
    float OZ = 0.9*OValue.get(2)+0.1*z;
    
    OValue.set(0,OX);
    OValue.set(1,OY);
    OValue.set(2,OZ);
  
}

void onPinch(float x, float y, float d){
  
  pinchValue = d;
  
}

void onLightEvent(float v){
  
  lightValue = v;
  
}

3.OSCによる通信

今度はOSC通信に必要なインスタンスを準備します。まずはAndroid側。
1.でメモしておいた、iMacのネットワークアドレスをNetAddressインスタンスにセットします。
ポート番号は12000としておきます。Androidは12001に。
また、メニュー > Android > Sketch Permissions でINTERNETにチェックをいれておきます。

Android.pde

void setup(){
  
  oscP5 = new OscP5(this,12001);
  iMacAddress = new NetAddress("192.168.10.191",12000); // IPアドレスは適宜変更
  
}

ここで新たに、デスクトップで稼働するスケッチを新規作成します。
これが後のセンサー値を受け取るデスクトップアプリになります。
こちらのスケッチでも、先程と同様にOscP5インスタンスとNetAddressインスタンスを作成します。
Androidのスケッチとはとポート番号が入れ替えになります。

Desktop.pde

void setup(){
  
  oscP5 = new OscP5(this,12000);
  androidAddress = new NetAddress("192.168.10.221",12001); // IPアドレスは適宜変更
  
}

最後にAndroid側からOscMessageで値を送信し、
iMacで稼働しているアプリに値がちゃんと届いていることを確認します。

Android.pde

void draw(){
  
  OscMessage sendValue = new OscMessage("/AndroidOSC");
  
  // ピンチ値
  sendValue.add(pinchValue);
  
  // 光センサー
  sendValue.add(lightValue);
  
  // 加速度センサー
  sendValue.add(AValue.get(0));
  sendValue.add(AValue.get(1));
  sendValue.add(AValue.get(2));
  
  // ジャイロスコープセンサー
  sendValue.add(GValue.get(0));
  sendValue.add(GValue.get(1));
  sendValue.add(GValue.get(2));
  
  // 電子コンパス
  sendValue.add(OValue.get(0));
  sendValue.add(OValue.get(1));
  sendValue.add(OValue.get(2));
  
  // OscMessageをiMacに送信
  oscP5.send(sendValue, iMacAddress);
  
}

Desktop.pde

void oscEvent(OscMessage theOscMessage) {

	if(theOscMessage.checkAddrPattern("/AndroidOSC") == true) {
    	if(theOscMessage.checkTypetag("fffffffffff")) {
        	
            // ピンチ値
        	pinchValue = theOscMessage.get(0).floatValue();
            
            // 光センサー
            lightValue = theOscMessage.get(1).floatValue();
            
            // 加速度センサー
            AValue.set(0,theOscMessage.get(2).floatValue());
            AValue.set(1,theOscMessage.get(3).floatValue());
            AValue.set(2,theOscMessage.get(4).floatValue());
            
            // ジャイロスコープセンサー
            GValue.set(0,theOscMessage.get(5).floatValue());
            GValue.set(1,theOscMessage.get(6).floatValue());
            GValue.set(2,theOscMessage.get(7).floatValue());
            
            // 電子コンパス
            OValue.set(0,theOscMessage.get(8).floatValue());
            OValue.set(1,theOscMessage.get(9).floatValue());
            OValue.set(2,theOscMessage.get(10).floatValue());
            
    	}
	}
    
}

4.デスクトップアプリのスケッチ

ここまで来れば、もう完成間近です。
Processingでは3D表現も簡素なものであればすぐに出来ます。
あまり3Dソフトに慣れていないので、フリーのドロイド君を探し、Blendrでobj出力しました。
Processingに読み込む時、いろいろエラーが出た人は、書き出しオプションにチェックを入れて対処しましょう。
冒頭動画のソースコード全文は以下の様になっています。

Desktop.pde

import saito.objloader.*;
import oscP5.*;
import netP5.*;

int W = 180;
int WIDTH = 720-W;
int HEIGHT = 405;
int NUM = 128;

OscP5 oscP5;
OBJModel objm;

float lightValue;
float scaleValue;
ArrayList<Float> AValue = new ArrayList<Float>();
ArrayList<Float> GValue = new ArrayList<Float>();
ArrayList<Float> OValue = new ArrayList<Float>();

void setup() {
  
    size(720, 405, OPENGL);
    noStroke();
    
    scaleValue = 40;
    for(int i = 0; i < 3; i++){
      AValue.add(new Float(0));
      GValue.add(new Float(0));
      OValue.add(new Float(0));
    }
    oscP5 = new OscP5(this,12000);
    
    objm = new OBJModel(this);
    objm.load("Android3D.obj");
    setConsole();
    
}

void draw() {
  
  fill(0);
  noStroke();
  rect(0,0,WIDTH,HEIGHT);
  
  String info = "";
  info += "scaleValue:"+scaleValue+"\n";
  info += "lightValue:"+lightValue+"\n";
  info += "AccelerometerX:"+AValue.get(0)+"\n";
  info += "AccelerometerY:"+AValue.get(1)+"\n";
  info += "AccelerometerZ:"+AValue.get(2)+"\n";
  info += "GyroscopeX:"+GValue.get(0)+"\n";
  info += "GyroscopeY:"+GValue.get(1)+"\n";
  info += "GyroscopeZ:"+GValue.get(2)+"\n";
  info += "OrientationX:"+OValue.get(0)+"\n";
  info += "OrientationY:"+OValue.get(1)+"\n";
  info += "OrientationZ:"+OValue.get(2)+"\n";
  drawConsole(info);
  
  println(lightValue);
  ambientLight(200,100,100);
  directionalLight(255,255,100,-1,0,0);
  pointLight(100,200,255, 100, 100, 100);
  spotLight(lightValue,lightValue,lightValue, 100, 100, 1000, 0, 0, -1, PI, 2);
  
  translate(WIDTH/2,HEIGHT/2,1);
  rotateX(GValue.get(0)*-1);
  rotateY(GValue.get(1));
  rotateZ(GValue.get(2)*-1);
  scale(scaleValue);
  objm.draw();
  
}

void oscEvent(OscMessage theOscMessage) {
  if(theOscMessage.checkAddrPattern("/AndroidOSC") == true) {
    if(theOscMessage.checkTypetag("fffffffffff")) {
      float pinchValue = theOscMessage.get(0).floatValue();
      if(pinchValue>2){
        scaleValue++;
      }
      if(pinchValue < -2){
        scaleValue--;
      }
      if(scaleValue < 1){
        scaleValue = 1;
      }
      lightValue = theOscMessage.get(1).floatValue();
      AValue.set(0,theOscMessage.get(2).floatValue());
      AValue.set(1,theOscMessage.get(3).floatValue());
      AValue.set(2,theOscMessage.get(4).floatValue());
      GValue.set(0,theOscMessage.get(5).floatValue());
      GValue.set(1,theOscMessage.get(6).floatValue());
      GValue.set(2,theOscMessage.get(7).floatValue());
      OValue.set(0,theOscMessage.get(8).floatValue());
      OValue.set(1,theOscMessage.get(9).floatValue());
      OValue.set(2,theOscMessage.get(10).floatValue());
    }
  }
}

Android.pde

import ketai.net.*;
import ketai.ui.*;
import ketai.sensors.*;
import oscP5.*;
import netP5.*;

KetaiGesture gesture;
KetaiSensor sensor;
public OscP5 oscP5;
NetAddress iMacAddress;

float pinchValue;
float lightValue;
ArrayList<Float> AValue = new ArrayList<Float>();
ArrayList<Float> GValue = new ArrayList<Float>();
ArrayList<Float> OValue = new ArrayList<Float>();

void setup(){
  size(displayWidth, displayHeight);
  orientation(LANDSCAPE);
  
  oscP5 = new OscP5(this,12001);
  iMacAddress = new NetAddress("192.168.10.191",12000);
  
  pinchValue = 0;
  lightValue = 0;
  for(int i = 0; i < 3; i++){
    AValue.add(new Float(0));
    GValue.add(new Float(0));
    OValue.add(new Float(0));
  }
  
  gesture = new KetaiGesture(this);
  sensor = new KetaiSensor(this);
  sensor.enableLight();
  sensor.enableAccelerometer();
  sensor.enableGyroscope();
  sensor.enableOrientation();
  sensor.start();
  
}

public boolean surfaceTouchEvent(android.view.MotionEvent event) {
  
  super.surfaceTouchEvent(event);
  return gesture.surfaceTouchEvent(event);
  
}

void draw(){
  
  pinchValue += (1-pinchValue)/5;
  
  String info = "";
  info += "AccelerometerX:"+AValue.get(0)+"\n";
  info += "AccelerometerY:"+AValue.get(1)+"\n";
  info += "AccelerometerZ:"+AValue.get(2)+"\n";
  info += "GyroscopeX:"+GValue.get(0)+"\n";
  info += "GyroscopeY:"+GValue.get(1)+"\n";
  info += "GyroscopeZ:"+GValue.get(2)+"\n";
  info += "OrientationX:"+OValue.get(0)+"\n";
  info += "OrientationY:"+OValue.get(1)+"\n";
  info += "OrientationZ:"+OValue.get(2)+"\n";
  
  OscMessage sendValue = new OscMessage("/AndroidOSC");
  sendValue.add(pinchValue);
  sendValue.add(lightValue);
  sendValue.add(AValue.get(0));
  sendValue.add(AValue.get(1));
  sendValue.add(AValue.get(2));
  sendValue.add(GValue.get(0));
  sendValue.add(GValue.get(1));
  sendValue.add(GValue.get(2));
  sendValue.add(OValue.get(0));
  sendValue.add(OValue.get(1));
  sendValue.add(OValue.get(2));
  oscP5.send(sendValue, iMacAddress);
  
  background(0);
  textSize(20);
  fill(255);
  text(info,50,50);
  
}

void onAccelerometerEvent(float x, float y, float z){
  
  float AX = 0.9*GValue.get(0)+0.1*x;
  float AY = 0.9*GValue.get(1)+0.1*y;
  float AZ = 0.9*GValue.get(2)+0.1*z;
  
  AValue.set(0,AX);
  AValue.set(1,AY);
  AValue.set(2,AZ);
  
}

void onGyroscopeEvent(float x, float y, float z){
  
  float GX = 0.9*GValue.get(0)+0.1*x;
  float GY = 0.9*GValue.get(1)+0.1*y;
  float GZ = 0.9*GValue.get(2)+0.1*z;
  
  GValue.set(0,GX);
  GValue.set(1,GY);
  GValue.set(2,GZ);
  
}

void onOrientationEvent(float x, float y, float z){
  
  float OX = 0.9*OValue.get(0)+0.1*x;
  float OY = 0.9*OValue.get(1)+0.1*y;
  float OZ = 0.9*OValue.get(2)+0.1*z;
  
  OValue.set(0,OX);
  OValue.set(1,OY);
  OValue.set(2,OZ);
  
}

void onLightEvent(float v){
  
  lightValue = v;
  
}

void onPinch(float x, float y, float d){
  
  pinchValue = d;
  
}

Console.pde

import processing.video.*;
Capture capture;
PFont font;

void setConsole(){
  font = loadFont("Helvetica-12.vlw");
  capture = new Capture(this, 640,480,30);
  capture.start();
}

void drawConsole(String str){
  float H = W*0.75;
  int ts = 11;
  float X = width-W;
  float Y = height-H;
  if (capture.available()){
    capture.read();
    image(capture, X, Y, W, H);
  }
  
  fill(17);
  rect(X,0,W,Y);
  
  stroke(51);
  line(X,0,X,height);
  noStroke();
  
  fill(255);
  textSize(ts);
  textFont(font, ts);
  text(str,X+5,ts+5);
  text(str,X+5,ts+5);
}