Hayterwave
Join the Discord

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.

  1. Make it positive. Take the absolute value of each sample, so the down swings count the same as the up swings.
  2. Rise quickly. If the new value is higher than the current envelope, move toward it fast. The time this takes is the attack.
  3. 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.

kick signal (cream)follower output (yellow), a smooth numbernext beat, 0.46 s later
An illustration, not the audio of the track. The kick is drawn as a 40 Hz burst that fades. The follower has a 4 millisecond attack and a 100 millisecond release.

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;
  });
}
  1. Feed it a kick, with an attack of 5 and a release of 100. Plot the result.
  2. Make the release 400. The number no longer falls far before the next kick arrives, so the picture stays lifted.
  3. Make the attack 80. The number now misses the sharp start of the kick.
  4. 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

Join the DiscordWhat members get

Stuck on something this guide did not cover? Ask in the Discord.