How to get Processing to use a part of an array - processing

Question

The software is for real-time analysis of an accelerometer chip. However it won't produce a graph using the array components. When I replace the dat[0/1/2] part in the void drawAxes with an actual number the graph is produced.
Is there any way to get the dat[] array to work in this system, or any alternatives I can use?
dat[]*100 is just to scale up the inserted value.
//Accelerometer graphing programme
//Author: Owain L. Evans, owainlevans#outlook.com
//Takes data from Arduino and produces a 3-Dimensional visualisation
import processing.serial.*;
Serial myPort; //Serial Port
String DataLine; //Input from serial port
float[] dat;
PVector a = new PVector(100, 50, 20);
void setup()
{
size(1024, 720, P3D);
strokeWeight(3);
dat = new float[3];
String portName = Serial.list()[0];
myPort = new Serial(this, portName, 9600);
}
void draw() {
if (myPort.available() > 0)
{DataLine = myPort.readStringUntil('\n');
}
if (DataLine != null) {
println(DataLine);
float dat[] = float(split(DataLine, ",")); //parse comma-separated number string into numbers
println(dat);
println();
}
background(250);
drawAxes(dat[0]*100, dat[1]*100, dat[2]*100); //draw original coordinate system
translate(width * 0.5, height * 0.5, 0);
rotateX(map(mouseY,0,height,-PI,PI));
rotateY(map(mouseX,0,width,-PI,PI));
drawAxes(dat[0]*100, dat[1]*100, dat[2]*100);
pushMatrix();
translate(a.x, a.y, a.z); //isolate coordinate system and draw translated A point
popMatrix();
}
void drawAxes(float x, float y, float z) {
//X - red
stroke(192, 0, 0);
line( 0, 0, 0, x, 0, 0);
//Y - green
stroke(0, 192, 0);
line(0, 0, 0, 0, y, 0);
//Z - blue
stroke(0, 0, 192);
line(0, 0, 0, 0, 0, z);
}

Answer 1

