p5 Audio Visualizer - loops, variables, and functions in p5.js (broken)

--Due to a recent update to Google Chrome, this no longer works in that browser--

This is a thing I made that reacts to sound. Essentially it's 36 line geometries that share the same start point but each have an end point defined by three things:

  • A given angle around the center
  • the amplitude of the most recent sound sampling from the microphone
  • a randomly selected rate of growth to try and "match" the amplitude

Instead of simply having the length of the lines assigned to raw sound data, I wanted it to appear to grow naturally instead of "popping" to new information, so sound is sampled every half second or so (this is dictated by hardware, not time) and my algorithm has the lines try and match the sound volume, each line at a random rate.

The colors of the thing also change depending on sound over time. It will increase the amount of red and decrese the amount of green and blue when sound gets louder and the opposite when it gets softer. Colors will revert to normal if no significant change is detected.

Process:

  • I read up on the AudioIn object and found how easy it is to use. I only needed the start() and getLevel() member functions.
  • I then made a basic radial shape made up of lines. This involved using polar coordinates and converting the coordinates to cartesian so the line functions could work properly. I found getting the thing in the center was easiest when I "drew" it at the origin and translated it to the center. I used a loop to draw 36 lines of the same length with 10 degrees angular distance away from each other
  • Next I played with various ways on how to get the mic data to the lines. I tried giving it raw data, but it didnt move much. So I multiplied the data by a constant to scale it better. This resulted in the lines jumping from length to another at each cycle, looking rather odd.
  • I figured out how to make the lines grow more naturally by making the sampling slower and giving the lines time to "catch up" between reads. In this down time, the lengths would increment by small amounts until it reached the sampling level. I played with this duration until I found a happy medium between realtime updating and smooth animation.
  • To get the mic input scalar right, I put in a function to let me adjust the scalar live while it ran. I kept it in for good measure.
  • I wanted to do some stuff with color, so I made a simple little function that detected if the sound level was louder or softer than the previous "noise value." If the sound level is greater, the noise value would increment, and it would decrement if the sound level was softer. If the noise value grows, the color pallete gets warmer and cools if the noise value shrinks.
  • From my graphics class in undergrad I learned how to get information about the window dimensions and how to update the screen if the dimensions change. I looked into how to do this with p5.js, found how easy it is to implement, and made my application fill the whole window with color.