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もバージョンアップがあった様子ですが、ちゃんと見れてません。
（というか、ライブラリ頼みなのでバージョンあがっても対応できないという…むむむ）

LeapMotion #001 Starling from Takepepe on Vimeo.

１ヶ月ぶりの投稿です。GW最終日、皆様いかがお過ごしですか？
今回の投稿は、個人的に今年最も気になるガジェット「LeapMotion」についてです。

・Leap Motion

LeapMotionは端末の上1m四方空間内で、1ミリ単位で指やツール（ペン等）を検知するセンサーです。
また、SDKレベルで数種類のジェスチャーを認識します。

つい先日、プレオーダーした人への発送延期がアナウンスされたばかりですが、
自分は3月末にプレオーダー、デベロッパー登録したところ、2週間ほどで手元に届きました。
発送延期の理由としては、完璧な状態として世に送り出したい、というような内容でした。
7月22日が発送予定日とされていますが、実際どうなるかはまだわかりませんね。

まだ日本語のリソースが少ない状態ですので、コード解説にはいる前に
DeveloperPortalの概要を写したものを交えて、簡単に解説したいと思います。

Frame

LeapMotionで値を取得するために使用するFrameオブジェクトの中には以下のものが含まれます。

・Lists of tracking data

・Frame motion

Hand model

手について様々な情報を提供します。2本の手を認識しますが、右手左手の識別はしていません。

・Hand attributes

・Hand motion

・Finger and Tool lists

検知した手に属する、指やツールの情報を取得できます。

Finger and Tool models

Leapはその視界内の指およびツールの両方を検知するおよび追跡します。

Gestures

Leapは特定の移動パターンをGesturesとして認識します。

開発環境について

現在サポートされている言語は、C++、C#、Objective-C、Java、Python、JavaScriptになります。
DevelperPortalでは前述の概要の他に、各フレームワークに対応したライブラリの配布、
ガイドライン、コミュニティ、アプリストア概要などが掲載されています。
Leapに興味があるかたは是非覗いてみてください。

・Leap Motion Developer Portal

LeapMotion × Adobe AIR Starling

今回作成したデモについての解説です。
AdobeAIRでStarlingのParticleSystemを使用して作成しています。

・Starling Framework
・Starling-Extension-Particle-System

StarlingはStage3Dを使用しているのでapp.xmlに以下の設定を忘れずにしましょう。

LeapをActionScriptで使用するために、以下のライブラリと付属のC++SDKをラップしているANEを使用します。
導入方法については、下記ページの下部に書いてあるので、それぞれ開発環境にあったものを選んでください。
自分はFlashBuilder4.7でした。

・LeapMotionAS3

Starlingを使用したパーティクルのデモはClockmakerさんやにゃあプロジェクトさんが充実していますので、
そちらを参考にさせていただきました。

FL001.as

package {
	
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageDisplayState;
	import flash.display.StageScaleMode;
	import flash.events.KeyboardEvent;
	import starling.core.Starling;
	
	[SWF(backgroundColor="#00164a", width="1440", height="900", frameRate="60")]
	
	public class FL001 extends Sprite {
		
		private var starling:Starling;
		
		public function FL001() {
			
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.addEventListener(KeyboardEvent.KEY_DOWN,onKeyDown);
			
			starling = new Starling(MainView, stage);
			starling.start();
			
		}
		
		private function onKeyDown(e:KeyboardEvent):void {
			
			if(stage.displayState == StageDisplayState.NORMAL){
				stage.displayState = StageDisplayState.FULL_SCREEN;
			} else {
				stage.displayState = StageDisplayState.NORMAL
			}
			
		}
		
		
	}
}

MainView.as

package {
	
	import flash.geom.Rectangle;
	import starling.core.Starling;
	import starling.display.Sprite;
	import starling.events.Event;
	import starling.events.ResizeEvent;
	import starling.extensions.ParticleDesignerPS;
	import starling.textures.Texture;
	import com.leapmotion.leap.LeapMotion;
	import com.leapmotion.leap.Pointable;
	import com.leapmotion.leap.events.LeapEvent;
	
	internal class MainView extends Sprite { 
		
		// 事前に「online particle editor」で.pexファイルとtexture.pngを用意しておきます
		// http://onebyonedesign.com/flash/particleeditor/
		
		[Embed(source = "assets/particle.pex", mimeType = "application/octet-stream")]
		private static var ParticleData:Class;
		
		[Embed(source = "assets/texture.png")]
		private static var ParticleImage:Class;
		
		private var particles:Vector.<ParticleDesignerPS>;		
		private var count:int = 10;
		private var leap:LeapMotion;
		
		public function MainView() {
			addEventListener(Event.ADDED_TO_STAGE, onAddStage);
		}
		
		private function onAddStage(e:Event):void {
			
			setParticles();
			leap = new LeapMotion();
			leap.controller.addEventListener( LeapEvent.LEAPMOTION_FRAME, onLeapFrame );
			stage.addEventListener(ResizeEvent.RESIZE, onResizeStage);
			
		}
		
		private function setParticles():void{
			
			particles = new Vector.<ParticleDesignerPS>(10);
			for(var i:int = 0; i<count ; i++){
				particles[i] = new ParticleDesignerPS( XML(new ParticleData()), Texture.fromBitmap(new ParticleImage()));
				particles[i].startSize = 100;
				particles[i].endSize = 100;
				particles[i].speed = 0;
				particles[i].start();
				Starling.juggler.add(particles[i]);
				addChild(particles[i]);
			}
			
		}
		
		private function onResizeStage(e:ResizeEvent):void {
			
			Starling.current.viewPort = new Rectangle(0, 0, e.width, e.height);
			stage.stageWidth = e.width;
			stage.stageHeight = e.height;
			
		}
		
		private function onLeapFrame(e:LeapEvent):void {
			
			var max:int = e.frame.pointables.length;
			for(var i:int = 0; i<count ; i++){
				if( i < max ){
					var pointable:Pointable = e.frame.pointables[i];
					particles[i].emitterX = (pointable.tipPosition.x)*3+stage.stageWidth/2;
					particles[i].emitterY = (pointable.tipPosition.y)*-3+stage.stageHeight;
					particles[i].gravityX = pointable.tipVelocity.x*-5;
					particles[i].gravityY = pointable.tipVelocity.y*5;
					particles[i].maxNumParticles = 50;
				}else{
					particles[i].maxNumParticles = 1;
				}
			}
			
		}
		
	}
}

１ヶ月いじった上で得た感想（というかぶちあたっている壁）です。

1. 指がLeapに向かって垂直に重なると検知できない。
2. 細かなUI操作に向いていない
3. ジェスチャーはそのままでは利用しづらい

あくまで、現状公開されているSDKとライブラリを使用した上での感想です。
概要を読む限りではワクワクするばかりですが、ちゃんとアプリケーションに落とし込むためには
上記の問題をカバーしたフレームワークが必要だなと思いました。

今回の投稿はさらっと紹介しただけになってしまったので、
次回はちょっとしたフレームワークと何か面白いネタで投稿できればいいなー。

Flash x iOS #001 Away3D from Takepepe on Vimeo.

