How To Be a Web AV Artist

on YouTube ↗30m

" summary

Shows a working Portable Audio Visual Pack that projects live visuals to music and runs from a laptop plus a small projector. Uses Web Audio API for mic input and FFT, converts analyser arrays by slicing and redistributing bins to match musical octaves, moves from DOM/SVG to 2D canvas for hundreds of shapes to fix performance, and accepts control from a Web MIDI API controller. Demonstrates CSS custom properties pumping values from JS, a ~25 fps canvas build, and a deployable street‑projection setup.

AI-written summary · about

" chapters (11)

1. 0:00Start
2. 1:42How To Be a Web Av Artist
3. 3:03What Is an Av Artist
4. 7:22Web Audio Api
5. 7:39Analyzer Node
6. 9:59Inspiration
7. 10:34The Css Triangle Border Hack
8. 10:58Css Transforms
9. 12:31Css Variables
10. 23:42Web Midi Api
11. 25:37Creative Coding

" related talks

• 26mHow To Be a Web AV ArtistRuth John · CascadiaJS 2018
• 25mHow to be a Web A/V ArtistRuth John · JSConf AU 2016
• 25mHow To Be A Web A/V ArtistRuth John · JSConf EU 2017
• 01mAudiovisual Programming in Live PerformanceCharlie Roberts · Web Audio Conference 2019
• 33mWe ❤ Music & the WebMartin Schuhfuss, Tim Pietrusky · JSConf Budapest 2016
• 40mLiveJS: Making Music with JavaScriptRuth John, Martin Schuhfuss, Matt Mckegg · ColdFront 2017
• 45mArt.jsMathieu Henri · ffconf 2016
• 43mInteractive and Collaborative Art for the Mobile WebKawandeep Virdee · FITC Toronto 2015