$30 off During Our Annual Pro Sale. View Details »

JavaScript で VJ をやってみた

KoYelie
August 24, 2017

JavaScript で VJ をやってみた

KoYelie

August 24, 2017
Tweet

Other Decks in Programming

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 など)からの入力に応じて ビジュアルを変化させる • マウス以外のハードから操作できるようにする