久々の投稿です。
桜が満開ですね！今年は多忙につき花見はお預けな感じです。

今回はAway3Dを使ったデスクトップAIRアプリです。
OSC通信でiPadから送られて来たタッチ座標と端末の傾きで、指の位置を3D空間に変換しています。
レインボーな箱がウネウネとしています。特に意味はありません。

iPadからOSC送信するアプリはopenFrameWorksで作ったものです。
早速見て行きましょう。

1. iPadからOSC送信
2. FlashでOSC受信
3. 受信した値から指の位置をシュミレート
4. レインボーな箱をウネウネ

1.iPadからOSC送信

iPadからOSC送信します。
いつもの様にemptyExampleをコピペしたら、「iOS Application Target」の「Devices」を
「iPad」か「Universal」にします。
FI001::setup()で画面の向きをiPhoneSetOrientation(OFXIPHONE_ORIENTATION_LANDSCAPE_LEFT);
にして、ホームボタンが右に来たときに左上が(0,0)になるようにします。

iPadでは同時に5つのタッチ座標が取得できます。
5つの座標を格納できる「touchLoc」を用意し、タッチが5つに満たない場合、
(-100,-100)を入れる様にしておき、常に5つ分の座標を送ります。

※Supported Intereface Orientationsを「Portrait」にしていますが、
これを「LandscapeRight」にしながら、左上を(0,0)にする方法が分からず…知ってる人いたら教えてください！

FI001.cpp

void FI001::setup(){
    
    ofBackground(127,127,127);
    
    //iPadの向きの設定
    iPhoneSetOrientation(OFXIPHONE_ORIENTATION_LANDSCAPE_LEFT);
    
    //加速度センサーを有効に
	ofxAccelerometer.setup();
    
    //ofxiPhoneCoreLocationインスタンスのコンパスを有効に
    location.startHeading();
    
    //OSC設定
    sender.setup( HOST, PORT );
	receiver.setup( MYPORT );
    
    //初期設定
    for (int i=0; i<5; i++) {
        touchLoc[i].set(-100, -100);
    }
    
}

//--------------------------------------------------------------
void FI001::update(){
    
    ofxOscMessage m;
    m.setAddress("/iOSOSC");
    
    //タッチ位置の格納
    for (int i=0; i<5; i++) {
        m.addIntArg(touchLoc[i].x);
        m.addIntArg(touchLoc[i].y);
    }
    
    //加速度
    m.addFloatArg(ofxAccelerometer.getForce().x);
    m.addFloatArg(ofxAccelerometer.getForce().y);
    m.addFloatArg(ofxAccelerometer.getForce().z);
    
    //X軸の傾き
    m.addFloatArg(ofxAccelerometer.getOrientation().y);
    
    //Y軸の傾き（コンパスの向き）
    m.addFloatArg(location.getMagneticHeading());
    
    //Z軸の傾き
    m.addFloatArg(ofxAccelerometer.getOrientation().x);
    
    sender.sendMessage( m );
    
}

2.FlashでOSC受信

OSC.as

FlashでOSC通信をする場合、AIRアプリに限定される様です。（UDPConnectorあたり）
ライブラリはtuio-as3を使っています。

tuio-as3

https://code.google.com/p/tuio-as3-lib/

openFrameWorksから送られて来たOSCメッセージを連想配列にまとめて
メインスレッド（FI001.as）に渡します。
タッチ座標(-100,-100)が送られて来た場合、非表示の真偽値をセットします。

package {
	
	import flash.display.*;
	import flash.geom.*;
	import org.tuio.connectors.UDPConnector;
	import org.tuio.osc.IOSCListener;
	import org.tuio.osc.OSCManager;
	import org.tuio.osc.OSCMessage;
	
	public class OSC implements IOSCListener {
		
		private var delegate:FI001;
		private var fingers:Vector.<Object>;
		private var accelerometer:Vector.<Number>;
		private var orientation:Vector.<Number>;
		private var oscManager:OSCManager;
		
		public function OSC (_delegate:FI001) {
			
			delegate = _delegate;
			
			//タッチ情報
			fingers = new Vector.<Object>(5,true);
			for(var i:int = 0 ; i<5 ; i++){
				fingers[i] = new Object();
			}
			
			//加速度と傾き
			accelerometer = new Vector.<Number>(3,true);
			orientation = new Vector.<Number>(3,true);
			for(var j:int = 0 ; j<3 ; j++){
				accelerometer[j] = 0;
				orientation[j] = 0;
			}
			
			// OSC設定　※ UDPConnectorはAIRアプリでのみ利用出来る
			var connectorIn:UDPConnector = new UDPConnector("192.168.11.20",8000);
			var connectorOut:UDPConnector = new UDPConnector("192.168.11.18",8001,false);
			oscManager = new OSCManager(connectorIn,connectorOut,true);
			oscManager.addMsgListener (this);
			
		}

		public function acceptOSCMessage (oscmsg:OSCMessage):void {
			
			//OSCメッセージを受信したら、delegateに連想配列を渡す
			
			if(oscmsg.address == "/iOSOSC") {

				//タッチ情報
				for(var i:int = 0 ; i<5 ; i++){
					fingers[i].x = oscmsg.arguments[i*2];
					fingers[i].y = oscmsg.arguments[i*2+1];
					fingers[i].visible = true;
					if(fingers[i].x < 0){
						fingers[i].visible = false;
					}
				}
				
				//加速度と傾き
				accelerometer[0] = oscmsg.arguments[10];
				accelerometer[1] = oscmsg.arguments[11];
				accelerometer[2] = oscmsg.arguments[12];
				orientation[0] = oscmsg.arguments[13];
				orientation[1] = oscmsg.arguments[14];
				orientation[2] = oscmsg.arguments[15];
				
				//まとめ
				var data:Object = new Object();
				data.fingers = fingers;
				data.accelerometer = accelerometer;
				data.orientation = orientation;

				delegate.onMessage (data);
				
			}
		}
		
		public function sendOSCMessage ():void { }
		public function sendOSCBundle ():void { }

	}

}

3.受信した値から指の位置をシュミレート

FI001.as

ここからAway3Dを使ってコーディングしていきます。
Stage3Dを使ったAIRアプリは「app.xml」の

<renderMode>direct</renderMode>
<depthAndStencil>true</depthAndStencil>

を設定し忘れる「context3Dなんて知らないよ」って怒られるので注意。
ブラウザで見るswfの場合は、htmlのwmodeをdirectにしましょう。
Away3Dは現状で最新の「4.1.0 Alpha」を使います。

Away3D 4.1.0 Alpha

http://away3d.com/download/away3d_4.1.0_alpha

