Audiovisual Programming Workshop by Charlie Roberts. Part 2.
summary
Fragment shaders render one pixel at a time using UV returns -1 to 1 so multiplying color by P.y creates a central black band; animated stripes come from sin(P.x frequency + time) where time is a per-frame uniform. Code uses Hydra/WebGL for fragments, mouse and mic via Firefox, and Web Audio FFT with a 1024 window producing 512 bins that are summed into four bands* (bins 0–5, 5–11, 11–24, 24–512) to drive visuals; shaders and audio routing work live, Chrome audio is noted as broken.
AI-written summary · about
chapters (8)
- 0:00Introduction to shaders
- 4:33Fragment shader basics
- 8:26Shader language details
- 10:18Looping in shaders
- 12:20Audio FFT integration
- 19:06FFT frequency bands
- 24:07Live performance demo
- 32:44Summary and break
