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
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
Platformに“ちょうどいい”責務ってどこ? 関心の熱さにあわせて考える、責務分担のプラクティス
estie
1
140
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
アセットのコンパイルについて
ojun9
0
130
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
320
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
4.3k
🔨 小さなビルドシステムを作る
momeemt
4
690
Improving my own Ruby thereafter
sisshiki1969
1
160
print("Hello, World")
eddie
2
530
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Facilitating Awesome Meetings
lara
55
6.5k
Speed Design
sergeychernyshev
32
1.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
4 Signs Your Business is Dying
shpigford
184
22k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Embracing the Ebb and Flow
colly
87
4.8k
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 など)からの入力に応じて ビジュアルを変化させる • マウス以外のハードから操作できるようにする