Animation of swirling colored dots

For years, I’ve been interested in generating animations from audio. This is my first attempt to generate music from an animation!

The GIF up there does not do it justice. Go play with it for a bit and come back. (Tip: if you’re on a phone or ipad, it supports multitouch!)

Animation

Clicking or tapping the screen creates a rotating dot that eventually fades away.

The dots rotate in a circle in time with the tempo of the music. To make the motion a little more interesting, the center of the circle, the edge of the screen, and the two nearest dots all exert some radial force on each dot. This generates the swirling patterns.

This was my first (and only, so far) WebGL experiment. I had plenty of experience with GLES already, and it was easy enough to make a simple animation like this in a browser.

Sound

I started with 3 short loops from a song my friend and I were working on: bass, drums, and vocal. (Open your debug tools if you want to find the original loops.) The bass loop plays continuously, but the other two wait for some interaction.

When a dot rotates across the 12 o’clock mark, it sends a trigger to either the drums channel or the voice channel (depending on the dots color).

The loop channels track the tempo of the music. When the reach a time corresponding to a sixteenth note, the channel may play a short sample from the original loop, depends on how many triggers it has accumulated. There are a few different variations to determine exactly which clip it actually plays, which creates the glitch effect.

There are a couple other subtle things going on too: there’s a low pass filter and an echo effect that rise and fall with the dots.

Opinion

JavaScript would not be my first choice for this kind of audio and animation code, but it’s the language that runs in web browsers.

I really hate the Web Audio API. They seem to make it as difficult as possible to do any custom DSP. When I made this project, I read that ScriptProcessor nodes were deprecated, so I tried to implement my granular resampling code as an Audio Worker. I struggled for quite a while to produce any output, when I finally discovered that no browser implemented Audio Workers. And now Audio Workers are deprecated too; now you’re supposed to use “Audio Worklets.” It’s only a matter of time before my animation breaks.

I won’t rant further here, but this guy has a more detailed essay that closely mirrors my own thoughts.