Home / Guides / Why a kick can drive a visual
Guide
Why a kick can drive a visual
In CONTROL YOUR BODY the kick drives the floor, the tunnel and the projection distance of a tesseract. Nothing is keyframed. The track is the controller. Here is the idea behind that.
What a transient is
A transient is the short, loud start of a sound, before it settles. A kick drum has a very sharp one: the level jumps almost at once, then falls away over a fraction of a second. That jump is easy for a machine to see.
At 129.2 beats per minute one beat lasts about 0.46 seconds, so a kick on every beat gives a clear jump about twice a second.
Why a number is better than the sound itself
A sound wave moves up and down tens or hundreds of times a second. If a visual followed it directly, the picture would shake. What the visual needs is one slow number that says how loud the sound is right now. That number is called an envelope.
How an envelope follower works
An envelope follower is a small piece of arithmetic that turns the fast wave into the slow number. It has three steps.
- Make it positive. Take the absolute value of each sample, so the down swings count the same as the up swings.
- Rise quickly. If the new value is higher than the current envelope, move toward it fast. The time this takes is the attack.
- Fall slowly. If the new value is lower, move toward it slowly. The time this takes is the release.
A fast attack catches the transient. A slower release bridges the gaps between swings of the wave, so the number stays smooth, and it makes the picture ease back instead of snapping.
From number to picture
Once the number exists, you connect it to a property of the picture. Make it scale a shape, push a camera back, brighten a surface or shift a texture. Each time the kick lands, the number jumps, and the picture moves. Between kicks it eases back. No one placed a keyframe on a timeline, because the music alone sets the timing.
That is the rule in the published description of CONTROL YOUR BODY: the kick drives the floor, the tunnel and the projection distance of a tesseract, and nothing is keyframed. How it is connected in that visual is not published, so this guide shows the general method and not the exact settings.
What to try
This short function follows the envelope of a list of samples. It is the same three steps as above.
function follow(samples, sampleRate, attackMs, releaseMs) {
const a = Math.exp(-1 / (sampleRate * attackMs / 1000));
const r = Math.exp(-1 / (sampleRate * releaseMs / 1000));
let env = 0;
return samples.map(x => {
const v = Math.abs(x);
const c = v > env ? a : r;
env = c * env + (1 - c) * v;
return env;
});
}
- Feed it a kick, with an attack of 5 and a release of 100. Plot the result.
- Make the release 400. The number no longer falls far before the next kick arrives, so the picture stays lifted.
- Make the attack 80. The number now misses the sharp start of the kick.
- Connect the output to the size of a circle on a canvas.
For the audio input, the analysis and the safety limit on flashing, read How to make a live visual for a DJ set.
Limits
A follower reacts to loudness, not to which instrument made it. A loud bass note can set it off as well as a kick, so builders often filter the signal down to the low end first. The settings that look right depend on the track and the room, and they need testing.
Keep going
- How to make a live visual for a DJ set
- What a bar of electronic music looks like on a score
- Live visuals for performers
Stuck on something this guide did not cover? Ask in the Discord.