Mood to Sounds
The prompt for this week was “simulation”. Creating visuals and audio for my own personal emotions (making art and music) helps me process them in a way that feels better than just keeping them within my thoughts. I was aiming to create a simulation of what an audio and visual of the participants mood is. The idea of creating something that mimicked that of a BuzzFeed article felt appropriate.
To break down the concept, I started by making a basic checkbox list and submit button.
Then taking into consideration the moods, I chose which songs would go for each combination. For audio you must load them before use and include p5.sound library in your index.html.
The way I was able to organize all the functions to call them was using states.
And then used a function I called checkedMood() to organize all the variations possible and their correlating songs.
For the visuals I used what we learned in this weeks worksheet and made a class for the bouncing balls but then adjusted the shapes, actions, and colors of the original balls.
One of the last things that I wanted to get done which I struggled with for a bit was getting an action to reset the participant to the home screen to restart the survey. I originally tried using mouseClicked() but because mouse clicking was needed for the action of checking the boxes it would not run properly. It would keep the sound and animation playing while displaying the choices.
The way I was able to solve this was by creating a separate stopMusic() function and an empty state to give the screen a fresh slate before calling start() (which is everything used for setup).
All the audio sources and stills for the accompanying animations.
chillVisuals()
sadVisuals()
chill_sadVisuals()
all()
noisyVisuals()
chill_noisyVisuals()
noisy_sad()
Code Resources:
Cat Survey by Samchasan
9.10: Reset a Sketch with Button Click - p5.js Tutorial by The Coding Train
all the guidance: thank you spencer!
