岩崎航也
Ko.Yelie (エリー)
Electron で VJ アプリを作った
https://ko-yelie.github.io/layered-vj/
誰でもいじれます
IPC でデータのやり取り 参考： Electronの複数ウィンドウ間で共通のVuex Storeを扱う
window.open でビジュアルウィンドウを開く
お互いの window オブジェクトを参照してデータのやり取り 参考： 【JavaScript】子ウィンドウ／親ウィンドウのお互いの要素を操作するには！？
Webカメラ
×
WebGL
Particle
前のフレームとの色差分があるピクセルのみパーティクルを 出力することで、動きのある 部分だけ絵を表示できる
たまにパーティクルを集合 させたり
画像を読み込んでその形にすることもできる
Warp
差分のあるところから点 ではなく線を放射
速くしたり回転させたり
激しい曲で
Pop
色差分の出たところから シャボン玉のようなものを 飛ばす
ポップな曲で
Rock
映像に2値化処理 (しきい値 より高ければ白、低ければ黒)をかけて iPod CM 風に
Glitch
壊れたブラウン管テレビ のようなグリッチエフェクト
ノイズ＋走査線＋ビネット
マイクからの入力音声の音量に応じてノイズを大きくするようにも対応
Toon
輪郭線抽出してアニメ風に
ストップモーションのように わざとフレームレートを下げることでより手描きっぽくなる
Water, Comic
水面のようなゆらぎ
three.js のサンプルにある
Dot screen シェーダ を利用してコミック風に
手持ちのWebカメラ自体にはズーム機能がついていないので自前で実装
スクロール＆ドラッグで操作
ギターソロ時にギタリストにフォーカスしたり
Detector
機械学習用 JS ライブラリ TensorFlow.js と Tiny YOLO (リアルタイム物体検出システム) を組み合わせたライブラリ tfjs-yolo-tiny を使って人を検出（重いのでクリックしたときだけ検出）
検出した人にフォーカス、画面分割することでアー写や MV 風に
さらにエフェクトをかけたりズームすることも可能
Webカメラを2台配置し、
異なる視点の映像を切り替える
(上) 野外ライブステージ、 (下) ライブハウス ※ 屋外 (特に昼間) では 4000lm 程度のプロジェクターでは全然映らない
By Ko.Yelie (エリー)
Meguro.es #16 @ LIVESENSE での LT 用スライドです。
GitHub: https://github.com/ko-yelie
