Stereo Music Visualization using Manifold Harmonics

Documentation

This WebGL application demonstrates a kind of different approach to music visualization. Instead of the traditional 2D graphic-effects, we use so called Manifold Harmonics to map the frequencies of the music you hear playing to deformations of the displayed 3D model. The high frequencies are translated to smaller deformations of the model, whereas low frequencies influence the whole geometry of the displayed 3D model. The current volume of the music playing is translated to the size of the model. So in silent parts of the music, the model will shrink down quite a bit, while it will fully grow when the music is at its loudest. You can start and stop the playback with the buttons you see on top of the page. The model itself can be rotated by simply clicking with your left mouse-button and dragging the cursor around.

Our source-code and its documentation can be viewed here:

JavaScript
init.js
player.js
Code-Documentation


C++
common.h
Harmonics.h
Harmonics.cpp
main.cpp
Code-Documentation.

References & Links

IDEs and Tools used:

MS Visual Studio 2013
Google Chrome
WebGL Inspector
Notepad++

Used Libraries:

OpenMesh - C++ library
Eigen - C++ library
WebGL - JavaScript library
three.js - JavaScript 3D library
Python
Web Audio API