JavaScript で VJ をやってみた

Transcript

1. JavaScript で VJ をやってみた
2. 経緯 ➔ Kinect を使って面白いことやりたい ➔ インタラクティブな VJ やりたい ➔ 仕事に活かすために JavaScript （ブラウザ）でやろう ➔ あ、映像と操作の 2 画面必要だ… ➔ WebSocket でやってみる → サーバーサイドの実装がめんどい… ➔ デスクトップアプリでいいじゃん → Electron
3. やりたいこと • ビジュアルとコントロールの2画面表示 • ビジュアルの切り替え（フェードイン・アウト） • 複数のビジュアルの重ね合わせ
4. DEMO npm run dev （開発モード） ※ npm run build は未対応のためできません … https://github.com/ko-yelie/vj-electron
5. 仕組み
6. 使用ツール • electron-vue （ベース） ◦ Vuex • Vue Material （デザイン） • vue-range-slider （フェーダー © ktsn） • Vue.Draggable （重なり順並び替え）
7. 感想 • JavaScript でもなんとかなる、可能性は無限大 • electron-vue 楽 • canvas だと背景透過できるから他と組み合わせやすい • パーティクルとトンネルは VJ にしやすい（バンドライブ） • canvas アニメーションを入れすぎると重くなる • トラックパッドでの操作はつらい
8. 今後の展望 • 自分でビジュアルを作る • センサー（マイク、 Kinect など）からの入力に応じて ビジュアルを変化させる • マウス以外のハードから操作できるようにする