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
VJ with JavaScript
Search
takanorip
January 24, 2018
0
140
VJ with JavaScript
takanorip
January 24, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
100
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
780
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.9k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.8k
早わかり W3C Community Group
takanorip
0
460
Ubieとアクセシビリティのこれからを考える
takanorip
0
420
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Docker and Python
trallard
44
3.3k
Building Your Own Lightsaber
phodgson
104
6.2k
Six Lessons from altMBA
skipperchong
27
3.6k
4 Signs Your Business is Dying
shpigford
182
22k
Raft: Consensus for Rubyists
vanstee
137
6.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Transcript
VJ with JavaScript Takanori Oki @wejs
Self-introduction • Takanori Oki / @takanorip • SmartDrive Inc. /
Frontend Engineer • React, Vue.js, Polymer, web creation • Polymer Japan Translation team • Like : anime, free-font, music
Polymer Japan Cafe • 2018/2/6 (Tue) @Google Tokyo Office •
For beginners at Polymer and Web Components
hyperapp code reading • 2018/2/7 (Wed) @TeamSririt • We will
read and discuss hyperapp while drinking
What is VJ ?
VJ • Abbreviation for “Video Jockey” or ”Visual Jockey” •
People who stream video to music at clubs and concert venues • Nowadays they perform with PC
AfterEffects, Free materials Software Create materials Effect processing
VJ with JavaScript
Create materials Effect processing JavaScript
Using Technologies • Web Audio API • Use input of
microphone or MIDI device • AnalyserNode • three.js • Generate graphics
AnalyserNode / AudioNode audio stream
SOURCE CODE https://github.com/takanorip/vj-with-js
fftSize 高速フーリエ変換を実行して周波数ドメインデー タを取得するときに使用されるサンプルのウィン ドウサイズ frequencyBinCount fftSizeの半分の値 getByteFrequencyData(array) 現在の周波数データを渡されたUint8Array(符号 なしバイト配列)にコピーする getFloatFrequencyData(array)
現在の周波数データを渡されたFloat32Array配列 にコピーする
DEMO 01 pure JS
DEMO 02 Using three.js
Future Tasks • Study three.js • Study Effects • Want
to buy MIDI device • I will write a book about VJ with JS and distribute at Gijutsushoten
SmartDrive recruits Frontend Engineers!!
Thank you ! ( Font : Futura )