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
98
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 train your dragon (web standard)
notwaldorf
91
5.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
The Cult of Friendly URLs
andyhume
78
6.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Six Lessons from altMBA
skipperchong
27
3.6k
How GitHub (no longer) Works
holman
314
140k
The World Runs on Bad Software
bkeepers
PRO
67
11k
The Language of Interfaces
destraynor
156
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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 )