16. Torus

Odeo.js exports the frequency spectrum data to a texture. It's then added into a tall buffer and a shader move each row downwards, drawing the new frequency buffer at the top.

That texture is then used to distort a series of lines. The lines are distored following a sinusoidal shape with frequency varying with the sound. The actual values of frequency in the buffer are displacement of the lines on the normal direction (the normal vector for the sinusoidal shape is calculated on the shader).

Everything is drawn to a color buffer, and then a glow pass is performed (using different levels of mipmaps to avoid blurring), color and glow are combined, a tilt-shift effect is performed and a final pass performing FXAA, and adding vignette, interlacing and oscilloscope grid.

Credits

Originally it was supposed to be like this image

Song is Neon by hunz

Coded using WebGL with three.js, the SoundCloud API and Odeo.js