Serotonin
- I tried to embed it in Medium using CodePen, but I don’t think Medium is compatible with the mic input part of my project since I wasn’t prompted to share my microphone. The fullscreen link worked for me, I hope it works for you too, you should see a moving bar in the center.
- Best tested with a song that has a range of volumes, including silence, build-ups, drops, etc.
- Note: If mic input animation is being run in the edit link, it may not work in the fullscreen link. Close the edit link tab, and the mic input for the fullscreen tab should work if it is not despite having mic input allowed.
- Edit Link: https://editor.p5js.org/CaitlinPonder/sketches/kW-3vuaHq
- Fullscreen Link: https://editor.p5js.org/CaitlinPonder/full/kW-3vuaHq
Serotonin was inspired by flow fields, my dependency on music, and the volume-dependent visuals used for EDM visuals on YouTube by music sharing accounts.
Variables are used throughout the program to create visual animations and are often used in tandem with my conditionals, loops, functions, classes, and arrays. The mic variable is used to record the audio input for the user’s laptop, and the vol variable track the volume level the mic is intaking. The background flow pattern is generated using loops constrained by the canvas size, and nested arrays that set random colors constrained by nested conditions to each (i,j) position on the canvas. Multiple functions are used to organize the loops, variables, and arrays that coordinate animation. The class VolBar defines and displays using the show() method the visual volume bar animation. As a mainly visual project, a lot of loops containing conditionals tweaking variables were used to add layers of visual complexity and reinforce the variability of fluid motion. Coding/organization notes as comments inside code.
While creating this, I struggled with maintaining a clean coding space and minimizing what the user’s laptop has to do to smoothly run the program. Because the arrays hold data for all positions within canvas, scaling the resolution caused the graphics to crawl and animation to lag. While making this I learned how to use conditionals, and careful color choice, to emulate fluid motion.
References:
