Monday, February 16, 2015

Iron Man UI: visualization structure - a fine balance

I want to start out with this really great clip and give a shout out to Stefan Surmabojov for putting together these awesome After Effects tutorials.  These have been invaluable in helping deconstruct this work and helping me formulate a system that will work to visualize music in this type of thematic style. 

http://cgi.tutsplus.com/tutorials/iron-man-interface-battle-widget-parts-3-4-and-5--ae-21545

What's great about the video above is that you can see all the unique parts that make up this HUD.   There is often a fine balance that I have to strike when building music visualizations.  I strive to have everything or as many elements as possible react to the audio.  Some visuals react more abruptly while others may react more subtly.  The goal being that the sum of all the parts will unite and create one awesome looking visualization!  You may not notice the fine details on all the different parts, but for me, that just gives the visualization more depth.  When someone watches it again some day, they may notice something new or some other element reacting to the music they hadn't seen before.  A good painting can draw you into a new world and keep you exploring and discovering new parts or details in the background.  I'm striving for that very same goal in my music visualizations.  The challenge is to strike a balance between all of these elements to make sure I don't just create visual noise or overload the viewer with too many different components competing for the viewer's attention.  

I haven't finalized my structural intent, but I have begun to narrow down some thoughts including using rings stacked on top of each other similar to how all the Iron Man HUD components stack on top of each other to create depth for a 3D effect.  Larger panels/elements will react to lower frequencies while finer, more intricate components will react to higher frequencies.  One element I really liked was the outward projecting meters indicated here:
I've started my own pass on these here although they are bit larger.  There are 64 bands/meters currently in my version.  8 audio channels and 8 frequency bins per channel.  I've got a couple screen shots from Unity below. 


I will probably bring these in closer to the center stack indicated by the other rings in the lower left corners of the images.   I'll try to get some early videos of how all this looks in the next day or two.

I've got a sketch of some ideas I've started playing around with including how the entire stack will move.  I'll go into a bit more of this concept in a later posting but there is a cool way to build a visualization and then use a global movement on all the parts to indicate large changes in music.  These changes can be themes, motifs, the chorus or refrain in a song for example.  More to come on all this soon!

No comments:

Post a Comment

First shot: City nightlights

First shot of the city at night.  Bloom is too high right now and that will eventually be controlled by the audio but I've got build...