Graph plotting on Processing from Arduino sensor data

Question

I am trying to plot a graph on processing but I'm having challenges going about it. The processing sketch below does work for plotting only one axis, and I'm trying to plot all three axis on the same sketch. Does anyone have an idea on how I could go about it. Below are the Arduino and Processing sketches.

Arduino

AcceleroMMA7361 ski;
int x;
int y;
int z;

void setup()
{
   Serial.begin(115200);
   ski.begin(13, 12,11,10, A0, A1, A2);
   ski.setARefVoltage(3.3);             
   ski.setSensitivity(HIGH);
   ski.calibrate();
}

void loop()
{
    x = ski.getXRaw();
    y = ski.getYRaw();
    z = ski.getZRaw();
   //Serial.print("\nx: ");
     Serial.println(x);
   //Serial.print("\ty: ");
   //Serial.print(y);
   //Serial.print("\tz: ");
   //Serial.print(z);
   delay(10);                                     //(make it readable)
}//End of Arduino Sketch

Processing

import processing.serial.*;

Serial myPort;        // The serial port
int xPos = 1;         // horizontal position of the graph

float fValue;
boolean newVal = false;

void setup () {
   size(800, 630);
   println(Serial.list());
   myPort = new Serial(this, Serial.list()[0], 115200);
   myPort.bufferUntil('\n');
   background(2);
   stroke(127, 34, 255);
}

void draw () {
    if (newVal) {
       line(xPos, height, xPos, height - fValue);
       if (++xPos >= width) {
         xPos = 0;
         background(2);
       }
       newVal = false;
    }
}

void serialEvent (Serial myPort) {
   String inString = myPort.readStringUntil('\n');
   if (inString != null) {
       inString = trim(inString);
       fValue = float(inString);
       fValue = map(fValue, 0, 1023, 0, height);
       newVal = true;
     }
}

Answer 1

I have edited your serialEvent() method a little bit, so it could handle the data from the Arduino, when split by a tab.

void serialEvent (Serial myPort) {
   String inString = myPort.readStringUntil('\n');

   if (inString != null) {
     values=split(inString,"\t");  //Splitting the output of the arduino into a String Array
     for(int i=0;i<values.length;i++){
       values[i]=trim(values[i]); //deleting the whitespaces as before
       float_values[i]=float(values[i]); //cast the string to a float as before
     }
       x = map(float_values[0], 0, 1023, 0, height); //map the value as before
       y = map(float_values[1], 0, 1023, 0, height);//map the value as before
       z = map(float_values[2], 0, 1023, 0, height);//map the value as before
       newVal = true;
     }
}

so your sending on the Arduino has to look like this:

void loop()
{
    x = ski.getXRaw();
    y = ski.getYRaw();
    z = ski.getZRaw();
    Serial.print("\n");
    Serial.print(x);
    Serial.print("\t");
    Serial.print(y);
    Serial.print("\t");
    Serial.print(z);
    delay(10);                                     //(make it readable)
}

You still have to make the drawing in the draw() method of processing, but I think that this is not the problem.

For the 3d draw you should have a look on the Processing reference or at this special topic, P3D by Daniel Shiffman.

I have not tested the code, but I think that it should work.

If you have questions, feel free to ask ;D