package {
	
	import away3d.cameras.Camera3D;
	import away3d.containers.Scene3D;
	import away3d.containers.View3D;
	import away3d.lights.DirectionalLight;
	import away3d.materials.lightpickers.StaticLightPicker;
	
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Vector3D;
	import flash.system.System;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	
	[SWF(backgroundColor="#000717", width="1024", height="768", frameRate="60")]
	
	public class FI001 extends Sprite{
		
		// OSC通信で使うインスタンス
		private var osc:OSC;
		private var tf:TextField;
		
		// Away3Dでお決まりのインスタンス
		private var view:View3D;
		private var scene:Scene3D;
		private var camera:Camera3D;
		private var light:DirectionalLight;
		private static var ZERO:Vector3D = new Vector3D(0,0,0);
		
		// Away3Dで使うインスタンス
		private var fingers:Vector.<Finger>;
		
		// iPadの傾きを格納する変数
		private var ox:Number = 0;
		private var oy:Number = 0;
		private var oz:Number = 0;		

		public function FI001(){
			
			// ガベージコレクション設定（以下参考）
			// http://adclounge.jp/adobe-max-2011/new-small-features-in-flash-player-11/
			System.pauseForGCIfCollectionImminent(1);
			
			// OSCメッセージを受信したらデータを渡してくれるインスタンス
			osc = new OSC(this);
			
			// Away3Dの設定
			init3D();
			
			// 3Dオブジェクトの設定
			set3D();
			
			// デバッグ用テキスト（OSC受信した値表示用）
			setText();
			
		}
		
		private function init3D():void{
			
			// Away3Dの設定
			view = new View3D();
			scene = view.scene;
			light = new DirectionalLight();
			light.direction = new Vector3D(1, -1, 1);
			light.specular = 0.1;
			light.diffuse = 0.9;
			light.ambient = 0.1;
			scene.addChild(light);
			camera = view.camera;
			camera.z = -500;
			
			addChild(view);
			
		}
		
		private function set3D():void {
			
			var lightPicker:StaticLightPicker = new StaticLightPicker([light]);
			
			// タッチ座標に応じてCubeを表示するFingerインスタンス
			fingers = new Vector.<Finger>(5,true);
			for (var i:int = 0; i < 5; i++) {
				var finger:Finger = new Finger();
				fingers[i] = finger;
				for(var j:int = 0 ; j<fingers[i].cubes.length ; j++){
					scene.addChild(fingers[i].cubes[j].mesh);
					fingers[i].setLightPicker(lightPicker);
				}
			}
			
			// アニメーションループ
			addEventListener(Event.ENTER_FRAME, update, false, 0, true);
			
		}
		
		private function setText():void{
			
			// デバッグ用テキスト（OSC受信した値表示用）
			tf = new TextField();
			tf.textColor = 0xFFFFFF;
			tf.autoSize = TextFieldAutoSize.LEFT;
			addChild(tf);
			
		}
		
		private function update(e:Event):void {
			
			// アニメーションループ
			for (var i:int = 0; i < 5; i++) {
				fingers[i].update();
			}
			view.render();
			
		}
		
		
		
		public function onMessage(_data:Object):void{
			
			// ローパスフィルターを通してセンサーの傾きを格納
			ox = ox*0.9 + (_data.orientation[0]+180)*0.1;
			oy = oy*0.9 + (_data.orientation[1])*0.1;
			oz = oz*0.9 + (_data.orientation[2]+180)*0.1;
			
			// 画面の中心
			var cx:Number = -stage.width/2;
			var cy:Number = -stage.height/2;
			
			for(var i:int = 0 ; i<_data.fingers.length ; i++){
				
				var fx:Number = cx+_data.fingers[i].x;
				var fy:Number = cy+_data.fingers[i].y;
				var x:Number = -fx*Math.cos((oz)*Math.PI/180);
				var y:Number = -fy*Math.sin((ox)*Math.PI/180);
				var z:Number = fy*Math.cos((ox)*Math.PI/180);-fx*Math.cos((oy)*Math.PI/180);
				
				// iPadの傾きとタッチ位置から座標を特定
				fingers[i].vec.setTo(x,y,z);
				
				// 触っていなかったら非表示
				fingers[i].setVisible(_data.fingers[i].visible);
			}
			
			setMessageTet();
			
		}
		
		private function setMessageTet():void{
			
			// デバッグ用テキスト（OSC受信した値表示用）
			var str:String = "";
			for(var i:int = 0 ; i<fingers.length ; i++){
				str += "finger"+(i+1)+"X:"+fingers[i].vec.x+"\n";
				str += "finger"+(i+1)+"Y:"+fingers[i].vec.y+"\n";
			}
			str += "orientationX:"+ox+"\n";
			str += "orientationY:"+oy+"\n";
			str += "orientationZ:"+oz+"\n";
			tf.text = str;
			
		}
		
	}
}

4.レインボーな箱をウネウネ

メインスレッドで利用しているクラスは以下の通りです。
レインボー色を出すのにfrocessingを使って楽しています。

frocessing

http://www.libspark.org/wiki/nutsu/Frocessing

Finger.as

package {
	
	import flash.geom.Point;
	import flash.geom.Vector3D;
	import frocessing.color.ColorHSV;
	import away3d.materials.lightpickers.StaticLightPicker;
	
	public class Finger{
		
		public var vec:Vector3D;
		public var cubes:Vector.<Cube>;
		private var index:int = 0;
		private static var NUM:Number = 50;
		
		public function Finger(){
			
			// 指の疑似3次元座標
			vec = new Vector3D;
			
			// ウネウネするCube達
			cubes = new Vector.<Cube>(NUM);
			for(var i:int = 0; i<NUM ; i++){
				var color:ColorHSV = new ColorHSV(360/NUM*i,0.4);
				cubes[i] = new Cube(1,1,1,color.value);
			}
			
		}
		
		public function setLightPicker(_lp:StaticLightPicker):void{
			
			// Cube達に光源設定
			for(var i:int = 0; i<NUM ; i++){
				cubes[i].setLightPicker(_lp);
			}
			
		}
		
		public function setVisible(_visible:Boolean):void{
			
			// iPadを触っていない場合非表示
			for(var i:int = 0; i<NUM ; i++){
				cubes[i].mesh.visible = _visible;
			}
			
		}
		
		
		
		public function update():void{
			
			// 操作するCubeのIndex
			index++;
			if(index>=NUM){
				index = 0;
			}
			
			// 順番が回って来たCubeが触ってる場所に移動する
			cubes[index].setLife(100);
			cubes[index].setVector(vec.x,vec.y,vec.z);
			
			// Cube達を更新
			for(var i:int = 0; i<NUM ; i++){
				cubes[i].update();
			}
			
		}
		
	}
}

Cube.as

package {

	import away3d.entities.Mesh;
	import away3d.materials.ColorMaterial;
	import away3d.materials.lightpickers.StaticLightPicker;
	import away3d.primitives.CubeGeometry;
	
	public class Cube{
		
		public var mesh:Mesh;
		private var life:Number = 0;
		private var isSurvive:Boolean = false;
		
		public function Cube(_width:Number,_height:Number,_depth:Number,_color:uint){
			
			// CubeMeshの生成
			var geo:CubeGeometry = new CubeGeometry(_width,_height,_depth);
			var mat:ColorMaterial = new ColorMaterial(_color,0.8);
			mesh = new Mesh(geo,mat);
			
			// 影を落とすかどうか
			mesh.castsShadows=true;

		}
		
		public function setVector(_x:Number,_y:Number,_z:Number):void{

			mesh.x = _x;
			mesh.y = _y;
			mesh.z = _z;
			
		}
		
		public function setLightPicker(_lp:StaticLightPicker):void{
			
			mesh.material.lightPicker = _lp;
			
		}
		
		public function setLife(_life:Number):void{
			
			life = _life;
			
		}
		
		public function update():void{
			
			mesh.rotationX = Math.sin(life*Math.PI/180)*500;
			mesh.rotationY = Math.cos(life*Math.PI/180)*500;
			mesh.rotationZ = Math.cos(life*Math.PI/180)*500;
			
			var scale:Number = Math.pow(life,4)/2000000;
			mesh.scaleX = scale;
			mesh.scaleY = scale;
			mesh.scaleZ = scale;
			
			life--;
			
		}
		
	}
}

