An interactive music visualizer which explores the relationship between sound and shape.
I used openFrameworks to code this interactive music visualizer which allows the user to manipulate the shape using numbers on their keyboard .
Each number on the keyboard correlates to the speed and form of which the shape takes.
PROCESS
WHY:
I wanted to explore the transition between geometric and organic shapes through sound. How can feelings be evoked and manipulated through adding gradual modulations?
It ideally starts as pure geometric shapes and the user can manipulate this in accordance to the music by making the shapes more "flowy" over time and eventually makes the visual irregular and imperfect.
Audio: Beethoven - Moonlight Sonata
3 sections:
adagio - at ease/slowly
allegretto - moderately fast
presto - very fast
Audio: Beethoven - Moonlight Sonata
3 sections:
adagio - at ease/slowly
allegretto - moderately fast
presto - very fast
Experimentation
I started by searching for different ways I could create what I wanted. The first thing I did was made an audio reactive shape (circle) to stay consistent throughout the sketch. The radius is determined by the bands, as well as the smoothness :
fftSmooth[i] *= 0.5f; and goes up by *150.
I wanted the circles to react in a relatively fast pace so I set the fftSmooth to 0.5f.
I looked around for inspiration on how to use noise to manipulate shapes; I was looking for something that could start off as geometric and be manipulated i.e using noise to look as if it's flowing all over the screen. I also knew that I wanted to incorporate audio in some way (something like an audio visualizer), however I also wanted to be able to manually control the visual on screen. I started first by using a GUI to control the lines on screen, however I didn't like the way it felt - I wanted it to be more like a keyboard in which I could just press a key to produce a different sound (in this case, a different visual)
for (int x = ofGetWidth() * 0; x < ofGetWidth(); x += 1) { noise_value = ofMap(ofNoise(x * lines, y * lines, ofGetFrameNum() * lines), 0, 1, -50, 50); ofDrawLine(x, y + noise_value, x + 5, y + noise_value);
I created float and int values for the lines and this manipulates the height of the waves it would create, as well as the speed it's at. I then used the keyPressed function (switch key) and added the values for each case from 1-9. for example:
switch (key) { case '0': lines = 0; flow = 0; pulse = 1; layers = 1; break; case '1': lines =0.001; flow = 0.001; pulse = 0.9; layers = 1; break;
the lines manipulate height and speed (values 0 - 0.03) flow manipulates the circle in the middle (values 0 - 0.009) pulse manipulates the circle's radius across time (1 - 0.4) layers manipulates the amount of circles drawn (1-9)
I created float and int values for the lines and this manipulates the height of the waves it would create, as well as the speed it's at. I then used the keyPressed function (switch key) and added the values for each case from 1-9. for example:
switch (key) { case '0': lines = 0; flow = 0; pulse = 1; layers = 1; break; case '1': lines =0.001; flow = 0.001; pulse = 0.9; layers = 1; break;
the lines manipulate height and speed (values 0 - 0.03) flow manipulates the circle in the middle (values 0 - 0.009) pulse manipulates the circle's radius across time (1 - 0.4) layers manipulates the amount of circles drawn (1-9)
Github Link for full process and inspiration.
Development
