I tried your method, but still get the same error, disabling port.

What am I doing wrong?

Thanks

import processing.serial.*; Serial port; int BaseEncGlobal; int ElbowEncGlobal; int ShoEncGlobal; int VertRotEnc; int HorRotEnc; int GripEncGlobal;

double X_axis; double Y_axis; double Z_axis; double GripAngle;

String data; boolean newData = false;

PFont font;

void setup() { size(1280,800); //port = new Serial(this, "/dev/cu.usbserial-A50285BI", 115200); port = new Serial(this, "/dev/cu.usbmodem2574541", 115200); port.bufferUntil('\n'); font = loadFont("AgencyFB-Bold-200.vlw"); textFont(font, 40); }

void draw()

{ if (newData == true) {

int spaceDown = 55; background(0,0,0); fill(46, 209, 2); text(BaseEncGlobal, 70, spaceDown); fill(0, 102, 153); text(ShoEncGlobal, 70, spaceDown2); fill(0, 102, 153); text(ElbowEncGlobal, 70, spaceDown3); fill(0, 102, 153); text(VertRotEnc, 70, spaceDown4); fill(0, 102, 153); text(HorRotEnc, 70, spaceDown5); fill(0, 102, 153); text( GripEncGlobal, 70, spaceDown*6);

text(Double.toString(X_axis/10), 270, spaceDown ); newData =false; }

}

void serialEvent (Serial port) {

data = port.readStringUntil('\n'); if (data != null) { data = trim(data);

int[] nums = int(split(data, ',')); BaseEncGlobal = nums [1]; ShoEncGlobal = nums [2]; ElbowEncGlobal = nums [3]; VertRotEnc = nums [4]; HorRotEnc = nums [5]; GripEncGlobal = nums [6]; X_axis = nums [7]; Y_axis = nums [8]; Z_axis = nums [9]; GripAngle = nums [10]; //println(Double.toString(X_axis/10));

println(data);

newData = true; }

}

The full message I am getting is: Error, disabling serialEvent() for /dev/cu.usbmodem2574541 null

The sketch will get the data one time than it hangs on this message.

Here is my code; I am getting the data from an arduino teensy 3.5 Please help.

Thanks

import processing.serial.*; Serial port; int BaseEncGlobal; int ElbowEncGlobal; int ShoEncGlobal; int VertRotEnc; int HorRotEnc; int GripEncGlobal;

double X_axis; double Y_axis; double Z_axis; double GripAngle;

String data; boolean newData = false;

PFont font;

void setup() { size(1280,800); //port = new Serial(this, "/dev/cu.usbserial-A50285BI", 115200); port = new Serial(this, "/dev/cu.usbmodem2574541", 115200); port.bufferUntil('\n'); font = loadFont("AgencyFB-Bold-200.vlw"); textFont(font, 40); }

void draw()

{ if (newData == true) {

int spaceDown = 55; background(0,0,0); fill(46, 209, 2); text(BaseEncGlobal, 70, spaceDown); fill(0, 102, 153); text(ShoEncGlobal, 70, spaceDown2); fill(0, 102, 153); text(ElbowEncGlobal, 70, spaceDown3); fill(0, 102, 153); text(VertRotEnc, 70, spaceDown4); fill(0, 102, 153); text(HorRotEnc, 70, spaceDown5); fill(0, 102, 153); text( GripEncGlobal, 70, spaceDown*6);

text(Double.toString(X_axis/10), 270, spaceDown ); newData =false; }

}

void serialEvent (Serial port) {

data = port.readStringUntil('\n'); if (data != null) { data = trim(data);

int[] nums = int(split(data, ',')); BaseEncGlobal = nums [1]; ShoEncGlobal = nums [2]; ElbowEncGlobal = nums [3]; VertRotEnc = nums [4]; HorRotEnc = nums [5]; GripEncGlobal = nums [6]; X_axis = nums [7]; Y_axis = nums [8]; Z_axis = nums [9]; GripAngle = nums [10]; //println(Double.toString(X_axis/10));

println(data);

newData = true; }

}

/*

void serialEvent (Serial port) { data = port.readStringUntil('.'); data = data.substring(0, data.length() - 1);

// look for the comma between Celcius and Farenheit index = data.indexOf(","); // fetch the C Temp temp_c = data.substring(0, index); // fetch the F Temp //temp_f = data.substring(index+1, index); temp_f = data.substring(1, data.length());

ElbowEncGlobal =  getValue(data, ',', 2);

} */

Nothing changes. Still zeros and one picture. But previous println(distance) showed the numbers at least.. Could there be wrong datatypes for something?

import processing.serial.*;  
PImage photo1, photo2, photo3;
Serial myPort;  
String data="" ;
int distance;


void setup() {
  size(900, 900); // size of processing window
  photo1 = loadImage("photo1.jpg");
  photo2 = loadImage("photo2.jpg");
  photo3 = loadImage("photo3.jpg");

  myPort = new Serial(this, "/dev/cu.usbmodemfd111", 9600);
  myPort.bufferUntil('\n');
}

void draw() {
  background(0);
  println(distance);
  if (distance <= 20) {
    image(photo1, 0, 0); //display first photography
  } else if (distance > 20 && distance < 40) {
    image(photo2, 0, 0); //display 2nd photography
  } else if (distance >= 40) {
    image(photo3, 0, 0); //display 3rdphotography
  }
}

void serialEvent(Serial myPort) {

  data=myPort.readStringUntil('\n');
  distance=int(data);
}

In consol the range of the sensor is from 5 up to 60 (where is the ceiling). After updating the code the picture still is the same one. And even if the data shows more than 20, it plays photo1.

import processing.serial.*;  
PImage photo1, photo2, photo3;
Serial myPort;  
String data="" ;
PFont  myFont;  
int distance;


void setup() {
  size(900, 900); // size of processing window

  photo1 = loadImage("photo1.jpg");
  photo2 = loadImage("photo2.jpg");
  photo3 = loadImage("photo3.jpg");
  //background(0);// setting background color to black

  myPort = new Serial(this, "/dev/cu.usbmodemfd121", 9600);
  myPort.bufferUntil('\n');
}

void draw() {
  println(data);
  distance=int(data);
  if (distance <= 20) {
    image(photo1, 0, 0); //display first photography
  } else if (distance > 20 && distance < 40) {
    image(photo2, 0, 0); //display 2nd photography
  } else if (distance >= 50) {
    image(photo3, 0, 0); //display 3rdphotography
  }
}

void serialEvent(Serial myPort) {

  data=myPort.readStringUntil('\n');
}

So now I have in processing this code:

import processing.serial.*;  
PImage photo1, photo2, photo3;
Serial myPort;  
String data="" ;
PFont  myFont;  
int distance;


void setup(){
  size(1366,900); // size of processing window

  photo1 = loadImage("photo1.jpg");
  photo2 = loadImage("photo2.jpg");
  photo3 = loadImage("photo3.jpg");
  //background(0);// setting background color to black

  myPort = new Serial(this, "/dev/cu.usbmodemfd121", 9600);
  myPort.bufferUntil('\n');
}

void draw(){
  if(distance>50){
  image(photo1, 0, 0); //display first photograpgy
  }
  else if (40<distance && distance<60) {
  image(photo2, 0, 0);
  }
  else if (distance<40) {
  image(photo3, 0, 0);
}

}

void serialEvent(Serial myPort){

  data=myPort.readStringUntil('\n');

}

It plays only photo3. How can i refer distance to income values? I guess that the income is written in last lines data=myPort.readStringUntil('\n'); ?!

Hi, I am just starting to explore posibilities to make something work in processing via arduino (sensors). On school exhibition I want to make a picture display that shows one image at the time on the wall (with a projector), depending how close or far person is located from distance sensor. This is a sketch of what I am thinking about: To see if it really works, I explored some tutorials that explains how to connect Arduino input with Processing. Currently, I have these codes in both programs: for Arduino:

const int anPin1 = 0;
long distance1;

void setup() {
  Serial.begin(9600);  // sets the serial port to 9600
}

void read_sensors(){
  /*
  Scale factor is (Vcc/512) per inch. A 5V supply yields ~9.8mV/in
  Arduino analog pin goes from 0 to 1024, so the value has to be divided by 2 to get the actual inches
  */
  distance1 = analogRead(anPin1)/2;
}

void print_all(){
  /*
  Serial.print("S1");
  Serial.print("inches");
  */
  Serial.print(" ");
  Serial.print(distance1);
  Serial.println();
}

void loop() {
  read_sensors();
  print_all();
  delay(50); 
}

And for Processing:

import processing.serial.*;  
Serial myPort;  
String data="" ;
PFont  myFont;  
int distance;

void setup(){
  size(1366,900); // size of processing window
  //background(0);// setting background color to black

  myPort = new Serial(this, "/dev/cu.usbmodemfd111", 9600);
  myPort.bufferUntil('\n');
}

void draw(){

  background(0);
  textAlign(CENTER);
  fill(255);
  text(data,820,400);
  textSize(100);
  fill(#4B5DCE);
  text("              Distance :        cm",450,400);
  noFill();
  stroke(#4B5DCE);

}

void serialEvent(Serial myPort){

  data=myPort.readStringUntil('\n');

}

And this distance reading works perfect!

Unfortunately didn’t found any specific example for what i am looking for. So the question is, how can I get, for example, 3 pictures working this way:

if(distance>60){
image(photo1, 0, 0); //display first photograpgy
}
else if (40<distance<60) {
image(photo2, 0, 0);
}
else if (distance<40) {
image(photo3, 0, 0);
}

Do I have to write something like that in draw ()? And how can I get income distance value as number from which depends displayed image? And should I upload any specific library for this? Do i have to write something also again in Arduino code?

Would be great if someone could suggest any examples or codes for this.

Hoping for advise, komats!!

  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points2) {

    if (showText) {
      fill(0, 255, 2); // GREEN 
      // show data
     // text(pv.x, 210, y); 
       text(pv.x, 1080-50, y+410);
       text(pv.y, 1080, y+410);
    }

    fill(0, 2, 2); 
    stroke(0, 255, 2); // GREEN 
    float yvalue = map( pv.y, 0,1, 700, 180); // dimensione grafico GREEN
    if (prev.x!=-1) {
      line(80 + pv.x*55, yvalue, // linea grafico verde
        prev.x, prev.y);

    }
    noStroke(); 
    ellipse (80 + pv.x*55, yvalue, 4, 4);
    prev = new PVector(80 + pv.x*55, yvalue);

    y+=20; //next line
  }//for

  if (showText) {
  //  // middle line 
    stroke(0, 255, 2); // GREEN 
    line( 1275-220, 440, 1275-220, 720);// linea divisoria

  }
  ////
}

void showData3() {
  //
  // show data 3

  color col3 = color(0, 2, 255); // BLUE 

  if (activeArrayListHasNumber==2) {
    // activeArrayListHasNumber is FALSE, right side is active
    stroke(col3); // 
    line (1120, 405, 
      1210, 405);
     line (870, 320, 1330, 320);
    line (870, 340, 1330, 340);
     ellipse (865, 330, 6, 6);
  }

  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points3) {

    fill(col3); // Blue 

    if (showText) {
      // show data
      text(pv.x, 1190-50, y+410); 
      text(pv.y, 1190, y+410);// 
    }

    fill(0, 2, 2); 
    stroke(col3); // blue 
    //float yvalue = map( pv.y, 0, height, 300, 355); 
    //if (prev.x!=-1) {
    //  line(10 + pv.x*3, yvalue, 
    //    prev.x, prev.y);
         float yvalue = map( pv.y, 0,1, 700, 180); // dimensione grafico GREEN
    if (prev.x!=-1) {
      line(80 + pv.x*55, yvalue, // linea grafico verde
        prev.x, prev.y);
    }
    noStroke(); 

  ellipse (80 + pv.x*55, yvalue, 4, 4);
    prev = new PVector(80 + pv.x*55, yvalue);
    y+=20; //next line
  }//for

  if (showText) {
 //   // middle line 
   stroke(col3); // blue 
    line( 1275-110,440,1275-110,720);

  }
  //
}

void showData4() {
  //
  // show data 4 

  color col4 = color(#FF00E6); 

  if (activeArrayListHasNumber==3) {
    // activeArrayListHasNumber is FALSE, right side is active
    stroke(col4); // 
    line (1230,405,1320,405);
    line (870, 350, 1330, 350);
    line (870, 370, 1330, 370);
     ellipse (865, 360, 6, 6);
  }

  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points4) {

    fill(col4); //  

    if (showText) {
      // show data
      text(pv.x, 1300-50, y+410); 
      text(pv.y, 1300, y+410);
    }

    fill(0, 2, 2); 
    stroke(col4); //  
    //float yvalue = map( pv.y, 0, height, 300, 355); 
    //if (prev.x!=-1) {
    //  line(10 + pv.x*3, yvalue, 
    //    prev.x, prev.y);
     float yvalue = map( pv.y, 0,1, 700, 180); // dimensione grafico viola
    if (prev.x!=-1) {
      line(80 + pv.x*55, yvalue, // linea grafico viola
        prev.x, prev.y);
    }
    noStroke(); 
    ////   ellipse (10 + pv.x*3, yvalue, 4, 4);
    //prev = new PVector(10 + pv.x*3, yvalue);
     ellipse (80 + pv.x*55, yvalue, 4, 4);
    prev = new PVector(80 + pv.x*55, yvalue);

    y+=20; //next line
  }//for

  if (showText) {
    // middle line 
    stroke(col4); //  
    line( 1275, 440, 1275, 720);
  }
   { stroke(0); // BLACK 

    line( 1220, 400, 1220, 720); 
    line( 1220-110, 400, 1220-110, 720); 
    line( 1220-220, 400, 1220-220, 720); 

   }
}

// ---------------------------------------------------------------
 void serialEvent(Serial p) { 
  while (myPort.available() > 0) {
  inString = p.readString(); 
  char primo=inString.charAt(0);  // primo carattere
  String cifra=inString.substring(1);  // da secondo carattere in poi
  float val=parseFloat(cifra);          // valore da 0-255 o 0-1023, non sò cosa spedisce arduino
  print("primo=");  println(primo); //debug

  print("cifra=");  println(cifra); //debug
  print("val=");    println(val);
 // print(nf(val,0,2));
  switch(primo) { 
    case ('A'): MasA=(val);
     break;

    case ('B'): PCil=(val);
     break;  

    case ('C'): PAtm=(val);
      break;

   // case ('D'): Temp=(val);
     // break;
  } 
}
}

void goBackToMainState() {

  // from help screen back to main screen

  // buttons ON 
 //MasA.setVisible(true); 
 // PCil.setVisible(true); 
 // PAtm.setVisible(true); 
 // myKnob4.setVisible(true); 

  //go back to main screen 
  state=normal;

  // kill Esc so we stay in the program 
  key=0;
}

void  backspaceOnActiveList() {

  // for the key BACKSPACE 

  switch (activeArrayListHasNumber) {

  case 0:
    if (points1.size()>0)
      points1.remove(points1.size()-1);
    break; 

  case 1:
    if (points2.size()>0)
      points2.remove(points2.size()-1);
    break;

  case 2:
    if (points3.size()>0)
      points3.remove(points3.size()-1);
    break;

  case 3:
    if (points4.size()>0)
      points4.remove(points4.size()-1);
    break;
  }//switch
  //
}//func 

// ------------------------------------------------
// tools

String nameFromPath(String fileName1) {

  File file = new File(fileName1);
  String result = file.getName();
  return result;
} //func 
//

So I'm working from the code in Step 6 (I will attach below) of this tutorial: http://www.instructables.com/id/How-to-control-a-simple-Processing-game-with-Ardui/

I am using an HR-SR04 ultrasonic sensor to control the plane, moving it up and down via hand movements.

What I am trying to do is implement an obstacle feature to the game, by having the score decrease by 1 when the plane hits a cloud. However I can't get the collision detection working for when the plane hits a cloud. The original author has managed to get this working perfectly for when the plane hits the bird but I'm not sure how to get it working between the plane and clouds, I've tried everything I can think of but I'm stuck.

Any help would be appreciated.

Below is the code that I'm working from:

`//Ultrasound plane, a game with a plane and an ultrsound sensor (but

//by Yoruk for Instructables

//send commments or questions to Yoruk16_72 AT yahoo DOT fr


//19 07 14 : initial code
//20 07 14 : it works with arduino !!
//07 07 15 : picture for the plane and for the grass
//06 12 15 : score system with the bird


int i, j; 

int Score ;
float DistancePlaneBird;


float Hauteur; //en Y
float Angle;
int DistanceUltra;
int IncomingDistance;
//float Pas; //pour deplacements X

float BirdX;
float BirdY;

float GrassX ;  //for X position




String DataIn; //incoming data on the serial port

//5 a 32 cm


float [] CloudX = new float[6];
float [] CloudY = new float[6];

//vitesse constante hein


PImage Cloud;
PImage Bird;
PImage Plane;
PImage Grass;



// serial port config
import processing.serial.*; 
Serial myPort;    



//preparation
void setup() 
{

    myPort = new Serial(this, "/dev/cu.usbmodem1411", 9600); 

    myPort.bufferUntil(10);   //end the reception as it detects a carriage return

    frameRate(30); 

    size(800, 600);
    rectMode(CORNERS) ; //we give the corners coordinates 
    noCursor(); //why not ?
    textSize(16);

    Hauteur = 300; //initial plane value


    Cloud = loadImage("cloud.png");  //load a picture
    Bird = loadImage("bird.png");  
    Plane = loadImage("plane.png");  //the new plane picture

        Grass = loadImage("grass.png");  //some grass


    //int clouds position
    for  (int i = 1; i <= 5; i = i+1) {
        CloudX[i]=random(1000);
        CloudY[i]=random(400);
    }


    Score = 0;
}


//incoming data event on the serial port


void serialEvent(Serial p) { 
    DataIn = p.readString(); 
    // println(DataIn);

    IncomingDistance = int(trim(DataIn)); //conversion from string to integer

    println(IncomingDistance); //checks....

    if (IncomingDistance>1  && IncomingDistance<100 ) {
        DistanceUltra = IncomingDistance; //save the value only if its in the range 1 to 100     }
    }
}


//main drawing loop
void draw() 
{
    background(0, 0, 0);
    Ciel(); //draw the sky
    fill(5, 72, 0);



    //rect(0, 580, 800, 600); //some grass

    //new grass : 

    for  (int i = -2; i <= 4; i = i+1) {  //a loop to display the grass picture 6 times

        image(Grass, 224*i  + GrassX, 550, 224, 58);  // 224 58 : picture size
    }

    //calculates the X grass translation. Same formulae than the bird
    GrassX = GrassX  -  cos(radians(Angle))*10;

    if (GrassX < -224) {  //why 224 ? to have a perfect loop
        GrassX=224;
    }


    text(Angle, 10, 30); //debug things...
    text(Hauteur, 10, 60); 


    //new part : check the distance between the plane and bird and increase the score
    DistancePlaneBird = sqrt(pow((400-BirdX), 2) + pow((Hauteur-BirdY), 2)) ;

    if (DistancePlaneBird < 40) {
        //we hit the bird   
        Score = Score+ 1;

        //reset the bird position
        BirdX = 900;
        BirdY = random(600);
    }

    //here we draw the score
    text("Score :", 200, 30); 
    text( Score, 260, 30); 



    //Angle = mouseY-300; //uncomment this line and comment the next one if you want to play with the mouse
    Angle = (18- DistanceUltra)*4;  // you can increase the 4 value...



    Hauteur = Hauteur + sin(radians(Angle))*10; //calculates the vertical position of the plane

    //check the height range to keep the plane on the screen 
    if (Hauteur < 0) {
        Hauteur=0;
    }

    if (Hauteur > 600) {
        Hauteur=600;
    }

    TraceAvion(Hauteur, Angle);

    BirdX = BirdX - cos(radians(Angle))*10;

    if (BirdX < -30) {
        BirdX=900;
        BirdY = random(600);
    }

    //draw and move the clouds
    for  (int i = 1; i <= 5; i = i+1) {
        CloudX[i] = CloudX[i] - cos(radians(Angle))*(10+2*i);

        image(Cloud, CloudX[i], CloudY[i], 300, 200);

        if (CloudX[i] < -300) {
            CloudX[i]=1000;
            CloudY[i] = random(400);
        }
    }

    image(Bird, BirdX, BirdY, 59, 38); //displays the useless bird. 59 and 38 are the size in pixels of the picture
}


void Ciel() {
    //draw the sky

    noStroke();
    rectMode(CORNERS);

    for  (int i = 1; i < 600; i = i+10) {
        fill( 49    +i*0.165, 118   +i*0.118, 181  + i*0.075   );
        rect(0, i, 800, i+10);
    }
}


void TraceAvion(float Y, float AngleInclinaison) {
    //draw the plane at given position and angle

    noStroke();
    pushMatrix();
    translate(400, Y);
    rotate(radians(AngleInclinaison)); //in degres  ! 


    /*
    Drawing concept :  ;-)

     |\___o__
     ________>     

     */

    scale(0.5);  //0.2 pas mal

    //unless drawing the plane "by hands", just display the stored picture instead. Note that the parameters 2 and 3 are half the picture size, to make sure that the plane rotates in his center.
    image(Plane, -111, -55, 223, 110); // 223 110 : picture size



    popMatrix(); //end of the rotation matrix
}

//file end`

I am not sure what is the update rate for your ellipses or the full concept of your program. However, I need you to check this revise version of your code below. Notice I didn't test the code below as I do not have your setup.

Kf

import processing.serial.*;

Serial arduino1;
Serial arduino2;
PImage[] img = new PImage[1];
int val1 = 0;
int val2 = 0;

void setup () {
  size (1000, 707);

  img [0] = loadImage ("nocolouredblobs.jpg");
  background(img [0]);

  fill(#459839); 
  ellipse(931, 68, 75, 75);

  arduino1 = new Serial(this, Serial.list()[4], 9600);
  arduino2 = new Serial(this, Serial.list()[3], 9600);
}

void draw() {
  if (val1 == 2) {
    fill (#EDB137);
    ellipse (833, 68, 75, 75);
    fill (#F7CA6E);
    ellipse (931, 68, 75, 75);
  } else {
    fill (#459839);
    ellipse (833, 68, 75, 75);
    fill (#459839);
    ellipse (931, 68, 75, 75);
  }


  if (val2 == 2) {
    fill (#ED3C3C);
    ellipse (733, 68, 75, 75);
    fill (#ED5F3C);
    ellipse (833, 68, 75, 75);
    fill (#ED6B3C);
    ellipse (931, 68, 75, 75);
  } else {
    fill (#459839);
    ellipse (733, 68, 75, 75);
    fill (#459839);
    ellipse (833, 68, 75, 75);
    fill (#459839);
    ellipse (931, 68, 75, 75);
  }
}

void serialEvent(Serial serialObj) {
  if (serialObj == arduino1) {
    val1 = arduino1.read();
  } 


  if (serialObj == arduino2) {
    val2 = arduino2.read();
  }
}

Hi, unfortunately I am still getting the ellipses flashing between the colours really quickly.

import processing.serial.*;
import processing.serial.*;

Serial arduino1;
Serial arduino2;
PImage[] img = new PImage[1];
int val = 0;

void setup () {
  size (1000, 707);

  img [0] = loadImage ("nocolouredblobs.jpg");
  background(img [0]);

  fill(#459839);  
  ellipse(931,68,75,75);

  arduino1 = new Serial(this, Serial.list()[4], 9600);
  arduino2 = new Serial(this, Serial.list()[3], 9600);
}

void draw(){

  if (arduino1.available() > 0) {
     val = arduino1.read(); }

  if (val == 2) {
    fill (#EDB137);
    ellipse (833, 68, 75, 75); 
    fill (#F7CA6E);
    ellipse (931,68,75,75); }
  else { 
    fill (#459839);
    ellipse (833, 68, 75, 75); 
    fill (#459839);
    ellipse (931,68,75,75); }

  if (arduino2.available() > 0) {
     val = arduino2.read(); }
     if (val == 2) {
      fill (#ED3C3C);
      ellipse (733, 68, 75, 75); 
      fill (#ED5F3C);
      ellipse (833, 68, 75, 75);
      fill (#ED6B3C);
      ellipse (931,68,75,75); }
   else {
    fill (#459839);
    ellipse (733, 68, 75, 75); 
    fill (#459839);
    ellipse (833, 68, 75, 75); 
    fill (#459839);
    ellipse (931,68,75,75); }
}

void serialEvent(Serial serialObj) {
  if (serialObj == arduino1) {
     val = arduino1.read(); }  


   if (serialObj == arduino2) {
     val = arduino2.read(); } 


 }

Ok, so this is sort of the structure:

void setup(){ ...}

void draw(){ ...}

void serialEvent (Serial serialObj) {...}

Usually you change a global variable in the serial event and then, based on this variable, you dictate what draw should do.

Kf

void waitForLoadDialog() { 
  if (!loadPath.equals("")) {
    // waiting is over
    loadIt(); 
    // go back 
    state=normal;
  }
}

void saveIt() {
  // save

  // make array (to save it)
  String[] strs; 
  strs = new String[0]; 

  if (activeArrayListHasNumber==0) {
    strs = new String[points1.size()]; 
    int i=0; 
    for (PVector pv : points1) {
      strs[i]=str(pv.x)+","+str(pv.y); 
      i++;
    }//for
  }// 
  else if (activeArrayListHasNumber==1) {
    strs = new String[points2.size()]; 
    int i=0; 
    for (PVector pv : points2) {
      strs[i]=str(pv.x)+","+str(pv.y); 
      i++;
    }//for
  }//else
  else if (activeArrayListHasNumber==2) {
    strs = new String[points3.size()]; 
    int i=0; 
    for (PVector pv : points3) {
      strs[i]=str(pv.x)+","+str(pv.y); 
      i++;
    }//for
  }//else
  else if (activeArrayListHasNumber==3) {
    strs = new String[points4.size()]; 
    int i=0; 
    for (PVector pv : points4) {
      strs[i]=str(pv.x)+","+str(pv.y); 
      i++;
    }//for
  }//else

  // check if file extension (fileExtension, e.g. .txt) is there 
  int len = savePath.length(); 
  if (len<4 || !savePath.substring( len-4 ).equals(fileExtension)) {
    // file Extension is not present, we have to add it
    savePath += fileExtension; // add the file Extension
  } 

  // save 
  println("Saved: " + savePath); 
  saveStrings( savePath, strs );

  // get file name for list 
  fileNames[activeArrayListHasNumber] =  nameFromPath(savePath);
} //func

void loadIt() {
  // load
  if (activeArrayListHasNumber==0)
  {
    points1.clear();
  } else if (activeArrayListHasNumber==1)
  {
    points2.clear();
  } else if (activeArrayListHasNumber==2)
  {
    points3.clear();
  } else if (activeArrayListHasNumber==3)
  {
    points4.clear();
  }

  fileNames[activeArrayListHasNumber] =  nameFromPath(loadPath); 

  String[] strs = loadStrings( loadPath ); 
  for (String s : strs) {
    String[] thisLine=split(s, ","); 

    if (activeArrayListHasNumber==0) 
    {
      points1.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    } else if (activeArrayListHasNumber==1)
    {
      points2.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    } else if (activeArrayListHasNumber==2)
    {
      points3.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    } else if (activeArrayListHasNumber==3)
    {
      points4.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    }//else
    //
  }//for
}//func 

// -------------------------------------------------

void showData1() {
  //
  // show data 1

  PVector prev = new PVector(-1, -1); 
  int y=50; 

  if (activeArrayListHasNumber==0) {
    stroke(255, 2, 2); // RED
    line (10, 10, 198, 10);
  }

  for (PVector pv : points1) {

    if (showText) {
      fill(255, 2, 2); // RED 
      // show data
      text(pv.x, 30, y); 
      text(pv.y, 110, y);
    }

    fill(0, 2, 2); 
    stroke(255, 2, 2); // RED 
    float yvalue = map( pv.y, 0, height, 300, 355); 
    if (prev.x!=-1) {
      line(10 + pv.x*3, yvalue, 
        prev.x, prev.y);
    }
    noStroke(); 
    // ellipse (10 + pv.x*3, yvalue, 4, 4);
    prev = new PVector(10 + pv.x*3, yvalue); 


    y+=20; //next line
  }//for

  if (showText) {
    // middle line 
    stroke(255, 2, 2); // RED 
    line( 100, 30, 100, height);

    // double middle lines!!!   
    stroke(0); // BLACK 
    int x1=200; 
    line( x1-2, 30, x1-2, height); 
    line( x1+2, 30, x1+2, height);
  }
  //
}

void showData2() {
  //
  // show data 2 

  if (activeArrayListHasNumber==1) {
    // activeArrayListHasNumber is FALSE, right side is active
    stroke(2, 255, 2); // GREEN
    line (200, 10, 
      350, 10);
  }

  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points2) {

    if (showText) {
      fill(0, 255, 2); // GREEN 
      // show data
      text(pv.x, 210, y); 
      text(pv.y, 210+80, y);
    }

    fill(0, 2, 2); 
    stroke(0, 255, 2); // GREEN 
    float yvalue = map( pv.y, 0, height, 300, 355); 
    if (prev.x!=-1) {
      line(10 + pv.x*3, yvalue, 
        prev.x, prev.y);
    }
    noStroke(); 
    //   ellipse (10 + pv.x*3, yvalue, 4, 4);
    prev = new PVector(10 + pv.x*3, yvalue); 

    y+=20; //next line
  }//for

  if (showText) {
    // middle line 
    stroke(0, 255, 2); // GREEN 
    line( 288, 30, 288, height);

    // double middle lines!!!   
    stroke(0); // BLACK 
    int x1=210+80+80; 
    line( x1-2, 30, x1-2, height); 
    line( x1+2, 30, x1+2, height);
  }
  //
}

void showData3() {
  //
  // show data 3

  color col3 = color(0, 2, 255); // BLUE 

  if (activeArrayListHasNumber==2) {
    // activeArrayListHasNumber is FALSE, right side is active
    stroke(col3); // 
    line (400, 10, 
      550, 10);
  }

  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points3) {

    fill(col3); // Blue 

    if (showText) {
      // show data
      text(pv.x, 210+180, y); 
      text(pv.y, 210+180+80, y);
    }

    fill(0, 2, 2); 
    stroke(col3); // blue 
    float yvalue = map( pv.y, 0, height, 300, 355); 
    if (prev.x!=-1) {
      line(10 + pv.x*3, yvalue, 
        prev.x, prev.y);
    }
    noStroke(); 
    //   ellipse (10 + pv.x*3, yvalue, 4, 4);
    prev = new PVector(10 + pv.x*3, yvalue); 

    y+=20; //next line
  }//for

  if (showText) {
    // middle line 
    stroke(col3); // blue 
    line( 467, 30, 467, height);

    // double middle lines!!!   
    stroke(0); // BLACK 
    int x1=210+180+80+80; 
    line( x1-2, 30, x1-2, height); 
    line( x1+2, 30, x1+2, height);
  }
  //
}

void showData4() {
  //
  // show data 4 

  color col4 = color(155, 255, 112); 

  if (activeArrayListHasNumber==3) {
    // activeArrayListHasNumber is FALSE, right side is active
    stroke(col4); // 
    line (570, 10, 
      710, 10);
  }

  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points4) {

    fill(col4); //  

    if (showText) {
      // show data
      text(pv.x, 210+180+180, y); 
      text(pv.y, 210+180+180+80, y);
    }

    fill(0, 2, 2); 
    stroke(col4); //  
    float yvalue = map( pv.y, 0, height, 300, 355); 
    if (prev.x!=-1) {
      line(10 + pv.x*3, yvalue, 
        prev.x, prev.y);
    }
    noStroke(); 
    //   ellipse (10 + pv.x*3, yvalue, 4, 4);
    prev = new PVector(10 + pv.x*3, yvalue); 

    y+=20; //next line
  }//for

  if (showText) {
    // middle line 
    stroke(col4); //  
    line( 210+180+180+80-4, 30, 210+180+180+80-4, height);
  }
  //
}

// ---------------------------------------------------------------

void serialEvent(Serial p) { 
  inString = p.readString(); 
  char primo=inString.charAt(0); // primo carattere
  String cifra=inString.substring(1); // da secondo carattere in poi
  float val=parseFloat(cifra); // valore da 0-255 o 0-1023, non sò cosa spedisce arduino


  print("val="); 
  println(val); 

  //   inString = trim(inString);

  //    // converte in int e mappa all'altezza dello schermo: 


  switch(primo) { 
    case ('A') : 
    myKnob1.setValue(val); 
    break; 
    case ('B') : 
    myKnob2.setValue(val); 
    break; 
    case ('C') : 
    myKnob3.setValue(val); 
    break; 
    case ('D') : 
    myKnob3.setValue(val); 
    break;
  }
}

void goBackToMainState() {

  // from help screen back to main screen

  // buttons ON 
  myKnob1.setVisible(true); 
  myKnob2.setVisible(true); 
  myKnob3.setVisible(true); 
  myKnob4.setVisible(true); 

  //go back to main screen 
  state=normal;

  // kill Esc so we stay in the program 
  key=0;
}

void  backspaceOnActiveList() {

  // for the key BACKSPACE 

  switch (activeArrayListHasNumber) {

  case 0:
    if (points1.size()>0)
      points1.remove(points1.size()-1);
    break; 

  case 1:
    if (points2.size()>0)
      points2.remove(points2.size()-1);
    break;

  case 2:
    if (points3.size()>0)
      points3.remove(points3.size()-1);
    break;

  case 3:
    if (points4.size()>0)
      points4.remove(points4.size()-1);
    break;
  }//switch
  //
}//func 

// ------------------------------------------------
// tools

String nameFromPath(String fileName1) {

  File file = new File(fileName1);
  String result = file.getName();
  return result;
} //func 
//

so I just add void draw like this?

void draw(){

void serialEvent (Serial serialObj) {
  if (serialObj == arduino1) {
     val = arduino1.read(); }  

this has an error...unexpected void token.

jgid

I have just updated the code and unfortunately its still not working?!!

import processing.serial.*;
import processing.serial.*;

Serial arduino1;
Serial arduino2;
PImage[] img = new PImage[1];
int val = 0;

void setup () {
  size (1000, 707);

  img [0] = loadImage ("nocolouredblobs.jpg");
  background(img [0]);

  fill(#459839);  
  ellipse(931,68,75,75);

  arduino1 = new Serial(this, Serial.list()[4], 9600);
  arduino2 = new Serial(this, Serial.list()[3], 9600);
}

void serialEvent(Serial serialObj) {
  if (serialObj == arduino1) {
     val = arduino1.read(); }  

  if (val == 2) {
    fill (#EDB137);
    ellipse (833, 68, 75, 75); 
    fill (#F7CA6E);
    ellipse (931,68,75,75); }
  else { 
    fill (#459839);
    ellipse (833, 68, 75, 75); 
    fill (#459839);
    ellipse (931,68,75,75); }

   if (serialObj == arduino2) {
     val = arduino2.read(); } 

   if (val == 2) {
      fill (#ED3C3C);
      ellipse (733, 68, 75, 75); 
      fill (#ED5F3C);
      ellipse (833, 68, 75, 75);
      fill (#ED6B3C);
      ellipse (931,68,75,75); }
   else {
    fill (#459839);
    ellipse (733, 68, 75, 75); 
    fill (#459839);
    ellipse (833, 68, 75, 75); 
    fill (#459839);
    ellipse (931,68,75,75); }


}

serial arduino1;
serial arduino2;

void serialEvent(Serial serialObj) {

  if(serialObj == arduino1)
     //Data from first arduino


  if(serialObj == arduino2)
     //Data from second unit
}

Kf

// -------------------------------------------------
// Save and load 

void initSave() {
  // init save process 
  // reset
  savePath=""; 
  // make date time stamp (the expression nf(n,2) means leading zero: 2 becomes 02)
  String dateTimeStamp = year() 
    + nf(month(), 2) 
    + nf(day(), 2) 
    + "-"
    + nf(hour(), 2)
    + nf(minute(), 2)
    + nf(second(), 2); 
  // prepare fileDescription which occurs in the dialogue
  // prepara la descrizione del file che avviene nel dialogo
  File fileDescription = new File( sketchPath()
    + "//"
    + pathFolder 
    + "//"
    + dateTimeStamp
    + fileExtension); 
  // open the dialog  
  selectOutput("Select a file to write to", "fileSelectedSave", fileDescription); 
  // set state to wait
  state=save;
}

void initLoad() {
  // init load process 
  // reset
  loadPath=""; 
  // prepare fileDescription which occurs in the dialogue
  File fileDescription = new File( sketchPath()+"//"+pathFolder+"//"+"*" + fileExtension ); 
  // open the dialog
  selectInput("Select a file to load", "fileSelectedLoad", fileDescription); 
  // set state to wait
  state=load;
}

void fileSelectedSave(File selection) {
  // the 'callback' function
  if (selection == null) {
    // println("Window was closed or the user hit cancel.");


    // println ("La finestra è stata chiusa o l'utente ha premuto annulla.");
    // torna indietro

    state=normal; // go back
  } else {
    // println("User selected " + selection.getAbsolutePath());
    savePath=selection.getAbsolutePath();
  }
}

void fileSelectedLoad(File selection) {
  // the 'callback' function
  if (selection == null) {
    // println("Window was closed or the user hit cancel.");

    // go back 
    state=normal;
  } else {
    // println("User selected " + selection.getAbsolutePath());
    loadPath=selection.getAbsolutePath();
  }
}

void waitForSaveDialog() { 
  if (!savePath.equals("")) {
    // waiting is over
    saveIt(); 
    // go back 
    state=normal;
  }
}

void waitForLoadDialog() { 
  if (!loadPath.equals("")) {
    // waiting is over
    loadIt(); 
    // go back 
    state=normal;
  }
}

void saveIt() {
  // save

  // make array (to save it)

  String[] strs; 
  strs = new String[0]; 

  if (activeArrayListHasNumber==0) {
    strs = new String[points1.size()]; 
    int i=0; 
    for (PVector pv : points1) {
      strs[i]=str(pv.x)+","+str(pv.y); 
      i++;
    }//for
  }// 
  else if (activeArrayListHasNumber==1) {
    strs = new String[points2.size()]; 
    int i=0; 
    for (PVector pv : points2) {
      strs[i]=str(pv.x)+","+str(pv.y); 
      i++;
    }//for
  }//else
  else if (activeArrayListHasNumber==2) {
    strs = new String[points3.size()]; 
    int i=0; 
    for (PVector pv : points3) {
      strs[i]=str(pv.x)+","+str(pv.y); 
      i++;
    }//for
  }//else
  else if (activeArrayListHasNumber==3) {
    strs = new String[points4.size()]; 
    int i=0; 
    for (PVector pv : points4) {
      strs[i]=str(pv.x)+","+str(pv.y); 
      i++;
    }//for
  }//else

  // check if file extension (fileExtension, e.g. .txt) is there 
  int len = savePath.length(); 
  if (len<4 || !savePath.substring( len-4 ).equals(fileExtension)) {
    // file Extension is not present, we have to add it
    savePath += fileExtension; // add the file Extension
  } 

  // save 
  println("Saved: " + savePath); 
  saveStrings( savePath, strs );
}//func

void loadIt() {
  // load
  if (activeArrayListHasNumber==0) {
    points1.clear();
  } else if (activeArrayListHasNumber==1)
  {
    points2.clear();
  } else if (activeArrayListHasNumber==2)
  {
    points3.clear();
  } else if (activeArrayListHasNumber==3)
  {
    points4.clear();
  }

  String[] strs = loadStrings( loadPath ); 
  for (String s : strs) {
    String[] thisLine=split(s, ","); 

    if (activeArrayListHasNumber==0) {
      points1.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    } else if (activeArrayListHasNumber==1)
    {
      points2.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    }//else
    else if (activeArrayListHasNumber==2)
    {
      points3.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    }//else
    else if (activeArrayListHasNumber==3)
    {
      points4.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    }//else
    //
  }//for
}

// -------------------------------------------------

void showData1() {
  //
  // show data 1

  PVector prev = new PVector(-1, -1); 
  int y=50; 

  if (activeArrayListHasNumber==0) {
    stroke(255, 2, 2); // RED
    line (10, 10, 198, 10);
  }

  for (PVector pv : points1) {

    if (showText) {
      fill(255, 2, 2); // RED 
      // show data
      text(pv.x, 30, y); 
      text(pv.y, 110, y);
    }

    fill(0, 2, 2); 
    stroke(255, 2, 2); // RED 
    float yvalue = map( pv.y, 0, height, 300, 355); 
    if (prev.x!=-1) {
      line(10 + pv.x*3, yvalue, 
        prev.x, prev.y);
    }
    noStroke(); 
    // ellipse (10 + pv.x*3, yvalue, 4, 4);
    prev = new PVector(10 + pv.x*3, yvalue); 


    y+=20; //next line
  }//for

  if (showText) {
    // middle line 
    stroke(255, 2, 2); // RED 
    line( 100, 30, 100, height);

    // double middle lines!!!   
    stroke(0); // BLACK 
    int x1=200; 
    line( x1-2, 30, x1-2, height); 
    line( x1+2, 30, x1+2, height);
  }
  //
}

void showData2() {
  //
  // show data 2 

  if (activeArrayListHasNumber==1) {
    // activeArrayListHasNumber is FALSE, right side is active
    stroke(2, 255, 2); // GREEN
    line (200, 10, 
      350, 10);
  }

  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points2) {

    if (showText) {
      fill(0, 255, 2); // GREEN 
      // show data
      text(pv.x, 210, y); 
      text(pv.y, 210+80, y);
    }

    fill(0, 2, 2); 
    stroke(0, 255, 2); // GREEN 
    float yvalue = map( pv.y, 0, height, 300, 355); 
    if (prev.x!=-1) {
      line(10 + pv.x*3, yvalue, 
        prev.x, prev.y);
    }
    noStroke(); 
    //   ellipse (10 + pv.x*3, yvalue, 4, 4);
    prev = new PVector(10 + pv.x*3, yvalue); 

    y+=20; //next line
  }//for

  if (showText) {
    // middle line 
    stroke(0, 255, 2); // GREEN 
    line( 288, 30, 288, height);

    // double middle lines!!!   
    stroke(0); // BLACK 
    int x1=210+80+80; 
    line( x1-2, 30, x1-2, height); 
    line( x1+2, 30, x1+2, height);
  }
  //
}

void showData3() {
  //
  // show data 3

  color col3 = color(0, 2, 255); // BLUE 

  if (activeArrayListHasNumber==2) {
    // activeArrayListHasNumber is FALSE, right side is active
    stroke(col3); // 
    line (400, 10, 
      550, 10);
  }

  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points3) {

    fill(col3); // Blue 

    if (showText) {
      // show data
      text(pv.x, 210+180, y); 
      text(pv.y, 210+180+80, y);
    }

    fill(0, 2, 2); 
    stroke(col3); // blue 
    float yvalue = map( pv.y, 0, height, 300, 355); 
    if (prev.x!=-1) {
      line(10 + pv.x*3, yvalue, 
        prev.x, prev.y);
    }
    noStroke(); 
    //   ellipse (10 + pv.x*3, yvalue, 4, 4);
    prev = new PVector(10 + pv.x*3, yvalue); 

    y+=20; //next line
  }//for

  if (showText) {
    // middle line 
    stroke(col3); // blue 
    line( 467, 30, 467, height);

    // double middle lines!!!   
    stroke(0); // BLACK 
    int x1=210+180+80+80; 
    line( x1-2, 30, x1-2, height); 
    line( x1+2, 30, x1+2, height);
  }
  //
}

void showData4() {
  //
  // show data 4 

  color col4 = color(155, 255, 112); 

  if (activeArrayListHasNumber==3) {
    // activeArrayListHasNumber is FALSE, right side is active
    stroke(col4); // 
    line (570, 10, 
      710, 10);
  }

  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points4) {

    fill(col4); //  

    if (showText) {
      // show data
      text(pv.x, 210+180+180, y); 
      text(pv.y, 210+180+180+80, y);
    }

    fill(0, 2, 2); 
    stroke(col4); //  
    float yvalue = map( pv.y, 0, height, 300, 355); 
    if (prev.x!=-1) {
      line(10 + pv.x*3, yvalue, 
        prev.x, prev.y);
    }
    noStroke(); 
    //   ellipse (10 + pv.x*3, yvalue, 4, 4);
    prev = new PVector(10 + pv.x*3, yvalue); 

    y+=20; //next line
  }//for

  if (showText) {
    // middle line 
    stroke(col4); //  
    line( 210+180+180+80-4, 30, 210+180+180+80-4, height);
  }
  //
}

// ---------------------------------------------------------------

void serialEvent(Serial p) { 
  inString = p.readString(); 
  char primo=inString.charAt(0); // primo carattere
  String cifra=inString.substring(1); // da secondo carattere in poi
  float val=parseFloat(cifra); // valore da 0-255 o 0-1023, non sò cosa spedisce arduino


  print("val="); 
  println(val); 

  //   inString = trim(inString);

  //    // converte in int e mappa all'altezza dello schermo: 


  switch(primo) { 
    case ('A') : 
    myKnob1.setValue(val); 
    break; 
    case ('B') : 
    myKnob2.setValue(val); 
    break; 
    case ('C') : 
    myKnob3.setValue(val); 
    break; 
    case ('D') : 
    myKnob3.setValue(val); 
    break;
  }
}

void goBackToMainState() {

  // from help screen back to main screen

  // buttons ON 
  myKnob1.setVisible(true); 
  myKnob2.setVisible(true); 
  myKnob3.setVisible(true); 
  myKnob4.setVisible(true); 

  //go back to main screen 
  state=normal;

  // kill Esc so we stay in the program 
  key=0;
}

void  backspaceOnActiveList() {

  // for the key BACKSPACE 

  switch (activeArrayListHasNumber) {

  case 0:
    if (points1.size()>0)
      points1.remove(points1.size()-1);
    break; 

  case 1:
    if (points2.size()>0)
      points2.remove(points2.size()-1);
    break;

  case 2:
    if (points3.size()>0)
      points3.remove(points3.size()-1);
    break;

  case 3:
    if (points4.size()>0)
      points4.remove(points4.size()-1);
    break;
  }//switch
  //
}//func 
//

here

very small graphs

import processing.serial.*; 
import controlP5.*;   
import grafica.*;

Serial myPort;    // The serial port: 
ControlP5 controlP5;   // controlP5 object
Knob myKnob1, myKnob2, myKnob3, myKnob4;

ArrayList<PVector> points1 = new ArrayList(); // left one 
ArrayList<PVector> points2 = new ArrayList(); // right one

boolean activeArrayListIsLeft = true; 

boolean showHelpText1 = true; 

String inString;  // Input string from serial port: 
int lf = 10;      // ASCII linefeed 
float deg, val;

final String pathFolder="";//CARTELLA DI PERCORSO
final String fileExtension = ".txt";//estensione file
// unique numbers for constants: 
final int normal = 0;
final int save   = 1;
final int load   = 2;
///current state (must be one of them) 
/// stato attuale (deve essere uno di loro)
int state=normal;

// Paths 
String savePath=""; 
String loadPath=""; 
void setup() {
  size(1350, 750);

  // not necessary
  for (int i = 0; i < 3; i++) { 
    points1.add(new PVector(i, 20 + 10*noise(i*0.1)));
  }//for

  // not necessary 
  for (int i = 0; i < 13; i++) { 
    points2.add(new PVector(i, 20 + 10*noise(i*0.1)));
  }//for

  //ControlP5
  PFont  f= createFont ("Georgia", 25);
  {
    controlP5 = new ControlP5(this);   //ControlP5

    myKnob1 = controlP5.addKnob(" Massa ARIA")
      //.setRange(0,1024)
      .setRange(0, 5)
      .setValue(0)
      .setPosition(width-370, height-185)//posizione 605
      .setTickMarkLength(10)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      //  . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      // .setScrollSensitivity(120)
      . setDecimalPrecision(2) //numero dopo la virgola
      ;
    myKnob1 .getCaptionLabel()
      . setFont(f);
    myKnob1.getValueLabel()
      .setFont(f)
      ;
    ;

    myKnob2 = controlP5.addKnob("P. Cil")
      .setRange(0, 500)
      .setValue(0)
      .setPosition(width-370, height-380)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      // . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      // .setScrollSensitivity(120)
      .  setDecimalPrecision(2) //numero dopo la virgola
      .setTickMarkLength(10) 
      ;
    myKnob2 .getCaptionLabel()
      . setFont(f);
    myKnob2.getValueLabel()
      .setFont(f)
      ;

    myKnob3 = controlP5.addKnob("P. Atm ")
      //.setRange(0,1023)
      .setRange(0, 500)
      .setValue(1)
      .setPosition(width-180, height-380)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      //   . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      .setDecimalPrecision(2) //numero dopo la virgola
      .setTickMarkLength(10)
      ;
    myKnob3 .getCaptionLabel()
      . setFont(f);
    myKnob3.getValueLabel()
      .setFont(f)
      ;

    myKnob4 = controlP5.addKnob("temp")
      //.setRange(0,1023)
      .setRange(0, 500)
      .setValue(1)
      .setPosition(width-180, height-185)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      //   . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      .setDecimalPrecision(2) //numero dopo la virgola
      .setTickMarkLength(10)
      ;
    myKnob4 .getCaptionLabel()
      . setFont(f);
    myKnob4.getValueLabel()
      .setFont(f)
      ;
  }
}
//  myPort = new Serial(this, "com3", 9600);  // ?????
//  myPort.bufferUntil(lf);
// }

void draw() {

  switch (state) {

  case normal:
    drawForStateNormal() ;
    break; 

  case save:
    // wait for Save Dialog 
    waitForSaveDialog();
    break; 

  case load:
    // wait for Load Dialog 
    waitForLoadDialog();
    break;

  default:
    //Error 
    println("Fail");
    exit();
    break; 
    //
  }//switch
}//func

// ------------------------------------------------

void drawForStateNormal() {

  background(245);
  {
    strokeWeight(2);   
    stroke(#FF0B03);
    fill(0);
    rect(width-380, height-490, 360, 90, 20);// retangolo diff. press.
    fill(255);
    textSize(28); 
    text("Diff.Press.", width-270, height-405);     //diff.press
    textSize(40);
    text(( myKnob2.getValue()- myKnob3.getValue()), width-270, height-445);     //diff.press
  }
  {
    fill(0);
    strokeWeight(2);   
    stroke(#FF0B03);

    rect(width-380, height-390, 360, 190, 20);// retangolo press
    rect(width-380, height-195, 360, 190, 20);// rettangolo massa Temp
  }
  textSize(14);
  showData1();
  showData2();

  // title 
  fill(255, 2, 2);
  text("My little Graph program\n\nUse buttons on the right and below;\n"    //testo e posizione testo
    +"use Backspace OR delete key to delete last data point of each list.", 
    width-223, 10, 100, 422);

  // help
  if (showHelpText1) {
    fill(255, 2, 2);
    text("Use 1 and 2 to set the active table which is marked by the horizontal line on top.\n\n"
      +"New, Load and Save are referring to the active table.\n\nHit x to hide / show this text.", 
      420, 10, 100, 422);
  }

  // ----------------------
  // buttons
  showButtons();
  //
} //draw

// --------------------------------------------------
// functions to show buttons funzione per mostrare i bottoni

void showButtons() {
  //
  strokeWeight(2);   
  stroke(0);
  textSize(15);
  fill(0);
  if ( overSave() ) {
    fill(#FF0303);
  }

  rect(width-50, height-740, 40, 20, 5);// modificato posizione bottone "salve"
  fill(255); 
  text("Save", 
    width-50+2, height-740+9+6);
  // ---
  fill(0);
  if ( overLoad() ) {
    fill(#49C3FA);
  }

  rect(width-50, height-710, 40, 20, 5);// modificato posizione" load"
  fill(255); 
  text("Load", 
    width-50+2, height-710+9+6);

  // ---
  fill(0);
  if ( overNew() ) {
    fill(#1FFF03);
  }

  rect(width-50, height-680, 40, 20, 5);// modificato posizione "new"
  fill(255); 
  text("New", 
    width-50+4, height-680+9+6);
}

//----------------------------------------------------------------------------
// functions to register if mouse is over buttons funzione da registrare se il mouse è sui pulsanti

boolean overSave() {            // modificato
  return mouseX > width-50 && 
    mouseY > height-740  && 
    mouseY < height-740+25 ;
}

boolean overLoad() {                 //modificato
  return mouseX > width-50 && 
    mouseY > height-710  && 
    mouseY < height-710+25 ;
}

boolean overNew() {                         //modificato
  return mouseX > width -50 && 
    mouseY > height-680  && 
    mouseY < height-680+25 ;
}

// ---------------------------------------------------------------------------
// Inputs 

void keyPressed() {

  if (state!=normal)
    return;

  //  
  if (  keyCode == BACKSPACE ) {
    //
    if (points1.size()>0)
      points1.remove(points1.size()-1);
  } 
  // ----
  if ( keyCode == DELETE ) {
    //
    if (points2.size()>0)
      points2.remove(points2.size()-1);
  } 

  // ------

  else {
    if ( key != CODED ) {
      //
      switch(key) {

      case '1':
        activeArrayListIsLeft = true; 
        break;

      case '2':
        activeArrayListIsLeft = false; 
        break;

      case 'x':
        showHelpText1 = !showHelpText1; 
        break;
      }//switch
      //
    }//if
  }//else
}// func 

void mousePressed() {

  if (state!=normal)
    return;

  // for the buttons 
  if ( overSave() ) {
    initSave();
  }
  //---
  else if ( overLoad() ) {
    initLoad();
  }
  //---
  else if ( overNew() ) {
    //
    if ( activeArrayListIsLeft ) {
      points1.clear();            //cancellare punti con new
      //  not necessary:
      for (int i = 0; i < 13; i++) { 
        // points1.add(new PVector(i, 20 + 10*noise(i*0.1)));
      }//for
    } else {
      points2.clear();            //cancellare punti con new
      //  not necessary:
      for (int i = 0; i < 13; i++) { 
        // points2.add(new PVector(i, 20 + 10*noise(i*0.1)));
      }//for
    }
    //
  }
  //---
  else {
    // points.add(new PVector(points.size(), mouseY/10));
    if ( activeArrayListIsLeft ) {
      // points1.add(new PVector(points1.size(), myKnob1.getValue()));
      points1.add(new PVector(points1.size(), mouseY));
    } else {

      //points2.add(new PVector(points2.size(), myKnob1.getValue()));
      points2.add(new PVector(points2.size(), mouseY));
    }
  }
}//func

// -------------------------------------------------
// Save and load 

void initSave() {
  // init save process 
  // reset
  savePath="";
  // make date time stamp (the expression nf(n,2) means leading zero: 2 becomes 02)
  String dateTimeStamp = year() 
    + nf(month(), 2) 
    + nf(day(), 2) 
    + "-"
    + nf(hour(), 2)
    + nf(minute(), 2)
    + nf(second(), 2);
  // prepare fileDescription which occurs in the dialogue
  // prepara la descrizione del file che avviene nel dialogo
  File fileDescription = new File( sketchPath()
    + "//"
    + pathFolder 
    + "//"
    + dateTimeStamp
    + fileExtension);
  // open the dialog  
  selectOutput("Select a file to write to", "fileSelectedSave", fileDescription);
  // set state to wait
  state=save;
}

void initLoad() {
  // init load process 
  // reset
  loadPath="";
  // prepare fileDescription which occurs in the dialogue
  File fileDescription = new File( sketchPath()+"//"+pathFolder+"//"+"*" + fileExtension );
  // open the dialog
  selectInput("Select a file to load", "fileSelectedLoad", fileDescription);
  // set state to wait
  state=load;
}

void fileSelectedSave(File selection) {
  // the 'callback' function
  if (selection == null) {
    // println("Window was closed or the user hit cancel.");


    // println ("La finestra è stata chiusa o l'utente ha premuto annulla.");
    // torna indietro

    state=normal;    // go back
  } else {
    // println("User selected " + selection.getAbsolutePath());
    savePath=selection.getAbsolutePath();
  }
}

void fileSelectedLoad(File selection) {
  // the 'callback' function
  if (selection == null) {
    // println("Window was closed or the user hit cancel.");

    // go back 
    state=normal;
  } else {
    // println("User selected " + selection.getAbsolutePath());
    loadPath=selection.getAbsolutePath();
  }
}

void waitForSaveDialog() { 
  if (!savePath.equals("")) {
    // waiting is over
    saveIt();
    // go back 
    state=normal;
  }
}

void waitForLoadDialog() { 
  if (!loadPath.equals("")) {
    // waiting is over
    loadIt();
    // go back 
    state=normal;
  }
}

void saveIt() {
  // save

  // make array (to save it)

  String[] strs; 

  if (activeArrayListIsLeft) {
    strs = new String[points1.size()];
    int i=0;
    for (PVector pv : points1) {
      strs[i]=str(pv.x)+","+str(pv.y);
      i++;
    }//for
  }// 
  else {
    strs = new String[points2.size()];
    int i=0;
    for (PVector pv : points2) {
      strs[i]=str(pv.x)+","+str(pv.y);
      i++;
    }//for
  }//else 

  // check if file extension (fileExtension, e.g. .txt) is there 
  int len = savePath.length(); 
  if (len<4 || !savePath.substring( len-4 ).equals(fileExtension)) {
    // file Extension is not present, we have to add it
    savePath += fileExtension; // add the file Extension
  } 

  // save 
  println("Saved: " + savePath);
  saveStrings( savePath, strs );
}//func

void loadIt() {
  // load
  if (activeArrayListIsLeft) {
    points1.clear();
  } else 
  {
    points2.clear();
  }
  String[] strs = loadStrings( loadPath );
  for (String s : strs) {
    String[] thisLine=split(s, ",");

    if (activeArrayListIsLeft) {
      points1.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    } else 
    {
      points2.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    }//else 
    //
  }//for
}

// -------------------------------------------------

void showData1() {
  //
  // show data LEFT 
  PVector prev = new PVector(-1, -1); 
  int y=50; 

  if (activeArrayListIsLeft) {
    stroke(255, 2, 2); // RED
    line (10, 10, 198, 10);
  }

  for (PVector pv : points1) {

    fill(255, 2, 2); // RED 

    // show data
    text(pv.x, 30, y); 
    text(pv.y, 110, y);

    fill(0, 2, 2); 
    stroke(255, 2, 2); // RED 
    float yvalue = map( pv.y, 0, height, 300, 355);
    if (prev.x!=-1) {
      line(10 + pv.x*3, yvalue, 
        prev.x, prev.y);
    }
    noStroke();
    // ellipse (10 + pv.x*3, yvalue, 4, 4);
    prev = new PVector(10 + pv.x*3, yvalue); 

    y+=20; //next line
  }//for

  // middle line 
  stroke(255, 2, 2); // RED 
  line( 100, 30, 100, height);

  // double middle lines!!!   ???
  stroke(0); // BLACK 
  int x1=200;
  line( x1-2, 30, x1-2, height);
  line( x1+2, 30, x1+2, height);
  //
}

void showData2() {
  //
  // show data RIGHT 

  if (!activeArrayListIsLeft) {
    // activeArrayListIsLeft is FALSE, right side is active
    stroke(2, 255, 2); // GREEN
    line (200, 10, 
      350, 10);
  }

  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points2) {

    fill(0, 255, 2); // GREEN 

    // show data
    text(pv.x, 210, y); 
    text(pv.y, 290, y);

    fill(0, 2, 2); 
    stroke(0, 255, 2); // GREEN 
    float yvalue = map( pv.y, 0, height, 300, 355);
    if (prev.x!=-1) {
      line(10 + pv.x*3, yvalue, 
        prev.x, prev.y);
    }
    noStroke();
    //   ellipse (10 + pv.x*3, yvalue, 4, 4);
    prev = new PVector(10 + pv.x*3, yvalue); 

    y+=20; //next line
  }//for

  // middle line 
  stroke(0, 255, 2); // GREEN 
  line( 288, 30, 288, height);
  //
}

// ---------------------------------------------------------------

void serialEvent(Serial p) { 
  inString = p.readString(); 
  char primo=inString.charAt(0);  // primo carattere
  String cifra=inString.substring(1);  // da secondo carattere in poi
  float val=parseFloat(cifra);          // valore da 0-255 o 0-1023, non sò cosa spedisce arduino


  print("val=");    
  println(val);

  //   inString = trim(inString);

  //    // converte in int e mappa all'altezza dello schermo: 


  switch(primo) { 
    case ('A'): 
    myKnob1.setValue(val);
    break;
    case ('B'): 
    myKnob2.setValue(val);
    break;
    case ('C'): 
    myKnob3.setValue(val);
    break;
    case ('D'): 
    myKnob3.setValue(val);
    break;
  }
}

This is what I have in mind, but I have not succeeded yet .... Point1 and Point2 I would like to draw in the GPlot chart .... import processing.serial.*; import controlP5.*;
import grafica.*;

Serial myPort;    // The serial port: 
ControlP5 controlP5;   // controlP5 object
Knob myKnob1, myKnob2, myKnob3, myKnob4;

ArrayList<PVector> points1 = new ArrayList(); // left one 
ArrayList<PVector> points2 = new ArrayList(); // right one

boolean activeArrayListIsLeft = true; 

boolean showHelpText1 = true; 

String inString;  // Input string from serial port: 
int lf = 10;      // ASCII linefeed 
float deg, val;

final String pathFolder="";//CARTELLA DI PERCORSO
final String fileExtension = ".txt";//estensione file
// unique numbers for constants: 
final int normal = 0;
final int save   = 1;
final int load   = 2;
///current state (must be one of them) 

int state=normal;

// Paths 
String savePath=""; 
String loadPath=""; 

GPlot plot;
int xPos=0;
void setup() {
  size(1350, 750);

  // not necessary
  for (int i = 0; i < 3; i++) { 
    points1.add(new PVector(i, 20 + 10*noise(i*0.1)));
  }//for

  // not necessary 
  for (int i = 0; i < 13; i++) { 
    points2.add(new PVector(i, 20 + 10*noise(i*0.1)));
  }//for

  //ControlP5
  PFont  f= createFont ("Georgia", 25);
  {
    controlP5 = new ControlP5(this);   //ControlP5

    myKnob1 = controlP5.addKnob(" Massa ARIA")
      //.setRange(0,1024)
      .setRange(0, 5)
      .setValue(0)
      .setPosition(width-370, height-185)//posizione 605
      .setTickMarkLength(10)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      //  . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      // .setScrollSensitivity(120)
      . setDecimalPrecision(2) //numero dopo la virgola
      ;
    myKnob1 .getCaptionLabel()
      . setFont(f);
    myKnob1.getValueLabel()
      .setFont(f)
      ;
    ;

    myKnob2 = controlP5.addKnob("P. Cil")
      .setRange(0, 500)
      .setValue(0)
      .setPosition(width-370, height-380)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      // . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      // .setScrollSensitivity(120)
      .  setDecimalPrecision(2) //numero dopo la virgola
      .setTickMarkLength(10) 
      ;
    myKnob2 .getCaptionLabel()
      . setFont(f);
    myKnob2.getValueLabel()
      .setFont(f)
      ;

    myKnob3 = controlP5.addKnob("P. Atm ")
      //.setRange(0,1023)
      .setRange(0, 500)
      .setValue(1)
      .setPosition(width-180, height-380)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      //   . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      .setDecimalPrecision(2) //numero dopo la virgola
      .setTickMarkLength(10)
      ;
    myKnob3 .getCaptionLabel()
      . setFont(f);
    myKnob3.getValueLabel()
      .setFont(f)
      ;

    myKnob4 = controlP5.addKnob("temp")
      //.setRange(0,1023)
      .setRange(0, 500)
      .setValue(1)
      .setPosition(width-180, height-185)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      //   . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      .setDecimalPrecision(2) //numero dopo la virgola
      .setTickMarkLength(10)
      ;
    myKnob4 .getCaptionLabel()
      . setFont(f);
    myKnob4.getValueLabel()
      .setFont(f)
      ;
  }
}
//  myPort = new Serial(this, "com3", 9600);  // ?????
//  myPort.bufferUntil(lf);
// }
{
   // Create the first plot  Crea il primo grafico
 plot = new GPlot(this);
  plot.setPos(200,200);//posizione
  plot.setMar(0, 100, 0,100);
  plot.setDim(1000, 480);//dimensione
  plot.setAxesOffset(4);
  plot.setTicksLength(4);



  int myKnob1 =0;
  GPointsArray points = new GPointsArray(myKnob1);

  for (int i = 0; i < 13; i++) {
   //points.add(i, 20 + 10*noise(i*0.1));
    if(xPos==13){
    }
    {

  // Set the points, the title and the axis labels 
  plot.setPoints(points);
  plot.getYAxis().setAxisLabelText("y(?)");
  plot.getXAxis().setAxisLabelText("x (?)");
    }
  }
}


void draw() {

  // Draw the first plot
  //Disegna la prima trama 
  plot.beginDraw();
  plot.drawBox();
  plot.drawXAxis();
  plot.drawYAxis();
  plot.drawTitle();
 //plot1.drawPoints();//pallinorosso sul valore
  plot.drawGridLines(GPlot.BOTH);
  plot.drawLines();
  plot.endDraw();
}
{

  switch (state) {

  case normal:
    drawForStateNormal() ;
    break; 

  case save:
    // wait for Save Dialog 
    waitForSaveDialog();
    break; 

  case load:
    // wait for Load Dialog 
    waitForLoadDialog();
    break;

  default:
    //Error 
    println("Fail");
    exit();
    break; 
    //
  }//switch
}//func

void drawForStateNormal() {

  background(245);
  {
    strokeWeight(2);   
    stroke(#FF0B03);
    fill(0);
    rect(width-380, height-490, 360, 90, 20);// retangolo diff. press.
    fill(255);
    textSize(28); 
    text("Diff.Press.", width-270, height-405);     //diff.press
    textSize(40);
    text(( myKnob2.getValue()- myKnob3.getValue()), width-270, height-445);     //diff.press
  }
  {
    fill(0);
    strokeWeight(2);   
    stroke(#FF0B03);

    rect(width-380, height-390, 360, 190, 20);// retangolo press
    rect(width-380, height-195, 360, 190, 20);// rettangolo massa Temp
  }
  textSize(14);
  showData1();
  showData2();

  // title 
  fill(255, 2, 2);
  text("My little Graph program\n\nUse buttons on the right and below;\n"    //testo e posizione testo
    +"use Backspace OR delete key to delete last data point of each list.", 
    width-223, 10, 100, 422);

  // help
  if (showHelpText1) {
    fill(255, 2, 2);
    text("Use 1 and 2 to set the active table which is marked by the horizontal line on top.\n\n"
      +"New, Load and Save are referring to the active table.\n\nHit x to hide / show this text.", 
      420, 10, 100, 422);

  }

  // buttons
  showButtons();
  //
} //draw

// functions to show buttons funzione per mostrare i bottoni

void showButtons() {
  //
  strokeWeight(2);   
  stroke(0);
  textSize(15);
  fill(0);
  if ( overSave() ) {
    fill(#FF0303);
  }

  rect(width-50, height-740, 40, 20, 5);// modificato posizione bottone "salve"
  fill(255); 
  text("Save", 
    width-50+2, height-740+9+6);
  // ---
  fill(0);
  if ( overLoad() ) {
    fill(#49C3FA);
  }

  rect(width-50, height-710, 40, 20, 5);// modificato posizione" load"
  fill(255); 
  text("Load", 
    width-50+2, height-710+9+6);

  // ---
  fill(0);
  if ( overNew() ) {
    fill(#1FFF03);
  }

  rect(width-50, height-680, 40, 20, 5);// modificato posizione "new"
  fill(255); 
  text("New", 
    width-50+4, height-680+9+6);
}

// functions to register if mouse is over buttons funzione da registrare se il mouse è sui pulsanti

boolean overSave() {            // modificato
  return mouseX > width-50 && 
    mouseY > height-740  && 
    mouseY < height-740+25 ;
}

boolean overLoad() {                 //modificato
  return mouseX > width-50 && 
    mouseY > height-710  && 
    mouseY < height-710+25 ;
}

boolean overNew() {                         //modificato
  return mouseX > width -50 && 
    mouseY > height-680  && 
    mouseY < height-680+25 ;
}

// Inputs 

void keyPressed() {

  if (state!=normal)
    return;

  //  
  if (  keyCode == BACKSPACE ) {          //da controllare non funziona
    //
    if (points1.size()>0)
      points1.remove(points1.size()-1);
  } 
  // ----
  if ( keyCode == DELETE ) {
    //
    if (points2.size()>0)
      points2.remove(points2.size()-1);
  } 

  // ------

  else {
    if ( key != CODED ) {
      //
      switch(key) {

      case '1':
        activeArrayListIsLeft = true; 
        break;

      case '2':
        activeArrayListIsLeft = false; 
        break;

      case 'x':
        showHelpText1 = !showHelpText1; 
        break;
      }//switch
      //
    }//if
  }//else
}// func 

void mousePressed() {

  if (state!=normal)
    return;

  // for the buttons 
  if ( overSave() ) {
    initSave();
  }
  //---
  else if ( overLoad() ) {
    initLoad();
  }
  //---
  else if ( overNew() ) {
    //
    if ( activeArrayListIsLeft ) {
      points1.clear();            //cancellare punti con new
      //  not necessary:
      for (int i = 0; i < 13; i++) { 
        // points1.add(new PVector(i, 20 + 10*noise(i*0.1)));
      }//for
    } else {
      points2.clear();            //cancellare punti con new
      //  not necessary:
      for (int i = 0; i < 13; i++) { 
        // points2.add(new PVector(i, 20 + 10*noise(i*0.1)));
      }//for
    }
    //
  }
  //---
  else {
    // points.add(new PVector(points.size(), mouseY/10));
    if ( activeArrayListIsLeft ) {
      points1.add(new PVector(points1.size(), myKnob1.getValue()));
    } else {
      points2.add(new PVector(points2.size(), myKnob1.getValue()));
    }
  }
}//func

// -------------------------------------------------
// Save and load 

void initSave() {
  // init save process 
  // reset
  savePath="";
  // make date time stamp (the expression nf(n,2) means leading zero: 2 becomes 02)
 2 diventa 02)
  String dateTimeStamp = year() 
    + nf(month(), 2) 
    + nf(day(), 2) 
    + "-"
    + nf(hour(), 2)
    + nf(minute(), 2)
    + nf(second(), 2);
  File fileDescription = new File( sketchPath()
    + "//"
    + pathFolder 
    + "//"
    + dateTimeStamp
    + fileExtension);
  // open the dialog  
  selectOutput("Select a file to write to", "fileSelectedSave", fileDescription);
  // set state to wait
  state=save;

   GPoint lastPoint = plot.getPointsRef().getLastPoint();

  if (lastPoint == null) {

       plot.addPoint(xPos, +myKnob1.getValue(), "(" + str(xPos) + " , " + str(myKnob1.getValue()) + ")");

  } 
  else if (!lastPoint.isValid() || sq(lastPoint.getX() - xPos) + sq(lastPoint.getY() + myKnob1.getValue()) > 2500) {
    //plot1.addPoint(xPos, -val, "(" + (xPos) + " , " + (-val) + ")");


  }

  // Reset the points if the user pressed the space bar
  if (keyPressed && key == ' ') {
    plot.setPoints(new GPointsArray());
  }
}

void initLoad() {
  // init load process 
  // reset
  loadPath="";
  File fileDescription = new File( sketchPath()+"//"+pathFolder+"//"+"*" + fileExtension );
  // open the dialog
  selectInput("Select a file to load", "fileSelectedLoad", fileDescription);
  // set state to wait

  state=load;
}

void fileSelectedSave(File selection) {
  // the 'callback' function
  if (selection == null) {
    // println("Window was closed or the user hit cancel.");

    state=normal;    // go back
  } else {
    // println("User selected " + selection.getAbsolutePath());
    savePath=selection.getAbsolutePath();
  }
}

void fileSelectedLoad(File selection) {
  // the 'callback' function
  if (selection == null) {
    // println("Window was closed or the user hit cancel.");

    // go back 
    state=normal;
  } else {
    // println("User selected " + selection.getAbsolutePath());
    loadPath=selection.getAbsolutePath();
  }
}

void waitForSaveDialog() { 
  if (!savePath.equals("")) {
    // waiting is over
    saveIt();
    // go back 
    state=normal;
  }
}

void waitForLoadDialog() { 
  if (!loadPath.equals("")) {
    // waiting is over
    loadIt();
    // go back 
    state=normal;
  }
}

void saveIt() {
  // save

  // make array (to save it)

  String[] strs; 

  if (activeArrayListIsLeft) {
    strs = new String[points1.size()];
    int i=0;
    for (PVector pv : points1) {
      strs[i]=str(pv.x)+","+str(pv.y);
      i++;
    }//for
  }// 
  else {
    strs = new String[points2.size()];
    int i=0;
    for (PVector pv : points2) {
      strs[i]=str(pv.x)+","+str(pv.y);
      i++;
    }//for
  }//else 

  // check if file extension (fileExtension, e.g. .txt) is there 
  int len = savePath.length(); 
  if (len<4 || !savePath.substring( len-4 ).equals(fileExtension)) {
    // file Extension is not present, we have to add it
    savePath += fileExtension; // add the file Extension
  } 

  // save 
  println("Saved: " + savePath);
  saveStrings( savePath, strs );
}//func

void loadIt() {
  // load
  if (activeArrayListIsLeft) {
    points1.clear();
  } else
  {
    points2.clear();
  }
  String[] strs = loadStrings( loadPath );
  for (String s : strs) {
    String[] thisLine=split(s, ",");

    if (activeArrayListIsLeft) {
      points1.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    } else
    {
      points2.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    }//else 
    //
  }//for
}

void showData1() {
  //
  // show data LEFT 
  PVector prev = new PVector(-1, -1); 
  int y=50; 

  if (activeArrayListIsLeft) {
    stroke(255, 2, 2); // RED
    line (10, 10, 198, 10);
  }

  for (PVector pv : points1) {

    fill(255, 2, 2); // RED 

    // show data
    text(pv.x, 30, y); 
    text(pv.y, 110, y);

    fill(0, 2, 2); 
    stroke(255, 2, 2); // RED 
    if (prev.x!=-1) {
      line(10 + pv.x*30, pv.y*10, 
        prev.x, prev.y);
    }
    noStroke();
    ellipse (10 + pv.x*30, pv.y*10, 4, 4);
    prev = new PVector(10 + pv.x*30, pv.y*10); 

    y+=20; //next line
  }//for

  // middle line 
  stroke(255, 2, 2); // RED 
  line( 100, 30, 100, height);

  // double middle lines!!!   ???
  stroke(0); // BLACK 
  int x1=200;
  line( x1-2, 30, x1-2, height);
  line( x1+2, 30, x1+2, height);
  //
 }

  void showData2() {
  //
  // show data RIGHT 

  if (!activeArrayListIsLeft) {
    // activeArrayListIsLeft is FALSE, right side is active

   // activeArrayListIsLeft è FALSE, il lato destro è attivo
    stroke(2, 255, 2); // GREEN
    line (200, 10, 
      350, 10);
  }

  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points2) {

    fill(0, 255, 2); // GREEN 

    // show data
    text(pv.x, 210, y); 
    text(pv.y, 290, y);

    fill(0, 2, 2); 
    stroke(0, 255, 2); // GREEN 
    if (prev.x!=-1) {
      line(10 + pv.x*30, pv.y*10, 
        prev.x, prev.y);
    }
    noStroke();
    ellipse (10 + pv.x*30, pv.y*10, 4, 4);
    prev = new PVector(10 + pv.x*30, pv.y*10); 

    y+=20; //next line
  }//for

  // middle line 
  stroke(0, 255, 2); // GREEN 
  line( 288, 30, 288, height);
  //
 }


 void serialEvent(Serial p) { 
  inString = p.readString(); 
  char primo=inString.charAt(0);  // primo carattere
  String cifra=inString.substring(1);  // da secondo carattere in poi
  float val=parseFloat(cifra);          // valore da 0-255 o 0-1023, non sò cosa 
  print("val=");    
  println(val);
  switch(primo) { 
    case ('A'): 
    myKnob1.setValue(val);
    break;
    case ('B'): 
    myKnob2.setValue(val);
    break;
    case ('C'): 
    myKnob3.setValue(val);
    break;
    case ('D'): 
    myKnob3.setValue(val);
    break;
  }

}

So store value in serialEvent (while loop??)

And then move it with ...add into the ArrayList

yes; in function serialEvent you read a value

add that to the active arraylist on mousepressed

see lines 505 to 510