VJ with JavaScript

Transcript

1. VJ with JavaScript Takanori Oki @wejs
2. Self-introduction • Takanori Oki / @takanorip • SmartDrive Inc. / Frontend Engineer • React, Vue.js, Polymer, web creation • Polymer Japan Translation team • Like : anime, free-font, music
3. Polymer Japan Cafe • 2018/2/6 (Tue) @Google Tokyo Office • For beginners at Polymer and Web Components
4. hyperapp code reading • 2018/2/7 (Wed) @TeamSpirit • We will read and discuss hyperapp while drinking
5. What is VJ ?
6. VJ • Abbreviation for “Video Jockey” or ”Visual Jockey” • People who stream video to music at clubs and concert venues • Nowadays they perform with PC
7. AfterEffects, Free materials Software Create materials Effect processing
8. VJ with JavaScript
9. Create materials Effect processing JavaScript
10. Using Technologies • Web Audio API • Use input of microphone or MIDI device • AnalyserNode • three.js • Generate graphics
11. AnalyserNode / AudioNode audio stream
12. SOURCE CODE https://github.com/takanorip/vj-with-js
13. fftSize 高速フーリエ変換を実行して周波数ドメインデー タを取得するときに使用されるサンプルのウィン ドウサイズ frequencyBinCount fftSizeの半分の値 getByteFrequencyData(array) 現在の周波数データを渡されたUint8Array（符号 なしバイト配列）にコピーする getFloatFrequencyData(array) 現在の周波数データを渡されたFloat32Array配列 にコピーする
14. DEMO 01 pure JS
15. DEMO 02 Using three.js
16. 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
17. SmartDrive recruits Frontend Engineers!!
18. Thank you ! ( Font : Futura )