How to draw a continuous line with sensor values from Arduino

Processing Electronics (Arduino, etc.)
1

Hello;
I’m so new to processing and I need help with my code.
Basically i have a sensor connected to Arduino that sends out data of an array of data. I’m able to send the data to processing and gets them converted to int successfully. I have also been able to map the sensor data ( an array [36]) to the 2D grid array ([6][6]) and the color changing according to the sensor values.

My next step is to be able to draw a continuous line between the grids according to the activities of the sensor reading. For example, if value of the sensor at different position is greater 20, a continuous line should drawn connecting those points together. Thank you

Below is my code so far.

Cell[] cells = new Cell[36];
import processing.serial.*; 
Serial myPort;  // Create object from Serial class
//String myString = null; // initialize the string to which the message will be assigned
int end = 10;    // the number 10 is ASCII for linefeed (end of serial.println), later we will look for this to break up individual messages

int[] serialInArray = new int[36]; // Where we'll put what we receive
int count = 36;

void setup()
{
  size(360,360);
  myPort = new Serial(this, "COM7", 9600);
  for( int i = 0; i < cells.length; i++)
  {
    cells[i] = new Cell( (i%6)*60, (i/6)*60 );
  }
  //read_data();
}

void draw()
{  
  for (int i = 0; i < cells.length; i++)
  {
    cells[i].draw();
  }
}
// read the serial buffer for the sensor data
void serialEvent(Serial myPort) 
{
  String myString = myPort.readStringUntil(end);
 
  // if we get any bytes other than the linefeed:
  if (myString != null) 
  {
    // remove the linefeed
    myString = trim(myString);
 
    // split the string at the tabs and convert the sections into integers:
    int mysensors[] = int(split(myString, '\t'));
    count = mysensors.length;
 for (int i = 0; i < cells.length; i++)
  {
  cells[i].c = mysensors[i];
println (mysensors[i]);
    }
println();
  }  
}

class Cell
{
  float x, y, c;
  Cell(float ix, float iy){
    x = ix;
    y = iy;
    c = 0;
  }
  void draw(){
    fill(c);
    rect(x,y,60,60);
    fill(255-c,255,0);
    text("" + int(c), x+10, y+30);
  }
}
2

Please edit your post, select your code, and hit the magic “format this as code” button, which looks like this: </>

4

Oh opps, sorry this is the complete code in the right way

Cell[] cells = new Cell[36];
import processing.serial.*;
Serial myPort; // Create object from Serial class
//String myString = null; // initialize the string to which the message will be assigned
int end = 10; // the number 10 is ASCII for linefeed (end of serial.println), later we will look for this to break up individual messages

int[] serialInArray = new int[36]; // Where we’ll put what we receive
int count = 36;

void setup()
{
size(360,360);
myPort = new Serial(this, “COM7”, 9600);
for( int i = 0; i < cells.length; i++)
{
cells[i] = new Cell( (i%6)*60, (i/6)*60 );
}
//read_data();
}

void draw()
{
for (int i = 0; i < cells.length; i++)
{
cells[i].draw();
}
}
// read the serial buffer for the sensor data
void serialEvent(Serial myPort)
{
String myString = myPort.readStringUntil(end);

// if we get any bytes other than the linefeed:
if (myString != null)
{
// remove the linefeed
myString = trim(myString);
// split the string at the tabs and convert the sections into integers:
int mysensors[] = int(split(myString, '\t'));
count = mysensors.length;

for (int i = 0; i < cells.length; i++)
{
cells[i].c = mysensors[i];
println (mysensors[i]);
}
println();
}
}

class Cell
{
float x, y, c;
Cell(float ix, float iy){
x = ix;
y = iy;
c = 0;
}
void draw(){
fill©;
rect(x,y,60,60);
fill(255-c,255,0);
text("" + int©, x+10, y+30);
}
}