For this project, I used audio and music visualization as inspiration.
First, I started by drawing shapes like rectangles and circles and creating the parameters. I used variables like a, b, and c to create both the random colors of the shapes and for the placement, height, or width for the circles and rectangles. As I had many repetitive x and y values for the shapes, I also used variables to keep from retyping numbers and also to manipulate the values more easily. In creating the hypnotizing or swirling effect of music visualization I made each shape have a random color as it moved all over the page, overlapping with one another to create this effect.
I wanted the shapes to be able to move like the lines of Jean-Michel Rolland’s “Generative Music Patterns” or like the moving patterns in many of the first audio visualizers (Hahn, Web). By using functions like sin() and frameCount, I could get the circles for example to either bounce inward and outward, or move in a sinusoid pattern across the canvas. Utilizing functions like rotate(), scale(), and translate(), I moved the shapes to the origin being at (200,200) and set the size so that each shape would either bounce or rotate around that point.
Additionally, I created the functions drawRectangles(), drawCircles(), drawRect1() to wrap the shapes into their own function. drawRect1() is used for the background to change the color of the canvas (in the colorMode(HSB)) or to start over and draw a new pattern.
I defined these functions and the parameters by writing them under the draw() function or by defining them under functions like mousePressed() or keyPressed();
As in Rolland’s “Generative Music Patterns”, I wanted my project to be interactive. While in Rolland’s art, clicking the mouse allows for the music to start and random lines to be drawn, I used functions like keyPressed() to have the pattern start while pressing keys. I set the keyCode differently for each circle so that whatever key I press, each circle pattern will vary in size. While the keys are being pressed, not only will the size of the shapes change, but so will the display of the shapes as they move. Thus, this will generate the random pattern of music visualization and create a unique pattern for each song.
Furthermore, I utilized for-loops in order to create the desired pattern for the circles as they moved. This loop pattern would generate snake-like lines of circles across the page, both generating random movement and ever-changing colors for a swirling effect.
Finally, I used “Virtual Piano Keyboard” in order to create the music aspect of my audio visualization. Like the “Light Organ” from the article “Sound and Vision: Music Visualization Lets You See Your Sounds”, the colors from the organ aren’t generated by the organ, but change based on one’s manipulation in order to create a representation of the music. Therefore, I used “Virtual Piano Keyboard” to simulate the notes of a piano translated onto a keyboard. Here are two images created by playing a C major scale:
With this music visualization, I can create art by using actual notes or just by tapping to the beat of a song!
Link to Sketch: https://editor.p5js.org/mld9095/sketches/fklZdZg-u
Bibliography:
Hahn, Micheal. “Sound and Vision: Music Visualization Lets You See Your Sounds.” LANDR Blog, 5 Dec. 2019, blog.landr.com/music-visualization/.
McCarthy, Lauren, et al. Make: Getting Started with p5.Js: Making Interactive Graphics in JavaScript and Processing. Maker Media, Inc., 2016.
Rolland, Jim. Generative Music Patterns, generative-music-patterns.schloss-post.com/.
“The Coding Train.” YouTube, YouTube, www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw.
“Virtual Piano Keyboard.” OnlinePianist, www.onlinepianist.com/virtual-piano.