Audio Visualizers
p5.js Generative Art
Art Direction: Jenny Kowalski & Scott Laserow
Overview
This project was given in a creative coding class where we were learning to use the p5.js javascript library to create graphic and interactive experiences. The objective of this project was to write code that would allow the computer of the user to generate art. These audio visualizers are best viewed on a desktop or laptop.
Approach
Through the research, I learned to break the songs down into three separate components – bass, treble, and mid. I then mapped these and applied them to the scale and stroke weight of different aspects of the design to create a movement based on the music when it played. Although most of the generation of these pieces comes from the code’s breakdown of the song, I decided that I also still wanted to give the user the opportunity to manipulate what was happening. To incorporate user interaction I put in a few variables which include color change when the mouse is clicked, and the audio speed changer at the bottom. The speed of the rotation of the art is also dependant on the location of the mouse within the canvas frame.
Research
In researching generative art, I found I was drawn more to computer-generated art rather than human-generated because I found it interesting to see the interaction between something as precise as code and something as fluid as art. I decided to code an audio visualizer because it allowed art to be generated based on different variables within a song. Researching different methods of creating a visualization based on music I found this really useful example. Looking at their code and break down of music informed by understanding and ability to create my own audio visualizer.