Recreating the Hypnotoad Sound with JS

16 March 2025
js,
p5

Not long ago I came across this blog post, via Reddit, about how someone recreated THX’s signature “Deep Note” sound using Javascript. It reminded me of a similar project I worked on which involves recreating another well known signature sound from popular culture, Futurama’s Hypnotoad sound, which actually has a name: “Angry Machine"

The THX sound was made using Tone.js. I wanted to use p5.js because I also planned on putting it on an Arduino which uses Processing. But then I later found out that p5.js's sound module is just a wrapper around Tone.js so I ended up using it either way.

First, here’s a clip showing you the sound I'm trying to achieve:

https://www.youtube.com/watch?v=zHU2RlSCdxU

Prior Art #

As I was researching how to recreate this sound I found this excellent blogpost by Scott Smitelli who analyzed the original audio and figured out how to recreate it using Adobe Audition: https://www.scottsmitelli.com/articles/everybody-imitates-hypnotoad

I highly recommend reading that post, but basically the sound boils down to:

make some Brown noise
add delay, around 25ms
pass it through a Fast Fourier Transform (FFT) filter with customized points (see blog post for details on that)

P5’s Sound module has all of the methods I need to recreate this:

p5.Noise
p5.Delay
p5.Filter
p5.FFT, although this is only able to analyze and not actually filter

In the end I was able to recreate the sound with just the delay and and noise. It's not exact, but it's close enough. Scott's version is much closer but he's using an actual audio program and not JavaScript.

Here's the code:

let noise;
let delay;

function setup() {
  noise = new p5.Noise("brown");
  delay = new p5.Delay();
  delay.process(noise, 0.025, 0.8);
}

function mousePressed() {
  if (noise.started) {
    noise.stop();
  } else {
    noise.start();
  }
}

All hail the Hypnotoad!

Previous: Stitching together videos and images with FFmpeg