ICM week 10 – Traffic Sound Visualizer

This week we learned about audio input and visualization with P5.js. I took the traffic simulator I made a few weeks ago and added a mic input to it which changes the amount of traffic present on the screen based on the volume of sound received from the mic.

Original traffic simulator: https://editor.p5js.org/ukpfilms/sketches/c44iSmAW9

At first I tried to make this change by making the audio input change the variable controlling the amount of cars and pedestrians. However, this did not work because in the original sketch, the car and pedestrian objects are created only once in the setup function, so changing the variable based on mic input in the draw loop does not change the amount of objects created.

In order to change the amount of car and pedestrian objects in the array, I had to link the mic input to an if statement which push or splice from the arrays based on how loud the mic input is. This did work, but there is only one level of increase or decrease in the array change (push or splice 1 from the array based on if the volume is higher than one value rather than higher volume = more pushed & vice versa).

Another change I made to the original sketch was removing the function where cars gets half as long every time they bump into another car. I also removed the stroke from most shapes and increased the size of the pedestrians’ heads.

New sound traffic visualizer: https://editor.p5js.org/ukpfilms/sketches/Yvtmt2OQg

It can be interesting to see the traffic getting busier as you yell louder.