Hatena::ブログ(Diary)

aikeの日記 RSSフィード

2014-09-13 ブラウザでVJプログラム書くときのフレームワーク作った

JavaScriptオーディオとビジュアルの扱い方をおぼえると、人類はみなVJアプリを作るようになります。ぼくの周りの5人くらいの人類はそうでした。

 

自分もいろいろビジュアライザーアプリを作ってイベントでブラウザVJやったりしました。ただ、ひとつひとつはそれなりに面白い視覚効果のプログラムでも、それだけでは長時間のイベントに対応できません。通常のVJのように、イベントの進行やDJの音楽の緩急に合わせて効果的な視覚効果を選択して次々と切り替えていきたいところです。

 

そんなわけで、複数の視覚効果をクロスフェードで切り替えられるようなブラウザVJフレームワークを作りました。それぞれの視覚効果や各種の機能をプラグインとして仕様化し、この仕様に合わせれば拡張機能プラグインを自作できるようになっています。

  

https://github.com/aike/jsdrome

http://aikelab.net/jsdrome/

 

f:id:aike:20140913074551p:image

 

■仕様

・複数のビジュアライザーをプラグインとして組み込み

・ビジュアライザー同士のクロスフェード

・非表示状態のビジュアライザーの処理を自動停止

・サウンドファイルの再生

・マイク入力またはサウンドファイルに反応する映像処理

・テキストロゴ表示

ウェブカメラ入力表示

キーボード入力による制御

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.jsWebカメラ+エフェクト
common/controlwindow.js操作パネル表示
common/leap.jsLeap Motionインタフェース

 

プラグインは以下の各イベントに対応するメソッドを実装します。イベント処理が不要の場合は空のメソッドとしておきます。

onStart()表示開始
onStop()表示終了
onFade(opacity)フェードイン/アウト処理 opacityは0〜1
onAudio(moment, period)マイク入力またはオーディオファイルの音量が定期的に通知される
onKeydown(keycode)キー押下イベント。フォアグラウンドのプラグインにのみ通知される
onResize(x, y, width, height)ウィンドウリサイズ処理
onTimer()描画用タイマーイベント
onMidi(arg1, arg2, arg3)MIDI入力イベント

 

わりと多機能なので、いずれもう少し詳しく書く予定です。