openFrameworks x Arduino #001 from Takepepe on Vimeo.

そろそろこのアバターの格好で記事投稿するのが辛くなり始める今日この頃。
皆様いかがお過ごしでしょうか。

今回はopenFrameworksをArduinoでコントロールするネタです。（Arduinoはほぼオマケですが…）
動画ではひらひら揺らめく面と、再生している音楽が同期しています。
赤外線センサーに手を近づけて、面の揺らめきと音楽のスピード・音量をコントロールします。

ArduinoはINとOUTを備えたマイコンボードの統合開発環境です。
一般的なPCやガジェットには無いセンサーをコンテンツに取り込むだけでなく、
LED、モーターや家電のコントロールも出来る素敵インターフェースです。

Arduino　http://www.arduino.cc/

Arduinoはボードにプログラムを書き込み、電源を供給すればスタンドアロンでも動かす事ができます。
Processing・openFrameworksでも簡単に相互通信できるAPIが用意されています。
とても面白いプラットフォームなのでいろんな記事を調べてみてください。

いつもの様に制作過程の流れで説明していきます。

1. Arduinoボードの設定
2. openFrameworksとArduinoをつなぐ
3. ofxSimpleGuiTooを追加
4. 3D空間にofCircleを描く
5. PerlinNoiseでゆらゆら
6. 音楽を再生
7. Arduinoの値を摘要

1.Arduinoボードの設定

今回のインスタレーションでは赤外線測距モジュール(GP2Y0A21)を使っています。
参考というか、出版されている書籍に載っているものをそのままですw
「5章 レシピ2：距離を測りたい」

Prototyping Lab ―「作りながら考える」ためのArduino実践レシピ
http://www.oreilly.co.jp/books/9784873114538/

まずは下記回路図の様にArduinoを組み立てます。

赤外線センサーから値が取れていることを確認します。
以下のスケッチでは距離がcm単位でSerialに出力されます。

OA001.ino

// アナログピン0番
const int sensorPin = 0;

// 閾値
const int threshold = 80;

void setup(){

	// 接続速度の設定
	Serial.begin(9600);

}

void loop(){

	int value = analogRead(sensorPin);
	if(value > threshold){
		// cm単位に変換
		float range = (6787 / (value -3)) -4;
		Serial.println(range+"cm");
	}

}

2.openFrameworksとArduinoをつなぐ

openFrameworksで値を取得する行程に入りますが、Arduinoでは先程のスケッチは使用しません。
ArduinoボードにはStandardFirmataを書き込んでおきます。
StandardFirmataは、色んなプラットフォームとArduinoを繋ぐものです。
StandardFirmataのインストール方法とArduinoへの書き込み方法については割愛します。

openFrameworksのコードに移ります。

OA001.h

class OA001 : public ofBaseApp{

	public:
		void setup();
		void draw();

	private :
		ofArduino ard;
		float ardValue;
		float distance;
		void setupArduino(const int & version);
		void analogPinChanged(const int & pinNum);

}

OA001.cpp

// Arduinoとの接続速度
#define SPEED 57600

//--------------------------------------------------------------
void OA001::setup(){

	// Arduinoに接続
	ard.connect("/dev/cu.usbmodemfd321", SPEED);
	ofAddListener(ard.EInitialized, this, &OA001::setupArduino);

}

//--------------------------------------------------------------
void OA001::setupArduino(const int & version) {
    
	// イベントリスナ削除
	ofRemoveListener(ard.EInitialized, this, &OA001::setupArduino);
	
	// アナログピン0番からのレポートを取得
	ard.sendAnalogPinReporting(0, ARD_ANALOG);
	ofAddListener(ard.EAnalogPinChanged, this, &OA001::analogPinChanged);
	
	//cout << ard.getFirmwareName() << endl;
	//cout << "firmata v" << ard.getMajorFirmwareVersion() << "." << ard.getMinorFirmwareVersion() << endl;

}

//--------------------------------------------------------------
void OA001::analogPinChanged(const int & pinNum) {

	int value = ard.getAnalog(pinNum);
	cout << value << endl;

}

//--------------------------------------------------------------
void OA001::update(){

	// Arduinoを更新
	ard.update();

}

コンソールにセンサー値が出力されたら接続成功です。
このセンサー値は近くに何も無い場合、150以下で推移、最も手を近づけた時600強の値が出ます。
純粋なセンサー値とは別に、この回で使用しているローパスフィルターをかけながら
distanceに変換後の値を入れていきます。

OA001.cpp

void OA001::analogPinChanged(const int & pinNum) {

	// そのままのセンサー値を格納
	ardValue = ard.getAnalog(pinNum);

	// センサー値を調整して格納
	if(ardValue < 100){
		distance = 100;
	}else if(ardValue > 700){
		distance = 700;
	}else{
		// ローパスフィルターを摘要
		distance = distance*0.9+ardValue*0.1;
	}

}

ここまででArduinoについて分からない場合は田所先生の講義資料を見て勉強してみてください。
本当に素晴らしい講義資料ばかりを公開していただいています。感謝！

yoppa.org 「第９回：openFrameworksとArduinoを連携する」
http://yoppa.org/ma2_11/3383.html

3.ofxSimpleGuiTooを追加

開発を進めるにあたり、アドオンのofxSimpleGuiTooを使います。
とても便利で、作品を作るにあたり開発効率が良くなるので早期に取り入れます。
先程取得したセンサー値も、簡単に視覚化することが出来ます。
筆者はmemoさんのバージョンを使っています。

ofxSimpleGuiToo
https://github.com/memo/ofxSimpleGuiToo

OA001.h

class OA001 : public ofBaseApp{

	public:
		void setup();
		void draw();

	private :
		ofxSimpleGuiToo gui;
		void setupGUI();

}

OA001.cpp

void OA001::setup(){

	// ofxSimpleGuiTooをセットアップ
	setupGUI();

}

//--------------------------------------------------------------
void OA001::setupGUI() {

	gui.setup();
    
	// GUIの見た目を設定
	gui.config->textColor = 0xFFFFFF;
	gui.config->buttonHeight = 20;
	gui.config->sliderHeight = 10;
	gui.config->titleHeight = 20;
	gui.config->fullActiveColor = 0x00aec3;
    
	// Arduinoのセンサー値
	gui.addTitle("ARDUINO");
	gui.addSlider("ardValue", ardValue, 0.0f, 700.0f);
	gui.addSlider("distance", distance, 0.0f, 700.0f);
	
	// 前回終了した時の設定で起動
	gui.loadFromXML();
    
	// 最初から表示させる
	gui.show();
    
}

