The next step is to model the direction according to the frequency: given that the noise playing could be at any frequency between 20 Hz and 20,000 Hz, it would be quite a mundane exercise to manually calibrate a scale and have the vector point at the appropriate positions. Instead, it would be more interesting to ditch the cylindrical coordinates normally taught in classrooms at the middle school level and take up the circular coordinate system. Here, instead of the X and Y axes, there's the radial vector and the angular position: if I stand at a particular point, instead of being so much to the left and so much toward the front, I will be some distance from an origin and inclined at some angle against a baseline.
[caption id="attachment_20680" align="aligncenter" width="300" caption="A circular, or polar, coordinate system"]
[/caption]Now, let's fix the frequency conversion first. 20 Hz to 20,000 Hz is a range of 19,980 Hz. Dividing that value by 360 degrees, we get 55.5 Hz per degree: this means that starting at 0 degrees, each subsequent degree represents an increment of 55.5 Hz, as in 0 Hz, 55.5 Hz, 111 Hz, 166.5 Hz, and so on. Therefore, as the noise plays out, the vector will point in the corresponding direction. In order to make it more visually captivating, the timestep can be incremented to 0.5 seconds. In other words, the vector will correspond to the frequency only once every second instead of corresponding continuously. With suitable fade-in and fade-out effects, a smooth flashing motion can be visualized.
Before fixing the amplitude conversion, let's look at the following wave representation of some noise.
Demarcating it into three sections,
If the red line was to be held as the baseline, then the net displacement from it of each point of the green curve (with a timestep of 0.5 seconds) can be computed and a standard deviation (SD) arrived at. Now, the value of the SD is going to be different for different sections, the reasons behind which are evident. Now, instead of computing the deviations separately, section after section, it can be done continuously. Since the value of the SD is equal to the average value of all measured deviations in that section, the section under consideration can be moved with a timestep of 0.5 seconds and a range of 5 seconds.
For example, let's assume that the range of A is 5 seconds. This is the original section. Now, as the noise begins to play, we wait for the first 5 seconds to transpire. At 5.5 seconds, we move the head of the section we're considering to coincide with the the position at which the noise is playing - like a slider along a rail - while we bring up the rear, constantly ensuring that the range remains at 5 seconds. In this moving range, we continuously compute the SD and use this changing value as the radius of the circle we're using to visualize the vector in.
If the noise playing is a continuous and uniformly pitched beep, the vector is going to point in one direction all the time and the radius of the circle is going to be constant throughout. If a sine wave is playing out, then the radius of the circle will rise and fall according to the frequency of the wave and the vector will oscillate between two points on the perimeter of the circle. Here again, a latency can be effected by introducing a lag component to the vector's movement, ensuring that it moves, say, 0.25 seconds later than right then. The final step to calibrating a visualizer is the graphic effects: since we've assumed a circular coordinate system, the equation for the Archimedean spiral can be employed to assign each point, or pixel, within the circular a particulate color.
r = a + b . θ
'a' is the gradient of the coloring; 'b', the number of pixels on the radius of the circle; and 'r', the coloring function that has been employed. The total number of pixels in the circle will be πr2 which will also then be the number of colors to be assigned overall. Using a loop counter to increment the hex colors (and assigning them to the value of 'r'), the moving vector can be colorized depending on where it points to and to what distance within the circle (while θ is increased from 0-360 degrees). Since the radius of the circle, 'b', is going to keep changing, it would be better to colorize the entire canvas, superimpose the image of the circle on it, mask the colors, and then use the vector to unmask the colors on its "skin".
[caption id="attachment_20677" align="aligncenter" width="474" caption="A still of a visualization on Windows Media Player, achieved by using more subtle gradients, fading effects, and multiple layers of images."]
[/caption]
