##WebGL Music Visualizer

###TO RUN:

• LIVE DEPLOY NOTE: This is an early release using experimental technologies; this only works in Chrome

• Acquire Python [2.x or 3.x is fine]

• From Terminal/CMD, Run:

    Python 2.x
        python -m SimpleHTTPServer 8081
    or
    Python 3.x
        python -m http.server 8081
  

• From browser of choice, enter the url

    localhost:8081 or 127.0.0.1:8081
  

###Once setup:

Select a song from the dropdown list.

    Paradise Circus is most reactve; Mandala and Surge are full spectrum; Gemini is a minimalistic edge case.

Volume is controlled by a slider. Clear button doesn't work properly.

After song selection, wait for a play button to appear on screen. On click, the visualization begins.

Left click and drag to rotate camera. Right click and drag to pan camera. Two finger/scroll wheel to zoom.

###Technical Achievements:

• Audio is at 24 hz. Rendering happens at 60 fps. An async callback pings the renderer with new data. If the renderer receives new data, it uses it; otherwise it has its own animation tasks to work on.

• Since the visual is 2.5x faster [24hz*2.5=60] than audio data, animations were originally extremely jagged. To compensate, I pushed the renderer back a single frame, undetectably out of sync with the audio, to create a single tween frame.

• Transitions occur in by comparing the current audio data with the previous frame's audio data. These values are the sum across all frequencies. Upon a certain threshold being crossed, a flag is assigned for the next frame. If enough time has passed, the transition is trigger. Alternately, if enough time passes with no trigger, the transition still occurs.

• Colors are dynamically modified trigonometrically. Colors are modified by using time, cube position, cube indices, frequencies, and static scalars as sin/cos parameters

• The z axis is manipulated over time, with an expansion and retraction depending on values, as well as influencing x and y positions for several scenes.

• radial arc length is determined in mathUtils.js and used for certain scenes

###Tech Stack:

WebGL/THREE.js - GPU

Knockout.js - UI

JQuery - DOM