//--------------------------------------------------------------
void OA001::draw(){

	// ofxSimpleGuiTooを描画
	gui.draw();

}

4.3D空間にofCircleを描く

まずは縦横100個のofCircleを画面のセンターに表示させます。
ofRotateYとかに適当に値を入れると、3D空間にofCircleが描かれているのが確認出来ます。

OA001.h

class OA001 : public ofBaseApp{

	public:
		void setup();
		void draw();

	private :
		float rotateX;
		float rotateY;
		float rotateZ;

		int count;
		float margin;
		float radius;
		int color;
		int alpha;

}

OA001.cpp

void OA001::setup(){

	// 画面全体の回転値を初期化
	rotateX = 0.0f;
	rotateY = 0.0f;
	rotateZ = 0.0f;

	// ofCircleで使用する値を初期化
	count = 100;
	margin = 25.0f;
	radius = 5.0f;
	color = 255;
	alpha = 255;

}

//--------------------------------------------------------------
void OA001::draw(){

	// この段階のMatrixを保持
	ofPushMatrix();

	// 画面センターに移動
	ofTranslate(ofGetWidth()/2, ofGetHeight()/2);
    
	// 画面全体の回転値を摘要
	ofRotateX(rotateX);
	ofRotateY(rotateY);
	ofRotateZ(rotateZ);
    
	// ofCircleの描画
	int totalLen = (count-1)*margin;
	ofTranslate(totalLen/-2, totalLen/-2);
	ofSetColor(color, color, color, alpha);
	for(int i=0; i<count; i++){
		for(int j=0; j<count; j++){
			ofCircle(i*margin, j*margin, 0, radius);
		}
	}
    
	// 保持したMatrixに戻す
	ofPopMatrix();

}

5.PerlinNoiseでゆらゆら

ofNoiseはパターン化されたランダム値を取得する事が出来ます。
ofNoiseからPerlinNoiseを取得するために以下記事を参考にしました。

Noise – 【oF】openFrameworks
https://sites.google.com/site/ofauckland/examples/noise

このPerlinNoiseで得たグレースケール値を、ofCircleの奥行きに摘要していきます。
先程と同じ箇所を改変します。

OA001.cpp

void OA001::draw(){

	// この段階のMatrixを保持
	ofPushMatrix();
    
	// 画面センターに移動
	ofTranslate(ofGetWidth()/2, ofGetHeight()/2);
    
	// 画面全体の回転値を摘要
	ofRotateX(rotateX);
	ofRotateY(rotateY);
	ofRotateZ(rotateZ);
    
	// ofCircleの描画
	int totalLen = (count-1)*margin;
	ofTranslate(totalLen/-2, totalLen/-2);
	ofSetColor(color.r*255, color.g*255, color.b*255, alpha);
	for(int i=0; i<count; i++){
		for(int j=0; j<count; j++){
			float a = i * xForce;
			float b = j * yForce;
			float c = ofGetFrameNum() / 60.0;
			float noise = ofNoise(a,b,c) * zForce;
			ofCircle(i*margin, j*margin, noise, radius);
		}
	}
    
	// 保持したMatrixに戻す
	ofPopMatrix();

}

ここまでの様子は以下の様になります。
ofxSimpleGuiTooで各パラメーターを操作して遊んでみます。
画面収録している分フレームレートが落ちていますが、実際は60fpsで動きます。

openFrameworks x Arduino #001( Process ) from Takepepe on Vimeo.

6.音楽を再生

ofSoundPlayerで音楽を取り込みます。
openFrameworksで音楽をコントロールする、恐らく最も簡単な方法です。
ofSoundPlayerのボリュームをPerlinNoiseに係数として与えることで、
音に併せて揺らめきが変わることが確認出来ます。

OA001.h

class OA001 : public ofBaseApp{

	public:
		void setup();

	private :
		ofSoundPlayer mySound;
		float speed;
		float volume;
		void setupMusic();

}

OA001.cpp

void OA001::setupMusic() {
    
	// 音楽を読み込んでループ再生
	mySound.loadSound("sound.wav");
	mySound.setLoop(true);
	mySound.play();
    
}

//--------------------------------------------------------------
void OA001::update(){

	// ofSoundPlayerを設定
	mySound.setSpeed(speed);
	mySound.setVolume(volume);

}

7.Arduinoの値を摘要

冒頭で取得したArduinoの値をofMapで音楽の音量・スピードに摘要すれば完成です！

OA001.cpp

void OA001::update(){
    
	// Arduinoのセンサー値をofSoundPlayerの設定値に変換
	speed = ofMap(distance, 150, 600, 0.1f, 3.0f);
	volume = ofMap(distance, 150, 600, 0.1f, 1.0f);
    
	// ofSoundPlayerを設定
	mySound.setSpeed(speed);
	mySound.setVolume(volume);
    

}

openFrameworks x iOS #001 from Takepepe on Vimeo.

最近めっきり暖かくなりましたね。
花粉が飛び始めたようですが、Takepepeまだ花粉症ではないのでどこ吹く風です。
（花粉症の方すみません;）

今回は上の動画の様なものを作りました。
openFrameworksで作成した複数のiOSアプリから、
openFrameworksで作成したDesktopアプリケーションを操作します。
通信には前回同様、OSCを使っています。

前回は１対１の一方通信でしたが、今回は１対複の通信になります。
動画上では2台のiPhoneのタッチ座標を取得し、その座標をつなぐ線が描画されていますが、
コード上はOSC接続している端末数に応じて点と線が増えていくものになっています。
iPadやiOSシュミレーターでも確認できます。
（引き出しに眠っているiPhone3GSが復活。捨てなくてよかった。）
物理演算処理にはBox2Dを使用しています。

全体の流れを詳しく説明していきます。

1. iOS端末からDesktopアプリケーションにOSC通信
2. iOS端末の数に応じたClientインスタンスの生成
3. Box2Dのセッティングと円を降らす処理
4. Clientメンバの座標間で線をひく

1.iOS端末からDesktopアプリケーションにOSC通信

まずはiOSアプリをopenFrameworksで作ります。
アプリ単体で見ると、タッチした場所に円が描かれるだけの簡単なものになっています。

oscS.h (iOS端末のコード)

#define HOST "192.168.10.191"　// iMacのIPアドレス
#define PORT 8000 // 接続ポート

class oscS : public ofxiPhoneApp{
	
    public:
        void setup();
        void update();
        void draw();
        float getX(float mx);
        float getY(float my);
        void touchMoved(ofTouchEventArgs & touch);
    
    private:
        ofxOscSender sender;
};

oscS.mm (iOS端末のコード)

#include "oscS.h"
#include "ofxOsc.h"

//--------------------------------------------------------------
void oscS::setup(){
    
	ofxAccelerometer.setup();
    sender.setup( HOST, PORT );
	ofBackground(0, 0, 0);
    
}

//--------------------------------------------------------------
void oscS::update(){

}

//--------------------------------------------------------------
void oscS::draw(){
	ofSetColor(255, 255, 255);
    ofCircle(mouseX, mouseY, 10);
}

