~ Interactive slides on sound, waves, grooves

Recently, my son’s school teacher asked parents to come in and read in front of the class. I kindly declined, since I am not very comfortable doing voices in front of a room full of ten to twelve-year-olds. As an alternative, I proposed to explain some properties of sound and music, based on material I used fifteen years ago for the kids’ university: a series of workshops and lectures aimed at children. Unfortunately, after a couple of months, the teacher took me up on the offer.

Fifteen years ago, I painstakingly hand-coded - yes, this is becoming a thing - demos in the Java programming language to show properties of sound: an oscilloscope, a loudness level meter, a spectrogram, a pitch detector. This took ages but worked reasonably well to show basic properties of waves, sounds and music.

This time, I casually vibe-coded similar demos, not in Java but using self-contained, single-page web applications. Below one of the demos - on sound propagation - is included. With the aid of powerful AI coding tools, programming these interactive demos took only a couple of hours. Fifteen years ago, the hand-coded - arguably worse - versions of the demos took weeks. The main downside is that there is less pride or satisfaction in detailed prompting vs hand-coding.

With frameworks like reveal.js it is straightforward to string together html pages in a single presentation. Here is the full presentation on sound, waves and music in Dutch. Or check the sound presentation github repository.

Giving the presentation went well and as far as I could tell, the kids were at least involved and may have learned a couple of things. Afterwards, I got some feedback via a parent that their kid was intrigued and got curious, so I will take that as a win.

Some takeaways:

• AI coding tools are great at creating stand-alone, interactive, shader-based visualizations and demos.
• Use web technologies for slides: great for multimedia, accessibility, distribution, and interactive slides.
• To create interactive slides where shaders or visual information is used the AI coding tool should be able to peer deep into the browser internals. This can be done with the Chrome DevTools MCP or a similar system. This feedback loop allows an LLM to improve on a single-shot attempt automatically.

UGent