PHPでWebSocketが使えるライブラリ”Ratchet“を使って、ブラウザVJデモを作ってみました。

 

 

↑あまりかっこいいものではないですが、デモ動画です。
コントロール用のウィンドウから、表示用ウィンドウのエフェクトを操作しているところがWebSocket部分です。

 

いや、変に苦労しました。
開発&動作環境がさくらインターネットのレンタルサーバ(スタンダードプラン)なんでroot権限ないし、ZeroMQとかWAMPとかauthbahn.jsとか何それおいしいの?な状態だったし。。
とりあえず、簡単にメモを残します！

 

参考にしたのはRatchetのPush Integrationサンプルです。

Ratchetインストールメモ

まずはRatchetをインストールしなければならないので、Push Integrationサンプルのページに書いてあるcomposer.jsonをコピペして必要なパッケージをインストールしようとしました。すると、以下のようなエラーが。。

Problem 1
– react/zmq v0.3.0 requires ext-zmq * -> the requested PHP extension zmq is missing from your system.
– react/zmq v0.2.0 requires ext-zmq * -> the requested PHP extension zmq is missing from your system.
– Installation request for react/zmq 0.2.|0.3. -> satisfiable by react/zmq[v0.2.0, v0.3.0].

 

react/zmqをインストールするには、zmq(ZeroMQ)のPHP extensionが必要みたいです。
なので、先にzmqのphp extensionをインストールするのですが、このzmqのextensionをインストール(ビルド)するにはlibzmqが必要です。まずはこいつをインストールしましょう。

ここからStable Release 3.2.5をダウンロードし、ビルドします。
なぜ最新の4.1.0じゃないかというと、単純にさくらのレンタルサーバだとビルドが通らなかったからです!

 

次にzmqのextensionですが、root権限がないのでpear経由ではなくソースからビルドします。ソースからのビルドはここを参照。

参考サイトの通りにやればzmq.soのビルドはできるのですが、なぜかインストール先が/usr/local以下から変更できない。。仕方ないので、zmq.soを手動でコピー。
zmq.soの情報を独自php.iniに追記してインストール完了、、と思いきや、composerのエラーは変わらず。

そりゃそうですよね、コマンドラインから独自php.iniを読みにいく設定してませんから。
これも力技で、phpを実行するとphp -c xxx/php.ini が実行されるようエイリアスを仕込みます。
これでreact/zmqの0.3.0がインストール出来ました!!

 

 

アプリの作成メモ

ReactとかZeroMQのことは置いておいて、ここでのポイントはautobahn.jsです。

autobahn.jsはWebSocketとWAMPのプロトコルに対応したクライアントライブラリで、Push Integrationサンプルでも使われています。

APIのリファレンスはこちらを参照(WAMP v2に対応した0.9.4のリファレンスには、サンプルで使われている関数は載ってなかったです)。

 

主な動作の仕組みは↓です。

 

準備

1. Webサーバとは別にWebSocketサーバを起動しておく
   ※ WebSocketサーバは、クライアント(ブラウザ)との通信用に8080ポート、ZeroMQ(Webサーバ経由で送られてくるメッセージ)との通信用に5555ポートを利用するようにしています。

使用時

1. コントローラのURLにアクセスし、表示用のウィンドウを開く
   ※ このとき、表示用ウィンドウがWebSocketサーバに接続されます。
2. Webサーバに対して、コントローラから操作用のコマンドをajaxで送信する
3. コマンド(JSON)を受信したら、WebサーバがWebSocketサーバにZeroMQ経由でメッセージを送信する
   ※ ZeroMQのPUSH/PULLパターンを使っています。
4. WebSocketサーバがメッセージを受信したら、接続しているクライアント(表示用ウィンドウ)に対してコマンド(JSON)を送信する
5. コマンドを受信したクライアントは、その内容に合わせて処理を行う

 

ソースはgithubにアップしました。

 

以上!!!!

 

 

Kezzardrix大先生が手がけたLITE/EncholocationのMVに大変感動しました。

なんとかっこいいのかと。

 

このネタを自分でも作ってみたくなったので、がんばってみました。

実装してない機能多数ですがw

 

 

実際に手を動かしてみると、かっこいい絵にするために細かい調整が必要なのだという事がよく分かりました。

今後、(時間があれば)以下の2点の機能を追加しようと思います。

• 音との同期の精度を上げる
• オブジェクトを構成するポリゴンを法線方向に飛ばす(EncholocationのMVの後半に出てくるエフェクト。これは是非とも作ってみたい。)

 

 

