NOC Midterm

Sketch: https://editor.p5js.org/ukpfilms/sketches/Rv7gWOj5v

For this project, I was inspired by a visualization form open processing:

https://openprocessing.org/sketch/1057412

I attempted to make a similar interactive visualization using the additive wave example sketch from the coding train as a starting point. I firsts used a particle system class to call in multiple additive waves because the irregular shape of the waves make them a great tool for generating dynamic visuals when called in a group.

The waves look monotonous when background is drawn every frame, but fills up the screen overtime if the background is drawn in setup. I drew a half transparent background every few frames in the sketch so the waves fade out overtime as they are being drawn - giving more dynamism to the visuals without having the waves fill up the entire screen overtime.

Finally, I added a slider to control the speed of the waves and associated the color of the waves with mouse X so users can control the appearance of the waves.

Next, I created a p5 oscillator and linked the frequency of the sound to the slider which controls the phase speed of the waves, and amplitude of the sound to mouseX.

As a result, there is now both visual and audio feedback when a user interact with the sketch.