たまに音楽制作で使っているMax/MSPで作ったMIDIシーケンサーを、スクリーンキャプチャで動画にしてみました。（ブログ上だと画面が小さいのですが、vimeoのロゴの横のボタンを押すとフルスクリーンで見れます。またvimeoのページに飛んでもらえばHDでも見れます。）

動画ではMax/MSPから、Ableton Liveのサンプラーをトリガーしてます。
簡単に説明すると、32ステップのシーケンサーで、縦のスライダーが各ステップでMIDIをトリガーする確率になります。スライダーがマックスのときは必ずトリガーされ、半分だったら50%の確率でトリガーされます。
そのシーケンサーを左右で2機搭載しており、下のクロスフェーダーで切り替えられます。クロスフェーダーを真ん中にすると、ちょうど中間のパターンになる感じです。例えば、左のスライダーがマックスで、右のスライダーがゼロ、クロスフェーダーが真ん中だと、50％の確率でトリガーされます。このようにクロスフェードすることで、シーケンスのモーフィングみたいな効果が得られます。

メインのパッチは下の画像のようになってます。けっこうスッキリしているのは、ほとんどの計算をmaxのJavaScriptで処理してるためです。

OpenCV のフェイス・トラッキングの実験を Processing でやってみました。
macbook のカメラからリアルタイムに顔を追跡して、曲線が顔を覆います。
線はスプライン曲線を Eric Natzke の Ribbon の要領で太さを持たせ、バネの仕組みで動かしてます。

制作途中、突然動かなくなって焦ったんですが、昼間すごく天気が良くて、逆光で顔を認識できてなかったのが原因でした。(笑)

Vimeo にアップロードしたら再圧縮で汚くなってしまったので、別で Quicktime 版もアップしております。
face_tracking_ribbon.mov

スプライン曲線とは、与えられた複数の点を通る滑らかな曲線のことです。スプライン曲線を描くには、点と点の間を補完していくことになりますが、Catmull-Rom 補完とはその方法の一つになります。

Catmull-Romスプライン曲線

詳しい説明は上記ページに書かれていますが、これを as3 で書くとこうなります。

public function catmullRom(p0:Number,p1:Number,p2:Number,p3:Number,t:Number):Number
{
	var v0:Number = (p2 - p0) * 0.5;
	var v1:Number = (p3 - p1) * 0.5;
	return (2*p1 - 2*p2 + v0 + v1)*t*t*t +
		(-3*p1 + 3*p2 - 2*v0 - v1)*t*t + v0*t + p1;
}

t を 0〜1 に変化させることで、p1〜p2 間が補完されます。実際に曲線を描くには、曲線を分割（サンプルでは20分割）して擬似的な曲線（短い直線の集合）として描いていきます。分割数を1にすれば折れ線になります。

以下のサンプルは、赤い点をドラッグすれば曲線も変化します。

サンプル - Catmull-Rom スプライン曲線

