P1 - Resonant Viz

   For this project, I took inspiration from an audio visualizer project in another class and decided to make another song-based creation. I decided on a list of songs for the data - alongside information such as their moods (valence), energy, danceability, and genre - which gave me lots of flexibility in terms of how to visualize it. I knew I wanted to have a control to select songs and decided on a separate control to select the genre as well.

   When it came to the experience, I wanted almost a graph of different quadrants for different songs to move to based on selection - happy songs to the right, sad to the left, those with high "danceability" on top, and those more serious/calm on the bottom. I also wanted more ways to represent vibe/movement - the songs scaling based on energy (intense as large vs. peaceful as small), the background changing based on valence (happy as yellow, sad as blue), and noise/movement on the song/shape also demonstrating how "danceable" it is. 

  I landed on the song/genre both being controlled with sliders, and the changes would happen upon slider change. I ended up settling on a geo shape to represent the song. I originally intended on having a dropdown to select the genres, but couldn't find a COMP for it. Choices-wise, I settled on having labels in the corners in order for the user to know what range their selected song is in, and also went from a solid background color to a background with Noise. Finally, I added Lag CHOPs to ensure there were no aggressive visual transitions on slider change and smooth movements between them.

Below is both the large network snapshot (which goes from data, interaction and CHOPs on the left side to TOPs - geo, background, text - on the right side) and a video.






Comments

Post a Comment

Popular posts from this blog

Exercise 1: Mood Mix

Image
 For Exercise 1, I wanted to include a playful mood with animals. The videos I selected were ones I've taken on my phone: a squirrel at a park in Rochester and a dolphin at a resort in Hawaii. I knew I wanted to include colors on both videos, so the Ramp operator was needed in TouchDesigner. The overall network flow intended was as follows: Movie File → Ramp → Text → Cross for both videos. Once the videos with text and colors met at the Cross operator, that's when its value would be controlled by a slider.   Aesthetic-wise, I chose a blue color to represent the ocean for the Dolphin, and a green color for the grass in the Squirrel video. I swapped those colors for the text to make it stand out - green for Dolphin and blue for Squirrel. Interaction-wise, I chose a slider because it's quite simple to manually control exactly how far you'd like to go between the videos. The Cross value reads the value of the slider with a Python expression: op('slider1').par.value0...
Read more

Exercise 2: Control Blue

Image
 For this exercise with the blue theme, I wanted to have a slider that controlled the saturation of blue, and some type of cool texture effect to trigger with a button as well. After playing around with lots of the TOPs, I decided on the Edge operator to outline edges. For the slider, it controlled the Low Blue parameter of the Level operator, which was then sent into the Edge operator to control the shade of blue on the edges. For the button, it changed the strength parameter of the Edge operator.  Network flow-wise, I intended on having the video itself come out of its own container: just the movie file. A level up, that video would get its Level and Edge operators which would be controlled by the slider and button. Another level up, it would be sent to a Null operator and into a content container, before another container would combine both the controls and content. Lastly, it was put into the window. In terms of choices, I chose a video I took on top of a mountain in Vermo...
Read more