Experiment 1: Clap Powered Fireworks – Kiana Romeo

Kiana Romeo 3159835

Clap Powered Fireworks!


For this project, I wanted to create something that would interact with sound, but I did not want to create the same generic DJ type sound reactive system that has been seen so many times before. Instead, I wanted to make it so that whatever was going on on the screen would be controlled by the user, and the sound made by the user would directly correlate to the resulting animation. I wanted the project to focus on loud sounds so I started brainstorming things that a clap would be able to imitate. Instead of the action causing the sound, I wanted the sound to cause the action!

At first, I had debated on whether making lightning would be a better option. With this I would make an environment in which random lightning strikes would be created when the user clapped their hands, thus mimicking the sound of lightning. But as it was a simulation of nature, it would have been too predictable so I instead chose to make fireworks instead. This way, I could change colour, size, velocity and shape as they are manmade and the way they look does not need to be a certain way in order to recognize what it is.

Github link: Clap-powered-fireworks

fireworks 1screen-shot-2018-09-29-at-12-12-58-am

Although I could have successfully programmed the sketch in either program, I chose to work with p5.js instead of Processing because connecting and using the microphone to control the sketch was much more straightforward and I still got the same desired effect. As well, linking multiple javascript files to one html file felt much easier than linking multiple files in Processing. I created the sketch in both programs (with help from Dan Shiffman tutorials of course!) and preferred the output of the p5 version much more. 



https://www.youtube.com/watch?v=CKeyIbT3vXI&index=30&list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH (Coding Challenge #27: fireworks)

https://www.youtube.com/watch?v=aKiyCeIuwn4&t=679s&frags=pl%2Cwn (Coding Challenge #41: Clappy Bird)

https://www.youtube.com/watch?v=q2IDNkUws-A (17.8: Microphone Input – p5.js Sound Tutorial)

I relied heavily on these three videos to create my project. Many hours were spent simply watching the videos until the code made sense, and then typing out any code that was given to help with my project. Through watching these videos I learned a lot about particle systems, arrays and functions as well as using the p5 sound library to make interesting, interactive artwork.

Leave a Reply