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
Technology
0
640
VJ with JavaScript
takanorip
January 24, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
社内管理画面のデザインもプロダクトデザイン
takanorip
4
740
早わかり W3C Community Group
takanorip
0
270
Ubieとアクセシビリティのこれからを考える
takanorip
0
240
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
2.9k
デザインシステム運用とOKRの良い関係
takanorip
0
1.7k
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
170
メンタルヘルスチューニング
takanorip
0
260
Other Decks in Technology
See All in Technology
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
240
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
280
DevOpsDays History and my DevOps story
kawaguti
PRO
9
2.5k
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
On Your Data を超えていく!
hirotomotaguchi
2
670
MapLibreとAmazon Location Service
dayjournal
1
150
Building Dashboards as a Hobby
egmc
0
100
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
13k
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
データベース02: データベースの概念
trycycle
0
150
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
1
210
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Clear Off the Table
cherdarchuk
84
310k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Typedesign – Prime Four
hannesfritz
36
2.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
BBQ
matthewcrist
80
8.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
In The Pink: A Labor of Love
frogandcode
138
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
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) @TeamSpirit • 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 )