package {
	import __AS3__.vec.Vector;

	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Point;

	[SWF(width="520", height="390", backgroundColor="#ffffff")]
	public class spline extends Sprite
	{
		private var points:Array;

		public function spline()
		{
			if(stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event=null):void
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			setup();
		}

		private function setup():void
		{
			points = new Array();
			var numPoints:uint = 6;//点の数
			for(var i:uint=0; i<numPoints; i++)
			{
				var point:Sprite = new Sprite();
				point.x = Math.round(Math.random() * stage.stageWidth);
				point.y = Math.round(Math.random() * stage.stageHeight);
				point.graphics.beginFill(0xff3366);
				point.graphics.drawCircle(0, 0, 3);
				point.graphics.endFill();
				point.buttonMode = true;
				point.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownListener);
				addChild(point);
				points.push(point);
			}

			setPoints();
		}

		private function setPoints():void
		{
			var v:Vector.<Point> = new Vector.<Point>();
			for(var i:uint; i<points.length; i++)
			{
				var point:Sprite = Sprite(points[i]);
				v[i] = new Point(point.x, point.y);
			}
			graphics.clear();
			drawSpline(v);
		}

		private function drawSpline(v:Vector.<Point>):void
		{
			if(v.length<2) return;
			v.splice(0,0,v[0]);
			v.push(v[v.length-1]);

			var numSegments:uint = 20;//曲線分割数（補完する数）
			for(var i:uint=0; i<v.length-3; i++)
			{
				var p0:Point = v[i];
				var p1:Point = v[i+1];
				var p2:Point = v[i+2];
				var p3:Point = v[i+3];
				splineTo(p0, p1, p2, p3, numSegments);
			}
		}

		private function splineTo(p0:Point, p1:Point, p2:Point,
			p3:Point, numSegments:uint):void
		{
			graphics.lineStyle(1, 0x666666);
			graphics.moveTo(p1.x, p1.y);
			for(var i:uint=0; i<numSegments; i++)
			{
				var t:Number = (i+1)/numSegments;
				graphics.lineTo(
					catmullRom(p0.x, p1.x, p2.x, p3.x, t),
					catmullRom(p0.y, p1.y, p2.y, p3.y, t)
				);
			}
		}

		public function catmullRom(p0:Number, p1:Number, p2:Number,
			p3:Number, t:Number):Number
		{
		    var v0:Number = (p2 - p0) * 0.5;
		    var v1:Number = (p3 - p1) * 0.5;
		    return (2*p1 - 2*p2 + v0 + v1)*t*t*t +
				(-3*p1 + 3*p2 - 2*v0 - v1)*t*t + v0*t + p1;
		}

		private function mouseDownListener(e:MouseEvent):void
		{
			var point:Sprite = Sprite(e.target);
			point.startDrag();
			point.addEventListener(MouseEvent.MOUSE_UP, mouseUpListener);
			addEventListener(Event.ENTER_FRAME, enterFrameListener);
		}

		private function mouseUpListener(e:MouseEvent):void
		{
			var point:Sprite = Sprite(e.target);
			point.stopDrag();
			point.removeEventListener(MouseEvent.MOUSE_UP, mouseUpListener);
			removeEventListener(Event.ENTER_FRAME, enterFrameListener);
		}

		private function enterFrameListener(e:Event):void
		{
			setPoints();
		}

	}
}

Built with Processing

というわけで windows でもビルドしてみました。

perlinparticle_win

ダウンロードしたら解凍して perlinParticle.exe を実行してみてください。自分のマシンではそこそこ動いてるんですが、スペックによってどれだけ差が出るのとか、そのへんのさじ加減はわかりません。遅すぎ！という人いたら教えてください。

Code::Blocks という開発環境でビルドしたんですが、ソースファイルの追加方法がよくわからず。。。とりあえずビルドはできたんですが、使い方がよくわかってません。違う開発環境で試してみようかな。

perlinparticle.zip

openFrameworks は C++ で processing みたいなことができちゃうライブラリです。最初 windows でトライしたら、どうもコンパイルエラーやら、ライブラリを追加する方法がわからなかったりで、開発環境のトラブルが多くあきらめようかと思ったんですが、mac の Xcode で試したらすんなりできました。mac 最高！

で、c++ ですが、1つのクラス定義するのに .h（ヘッダー）と .cpp（ソース）の2ファイル作んなきゃなんなくて最初戸惑いましたが、ここを参考に進めていっていったらなんとなく感覚はつかめました。

あと肝心のパーリンノイズを出すクラスが標準でなかったので、アドオンでこれを使いました。

processing より全然速そうですね！windows の開発環境が整ったら、win版もアップします。

color c = #000000;

と書いていたものを Eclipse（Java）で書く場合は

int c = 0xff000000;

になります。32ビットカラーなのも注意。

processing の IDE が pde ファイルを Java に変換するのは、PdePreprocessor.java というクラスでおこなっているようです。color に関してコメントも書かれていました。

color c = #cc0080; should unpack to 0xffcc0080
(the ff at the top is so that the color is opaque),
which is just an int.

ちなみに PApplet クラスのソースコードは PApplet.java のようです。actionscript で使いたいときには、これを元に移植すればいいですね。

UNAGI BALL をマイク入力に対応させました。マイクを接続している方は、ぜひ試してみてください。音量によってモジャモジャ変化します。

以下、マイク入力はセキュリティ・ダイアログでやっかいだったので整理しておきます。
まず、FLASH がマイクを使おうとすると下記のようなダイアログが出ます。