オブジェクトを追跡するところの実装方法は、備忘録としてQiitaにまとめてます。

 

 

プロジェクションマッピング用のaddon「ofxMltMapping2D」を使ってみました。

実際どんなものになるかというと、↓みたいな感じです。

 

 

球の書き方は田所先生の記事を参考にさせて頂きました。

やはりこういった所でセンスの違いが出てきますね。。

 

 

さて、ofxMltMapping2Dはデスクトップマシン(NVIDIAのグラボが入っている)だと割とすんなり動かせたのですが、ノートPC(Mobile Intel(R) 4 Series Express Chipset Family)上だとExceptionが発生し、プログラムが起動しませんでした。原因は、Framebuffer Object関連のExtension名が違っていた(古いもの？)だったためです。詳細はQiitaにまとめています。

 

もっといい対応方法があると思うのですが、まだまだ勉強不足ですね。

 

ofxMltMapping2Dはなかなかいい感じなので、これから使っていこうと思います。

 

 

Quartz ComposerでW杯ネタ作りました。

実は先週こっそり使ってます。

 

 

 

パッチの中身

 

 

ギリシャ戦、いい試合を！！

 

 

作ったものとかを整理するために、ブログはじめます。
でも更新頻度は低いよー

 

初回はopenFrameworksでVJやるときの基本、FFT。

とりあえずこんなデモ(グラフィックスイコライザ)です。

 

ソースはGitHubにあげてます。

https://github.com/tkt182/fftPowerSpectrum

 

ググればわかると思いますが、openFrameworksのフォーラムにあるソースを
少し変えただけです。

 

Audio input FFT example
http://forum.openframeworks.cc/t/audio-input-fft-example/186/0

 

FFT部分のソースは以下のものを使ってます。
http://groovit.disjunkt.com/analog/time-domain/fft.html

FFTの解説は他のサイトにお任せするとして(説明できるほど理解できてません。。)、
ここではofSoundStreamクラスを使った音声入力の仕組みの解説っていうかメモです。

 

 

■ofSoundStreamクラスの実体

 

ofSoundStreamクラスは、windowsの場合、RtAudioライブラリのラッパーになります。ofSoundStream.hの9 ～ 21行を参照。

 

#ifdef OF_SOUNDSTREAM_RTAUDIO
#include "ofRtAudioSoundStream.h"
#define OF_SOUND_STREAM_TYPE ofRtAudioSoundStream
#elif defined(OF_SOUNDSTREAM_PORTAUDIO)
#include "ofPASoundStream.h"
#define OF_SOUND_STREAM_TYPE ofPASoundStream
#elif defined(OF_SOUNDSTREAM_ANDROID)
#include "ofxAndroidSoundStream.h"
#define OF_SOUND_STREAM_TYPE ofxAndroidSoundStream
#elif defined(OF_SOUNDSTREAM_IOS)
#include "ofxiOSSoundStream.h"
#define OF_SOUND_STREAM_TYPE ofxiOSSoundStream
#endif

 

Windowsの場合、マクロでOF_SOUNDSTREAM_RTAUDIOが定義されるため(ofConstants.hの303行目を参照)、ofRtAudioSoundStream.hがインクルードされ、OF_SOUNDSTREAM_TYPEがofRtAudioSoundStreamになります。

 

 

■取得できるサンプリング値のフォーマット

 

デバイスの初期化を行うsetup関数は、内部でRtAudioのopenStream及びstartStream関数を
実行しています(ofRtAudioSoundStream.cppの131～138行目)。
このopenStream関数が結構大事で、3番目の引数にサンプリングデータのフォーマット、
6番目の引数に、音声入力が発生した際に実行されるコールバック関数のポインタを
指定する仕様になってます。

 

で、実際にsetup関数の中身を見てみると、
フォーマットはRTAUDIO_FLOAT32(ofRtAudioSoundStream.cppの132行目)、
コールバック関数はaudioIn(ofRtAudioSoundStream.cppの238行目)が指定されていることが分かります。

 

以下によると、RTAUDIO_FLOAT32は-1.0 ～ 1.0の値にストレッチされたデータとの事なので、
audioIn関数にて読み込んだサンプリング値は”上記の範囲内の値”ということになります。
http://www.music.mcgill.ca/~gary/rtaudio/RtAudio_8h.html#aafca92882d25915560018873221e44b8

 

windowsでofSoundStream周りの仕様が知りたいときは、
ofRtAudioSoundStream関連のソースを読めばいいということが分かったので、
とりあえずは大丈夫かなー