//--------------------------------------------------------------
float oscS::getX(float mx){
    int res = ofGetWidth();
    return mx/res;
}

//--------------------------------------------------------------
float oscS::getY(float my){
    int res = ofGetHeight();
    return my/res;
}

//--------------------------------------------------------------
void oscS::touchMoved(ofTouchEventArgs & touch){
    ofxOscMessage m;
    m.setAddress( "/mouse/position" );
    m.addFloatArg( getX(touch.x) );
    m.addFloatArg( getY(touch.y) );
    sender.sendMessage( m );
}

2.iOS端末の数に応じたClientインスタンスの生成

ここからはDesktopアプリケーションです。
まずは「Client」クラスを作成します。
このクラスはコンストラクタにiOS端末のipアドレスを引数で渡します。
update関数が呼ばれるたび、タッチ座標を変換・更新します。

Client.h

#include "ofxOsc.h"
class Client {
    public:
        Client(std::string ip);
        void update(ofxOscMessage message);
        void draw();
        ofPoint pos;
        string getIp();
    
    private:
        string ip;
};

Client.cpp

#include "ofxOsc.h"

//--------------------------------------------------------------
Client::Client(string _ip){
    ip = _ip;
}

//--------------------------------------------------------------
void Client::update(ofxOscMessage message){
    ofxOscMessage m = message;
    
    // Clientオブジェクトの更新
    if ( m.getAddress() == "/mouse/position" && ip == m.getRemoteIp()){
        
        // 画面比率にあわせてタッチ座標を変換
        pos.x = ofGetWidth() * m.getArgAsFloat(0);
        pos.y = ofGetHeight() * m.getArgAsFloat(1);
    }
}

//--------------------------------------------------------------
void Client::draw(){
    ofCircle(pos.x, pos.y, 5);
}

//--------------------------------------------------------------
string Client::getIp(){
    return ip;
}

メインスレッドでOSCメッセージを受信した際、そのメッセージが新しい端末からの場合、
Clientインスタンスが生成されるようになっています。

oscR.h (抜粋)

#include "Client.h"
#define PORT 8000
class oscR : public ofBaseApp{
    public:
        void setup();
        void update();
        void draw();
    
    private:
        void updateClient();
        ofxOscReceiver  receiver;
        vector <Client *> clients;

}

oscR.cpp (抜粋)

#include "oscR.h"
#include "ofxOsc.h"

//--------------------------------------------------------------
void oscR::setup(){

    receiver.setup( PORT );
    
}
//--------------------------------------------------------------
void oscR::update(){
    
    // OSCクライアントの更新
    updateClient();

}
//--------------------------------------------------------------
void oscR::updateClient(){
    while( receiver.hasWaitingMessages() ){
        ofxOscMessage m;
        receiver.getNextMessage( &m );
        
        // 1つ目のOSCクライアント
        if(clients.size() == 0){
            clients.push_back(new Client(m.getRemoteIp()));
        }
        
        // 新しいOSCクライアントからのメッセージかどうか
        int flag = 1;
        for(int i=0 ; i< clients.size() ; i++){
            if(clients[i]->getIp() == m.getRemoteIp()){
                flag = 0;
            }
        }
        
        // 新しいOSCクライアントだったら
        if(flag){
            clients.push_back(new Client(m.getRemoteIp()));
        }
        
        // Clientオブジェクトの更新
        int size = clients.size();
        for(int i=0 ; i< size ; i++){
            clients[i]->update(m);
        }
    }
}
//--------------------------------------------------------------
void oscR::draw(){

    ofSetColor(50,200,255);
    ofFill();
    for(int i=0; i<clients.size(); i++) {
        clients[i]->draw();
    }

}

3.Box2Dのセッティングと円を降らす処理

次にBox2Dの実装です。
updateでカウントアップし、circlesの数が100に達したら
新しいofxBox2dCircleを作り、古いものは削除します。

oscR.h (抜粋)

#include "ofxBox2d.h"
class oscR : public ofBaseApp{
    public:
        void setup();
        void update();
        void draw();
    
    private:
        void updateCircles();
        int count;
    
        ofxBox2d box2d;
        vector <ofxBox2dCircle *> circles;
    
};

oscR.cpp (抜粋)

#include "ofxBox2d.h"

//--------------------------------------------------------------
void oscR::setup(){

    count = 0;
    
    // Box2D設定
    box2d.init();
    box2d.setGravity(0, 0.1);
    box2d.createBounds(0, 0, ofGetWidth(), ofGetHeight());
    box2d.setFPS(10.0);
    box2d.setIterations(5, 5);
    
}

//--------------------------------------------------------------
void oscR::update(){
    
    // ofxBox2dCircleを更新
    updateCircles();
    box2d.update();

}

//--------------------------------------------------------------
void oscR::updateCircles(){
    count++;
    if(count > 100){
        
        // ofxBox2dCircleの追加
        ofPoint pos;
        int r = ofRandom(10, 30);
        int x = ofRandom(r, ofGetWidth());
        pos.set(x,r);
        
        ofxBox2dCircle *c = new ofxBox2dCircle();
        c->setPhysics(1.0, 0.2, 0.2);
        c->setup(box2d.getWorld(),x,r,r);
        circles.push_back(c);
        
        // 100個以上になったら先頭のofxBox2dCircleを削除
        if(circles.size() > 100){
            vector <ofxBox2dCircle *>::iterator it = circles.begin();
            (*it)->destroy();
            delete *it;
            it = circles.erase(it);
        }
        
        count = 0;
    }
}

//--------------------------------------------------------------
void oscR::draw(){

    ofNoFill();
    ofSetColor(255,255,255);
    for(int i=0; i<circles.size(); i++) {
        circles[i]->draw();
    }

}

4.Clientメンバの座標間で線をひく

最後にiOS端末から取得した座標でofxBox2dPolygonの線をひきます。
ofPolylineに座標を追加し、ofxBox2dPolygonに代入します。
画面上で線が見える様、draw関数ではofPolylineを描画しています。

oscR.h (抜粋)

#include "ofxBox2d.h"

class oscR : public ofBaseApp{
    public:
        void setup();
        void update();
        void draw();
    
    private:
        void updatePolyLine();
        ofPolyline drawing;
        ofxBox2dPolygon polyLine;
    
};

oscR.cpp (抜粋)

#include "ofxBox2d.h"

//--------------------------------------------------------------
void oscR::update(){
    
    // 複数のOSCクライアントでofxBox2dPolygonを更新
    updatePolyLine(); 
}

//--------------------------------------------------------------
void oscR::updatePolyLine(){
    int size = clients.size();
    
    // OSCクライアントが複数だったら
    if(size >= 2){
        drawing.clear();
        for(int i=0 ; i< size ; i++){
            // 座標を追加
            drawing.addVertex(clients[i]->pos.x, clients[i]->pos.y);
        }
        // 3点以上必要なので最後の座標を追加
        drawing.addVertex(clients[size-1]->pos.x, clients[size-1]->pos.y);
        
        // ofPolylineをofxBox2dPolygonに代入
        polyLine.clear();
        polyLine.setPhysics(0.0, 0.5, 0.5);
        polyLine.addVertexes(drawing);
        polyLine.create(box2d.getWorld());
        
    }
}