Hard to tell what's going on with the array, but you could add parameters to drawAxes() which would remove the tight coupling to dat and make it re-usable for other sketches:
void drawAxes(float x, float y, float z) {
//X - red
stroke(192, 0, 0);
line( 0, 0, 0, x, 0, 0);
//Y - green
stroke(0, 192, 0);
line(0, 0, 0, 0, y, 0);
//Z - blue
stroke(0, 0, 192);
line(0, 0, 0, 0, 0, z);
}
(e.g. drawAxes(dat[0] * 100, dat[1] * 100, dat[2] * 100);)
Update I understand what you mean: you would like to build a graph of the incoming data and plot.
The issue is at the moment you are only storing a single sample which continuously gets updated.
To plot a graph with multiple values you would need to:
create an array to store multiple samples
update the array (shifting old values as a new one arrives)
iterate through the array and plot each value
Step 1: make an [n-samples][3] 2D array to store incoming data.
For the sake of argument let's store a history of 30 samples:
int sampleDimensions = 3;
// how many samples to record
int numSamples = 30;
// where to store the data
float[][] samples = new float[numSamples][sampleDimensions];
Step 2: Update the samples (shifting old ones, adding new data):
// read a new sample x,y,z entry and append it
void updateSamples(float x, float y, float z) {
// shift oldest samples by 1: count backwards from oldest sample to 2nd sample
for (int i = numSamples - 1; i > 0; i--) {
// copy previous sample data: offsetting old data by 1
samples[i][0] = samples[i-1][0];
samples[i][1] = samples[i-1][1];
samples[i][2] = samples[i-1][2];
}
// add newest entry as the first sample (replacing old data)
samples[0][0] = x;
samples[0][1] = y;
samples[0][2] = z;
}
Step 3 Iterate through the data and plot:
// render samples on screen with the option to scale the data
void drawSamples(float scale) {
for (int i = 0 ; i < numSamples; i++){
drawAxes(samples[i][0] * scale, samples[i][1] * scale, samples[i][2] * scale);
}
}
Bare in mind this isn't super efficient in terms of rendering, however for 30 samples should be fine. In the end it's the legibility of the visualisation style that matters.
If you want to do a simpler to render visualisation you could simply render a line:
void drawSamples(float scale) {
beginShape();
for (int i = 0 ; i < numSamples; i++){
vertex(samples[i][0] * scale, samples[i][1] * scale, samples[i][2] * scale);
}
endShape();
}
Putting the whole thing together:
import processing.serial.*;
Serial myPort; //Serial Port
String dataLine; //Input from serial port
PVector a = new PVector(100, 50, 20);
int sampleDimensions = 3;
// how many samples to record
int numSamples = 30;
// where to store the data
float[][] samples = new float[numSamples][sampleDimensions];
// stores a single data sample from serial
float[] sample = new float[sampleDimensions];
// how much to scale data for visualisation
float sampleRenderScale = 100;
void setup() {
size(1024, 720, P3D);
strokeWeight(3);
noFill();
// try to open serial connection: display error otherwise (port missing, or busy (already open in Serial Monitor, etc.))
try {
String portName = Serial.list()[0];
myPort = new Serial(this, portName, 9600);
}catch(Exception e) {
println("error openin serial port: " + Serial.list()[0]);
e.printStackTrace();
}
}
void draw() {
if(myPort != null){
if (myPort.available() > 0){
dataLine = myPort.readStringUntil('\n');
if (dataLine != null) {
println(dataLine);
sample = float(split(dataLine, ",")); //parse comma-separated number string into numbers
println(sample);
if(sample == null || sample.length < 3){
println("parsed less than the expected 3 values:");
return;
}
println();
// add new sample to the list of recorded samples
updateSamples(sample[0], sample[1], sample[2]);
}
}
}
background(250);
drawAxes(sample[0] * sampleRenderScale, sample[1] * sampleRenderScale, sample[2] * sampleRenderScale); //draw original coordinate system
translate(width * 0.5, height * 0.5, 0);
rotateX(map(mouseY, 0, height, -PI, PI));
rotateY(map(mouseX, 0, width, -PI, PI));
drawAxes(sample[0] * sampleRenderScale, sample[1] * sampleRenderScale, sample[2] * sampleRenderScale);
// draw recorded samples
drawSamples(sampleRenderScale);
pushMatrix();
translate(a.x, a.y, a.z); //isolate coordinate system and draw translated A point
popMatrix();
}
// read a new sample x,y,z entry and append it
void updateSamples(float x, float y, float z) {
// shift oldest samples by 1: count backwards from oldest sample to 2nd sample
for (int i = numSamples - 1; i > 0; i--) {
// copy previous sample data: offsetting old data by 1
samples[i][0] = samples[i-1][0];
samples[i][1] = samples[i-1][1];
samples[i][2] = samples[i-1][2];
}
// add newest entry as the first sample (replacing old data)
samples[0][0] = x;
samples[0][1] = y;
samples[0][2] = z;
}
// render samples on screen with the option to scale the data
void drawSamples(float scale) {
beginShape();
for (int i = 0 ; i < numSamples; i++){
vertex(samples[i][0] * scale, samples[i][1] * scale, samples[i][2] * scale);
}
endShape();
}
void drawAxes(float x, float y, float z) {
//X - red
stroke(192, 0, 0);
line( 0, 0, 0, x, 0, 0);
//Y - green
stroke(0, 192, 0);
line(0, 0, 0, 0, y, 0);
//Z - blue
stroke(0, 0, 192);
line(0, 0, 0, 0, 0, z);
}
Notice a few changes:
DataLine renamed to dataLine (as per Java Naming Conventions)
generally renamed variables to it's easy to understand what they are/do and formatting the code so it's easier to read
error handling serial port connection. You already did error handling for incoming data which is great.
The idea is to build good habbits as you progress.
If you have time to explore other languages I recommend Python and few modules,
potentially to start cluserting/classifying the sensor data if that's of interest:
pyserial for serial communication
SciPy: numpy for fast array manipulation, matplotlib for plotting and sklearn for classiciation/clustering/etc.