Programming a Vectorscope

Question

I'm currently attempting to create a vectorscope that analyzes realtime audio in Javascript using the Web Audio API. During every cycle, the API allows access to the current frequency data and time domain data. I have already recreated lissajous figures using simple values for the a and b variables in the following equations:

var x = A*sin(a*t);
var y = B*sin(b*t);

Where A & B are the magnitudes, a & b are the frequencies, and t is time (which I obtain with performance.now() ).

My issue is that I'm not sure how to implement the data from the Byte Frequency Data and the Byte Time Domain Data from the Web Audio API into the equations above. In my code I have two oscillators that are stereo-detuned to one another (to highlight phase correlation) which are fed into two analyzers (one for the left channel and one for the right). From both of the analyzers I can extract data with the methods getByteFrequencyData() and getByteTimeDomainData(). Both of these methods return a Uint8 array of the requested data. I currently iterate through the buffers from the analyzers and apply the contained data to the equations above during each iteration. The result is a mess of lines, albeit on an x/y graph.

If anyone has any idea on how to translate the frequency and time domain data into usable values for the variables of the equation I would greatly appreciate it. Cheers!

Answer 1

The actual time domain data of your signals (or an 8 bit approximation of it) are stored in the array you get by calling getByteTimeDomainData(). You don't need the frequency domain data.

You just need to replace your x and y values by values you get when iterating through the two time domain arrays (one for left, one for right). Something like (sort of javascript code, untested)

// leftData is an array of UInt8 filled by getByteTimeDomainData() on left analyser
// rightData is an array of UInt8 filled by getByteTimeDomainData() on right analyser
for(i = 0; i < leftData.length; i++) {
  var x = leftData[i];
  var y = rightData[i];
  // do things with x and y
}

Be careful with the size of the arrays, they need to be large enough to hold the time domain data, which you can ensure by setting the array size to analyser.fftSize as shown in the documentation.

Be also aware that you will get audio data between 0 and 255 (UInt8), you might need to do some scaling to get values between -128 and 127.

Now, you have to deal with the fact that you don't get data sample by sample but buffers by buffers, which has to be dealt with in a realtime application. One way to know where you are in time is to maintain a counter of the number of samples processed along application lifetime.

Answer 2

Your sin function probably expects a range like 0..2*PI, so this might do the trick:

var x = A * sin((a / 256 * 2 * PI) * t)

I'm unsure about that time constant though -- it probably also needs some scaling.