//--------------------------------------------------------------
void oscR::draw(){
 
    ofSetColor(50,100,255);
    if (drawing.size()){
        drawing.draw();
    }

}

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);
}

こんにちは。今日は東京でも雪が降っています。
ゲレンデ好きでも、日常の雪は勘弁して欲しいところ。

前回、Flashでカメラ映像にDisplacementMapフィルターを適用する記事を書きました。
今回は同様の表現をcanvasで実装していきます。
js.do.itにアップしている上のデモはPCのChromeで見て下さい。（v.24.0以降）
また、再生の際にカメラへのアクセス許可が求められるので、許可してください。（ページ上部）

ながれ

1. WebRTCでカメラにアクセス
2. マップ用canvasの用意
3. レイヤー配置
4. レンダリング

1.WebRTCでカメラにアクセス

設定無しに、ウェブカメラにアクセス出来るメジャーブラウザはいまのところChromeのみなので、
Chrome閲覧を想定したコードになっています。(2013.2.19現在)
WebRTCはマイクからの音声も拾えるようになっています。

Main.js

  function setCamera(){
		
		if(navigator.webkitGetUserMedia) {
			navigator.webkitGetUserMedia( {video:true}, succeedUseCamera, failedUseCamera );
		}else{
			browserError();
		}
		
	}
  

2.マップ用canvasの用意

前回同様、マップ画像はスクリプト上で生成します。
グラデーションの書き方はActionScriptとは違うので調べてみてください。
レンズにはまる様、サイズ調整などしています。見辛くてすみません。

Main.js

  function setMap(){
		
		map = document.createElement('canvas');
		map.width = WIDTH;
		map.height = HEIGHT;
		map_ctx = map.getContext('2d');
		map_ctx.beginPath();
		
		var grad = map_ctx.createRadialGradient(WIDTH*0.5*offset,HEIGHT*0.5*offset,0,WIDTH*0.5*offset,HEIGHT*0.5*offset,WIDTH*0.5*offset);
		grad.addColorStop(0,'red'); 
		grad.addColorStop(1,'blue');
		map_ctx.fillStyle = grad;
		map_ctx.rect(0,50, WIDTH*offset,HEIGHT*offset);
		map_ctx.fill();
		
	}
  

3.レイヤー配置

必要なレイヤーを順番に配置していきます。
カメラ映像の映写が始まるまで、レンズが外れたような見た目にならないよう、リソースの画像も敷いています。
マップ用canvasとvideoタグは配置する必要はありません。

Main.js

  function setCanvas(){
		
		lens = new Image();
		lens.src = "http://jsrun.it/assets/1/Y/a/h/1Yahi.png";
		
		frame = new Image();
		frame.src = "http://jsrun.it/assets/n/P/B/W/nPBWU.png";
		
		mirror = document.createElement('canvas');
		mirror_ctx = mirror.getContext('2d');
		
		c = document.createElement('canvas');
		ctx = c.getContext('2d');
		
		lens.width = mirror.width = frame.width = c.width = WIDTH;
		lens.height = mirror.height = frame.height = c.height = HEIGHT;
		
		var objBody = document.getElementsByTagName("body").item(0);
		objBody.appendChild(lens);
		objBody.appendChild(c);
		objBody.appendChild(frame);
		
	}
  

4.レンダリング

ActionScriptと違い、現状ではcanvasのAPIやCSSでブレンドモードの設定は出来ません。
ここで、以下のライブラリを利用させていただきました。

context-blender.js @Author Phrogz

また、DisplacementMapFilterもcanvasのAPIにはないため、こちらも外部ライブラリに頼りです。

displacement.js @Author Romuald

Main.js

  function draw(){
		
		ctx.clearRect(0, 0, WIDTH, HEIGHT);
		ctx.drawImage(lens, 0, 0, WIDTH, HEIGHT);
		
		mirror_ctx.drawImage(video, 0, 0, WIDTH, HEIGHT);
		mirror_ctx.setTransform(-offset, 0, 0, offset, WIDTH*offset, 50);
		
		var filter = new filters.DisplacementMap(
		mirror,
		map,
		mirror,
		new filters.Point(0,30),
		0,
		-30,
		filters.ColorChannel.RED,
		filters.ColorChannel.RED);
		filter.draw();
		
		mirror_ctx.blendOnto( ctx, 'overlay');
		
	}
  

結果として、かなり重い実装になってしまいました。
DisplacementMapFilterの処理に時間がかかっているので、次回のjavascript関連投稿は
この処理をホヤホヤのCSS Shadersで実装したいと思います。

flash on 2013-2-15 – wonderfl build flash online

Takepepeはスノボが大好きです。
痛いのが嫌なので、パウダー派です。冬最高！

SNSなどに利用している自分のアバター画像はスノボウェアの自分…
ではなく、中身はそこら辺にあった毛布を帽子に突っ込んで撮影しましたw

iPhoneで撮影したら、レンズにバッチリ自分も写っていたため、Photoshopで編集することに。
静止画には風景を合成して入れていますが、今回はここにウェブカムの映像を映してそれっぽく変形させます。
ActionScriptには便利なフィルターがたくさんあるので、そいつでグニャっとね。

おおまかな流れは以下

1. 画像を読み込んで各レイヤーを配置
2. カメラ映像を映す
3. 変形に使うフォースマップを用意
4. 映写レイヤーを変形
5. ミラー反転も忘れずに

1.画像を読み込んで各レイヤーを配置

swfに画像を埋め込んだり、同ドメイン内の外部画像を読み込む場合はここは飛ばしていいです。
Wonderflに投稿して自サーバーの画像を読み込む場合はクロスドメインポリシーファイルをサイトルートなどに設置する必要があります。

crossdomain.xml

<?xml version="1.0" encoding="UTF-8"?>
<cross-domain-policy>
  <allow-access-from domain="wonderfl.kayac.com" />
  <allow-access-from domain="wonderfl-swf.kayac.com" />
  <allow-access-from domain="*.wonderfl.net" />
</cross-domain-policy>

Main.as

public function Main() {

	// クロスドメインポリシーファイルの読み込み
	Security.loadPolicyFile( "http://takepepe.com/crossdomain.xml" ) ;
    
}

private function setAvator():void{

	lens = new Bitmap (lensBmd);
    addChild(lens);
    
    screenBmd = new BitmapData(465,465,true,0x00000000);
    screen = new Bitmap(screenBmd);
    screen.blendMode = "overlay"; //ブレンドモード設定
    addChild(screen);
    
    frame = new Bitmap (frameBmd);
    addChild(frame);
    
}

レンズ下地、映写レイヤー、フレームの順に重ねたら、映写レイヤーにはこの段階でblendModeを設定しておきます。
“overlay”で、レンズっぽくなります。

2.カメラ映像を映す

このVideoインスタンスはaddChildする必要はありません。
VideoとCameraのインスタンス設定は以下の箇所です。

Main.as

