ブラウザでVJプログラム書くときのフレームワーク作った
JavaScriptでオーディオとビジュアルの扱い方をおぼえると、人類はみなVJアプリを作るようになります。ぼくの周りの5人くらいの人類はそうでした。
自分もいろいろビジュアライザーアプリを作ってイベントでブラウザVJやったりしました。ただ、ひとつひとつはそれなりに面白い視覚効果のプログラムでも、それだけでは長時間のイベントに対応できません。通常のVJのように、イベントの進行やDJの音楽の緩急に合わせて効果的な視覚効果を選択して次々と切り替えていきたいところです。
そんなわけで、複数の視覚効果をクロスフェードで切り替えられるようなブラウザVJフレームワークを作りました。それぞれの視覚効果や各種の機能をプラグインとして仕様化し、この仕様に合わせれば拡張機能プラグインを自作できるようになっています。
https://github.com/aike/jsdrome
http://aikelab.net/jsdrome/
■仕様
・複数のビジュアライザーをプラグインとして組み込み
・ビジュアライザー同士のクロスフェード
・非表示状態のビジュアライザーの処理を自動停止
・サウンドファイルの再生
・マイク入力またはサウンドファイルに反応する映像処理
・テキストロゴ表示
・ウェブカメラ入力表示
・キーボード入力による制御
・MIDI入力による制御
・Leap Motion入力による制御
現状、以下のようなビジュアライザープラグインがあり、クロスフェードで切り替えられます。
3d-cube.js | キューブ |
3d-wave.js | スペクトラムアナライザー |
3d-lissajous.js | リサジュー図形 |
3d-matrix.js | マトリックス |
3d-stardust.js | 宇宙 |
danmaku.js | 弾幕ビジュアライザー |
videoplayer.js | 動画プレイヤー |
dummy.js | 表示テスト |
以下のプラグインはクロスフェードせずに常時有効となる共通プラグインです。
common/logo.js | テキストロゴ表示 |
common/musicplayer.js | 音楽プレイヤー |
common/camera.js | Webカメラ+エフェクト |
common/controlwindow.js | 操作パネル表示 |
common/leap.js | Leap Motionインタフェース |
プラグインは以下の各イベントに対応するメソッドを実装します。イベント処理が不要の場合は空のメソッドとしておきます。
onStart() | 表示開始 |
onStop() | 表示終了 |
onFade(opacity) | フェードイン/アウト処理 opacityは0〜1 |
onAudio(moment, period) | マイク入力またはオーディオファイルの音量が定期的に通知される |
onKeydown(keycode) | キー押下イベント。フォアグラウンドのプラグインにのみ通知される |
onResize(x, y, width, height) | ウィンドウリサイズ処理 |
onTimer() | 描画用タイマーイベント |
onMidi(arg1, arg2, arg3) | MIDI入力イベント |
わりと多機能なので、いずれもう少し詳しく書く予定です。