Building a JavaScript Video Synthesizer for Live Performance
summary
Builds a browser-based video modular synth called bit kid that maps live inputs (MIDI, gamepad, mouse, webcam) to canvas/SVG/iframe visuals using Web MIDI, getUserMedia and canvas plus CSS transitions and web components. Shows actual code patterns (eval/new Function, iframe sandboxing), demos that mostly work though some nodes and React integration misbehave, and notes performance limits and hacky workarounds rather than just high-level examples.
AI-written summary Β· about
chapters (35)
- 0:00Introduction
- 1:20Inspiration
- 2:17Testing
- 3:05Modular Synthesis
- 5:08Dynamic SVG
- 6:43Atari Video Music
- 7:43Digital Aesthetics
- 8:24Audio Response
- 9:18Hardware
- 10:30BitKid
- 11:10Nodes
- 11:53Overview
- 13:22Web Components
- 14:27Code Examples
- 14:39Writing to iframe
- 15:15Evil is evil
- 15:35Evil eval
- 16:04Evil attribute
- 16:35CSS transitions and drum machines
- 20:10Bimini
- 21:13How it works
- 21:32MIDI messages
- 22:16Gamepad
- 23:00RequestAnimationFrame
- 23:34Video in Canvas
- 24:41Webcam
- 24:58Canvas
- 25:30Video Example
- 26:34Problems with this approach
- 26:50I run out of time
- 27:20Get attribute
- 27:36Errors
- 27:47ChangeCallBack
- 28:21TouchDesigner
- 29:06Loopback
related talks
40mLiveJS: Making Music with JavaScript
20mLook What You MIDI Me Do!
14mMusical Creativity in the Browser
50mJavaScript for Artists
25mHow To Be A Web A/V Artist
40mBeats in the Browser - Coding Music with JavaScript
31mHow I built my own music performance software in JavaScript
24mJavaScript is the new Punk Rock