PROCESS
THIS IS HOW I GOT THERE
↓
The first language I used was Python. I imported matplotlib to display the visualizations and numpy to convert the input values into r,g,b colors. First, I reviewed the hello.loading python code to determine which lines translated the input data into numberical values. I then used these values as the baseline for all representation adjustments. Because I did not have an FTDI cable handy, I wrote two python scripts: one to visualize the data from a JSON file and another that read the serial input live. Above is the JSON example. I first recorded the serial data and wrote the results to a JSON file which I then referenced. The circle parameters are its radius which is normalized by the maximum pressure strength and its color which is the three input data divided by their respective maximum rgb values.
I then tested my live script which ended up with significant lag times due to the processing of the plotting process. There were several seconds between my physical input and the graphic visualization of the pressure. It did work though!
The second interface I tested out was three.js which I found fascinating and will likely try to learn in the future. The challenging aspect of three.js is that most example projects use it for animation as opposed to quantitative visualization. I decided to give it a shot and looked at other Javascript tutorials for JSON data integration. I was able to alter a sample file and control the wave amplitude with a data set - sort of. What I was not able to solve was how to interate through all data points with a delay. I believe the script was reading through all data sets before getting to the visualization, then at that point, the script only displayed the last set. I tried using a setTimeout function to delay the time between readings but this did not work. Going forward, I would love to use three.js for personal projects but perhaps not data visualization!