Iron Man UI: Almost there.... plus a new song called "Renewal"

It's been a couple weeks since I last posted anything about this project.  It's almost done.  I have a bunch of additions.  Last time I mentioned the need for one big unifying piece to help tie all the separate elements.  Here is a quick image of what that looks like:

This consists of a bulls eye element in the middle which can rotate independently from the rest of the parts.  Since there is so much other movement going on in the visualization, I elected to keep this element completely static.  To represent the music, it has a texture ring which emanates outwards exposing parts of the complete design.   The tutorial in my previous post demonstrates how to do this effect.

Finally, I added a few arcs that rise and sink around the central column.

There are a few more finishing touches like showing how this whole thing moves through space which I'll get to in my next post.

I got a bit side tracked because I had to compose a new piece of music for this animation. The piece of music is all finished and should go live later this week.  For now, you can check out a snippet of it in this video.  It's called "Renewal"

Much more awesomeness to come so stay tuned....

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!

Iron Man UI: Panel outlines and different approaches

Creating the look of the various panels was the one of the first challenges I started looking into.  There a couple different approaches to this and some of my initial research led me here:

http://prideout.net/blog/?p=54
http://forum.unity3d.com/threads/cel-shading-w-edge-detection.253074/
http://willychyr.com/tag/edge-detection/

I wanted to give an extra special shout out to the work of Thomas Eichhorn.  The NPR sketching effect on his site is beautiful and well constructed.
http://www.thomaseichhorn.de/npr-sketch-shader-vvvv/

All of this is really awesome stuff but there is one big limitation.  It requires a full screen processing effect to generate the lines.  I needed control of the lines on a per object basis.  Some objects would be different colors and the outlines would be varying degrees of thickness.  I also wanted control which edges would have an outline and which ones wouldn't.  After all this research, I decided to just go with texturing and using UV's to control which edges would have outlines.
Here is a pass of what this effect looks like.

These are shots of what it looks like in the game engine Unity.  A little bit of bloom effect is in place.  I can also change materials and make them opaque or transparent for different effects.

The next steps are to animate all these things and start playing around with how they react to music.  My next post will start looking at a structure I need to build for the animation and what parts should comprise that structure.