VJ with JavaScript - Speaker Deck

Slide 1

Slide 1 text

VJ with JavaScript Takanori Oki @wejs

Slide 2

Slide 2 text

Self-introduction • Takanori Oki / @takanorip • SmartDrive Inc. / Frontend Engineer • React, Vue.js, Polymer, web creation • Polymer Japan Translation team • Like : anime, free-font, music

Slide 3

Slide 3 text

Polymer Japan Cafe • 2018/2/6 (Tue) @Google Tokyo Ofﬁce • For beginners at Polymer and Web Components

Slide 4

Slide 4 text

hyperapp code reading • 2018/2/7 (Wed) @TeamSririt • We will read and discuss hyperapp while drinking

Slide 5

Slide 5 text

What is VJ ?

Slide 6

Slide 6 text

VJ • Abbreviation for “Video Jockey” or ”Visual Jockey” • People who stream video to music at clubs and concert venues • Nowadays they perform with PC

Slide 7

Slide 7 text

AfterEffects, Free materials Software Create materials Effect processing

Slide 8

Slide 8 text

VJ with JavaScript

Slide 9

Slide 9 text

Create materials Effect processing JavaScript

Slide 10

Slide 10 text

Using Technologies • Web Audio API • Use input of microphone or MIDI device • AnalyserNode • three.js • Generate graphics

Slide 11

Slide 11 text

AnalyserNode / AudioNode audio stream

Slide 12

Slide 12 text

SOURCE CODE https://github.com/takanorip/vj-with-js

Slide 13

Slide 13 text

fftSize 高速フーリエ変換を実行して周波数ドメインデータを取得するときに使用されるサンプルのウィンドウサイズ frequencyBinCount fftSizeの半分の値 getByteFrequencyData(array) 現在の周波数データを渡されたUint8Array（符号なしバイト配列）にコピーする getFloatFrequencyData(array) 現在の周波数データを渡されたFloat32Array配列にコピーする

Slide 14

Slide 14 text

DEMO 01 pure JS

Slide 15

Slide 15 text

DEMO 02 Using three.js

Slide 16

Slide 16 text

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