Making Realtime Audio-Visuals

on YouTube ↗48m

" summary

Claims that tiny realtime audio‑visuals fit in 64 bytes to ~1KB and that you can couple sound and visuals by pregenerating wave buffers played via the audio element. Uses Canvas 2D, a single geometric primitive driven by one formula, and tricks: power‑of‑two increments to avoid floating‑point drift, avoid HSL (it's slow) in favor of RGB detuning, use shadowBlur for cheap glow, and PNG bootstrapping to compress code. Builds a branching plant demo with generated WAV audio, sprites and it runs live.

AI-written summary · about

" chapters (16)

1. 0:00Start
2. 0:13Mathieu Henri
3. 1:26What & where 2. General tips 3. Wild tricks 4. Coding time
4. 1:42What & where
5. 1:57Code golfing & Creative coding
6. 2:54DEMOSCENE
7. 3:37FOCUS
8. 3:55NO LIBRARY NO FRAMEWORK
9. 4:23ONE PRIMITIVE
10. 4:42ONE FORMULA
11. 5:13Dirty trigonometry
12. 5:46IEEE 754
13. 7:29Web Audio Api or Audio element
14. 8:53COLORS
15. 10:21PNG Bootstraping
16. 11:22Audio-Visual

" related talks

• 25mMonster Audio-Visual demos in a TCP packetMathieu Henri · JSConf EU 2014
• 45mArt.jsMathieu Henri · ffconf 2016
• 33mCoding ArtMathieu Henri · Render Conference 2017
• 37mDemo Reel & Tiny JavaScriptMathieu Henri · Front-Trends 2016
• 09mSynthesizing Video and Turning it into Music!Jes Wolfe · !!Con 2017
• 43mUsing a modern web to recreate 1980S horribly slow and loud loading screensRemy Sharp · FrontEnd Con 2018
• 28mAudiovisual Programming Workshop by Charlie Roberts. Part 1.Charlie Roberts · Web Audio Conference 2019
• 25mHow to be a Web A/V ArtistRuth John · JSConf AU 2016