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
660
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
Other Decks in Technology
See All in Technology
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
1.2k
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
800
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
210
JavaにおけるNull非許容性
skrb
2
2.7k
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
330
Охота на косуль у древних
ashapiro
0
120
サバイバルモード下でのエンジニアリングマネジメント
konifar
20
6k
OPENLOGI Company Profile
hr01
0
60k
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
3
350
DeepSeekとは?何がいいの? - Databricksと学ぶDeepSeek! 〜これからのLLMに備えよ!〜
taka_aki
1
170
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
270
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Done Done
chrislema
182
16k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
We Have a Design System, Now What?
morganepeng
51
7.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) @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 )