この場合の「録音」の意味って「入力」ってことなんだろうけど、なんだかよくわかならい人は拒否を押したくなるダイアログですね。。。

具体的には、setLoopBack(true) でマイクの音をスピーカーに送るタイミングでダイアログが出ます。

var mic:Microphone = Microphone.getMicrophone();
if(mic != null)
{
	mic.setLoopBack(true); //このタイミングでダイアログが出る
}

ただこれが setLoopBack を実行するたびに毎回出るわけではなくて、マイクに接続しようとした最初の一回だけです。二回目からは最初に選択した状態が保持されます。なので最初に拒否されてしまったら、二回目からは設定を変更しない限りマイクに接続されません。

設定を変更するには下記二つの方法でセキュリティダイアログを開いて変更します。

• 右クリック > 設定
• Security.showSettings(SecurityPanel.PRIVACY);

ただしこれは最初のダイアログと違います。

最初のダイアログでさえ拒否を押しそうですが、この画面はまず拒否か閉じるを押しますよね。。。

なので今回はマイク接続を拒否された場合は、リロードボタンを設置することにしました。リロードすれば設定はリセットされるので、最初のダイアログになります。「このコンテンツはマイク接続の許可が必要です」的なテキストを入れて、「セキュリティパネルを開く」と「リロード」のボタン二つを置くというのも手ですね。

ちなみに UNAGI BALL は、リーロードボタンの画面で「右クリック > 設定」で許可した場合は、コンテンツがスタートするようにしてあります。

container という空の Sprite に circle という Sprite を配置して、container の MouseEvent を取得すると、ターゲットの値が circle になってしまう。

MouseEvent - ActionScript 3.0 コンポーネントリファレンスガイド:

ネストされたノードが関係する場合、マウスイベントは、表示リストで確認できる最も深くネストされたノードをターゲットにします。

このターゲットを container にするには、container の mouseChildren プロパティを fasle に設定すればよい。

mouseChildrenプロパティ

var container:Sprite = new Sprite();
container.name = "container";
addChild(container);

var circle:Sprite = new Sprite();
circle.name = "circle";
circle.graphics.beginFill(0xFFCC00);
circle.graphics.drawCircle(40, 40, 40);

container.addChild(circle);

container.mouseChildren = false;

container.addEventListener(MouseEvent.CLICK, clicked);

function clicked(event:MouseEvent):void
{
	trace(event.target.name); // container
}

container.mouseChildren = false; の行があるかないかで変わってくる。

ざっと調べてみた結果、標準以外で開発する場合は下記の手段がある（まだあるかもしれない）。

mac
・Xcode
・TextMate
・Eclipse

win
・jEdit
・Eclipse

このうち共通するのは Eclipse のみ！ということで、WindowsでのProcessing用エディタ１Eclipse編を参考に思い切って導入してみた。

やってみたら意外と簡単で、Eclipse インストールして、新規で java のプロジェクト作って、ライブラリで processing の lib フォルダに入ってる core.jar を追加するだけのことだった。

ただ、標準と書き方が若干違っていて、

import processing.core.*;

public class HelloP5 extends PApplet
{
	public void setup()
	{
	}

	public void draw()
	{
	}
}

みたいに書くことになる。標準の書き方よりは長くなってしまうけど、個人的には逆にこっちのほうが as3 っぽいのでイイかもしれない。

今まで processing やってきたことは PApplet を拡張した java だったんか！ってのを、実際やってみて改めて気付きました。

あと調べててわかったのは、標準の IDE で複数のタブを使ってクラス書いてたのは、実は一つに結合されていたってこと。

[Processing][仕様].pdeはインナークラス、.javaは別クラス

複数のタブを開いて別のクラスを作っても、そのクラスはスケッチ本体クラスのインナークラスとして結合されるのです。別の言い方をすると、スケッチのディレクトリ直下にある「*.pde」ファイルは、全部結合された後、コンパイルされるということです。

なので、Eclipse で複数クラス作るときは、メインの PApplet を拡張したクラスのインスタンスを渡すか、参照用の静的クラスかシングルトンを作った方がいいかも。

Eclipse 自体は、普段 actionscript で flexbuilder を使っていたので、違和感なく使えそう。
しばらく使ってみて調子良さそうだったら subversion なんかも入れてみます。