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
790
効果的な管理画面を デザインをするために 避けるべき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
Rails Girls Zürich Keynote
gr2m
94
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Unsuck your backbone
ammeep
669
57k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Automating Front-end Workflow
addyosmani
1369
200k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
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 )