I'm currently attempting to create a vectorscope that analyzes realtime audio in Javascript using the Web Audio API. 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 amplitudes, 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 two equations I would greatly appreciate it. Cheers!
I posted this over at the Sound Design StackExchange and received a helpful answer: https://sound.stackexchange.com/questions/35737/programming-a-vectorscope
Related
I am currently looking at an efficient way to visualise a lot of data in javascript. The data is geospatial and I have approximately 2 million data points.
Now I know that I cannot give that many datapoint to the browser directly otherwise it would just crash most of the time (or the response time will be very slow anyway).
I was thinking of having a javascript window communicating with a python which would do all the operations on the data and stream json data back to the javascript app.
My idea was to have the javascript window send in real time the bounding box of the map (lat and lng of north east and south west Point) so that the python script could go through all the entries before sending the json of only viewable objects.
I just did a very simple script that could do that which basically
Reads the whole CSV and store data in a list with lat, lng, and other attributes (2 or 3)
A naive implementation to check whether points are within the bounding box sent by the javascript.
Currently, going through all the datapoints takes approximately 15 seconds... Which is way too long, since I also have to then transform them into a geojson object before streaming them to my javascript application.
Now of course, I could first of all sort my points in ascending order of lat and lng so that the function checking if a point is within the javascript sent bounding box would be an order of magnitude faster. However, the processing time would still be too slow.
But even admitting that it is not, I still have the problem that at very low zoom levels, I would get too many points. Constraining the min_zoom_level is not really an option for me. So I was thinking that I should probably try and cluster data points.
My question is therefore do you think that this approach is the right one? If so, how does one compute the clusters... It seems to me that I would have to generate a lot of possible clusters (different zoom levels, different places on the map...) and I am not sure if this is an efficient and smart way to do that.
I would very much like to have your input on that, with possible adjustments or completely different solutions if you have some.
This is almost language agnostic, but I will tag as python since currently my server is running python script and I believe that python is quite efficient for large datasets.
Final note:
I know that it is possible to pre-compute tiles that I could just feed my javascript visualization but as I want to have interactive control over what is being displayed, this is not really an option for me.
Edit:
I know that, for instance, mapbox provides the clustering of data point to facilitate displaying something like a million data point.
However, I think (and this is related to an open question here
) while I can easily display clusters of points, I cannot possibly make a data-driven style for my cluster.
For instance, if we take the now famous example of ethnicity maps, if I use mapbox to cluster data points and a cluster is giving me 50 people per cluster, I cannot make the cluster the color of the most represented ethnicity in the sample of 50 people that it gathers.
Edit 2:
Also learned about supercluster, but I am quite unsure whether this tool could support multiple million data points without crashing either.
Let me give you some context for this question.
I joined to a halfway project in which we need to produce some coordinates data based on certain parameters defined by GEOTIFF maps. I need to get an array of coordinates from the map, send them to proccesing, and retrieve a new array of coordinates which then I'll show in a Gmap.
We can get the arrays, we can process them, and we can get the new array back, but everything on separated instances and never as a unique application. Which is our main goal.
My only problem is, the algorithms to generate the second array are running in a separate c++ program while the interface to generate the first array is hosted as a web application running jquery, google earth engine and google maps API's in python 2.7 runtime. We need to communicate these two in order to get a unique app, and I never faced this kind of implementation before.
So my question can be divided as:
How can I send an array of data from a Web Application as an argument for a C++ routine?
How can I retrieve the resultant array from the C++ routine?
The main issue is that I don't know how to approach to this kind of implementation.
Thanks in advance.
I am developing a web app based on the Google App Engine.
It has some hundreds of places (name, latitude, longitude) stored in the Data Store.
My aim is to show them on google map.
Since they are many I have registered a javascript function to the idle event of the map and, when executed, it posts the map boundaries (minLat,maxLat,minLng,maxLng) to a request handler which should retrieve from the data store only the places in the specified boundaries.
The problem is that it doesn't allow me to execute more than one inequality in the query (i.e. Place.latminLat, Place.lntminLng).
How should I do that? (trying also to minimize the number of required queries)
You could divide the map into regions, make an algorithm to translate the current position into a region, and then get the places by an equality query. In this case you would need overlapping regions, allow places to be part of many of them, and ideally make regions bigger than the size of the map, in order to minimize the need for multiple queries.
That was just an outline of the idea, an actual implementation would be a little bit more complicated, but I don't have one at hand.
Another option is using geohashes, which are actually pretty cool, you can read a write up about them, along with code samples, here: Scalable, fast, accurate geo apps using Google App Engine + geohash + faultline correction
You didn't say how frequently the data points are updated, but assuming 1) they're updated infrequently and 2) there are only hundreds of points, then consider just querying them all once, and storing them sorted in memcache. Then your handler function would just fetch from memcache and filter in memory.
This wouldn't scale indefinitely but it would likely be cheaper than querying the Datastore every time, due to the way App Engine pricing works.
I have an ongoing stream of data that consists of nothing but a single integer for every piece of data I receive.
So I get something like:
6462
6533
6536
6530
6462
376135
623437
616665
616362
616334
Here a graph of a complete pattern.
Now I know I will get a specific pattern in this stream of ints with a certain error margin, I know it will never be the exact same pattern but I will get a very similar one every now and then. Its a very high amplitude pattern similar to the numbers shown in the example. It basically oscillates between 3 states and shows a finer grained difference in every state but the interesting parts are the big differences.
I have no experience in pattern matching and analyzing data streams and no idea where to start. Ideally I would provide my code an data set and it would check if the incoming data stream is matching that data set by a certain margin.
Which is my biggest problem, I can't compare complete data sets, I have to compare a complete set with one that is being constantly generated and see if my pattern is starting to occur in this constant stream.
The main program is currently running in JavaScript/node.js and I'm not sure if JavaScript is suitable for this task but it would be great if I can stay in JavaScript.
Though if there are libraries that help with these kind of tasks in other languages I would be keen to test them out.
I'm trying to determine the fundamental frequency of an input signal (from a tone generator, or possibly a musical instrument) using JavaScript's WebAudio API, along with some other SO articles (How to get frequency from fft result?, How do I obtain the frequencies of each value in an FFT?), but I can only seem to determine a frequency within about 5-10Hz.
I'm testing using a signal generator app for iPad positioned next to a high-quality microphone in a quiet room.
For 500Hz, it consistently returns 506; for 600Hz, I get 592. 1kHz is 1001Hz, but 2kHz is 1991. I've also noticed that I can modulate the frequency by 5Hz (at 1Hz increments) before seeing any change in data from the FFT. And I've only been able to get this accurate by averaging together the two highest bins.
Does this mean that there's not enough resolution in the FFT data to accurately determine the fundamental frequency within 1Hz, or have I gone about it the wrong way?
I've tried using both the native FFT libs (like this, for example):
var fFrequencyData = new Float32Array(analyser.frequencyBinCount);
analyser.getFloatFrequencyData(fFrequencyData);
(you can assume I've properly initialized and connected an Analyser node), which only shows a sensitivity/resolution of about
and also using DSP.js' FFT lib, like this:
var fft = new FFT();
fft.forward(e.inputBuffer.getChannelData(0));
fFrequencyData = fft.spectrum;
where e is the event object passed to onaudioprocess.
I seem to have a problem with FFT data (like FFT::spectrum) being null - is that normal? The data from fft.spectrum is naught unless I run it through analyser.getFloatFrequencyData, which I'm thinking overwrites the data with stuff from the native FFT, defeating the purpose entirely?
Hopefully someone out there can help steer me in the right direction - thanks! :)
You would need a very large FFT to get high-quality pitch detection this way. To get a 1Hz resolution, for example, with a 44,100kHz sample rate, you would need a 64k(-ish) FFT size. You're far better off using autocorrelation to do monophonic pitch detection.