JavaScript で VJ をやってみた

経緯 ➔ Kinect を使って面白いことやりたい ➔ インタラクティブな VJ やりたい ➔ 仕事に活かすために JavaScript （ブラウザ）でやろう ➔ あ、映像と操作の 2 画面必要だ… ➔ WebSocket でやってみる → サーバーサイドの実装がめんどい… ➔ デスクトップアプリでいいじゃん → Electron

やりたいこと ● ビジュアルとコントロールの2画面表示 ● ビジュアルの切り替え（フェードイン・アウト） ● 複数のビジュアルの重ね合わせ

DEMO npm run dev （開発モード） ※ npm run build は未対応のためできません … https://github.com/ko-yelie/vj-electron

仕組み

使用ツール ● electron-vue （ベース） ○ Vuex ● Vue Material （デザイン） ● vue-range-slider （フェーダー © ktsn） ● Vue.Draggable （重なり順並び替え）

感想 ● JavaScript でもなんとかなる、可能性は無限大 ● electron-vue 楽 ● canvas だと背景透過できるから他と組み合わせやすい ● パーティクルとトンネルは VJ にしやすい（バンドライブ） ● canvas アニメーションを入れすぎると重くなる ● トラックパッドでの操作はつらい

今後の展望 ● 自分でビジュアルを作る ● センサー（マイク、 Kinect など）からの入力に応じて ビジュアルを変化させる ● マウス以外のハードから操作できるようにする