getting started

open up controller.html. visualizer will open up in separate tab. If desired you can display on a separate screen. Click play to start audio reactive version, otherwise pick a song with the picker.

You can also pick videos to play over the surface area (i.e. similar to VJing)

If using the onboard microphone it will often filter out any speaker output coming from the same device, so it is recommened to using the picker in this case or use external input.

how it works

Uses a spectrum analizer to break music into bands, isolate tones, and then make the music visible by assigning each tone to the vertice spread over the surface of a sphere. When tones are played the vertices are activated and resulting lines or polygons are displayed.

why?

Looks cool during a performance. May also help you to play better music by seeing the music.

As used for projection during a set (https://instagram.com/rootflute)

Included files and options

videosphere

Live VJing software allowing frame by frame display of music hyper imposed around a sphere.

polysphere

Sound reactive input signal is split into bands logarithmicly mapped to the vertices on a sphere, equalized manually and distributed into polygons.

nodesphere

Sound bands are mapped as edges between vertices mapped over the surface of a sphere. Allows dynamic hues.

dynamicsphere

Sound reactive sides crolling sets of spheres mapped to low, mid, high bands displaying over a time series, allows you to dynamically set number of bands

staticsphere

sound reactive sets of side scrolling spheres mapped to low, mid, high bands displaying over a time series

Mathematical Logic Behind Vertex Distribution

Band Frequency Calculation

The frequency for each band (i) can be calculated using the formula:

bandFrequency = baseFrequency * ratio^i

Where:

i is the band number ranging from 0 to (numBands - 1).
baseFrequency is the starting frequency.
ratio is the frequency multiplier factor.

Golden Ratio and Angle Increment

The golden ratio (phi, φ) is defined as:

φ = (1 + √5) / 2

The angle increment based on the golden ratio is:

angleIncrement = 2π * φ

3D Point Computation

For each band (i), a 3D point is calculated as follows:

Normalize the band index: v = i / numBands
Compute spherical coordinates: ϕ = v * π θ = angleIncrement * i
Convert spherical coordinates to Cartesian coordinates: x = sin(ϕ) * cos(θ) y = sin(ϕ) * sin(θ) z = cos(ϕ)

Point Creation

A 3D point with coordinates (x, y, z) can be created and added to a scene. The creation of the point is more of a procedural step and does not have a direct mathematical representation.

This mathematical logic is used to distribute vertices in a 3D space, which can be applied to various computer graphics and visualization tasks.

See also the hypermusic repository for the theoertical background: https://github.com/fractastical/hypermusic

fractastical/hypermuse