<aside> 💡 Written by Matthew Stanciu at Hack Club. Adapted with permission.

</aside>

Sound visualization is one of the coolest things that modern-day web development tools have made accessible. There’s something surreal and indescribably satisfying about seeing the sounds around you on your screen and somehow understanding what you’re seeing.

Untitled

In this workshop, you’re going to create a galaxy out of shimmering particles that expand and move based on microphone input, in less than 50 lines of code.

Getting started

We’re going to be using p5.js, a JavaScript library for creative coding, to make this project. This project requires two separate p5.js libraries: p5.js and p5.sound.js.

Get started from the starter project by clicking here. Once your project spins up, navigate to the index.html file. Then, just before the end of your <head> tag, import these two libraries:

<script src="<https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js>"></script>
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/lib/addons/p5.sound.js>"></script>

Great! Now that we’ve imported p5, we’re ready to start writing JavaScript.

About the Fourier Transform

At the center of everything we’re building in this workshop is something called a Fourier Transform: a mathematical operation that takes a frequency (e.g. the sound frequency picked up by your computer’s microphone) and decomposes it into the individual wavelengths that make it up. You don’t need to understand how the Fourier Transform works—it’s built into p5 and super easy to use—but if you’re interested, 3Blue1Brown made a great video explaining it.

Setting up p5

p5.js is primarily composed of two functions: setup() and draw(). The setup() function runs only once when the project first starts up, and the draw() function runs continuously afterwards. Let’s start by creating these two functions in your script.js file:

function setup() {}

function draw() {}

Everything in p5.js happens on a p5 canvas. Let’s create a canvas that fills our window in the setup() function:

function setup() {
  createCanvas(windowWidth, windowHeight)
  noStroke()
}

By default, p5 adds an outline around objects in a canvas. noStroke() removes this outline.

Now, let’s tell p5 to listen for microphone input.