private function setCamera():void{

	camera = Camera.getCamera();
    camera.setMode(WIDTH,HEIGHT,30,true);
    camera.addEventListener(ActivityEvent.ACTIVITY,onActiveCamera);
    video = new Video(WIDTH,HEIGHT);
    video.attachCamera(camera);
    
}

3.変形に使うフォースマップを用意

赤ければ赤いほど、下方向にピクセルが移動する力が働いています。
インタラクションでグラデーションを動かせると、ActionScriptでしか出来ない表現ができるようになります。
Flashをクリックするとグラデーションの表示・非表示が切り替わります。
フィルターの設定は4で。

Flash #001 Media’ – wonderfl build flash online

4.映写レイヤーを変形

X軸の変形は必要ないので、適当な値を入れています。

Main.as

private function update(e:Event):void{
	
    var mapPoint:Point = new Point(0, 0); 
    var componentX:uint = BitmapDataChannel.GREEN;
    var componentY:uint = BitmapDataChannel.RED;
    var forceX:Number = 0;
    var forceY:Number = 200; 
    var my_filter:DisplacementMapFilter = new DisplacementMapFilter(transformer, mapPoint, componentX, componentY, forceX, forceY, "color", 0, 0);
    screen.filters = new Array(my_filter);
    
}

5.ミラー反転も忘れずに

鏡面に映っている表現なので、映写の際にMatrixで反転させます。

Main.as

private function draw(e:Event):void{
	
    var matrix:Matrix = new Matrix();
    matrix.scale(-1, 1);
    matrix.translate(screenBmd.width, 0);
    screenBmd.draw(video);
			
}

全ソースはWonderflを参照してください。
次回はWebRTCとcanvasで同様の表現に挑戦したいと思います。

Google先生と共に技術を蓄えてきたたわけですが、もちろんGoogle先生だけでなく、偉大な先人たちのおかげで多くのことを学びました。改めて敬意を表するとともに、私と同じように、これから独学でWEBデザイン・メディアアートに挑戦しようとしている皆さんの役にたてればと思い、ブログを立ち上げました。というわけで第一回目の投稿は、当ブログでも利用しているWordPressに関する記事です。

ご存知のとおりWordPressはPHPで構成されたブログシステムで、配布されているテーマやプラグインで自前のブログを短時間で簡単に作れてしまいます。多くのレンタルサーバーではボタン一発でインストールが出来たりと、ハードルは低いです。WordPressのインストール方法や便利なプラグインの紹介は既に良記事がたくさんあるので、そちらを参考にしてください。

「Takepepe.com」TOPに用いている表現

このブログでは記事を投稿する際にアイキャッチ画像（以下サムネイル）が選択されていると、ひとつなぎになったグレースケール画像がPHPで生成されるようになっています。わざわざPHPで画像を生成しなくても、CSSやcanvasで実装出来そうですが、今回はこの方法をとっています。具体的な流れは以下の通りです。

1. 記事を投稿する際に、サムネイル生成関数を呼ぶ
2. 生成関数で輝度・彩度の調整をして合成
3. TOP用のWordPressテンプレートを作成

ブログを手っ取り早く立ち上げたかったため、デフォルトのテーマを直にいじりました。
バックアップなどは自己責任でお願いします

1.記事を投稿する際に、サムネイル生成関数を呼ぶ

post.php に数行追加します。
生成関数は2に記述します。

「wp-admin/post.php」を編集

  
  
// ファイル上部に追加
require_once('./makeTopThum.php');

////// 〜中略〜 //////

// ファイル末に追加
if(has_post_thumbnail($post_id)){ //サムネイルがあった場合
	
	//「makeTopThum.php」に記述されている関数
	makeTopThum(get_the_post_thumbnail($post_id));
	
}

2.生成関数で輝度・彩度の調整をして合成

PHPで画像にフィルターなどかけながら8枚の画像を1つにまとめます。
画像パスの取得はもっと良い方法がありそうですが、とりあえず。
画像生成はそれなりにサーバー負荷がかかりますので、クライアントワーク等に使用する際は気をつけてください。

Before

After

「wp-admin/makeTopThum.php」を新規作成

<?php
function makeTopThum($_img){
	
    $THUM_WIDTH = 160; //サムネイル幅
    $THUM_HEIGHT = 90; //サムネイル高さ
    $NUM = 8; //画像数
	$WIDTH = ($THUM_WIDTH+1)*$NUM; //出力する画像の幅
	$HEIGHT = $THUM_HEIGHT+1; //出力する画像の高さ
	
    
	//出力先の画像を作成
	$dst = imagecreatetruecolor($WIDTH, $HEIGHT);
	
	//白で塗る
	$white = imagecolorallocate($dst, 0xFF, 0xFF, 0xFF);
	imagefill($dst, 0, 0, $white);
	
	//アイキャッチ画像のパス
	preg_match_all("/<img [^>]*src\s*=\s*[\"']?([^\"'> ]+)/i", $_img, $mt);
	$srcs = array_map('htmlspecialchars_decode', $mt[1]);
	$src = $srcs[0];
	
	//画像名の取得
	$index = mb_strrpos($src,"/");
	$name = substr($src, $index+1, -4);
	
	//画像ディレクトリの取得
	$index = mb_strrpos($src,"/");
	$dir = $_SERVER['DOCUMENT_ROOT'];
	$dir .= substr($src, 19, $index-18);
	
	//新画像のパス
	$new = $dir.$name."-top.jpg";
	
	//画像を8つ並べる
	$arr = array(200,150,100,50,0,50,100,150); //輝度配列
	for($i = 0; $i<$NUM ;$i++){
		$thum = imagecreatefromjpeg($src);
		imagefilter($thum, IMG_FILTER_BRIGHTNESS, $arr[$i]); //輝度調整
		imagefilter($thum, IMG_FILTER_GRAYSCALE); //グレースケール変換
		imagecopy($dst, $thum, $i*($THUM_WIDTH+1), 0, 0, 0, $THUM_WIDTH, $THUM_HEIGHT);　//画像配置
		imagedestroy($thum);
	}
	
	//画像保存
	imagejpeg($dst, $new, 100);
	imagedestroy($dst);
	
}

?>

3.TOP用のWordPressテンプレートを作成

最後にTOP用のテンプレートを作成して、CSSを調整すれば完成です。

「wp-content/themes/(利用しているテーマ)/content-top.php」を新規作成

<?php

$title = get_the_title(); //タイトル
$date = get_the_date(); //投稿日
$url = get_permalink(); //パーマリンク

//アイキャッチ画像のパス
$img = get_the_post_thumbnail();

//統合画像のパスに変換
preg_match_all("/<img [^>]*src\s*=\s*[\"']?([^\"'> ]+)/i", $img, $mt);
$srcs = array_map('htmlspecialchars_decode', $mt[1]);
$src = $srcs[0];
$path = substr($src, 19, -4)."-top.jpg";

echo "<a href=\"$url\" style=\"background:url($path);\"><span class=\"title\">$title<span class=\"date\">$date</span></span></a>";

?>

デザイナーの人も、サーバーでPhotoshopみたいに画像を編集出来ることを知っていれば、CMS経由のコンテンツデザインの幅がぐっと広がります。是非、挑戦してみてください。