Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript で VJ をやってみた
Search
KoYelie
August 24, 2017
Programming
0
1.8k
JavaScript で VJ をやってみた
KoYelie
August 24, 2017
Tweet
Share
Other Decks in Programming
See All in Programming
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
Kiroで始めるAI-DLC
kaonash
2
630
Reading Rails 1.0 Source Code
okuramasafumi
0
250
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
250
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Testing Trophyは叫ばない
toms74209200
0
890
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
130
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Building Adaptive Systems
keathley
43
2.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Done Done
chrislema
185
16k
Balancing Empowerment & Direction
lara
3
620
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Visualization
eitanlees
148
16k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Being A Developer After 40
akosma
90
590k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Transcript
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 など)からの入力に応じて ビジュアルを変化させる • マウス以外のハードから操作できるようにする