Thanks Chrisir, the merit of where I arrived and all yours, I still have to study and apply myself so much ..... This is where I came to create the sketch ......

// https : // forum.processing.org/two/discussion/26719/save-and-load-array-list#latest

import processing.serial.*; 

Serial myPort;      // The serial port: 


// buttons above columns  pulsanti sopra  colonne
int[] arrayOfXValuesFrom = { 900, 1010,1120, 1230 };  
int[] arrayOfXValuesTFile = { 275, 305, 335, 365}; 
int[] arrayOfXValuesTo = { 990, 1100, 1210, 1320 };

// text for file names for each column   // testo per i nomi dei file per ogni colonna
String[] fileNames = { "not a file", 
  "not a file", 
  "not a file", 
  "not a file" };  

// 4 columns 
ArrayList<PVector> points1 = new ArrayList(); // 1st 
ArrayList<PVector> points2 = new ArrayList(); // 2nd
ArrayList<PVector> points3 = new ArrayList(); // 3rd 
ArrayList<PVector> points4 = new ArrayList(); // 4th

// active column 
int activeArrayListHasNumber = 0;  

// some flags for texts 
boolean showHelpText1 = false; 
boolean showText = true; 

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

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;
final int help   = 3;
/// 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
  //for (int i = 0; i < 13; i++) { 
  //  points2.add(new PVector(i, 30 + 10*noise(i*0.1)));
  //}//for
  //for (int i = 0; i < 5; i++) { 
  //  points3.add(new PVector(i, 40 + 10*noise(i*0.1)));
  //}//for
  //for (int i = 0; i < 7; i++) { 
  //  points4.add(new PVector(i, 50 + 10*noise(i*0.1)));
  //}//for

  PFont  f= createFont ("Georgia", 25);

   // 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;

  case help:
    // help
    drawForStateHelp() ;
    break; 

  default:
    //Error 
    println("Fail 192; unknown state: "
      +state);
    exit();
    break; 
    //
  } //switch
  //
}//func

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

void drawForStateNormal() {

  background(245);
  {
      strokeWeight(2);//spessore linea rettangolo grafico
      stroke(50);;//colore contorno rettangolo grafico
    fill(245);
    rect(width-1320, height-590, 820, 565); //posizione e grandezza rettangolo grafico
    rect(width-490, height-495, 480, 120); //posizione e grandezza rettangolo nome file
    rect(width-490, height-740, 430, 235); //posizione e grandezza rettangolo valori
    //linee grafico verticali.
    strokeWeight(2);
    stroke (200);
    fill(255);
    line(width-1270,height-60,width-1270,height-580);
    line(width-1215,height-60,width-1215,height-580);
    line(width-1160,height-60,width-1160,height-580);
    line(width-1105,height-60,width-1105,height-580);
    line(width-1050,height-60,width-1050,height-580);
    line(width-995,height-60,width-995,height-580);
    line(width-940,height-60,width-940,height-580);
    line(width-885,height-60,width-885,height-580);
    line(width-830,height-60,width-830,height-580);
    line(width-775,height-60,width-775,height-580);
    line(width-720,height-60,width-720,height-580);
    line(width-665,height-60,width-665,height-580);
    line(width-610,height-60,width-610,height-580);
    line(width-555,height-60,width-555,height-580);

    //linee grafico verticali
    //line(width-1200,height-30,width-1200,height-580);
    //line(width-1200,height-30,width-1200,height-580);
    //line(width-1200,height-30,width-1200,height-580);
    //numeri grafico orizzontali
    stroke(0);
     strokeWeight(1);
    fill(0);
    line(width-1270,height-50,width-1270,height-60);
    line(width-1215,height-50,width-1215,height-60);
    line(width-1160,height-50,width-1160,height-60);
    line(width-1105,height-50,width-1105,height-60);
    line(width-1050,height-50,width-1050,height-60);
    line(width-995,height-50,width-995,height-60);
    line(width-940,height-50,width-940,height-60);
    line(width-885,height-50,width-885,height-60);
    line(width-830,height-50,width-830,height-60);
    line(width-775,height-50,width-775,height-60);
    line(width-720,height-50,width-720,height-60);
    line(width-665,height-50,width-665,height-60);
    line(width-610,height-50,width-610,height-60);
    line(width-555,height-50,width-555,height-60);
    line(width-1280,height-50,width-540,height-50);
   // line(width-1275,height-50,width-1275,height-580);// linea verticale bianca
    textSize(15);
    text("0,0",width-1280,height-30);  // numeri grafico
    text("1,0",width-1225,height-30);
    text("2,0",width-1170,height-30);
    text("3,0",width-1115,height-30);
    text("4,0",width-1060,height-30);
    text("5,0",width-1005,height-30);
    text("6,0",width-950,height-30);
    text("7,0",width-895,height-30);
    text("8,0",width-840,height-30);
    text("9,0",width-785,height-30);
    text("10,0",width-740,height-30);
    text("11,0",width-685,height-30);
    text("12,0",width-630,height-30);
    text("13,0",width-575,height-30);

    textSize(38);
    text(MasA,width-495,height-695);

    text(nf(PCil,0,2),width-200,height-695);
    text(nf(PAtm,0,2),width-200,height-617);
    //text(Temp,1000,200);
    text(((nf(PAtm- PCil,0,2))), width-200,height-539);
    textSize(16);
    text("(In/Wg)",width-200,height-670);
    text("(In/Wg)",width-200,height-592);
    text("(In/Wg)",width-200,height-514);
    text("(Kg/s)",width-485,height-670);
    strokeWeight(1);
    fill(0);   
    textSize(15); 
    text(" (mm)", width-1180, height-5);
    // text verticale
      fill(0);
    float x = width-1330;
    float y = height-130;
    textAlign(CENTER,BOTTOM);
    pushMatrix();
    translate(x,y);
    rotate(-HALF_PI);
    text("(Kg/s)",0,0);
    popMatrix(); 

    // tabella
     strokeWeight(2);//spessore linea rettangolo grafico
      stroke(50);;//colore contorno rettangolo grafico
    fill(245);
    rect(width-490, height-365, 480, 340);//posizione e grandezza rettangolo tabella
   // stroke(200);
    fill(0);
      text("0",width-470,height-290); //numeri tab.
    text("1",width-470,height-270);
    text("2",width-470,height-250);
    text("3",width-470,height-230);
    text("4",width-470,height-210);
    text("5",width-470,height-190);
    text("6",width-470,height-170);
    text("7",width-470,height-150);
    text("8",width-470,height-130);
    text("9",width-470,height-110);
    text("10",width-475,height-90);
    text("11",width-475,height-70);
    text("12",width-475,height-50);
    text("13",width-475,height-30);


    stroke(0);
     strokeWeight(1);
    fill(0);
    line(width-480,height-290,width-20,height-290);
    line(width-480,height-270,width-20,height-270);
    line(width-480,height-250,width-20,height-250);
    line(width-480,height-230,width-20,height-230);
    line(width-480,height-210,width-20,height-210);
    line(width-480,height-190,width-20,height-190);
    line(width-480,height-170,width-20,height-170);
    line(width-480,height-150,width-20,height-150);
    line(width-480,height-130,width-20,height-130);
    line(width-480,height-110,width-20,height-110);
    line(width-480,height-90,width-20,height-90);
    line(width-480,height-70,width-20,height-70);
    line(width-480,height-50,width-20,height-50);
    line(width-480,height-30,width-20,height-30);
    //line val
     line(width-490,height-662,width-60,height-662);
     line(width-347,height-505,width-347,height-740);
     line(width-490,height-584,width-60,height-584);
     line(width-204,height-505,width-204,height-740);





  textSize(14);
  showData1();
  showData2();
  showData3();
  showData4();

  //fill(255, 2, 2);
 textSize(77);
  text("thank you Chrisir", width-910,90);//TITOLO
  textSize(40);

  textAlign(LEFT);

  //// help
  if (showHelpText1) {
    float widthOfBox = 210; 
    fill(240, 544, 2); // yellow 
    stroke(0);         // black 
    rect(420, 27, widthOfBox, 322);
    fill(0);           // black 
    text("Use mouse above columns (or 0..3) 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 (and Backspace).\n"
      +"m to hide / show text data.\n\nHit x to hide / show this text.", 
      425, 30, widthOfBox-10, 522);
  }

  // ----------------------
  // buttons
  showButtons();

  // gray lines above columns 
  for (int i=0; i < arrayOfXValuesFrom.length; i++) {
    if (activeArrayListHasNumber!=i) {
      stroke(111); //
      strokeWeight(2.8); //spessore linea richiamo
      line (arrayOfXValuesFrom [i], 405, //linea richiamo
        arrayOfXValuesTo[i], 405);
      strokeWeight(0.8); //spessore linea richiamo
      line (arrayOfXValuesFrom [i]+10, 415, //
        arrayOfXValuesTo[i]-10, 415);
      line (arrayOfXValuesFrom [i]+10, 400-4, 
        arrayOfXValuesTo[i]-10, 400-4);
    }//if 
    fill(0);
    text (fileNames[i],
    875, arrayOfXValuesTFile [i]);             // posizione fileNames =                                           //
  }//for 

  // reset
  strokeWeight(1.0); 
}  //
} //draw

void drawForStateHelp() {

  // Help

  background(245);
  //MasA.setVisible(false);
  //PCil.setVisible(false);
  //PAtm.setVisible(false);
  ////myKnob4.setVisible(false); 

@kfrajer - Sorry I should be clearer, it was working on a hosted platform before we added a domain to the platform. We then received CORS errors and had to host the PDE file elsewhere. Somehow it's become broken in the transfer. The thing I can see broken with the interaction is that when the mouse leaves the canvas, the drawing should reset.

Sorry guys, there is HTML and JS around this which allows for the mouse position to be correct, my bad. It does get slightly complicated though as the code below may also be referencing the second PDE we have for touchscreen devices. Here it is:

<script>
    jQuery(document).ready(function() {
        // If the browser is on a device, use the device canvas.
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            jQuery('#canvas-animation').css('display', 'none');
        } else {
            jQuery('#canvas-animation-device').css('display', 'none');
        }
    });

    var coordX = 0;
    var coordY = 0;

    window.onmousemove = coordHandler;
    window.ontouchstart = coordHandler;
    window.ontouchmove = coordHandler;

    var width = window.innerWidth;

    // Desktop
    if (width > '768') {
        jQuery('#canvas-animation-device').css('min-height', '400px');
        jQuery('#canvas-animation-device').css('max-height', '400px');
        var leftPosition = 30;
    }
    // Tablet top position.
    if (width > '580' && width < '769') {
        var leftPosition = 40;
    }
    // Mobile top position.
    if (width < '581') {
        var leftPosition = 0;
    }

    function coordHandler(event) {
        topPosition = jQuery('#global-wrapper-cp-878fa344d768280196d58da0ded0fff9').offset().top
        switch (event.type) {
            case 'mousemove':
                coordX = event.clientX - leftPosition;
                coordY = event.clientY - (topPosition - window.scrollY);;
                break;
            case 'touchstart':
            case 'touchmove':
                var firstTouch = event.touches[0];
                coordX = firstTouch.clientX - leftPosition;
                coordY = firstTouch.clientY - (topPosition - window.scrollY);
                break;
        }
    }

    window.blockMenuHeaderScroll = false;
    jQuery(window).on('touchstart', function(e)
    {
        if (jQuery(e.target).closest('#canvas-animation-device').length == 1)
        {
            blockMenuHeaderScroll = true;
        }
    });
    jQuery(window).on('touchend', function()
    {
        blockMenuHeaderScroll = false;
    });
    jQuery(window).on('touchmove', function(e)
    {
        if (blockMenuHeaderScroll)
        {
            e.preventDefault();
        }
    });
</script>

// https : // forum.processing.org/two/discussion/26719/save-and-load-array-list#latest

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

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

// buttons above columns
int[] arrayOfXValuesFrom = { 13, 220, 390, 570 };  
int[] arrayOfXValuesTo = { 193, 340, 550, 710 };

// text for file names for each column 
String[] fileNames = { "not a file", 
  "not a file", 
  "not a file", 
  "not a file" };  

// 4 columns 
ArrayList<PVector> points1 = new ArrayList(); // 1st 
ArrayList<PVector> points2 = new ArrayList(); // 2nd
ArrayList<PVector> points3 = new ArrayList(); // 3rd 
ArrayList<PVector> points4 = new ArrayList(); // 4th

// active column 
int activeArrayListHasNumber = 0;  

// some flags for texts 
boolean showHelpText1 = false; 
boolean showText = 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;
final int help   = 3;
/// 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
  for (int i = 0; i < 13; i++) { 
    points2.add(new PVector(i, 30 + 10*noise(i*0.1)));
  }//for
  for (int i = 0; i < 5; i++) { 
    points3.add(new PVector(i, 40 + 10*noise(i*0.1)));
  }//for
  for (int i = 0; i < 7; i++) { 
    points4.add(new PVector(i, 50 + 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;

  case help:
    // help
    drawForStateHelp() ;
    break; 

  default:
    //Error 
    println("Fail 192; unknown state: "
      +state);
    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();
  showData3();
  showData4();

  // title 
  fill(255, 2, 2);
  textAlign(CENTER);
  text("My little\nGraph program", 
    width-223, 19, 130, 422);
  //reset 
  textAlign(LEFT);

  //// help
  if (showHelpText1) {
    float widthOfBox = 210; 
    fill(240, 544, 2); // yellow 
    stroke(0);         // black 
    rect(420, 27, widthOfBox, 322);
    fill(0);           // black 
    text("Use mouse above columns (or 0..3) 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 (and Backspace).\n"
      +"m to hide / show text data.\n\nHit x to hide / show this text.", 
      425, 30, widthOfBox-10, 522);
  }

  // ----------------------
  // buttons
  showButtons();

  // gray lines above columns 
  for (int i=0; i < arrayOfXValuesFrom.length; i++) {
    if (activeArrayListHasNumber!=i) {
      stroke(111); //
      strokeWeight(2.8); 
      line (arrayOfXValuesFrom [i], 10, 
        arrayOfXValuesTo[i], 10);
      strokeWeight(0.8); 
      line (arrayOfXValuesFrom [i]+10, 14, 
        arrayOfXValuesTo[i]-10, 14);
      line (arrayOfXValuesFrom [i]+10, 10-4, 
        arrayOfXValuesTo[i]-10, 10-4);
    }//if 
    fill(0);
    text (fileNames[i], 
      arrayOfXValuesFrom [i], height-18);
  }//for 

  // reset
  strokeWeight(1.0); 
  //
} //draw

void drawForStateHelp() {

  // Help

  background(245);
  myKnob1.setVisible(false);
  myKnob2.setVisible(false);
  myKnob3.setVisible(false);
  myKnob4.setVisible(false); 

  fill(255, 2, 2);
  text("My little Graph program\n\nUse buttons on the right and below;\n"    //testo e posizione testo
    +"use Backspace to delete last data point of each list.\n\n" 
    +"Use 1 and 2 to set the active table which is marked by the horizontal line on top.\n"
    +"New, Load and Save are referring to the active table (and also Backspace).\n\n"
    +"You can click now above each column to activate it.\n"
    +"You can press m to hide/show data text and x to show / hide quick help."
    +"\n\nHit any key to return to main program.", 
    113, 122, width-200, 422);
}

// --------------------------------------------------
// 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);

  // ---

  fill(0);
  if ( overHelp() ) {
    fill(#1AAF03);
  }
  rect(width-50, height-650, 40, 20, 5);// modificato posizione "help"
  fill(255); 
  text("Help", 
    width-50+4, height-650+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 ;
}

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

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

void keyPressed() {

  if (state==help) {
    goBackToMainState();
    return;
  }

  if (state!=normal)
    return;

  //  
  if (  keyCode == BACKSPACE ) {
    //
    backspaceOnActiveList();
    //
  } 
  // ----
  else if ( keyCode == DELETE ) {
    //
    // ignore 
    //
  } else if  ( keyCode == ESC ) {
    //
    // If yellow help box is ON  
    if (showHelpText1) {
      showHelpText1 = false; // yellow help box off
    } else {
      // else toggle
      showText = !showText; // data text / tables
    }//else 
    // kill Esc so we stay in the program 
    key=0;
    //
  } 

  // ------

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

      case '0':
        activeArrayListHasNumber = 0; 
        break;

      case '1':
        activeArrayListHasNumber = 1; 
        break;

      case '2':
        activeArrayListHasNumber = 2; 
        break;

      case '3':
        activeArrayListHasNumber = 3; 
        break;

      case 'x':
        showHelpText1 = !showHelpText1; // yellow help box 
        break;

      case 'm':
        showText = !showText; // data text / tables 
        break;
        //
      }//switch
      //
    }//if
  }//else
}// func 

void mousePressed() {

  if (state==help) {
    goBackToMainState();
    return;
  }

  if (state!=normal)
    return;

  // for the buttons 
  if ( overSave() ) {
    initSave();
  }
  //---
  else if ( overLoad() ) {
    initLoad();
  } else if ( overHelp() ) {
    state=help;
  }
  //---
  else if ( overNew() ) {
    //
    if ( activeArrayListHasNumber==0 ) {
      points1.clear();            //cancellare punti con new
    } else if ( activeArrayListHasNumber==1 ) {
      points2.clear();            //cancellare punti con new
    } else if ( activeArrayListHasNumber==2 ) {
      points3.clear();            //cancellare punti con new
    } else if ( activeArrayListHasNumber==3 ) {
      points4.clear();            //cancellare punti con new
    }// else if

    // set name 
    fileNames[activeArrayListHasNumber] = "not a File"; 
    //
  }
  //---

  boolean done = false; 

  if (mouseY<25) {
    for (int i=0; i < arrayOfXValuesFrom.length; i++) {
      if (mouseX>arrayOfXValuesFrom[i] && 
        mouseX<arrayOfXValuesTo[i]) { 
        //
        activeArrayListHasNumber=i;
        done = true; 
        break;
      }//if
    }//for
  }//if

  if (!done) {
    // points.add(new PVector(points.size(), mouseY/10));
    if ( activeArrayListHasNumber == 0 ) {
      // points1.add(new PVector(points1.size(), myKnob1.getValue()));
      points1.add(new PVector(points1.size(), mouseY));
    } else if ( activeArrayListHasNumber == 1 ) {
      //points2.add(new PVector(points2.size(), myKnob1.getValue()));
      points2.add(new PVector(points2.size(), mouseY));
    } else if ( activeArrayListHasNumber == 2 ) {
      //points2.add(new PVector(points2.size(), myKnob1.getValue()));
      points3.add(new PVector(points3.size(), mouseY));
    } else if ( activeArrayListHasNumber == 3 ) {
      //points2.add(new PVector(points2.size(), myKnob1.getValue()));
      points4.add(new PVector(points4.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;
  }
}

// https : // forum.processing.org/two/discussion/26719/save-and-load-array-list#latest

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

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

// buttons along columns
int[] arrayOfXValuesFrom = { 13, 220, 390, 570 };  
int[] arrayOfXValuesTo = { 193, 340, 550, 710 };

ArrayList<PVector> points1 = new ArrayList(); // 1st 
ArrayList<PVector> points2 = new ArrayList(); // 2nd
ArrayList<PVector> points3 = new ArrayList(); // 3rd 
ArrayList<PVector> points4 = new ArrayList(); // 4th

int activeArrayListHasNumber = 0;   // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 

boolean showHelpText1 = false; 
boolean showText = 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;
final int help   = 3;
/// 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, 30 + 10*noise(i*0.1)));
  }//for

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

  // not necessary 
  for (int i = 0; i < 7; i++) { 
    points4.add(new PVector(i, 50 + 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;

  case help:
    // help
    drawForStateHelp() ;
    break; 

  default:
    //Error 
    println("Fail 192; unknown state: "
      +state);
    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();
  showData3();
  showData4();

  // title 
  fill(255, 2, 2);
  textAlign(CENTER);
  text("My little Graph program", 
    width-223, 19, 100, 422);
  //reset 
  textAlign(LEFT);

  //// help
  if (showHelpText1) {
    float widthOfBox = 210; 
    fill(240, 544, 2); // yellow 
    stroke(0);         // black 
    rect(420, 27, widthOfBox, 322);
    fill(255, 2, 2);
    text("Use mouse above columns (or 0..3) 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 (and Backspace).\nm to hide / show text data.\n\nHit x to hide / show this text.", 
      425, 30, widthOfBox-10, 522);
  }

  // ----------------------
  // buttons
  showButtons();

  // gray lines above columns 
  for (int i=0; i < arrayOfXValuesFrom.length; i++) {
    if (activeArrayListHasNumber!=i) {
      stroke(111); //
      strokeWeight(2.8); 
      line (arrayOfXValuesFrom [i], 10, 
        arrayOfXValuesTo[i], 10);
      strokeWeight(0.8); 
      line (arrayOfXValuesFrom [i]+10, 14, 
        arrayOfXValuesTo[i]-10, 14);
      line (arrayOfXValuesFrom [i]+10, 10-4, 
        arrayOfXValuesTo[i]-10, 10-4);
    }
  }//for 

  // reset
  strokeWeight(1.0); 
  //
} //draw

void drawForStateHelp() {

  // Help

  background(245);
  myKnob1.setVisible(false);
  myKnob2.setVisible(false);
  myKnob3.setVisible(false);
  myKnob4.setVisible(false); 
  fill(255, 2, 2);
  text("My little Graph program\n\nUse buttons on the right and below;\n"    //testo e posizione testo
    +"use Backspace to delete last data point of each list.\n\n" 
    +"Use 1 and 2 to set the active table which is marked by the horizontal line on top.\n"
    +"New, Load and Save are referring to the active table (and also Backspace).\n\n"
    +"You can click now above each column to activate it.\n"
    +"You can press m to hide/show data text and x to show / hide quick help."
    +"\n\nHit any key to return to main program.", 
    113, 122, width-200, 422);
}

// --------------------------------------------------
// 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);

  // ---

  fill(0);
  if ( overHelp() ) {
    fill(#1AAF03);
  }
  rect(width-50, height-650, 40, 20, 5);// modificato posizione "help"
  fill(255); 
  text("Help", 
    width-50+4, height-650+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 ;
}

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

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

void keyPressed() {

  if (state==help) {
    goBackToMainState();
    return;
  }

  if (state!=normal)
    return;

  //  
  if (  keyCode == BACKSPACE ) {
    //
    backspaceOnActiveList();
    //
  } 
  // ----
  else if ( keyCode == DELETE ) {
    //
    // ignore 
    //
  } else if  ( keyCode == ESC ) {
    //
    // If yellow help box is ON  
    if (showHelpText1) {
      showHelpText1 = false; // yellow help box off
    } else {
      // else toggle
      showText = !showText; // data text / tables
    }//else 
    // kill Esc so we stay in the program 
    key=0;
    //
  } 

  // ------

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

      case '0':
        activeArrayListHasNumber = 0; 
        break;

      case '1':
        activeArrayListHasNumber = 1; 
        break;

      case '2':
        activeArrayListHasNumber = 2; 
        break;

      case '3':
        activeArrayListHasNumber = 3; 
        break;

      case 'x':
        showHelpText1 = !showHelpText1; // yellow help box 
        break;

      case 'm':
        showText = !showText; // data text / tables 
        break;
        //
      }//switch
      //
    }//if
  }//else
}// func 

void mousePressed() {

  if (state==help) {
    goBackToMainState();
    return;
  }

  if (state!=normal)
    return;

  // for the buttons 
  if ( overSave() ) {
    initSave();
  }
  //---
  else if ( overLoad() ) {
    initLoad();
  } else if ( overHelp() ) {
    state=help;
  }
  //---
  else if ( overNew() ) {
    //
    if ( activeArrayListHasNumber==0 ) {
      points1.clear();            //cancellare punti con new
    } else if ( activeArrayListHasNumber==1 ) {
      points2.clear();            //cancellare punti con new
    } else if ( activeArrayListHasNumber==2 ) {
      points3.clear();            //cancellare punti con new
    } else if ( activeArrayListHasNumber==3 ) {
      points4.clear();            //cancellare punti con new
    }// else if
    //
  }
  //---

  boolean done = false; 

  if (mouseY<25) {
    for (int i=0; i < arrayOfXValuesFrom.length; i++) {
      if (mouseX>arrayOfXValuesFrom[i] && 
        mouseX<arrayOfXValuesTo[i]) { 
        //
        activeArrayListHasNumber=i;
        done = true; 
        break;
      }//if
    }//for
  }//if

  if (!done) {
    // points.add(new PVector(points.size(), mouseY/10));
    if ( activeArrayListHasNumber == 0 ) {
      // points1.add(new PVector(points1.size(), myKnob1.getValue()));
      points1.add(new PVector(points1.size(), mouseY));
    } else if ( activeArrayListHasNumber == 1 ) {
      //points2.add(new PVector(points2.size(), myKnob1.getValue()));
      points2.add(new PVector(points2.size(), mouseY));
    } else if ( activeArrayListHasNumber == 2 ) {
      //points2.add(new PVector(points2.size(), myKnob1.getValue()));
      points3.add(new PVector(points3.size(), mouseY));
    } else if ( activeArrayListHasNumber == 3 ) {
      //points2.add(new PVector(points2.size(), myKnob1.getValue()));
      points4.add(new PVector(points4.size(), mouseY));
    }
  }
}//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;
  }

}

new version with 2 tables and graphs.

• Delete key and Backspace key are now referring to the different tables separately

• Use key 1 and 2 to set the active table

• New, Load and Save are referring to the active table.

• Hit x to hide / show help text

Chrisir ;-)

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()));
    } 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)
  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 
    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
    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 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;
  }
}

what do you think about it? I still do not understand how to draw the graph (y axis values ​​read via Arduino and x axis scales from 0 to 13 where each mouse pressed advances by 1) and relative table. And the part that I think very complicated to achieve, recall a previously saved Array List and be able to superimpose it on the chart (line of another color) and add it to the table just created .........

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

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

ArrayList<PVector> points = new ArrayList();
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++) { 
    points.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);
  showData();

  // title 
  fill(255, 2, 2);
  text("My little Graph program\n\nUse buttons below\n"    //testo e posizione testo
    +"Use Backspace to delete last data point", 
    width-223, 20, 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("Salve", 
    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;

  // for the editor: 
  if ( keyCode == DELETE || keyCode == BACKSPACE ) {
    //
    if (points.size()>0)
      points.remove(points.size()-1);
  } else {
    if ( key != CODED ) {
      //
    }
  }
}

void mousePressed() {

  if (state!=normal)
    return;

  // for the buttons 
  if ( overSave() ) {
    initSave();
  }
  //---
  else if ( overLoad() ) {
    initLoad();
  }
  //---
  else if ( overNew() ) {
    points.clear();            //cancellare punti con new
   //  not necessary:
    for (int i = 0; i < 13; i++) { 
      points.add(new PVector(i, 20 + 10*noise(i*0.1)));
    }//for
  }
  //---
  else {
   // points.add(new PVector(points.size(), mouseY/10));
    points.add(new PVector(points.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)
  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.");
    // go back 

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

    state=normal;
  } 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 = new String[points.size()];
  int i=0;
  for (PVector pv : points) {
    strs[i]=str(pv.x)+","+str(pv.y);
    i++;
  }//for

  // 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
//  points.clear(); 
  String[] strs = loadStrings( loadPath );
  for (String s : strs) {
    String[] thisLine=split(s, ","); 
    points.add(new PVector(float(thisLine[0]), float(thisLine[1])));
  }//for
}

// -------------------------------------------------
void showData() {
  //
  // show data
  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points) {

    fill(0);

    // show data
    text(pv.x, 100, y); 
    text(pv.y, 200, y);

    fill(0, 2, 2); 
    stroke(255, 2, 2);
    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 
  line( 190, 30, 190, 440);
  //
}

 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;
 }
 }

Good news for ya @Andreas_Ref! :-bd
Just found out another CORS proxy which works for http://EkstraBladet.dk at:
https://Gist.GitHub.com/jimmywarting/ac1be6ea0297c16c477e17f8fbe51347

Here's the updated sketch: http://p5js.ProcessingTogether.com/sp/pad/export/ro.CJr$SpnCkgIPQC

/**
 * loadXML from EkstraBladet (v1.3)
 * Andreas_Ref & GoToLoop (2017-May-19)
 *
 * Forum.Processing.org/two/discussion/22668/issue-loading-xml-feed-in-p5js#Item_11
 * Gist.GitHub.com/jimmywarting/ac1be6ea0297c16c477e17f8fbe51347
 *
 * p5js.ProcessingTogether.com/sp/pad/export/ro.CJr$SpnCkgIPQC
 *
 * EkstraBladet.dk/rssfeed/sport/
 * EkstraBladet.dk/rss2/?mode=normal&submode=sport
*/

"use strict";

const HTTP = 'http:' + '//',
      //PROX = 'CORS-Anywhere.HerokuApp.com/',
      PROX = 'Dry-Sierra-94326.HerokuApp.com/',
      SITE = 'EkstraBladet.dk/',
      RSS1 = 'rssfeed/',
      RSS2 = 'rss2/',
      FILE = 'rss.xml',
      QRY0 = 'sport/',
      QRY1 = '?mode=' + 'normal', QRY2 = '&submode=' + 'sport',
      URI1 = HTTP + PROX + HTTP + SITE + RSS1 + QRY0,
      URI2 = HTTP + PROX + HTTP + SITE + RSS2 + QRY1 + QRY2,
      URI  = URI1,
      //URI  = URI2,
      REMOTE = true,
      titles = [];

let xml;

function preload() {
  console.info(URI);
  xml = loadXML(REMOTE && URI || FILE, print, console.warn);
}

function setup() {
  noCanvas();

  for (const item of xml.getChild('channel').getChildren('item'))
    titles.push(item.getChild('title').getContent());

  const ol = createElement('ol')
            .style('color', 'blue')
            .style('font-weight: bold')
            .style('font-size: 1.2em');

  for (const title of titles)  createElement('li', title).parent(ol);
}

Sorry, but I've got no idea why it's stopped working and dunno how to fix it. :(
Although http://CORS-Anywhere.HerokuApp.com proxy CORS site is still working. #-o
And this other sketch https://CodePen.io/GoSubRoutine/pen/Qdjmrm?editors=0012 is still OK. :-?

if you let the jury not only approve a word but enter one or two meanings (either in corsican or in French) you could use scrabble to let people build a real dictionary and publish it online or as a book even

in a new mode you could let them enter meanings for words that already exist in your dictionary

@Chrisir===

language without dictionnary: there are 6000 languages in the world and 4000 are without any dictionnary (and are not written languages): as for me i am corsican and 1) there is a corsican language that people know well or not well (depends of the age) 2) corsican language was and is written 3) but there are a lot of "dialects" - let us say 10 or probably more - and there is not any dictionnary, nor any "Academy": so in my app only some basic dictionnary is embedded and users can propose new words or "variants" that are examined by some kind of on line "jury" (each of the 7 members receive automatically an email) and if approved are added to the dictionnary: so the dictionnary is made by users themeselves.

As for the second question, yes, it's a typo; but in this moment i have not choosen a strategy to solve that and i think it s not easy to find one: of course the computer at each turn can calculate all the possible words with its letters, it can also calculate the chances for getting some letter when exchanging, but this is only for 1 turn, it is not a strategy, && it does not really take in account the other player!

@chrisjj -- you described two things: a problem ("Cross origin requests") and your proposed solution (find an officially compatible browser). You seem very focused on the latter, and for that I would say "try Firefox."

HOWEVER the issue with cross origin requests is not strictly a compatibility issue -- it is a security issue, with most contemporary browsers and operating systems discouraging you from running Javascript in the browser in specific (insecure) ways. Almost any browser works with Processing.js -- they just work in specific ways.

This means that if you deployed the same code differently (e.g. posting it to a website instead of running from your desktop) or configured your existing browser differently (e.g. allowing CORS), your issue would probably go away -- with the same code and the same browser. I say "probably" because you seem very sure you don't need to give examples to get an answer, and that switching browsers is the best way to solve your problem, so you haven't shared anything.

https://Forum.Processing.org/two/discussions/tagged/cors

Firefox is known to be a little more flexible when loading cross domain resources when running local files.

Cross-domain permission access (CORS) got nothing to do whether the ".html" is running over http:// or file:// schemes under Firefox. They're treated the same on Firefox-family browsers. :)>-

This is my first processing question for my first processing project, so sorry everybody for my ignorance of the software and of the forum rules, I'll be deeply thankful if anyone will be so kind to answer!

My problem is the following one: I would like to do a bar chart representing my 100 favorite songs (according to iTunes reproductions!), where you can change the table.sort, the disposition of the song in genre, artist, n° of reproduction, etc... with some buttons to do it. I've tried to do something with cp5 button, but the main problem is that if i maintain noLoop() the graph don't change, but if I take it away the graph goes crazy. I report down here the code and the CSV table!

Help me please, free hugs and the give of my final project if you do!

CODE:

import controlP5.*;

ControlP5 cp5;

Table table;
int c;
PFont font;
boolean Bottone = false;


void setup() {
  //size(800, 600);
  fullScreen();
  background(255);
  smooth();
  table = loadTable("My Music Numbers_first 100.csv", "header");
  font = createFont("Chivo-Regular-13.vlw", 13);//aggiunta la font

    cp5= new ControlP5(this); 

  cp5.addToggle("Bottone")
     .setPosition(20,180)
     .setSize(90,15)
     ;

}


void draw() {
  //questa linea e la successiva per invertire l'asse delle y
  /*scale(1, -1);
  translate(0, -height);*/

    font = createFont("CircularStd-Bold", 40);
    textFont(font);
    textSize(32);
    fill(#B0F566);
    textAlign(CENTER);
    text("My Favourite Tracks",(width/2),100);
    textSize(18);
    fill(#83B45B);
    text("A data—visualization of the 100 songs that I love most",(width/2),150);


    for (int i = 0; i<table.getRowCount(); i++) {

    // Access each row of the table one at a time, in a loop.
    TableRow riga = table.getRow(i);
    int posizione = riga.getInt("posizione");
    String n = riga.getString("artista");
    String titolo = riga.getString("titolo");
    int score = riga.getInt("riproduzioni");
    int durata = riga.getInt("durata");
    String album = riga.getString("album");
    int anno = riga.getInt("anno");
    String genere = riga.getString("genere");
    String nazione = riga.getString("nazione");
    int x = 200+(i*10);
    int y = height/2;

    table.sort("riproduzioni");

     if (genere.equals("Alternativa/Indie") == true) {
      c = #B0F566;
    } 
    if (genere.equals("Reggae") == true) {
      c = #4AF2A1;
    } 
    if (genere.equals("Pop") == true) {
      c = #5CC9F5;
    } 
    if (genere.equals("Rock") == true) {
      c = #6638F0;
    }

    if (genere.equals("Hip Hop") == true) {
      c = #E8235E;
    }
    if (genere.equals("Rap") == true) {
      c = #FF1A1A;
    }
    if (genere.equals("Ska") == true) {
      c = #1EF7D1;
    }
    if (genere.equals("Dance Elettronica") == true) {
      c = #FFF41A;
    }
    if (genere.equals("Neofolk") == true) {
      c = #10FF00;
    } 
    if (genere.equals("Soul") == true) {
      c = #2420C4;
    }
    if (genere.equals("Punk") == true) {
      c = #CB7777;
    }

    if (Bottone == true) {
    table.sort("genere");

  } else {
    table.sort("riproduzioni");
  }

    fill(c);
    rectMode(CENTER);
    noStroke();
    rect(x, y, 10, score*4,7);
    //noLoop();

    println(titolo + " " + score);
  }
}

CSV (named "My Music Numbers_first 100.csv"):

posizione,artista,titolo,riproduzioni,durata,album,anno,genere,nazione 001,The Vaccines,All in White,112,04:34,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 002,The Vaccines,Norgaard,079,01:38,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 003,Alt-J,Dissolve Me,065,04:00,An Awesome Wave,2012,Alternativa/Indie,Inghilterra 004,Bon Iver,Skinny Love,063,03:58,For Emma| Forever Ago,2007,Alternativa/Indie,USA 005,Alt-J,Breezeblocks,058,03:47,An Awesome Wave,2012,Alternativa/Indie,Inghilterra 006,The Vaccines,Wetsuit,053,03:50,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 007,Bob Marley & The Wailers,Stir It Up,048,03:41,Catch a Fire,1973,Reggae,Inghilterra 008,The Libertines,Don't Look Back Into The Sun,048,03:21,The Libertines,2004,Alternativa/Indie,Inghilterra 009,Tame Impala,Feels Like We Only Go Backwards,047,03:13,Lonerism,2012,Alternativa/Indie,Australia 010,The Vaccines,A Lack Of Understanding,044,02:59,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 011,Babyshambles,Maybeline,041,03:16,Sequel to the Prequel,2013,Alternativa/Indie,Inghilterra 012,Gazebo Penguins,Difetto,041,02:23,Raudo,2013,Alternativa/Indie,Italia 013,Alt-J,Matilda,041,03:48,An Awesome Wave,2012,Alternativa/Indie,Inghilterra 014,King Harvest,Dancing in the Moonlight,040,02:52,Dancing in the Moonlight,1973,Pop,USA 015,Gazebo Penguins,Finito il cafe,039,03:05,Raudo,2013,Alternativa/Indie,Italia 016,Alt-J,Something Good,038,03:42,An Awesome Wave,2012,Alternativa/Indie,Inghilterra 017,Egg,Shoe,038,03:45,Shoe EP,2009,Rock,Inghilterra 018,The Vaccines,Blow It Up,037,02:36,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 019,I Cani,Corso Trieste,034,03:28,Glamour,2013,Pop,Italia 020,I Cani,Post Punk,034,04:46,Il sorprendente album d'esordio de i cani,2011,Pop,Italia 021,The Vaccines,Under Your Thumb,034,02:20,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 022,Chiddy Bang,By Your Side,034,03:48,inedito,2012,Hip Hop,USA 023,Gazebo Penguins,Casa dei Miei,033,02:28,Raudo,2013,Alternativa/Indie,Italia 024,I Cani,Hipsteria,033,03:39,Il sorprendente album d'esordio de i cani,2011,Pop,Italia 025,U2,California (There Is No End to Love),033,04:00,Songs of Innocence,2014,Rock,Irlanda 026,Gazebo Penguins,Domani e' gennaio,032,02:57,Raudo,2013,Alternativa/Indie,Italia 027,Babyshambles,Fireman,031,01:42,Sequel to the Prequel,2013,Alternativa/Indie,Inghilterra 028,Babyshambles,Nothing Comes to Nothing,030,03:15,Sequel to the Prequel,2013,Alternativa/Indie,Inghilterra 029,Gazebo Penguins,Correggio,030,02:00,Raudo,2013,Alternativa/Indie,Italia 030,I Cani,Le coppie,030,03:09,Il sorprendente album d'esordio de i cani,2011,Pop,Italia 031,I Cani,Il pranzo di santo stefano,030,02:09,Il sorprendente album d'esordio de i cani,2011,Pop,Italia 032,The Vaccines,Post Break-Up Sex,030,02:54,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 033,Babyshambles,Farmer's Daughter,028,05:05,Sequel to the Prequel,2013,Alternativa/Indie,Inghilterra 034,Gazebo Penguins,Ogni scelta e' in perdita,028,03:23,Raudo,2013,Alternativa/Indie,Italia 035,I Cani,Velleita',028,04:47,Il sorprendente album d'esordio de i cani,2011,Pop,Italia 036,Mecna,Cerotti,028,02:52,inedito,2012,Rap,Italia 037,Mighty Oaks,Brother,028,03:16,Brother,2012,Alternativa/Indie,Germania 038,The Vaccines,Tiger Blood,028,02:08,Come Of Age,2012,Alternativa/Indie,Inghilterra 039,Mecna,31/07,027,03:16,Bagagli a mano,2011,Rap,Italia 040,Paolo Nutini,10/10,027,02:57,Sunny Side Up,2009,Ska,Inghilterra 041,The Vaccines,If You Wanna,027,02:54,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 042,U2,The Miracle (Of Joey Ramone),027,04:15,Songs of Innocence,2014,Rock,Irlanda 043,Big Sean,Too Fake,027,04:12,Finally Famous Vol. 3: Big,2010,Hip Hop,USA 044,Flume,Holdin On,027,02:35,Flume,2012,Dance Elettronica,Australia 045,Deluxe,Pony,027,03:29,Polishing Peanuts,2011,Dance Elettronica,Francia 046,Bob Marley & The Wailers,One Love,026,02:53,Exodus,1977,Reggae,Giamaica 047,Drowners,Ways to Phrase a Rejection,026,01:46,Drowners,2014,Alternativa/Indie,USA 048,The Vaccines,Wreckin' Bar (Ra Ra Ra),026,01:22,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 049,The Hives,Hate To Say I Told You So,026,03:20,Veni Vidi Vicious,2000,Alternativa/Indie,Svezia 050,Bon Iver,Holocene,025,05:36,Bon Iver| Bon Iver,2011,Alternativa/Indie,USA 051,I Cani,FBYC (Sfortuna),025,03:35,Glamour,2013,Pop,Italia 052,The Libertines,Music When The Lights Go Out,025,03:02,The Libertines,2004,Alternativa/Indie,Inghilterra 053,The Vaccines,Teenage Icon,025,03:05,Come Of Age,2012,Alternativa/Indie,Inghilterra 054,Cee Lo Green,Fuck You,025,03:54,The Lady Killer,2010,Pop,USA 055,Oscar Isaac,Hang Me| Oh Hang Me,025,03:23,Inside Llewyn Davis,2013,Neofolk,USA 056,The Tallest Man on Earth,Love is all,025,04:17,The Wild Hunt,2010,Neofolk,Svezia 057,The Vaccines,If You Wanna,025,02:54,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 058,Bob Marley & The Wailers,No Woman No Cry,024,07:12,Natty Dread,1975,Reggae,Giamaica 059,Bob Marley & The Wailers,Three Little Birds,024,03:02,Exodus,1980,Reggae,Giamaica 060,Drowners,Luv| Hold Me Down,024,02:51,Drowners,2014,Alternativa/Indie,USA 061,Gazebo Penguins,Non moriro',024,02:53,Raudo,2013,Alternativa/Indie,Italia 062,The Tallest Man on Earth ,Thousand Ways,024,02:53,The Wild Hunt,2010,Neofolk,Svezia 063,The Vaccines,No Hope,024,04:10,Come Of Age,2012,Alternativa/Indie,Inghilterra 064,The Vaccines,Wolf Pack,024,02:24,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 065,Justice,D.A.N.C.E. ,024,04:03,Cross,2007,Dance Elettronica,Francia 066,Arctic Monkeys,Mardy Bum,023,02:55,Whatever People Say I Am| That's What I'm Not,2006,Alternativa/Indie,Inghilterra 067,Babyshambles,New Pair,023,03:06,Sequel to the Prequel,2013,Alternativa/Indie,Australia 068,Mumford & Sons,Below My Feet,023,05:00,Babel,2012,Neofolk,Inghilterra 069,Otis Redding ,Respect,023,02:10,Otis Blue: Otis Redding Sings Soul,1965,Soul,USA 070,Grouplove,Itchin' On A Photograph,023,04:23,Never Trust a Happy Song,2011,Rock,USA 071,Ingrid Michaelson,You And I,023,02:36,Girls and Boys,2006,Alternativa/Indie,USA 072,Bob Marley & The Wailers,Get Up Stand Up,022,03:20,Burnin',1973,Reggae,Giamaica 073,Drowners,Long Hair,022,01:49,Drowners,2014,Alternativa/Indie,USA 074,I Cani,Non c'e' niente di twee,022,04:04,Glamour,2013,Pop,Italia 075,I Cani,Storia di un impiegato,022,03:53,Glamour,2013,Pop,Italia 076,I Cani,I pariolini di diciott'anni,022,03:46,Il sorprendente album d'esordio de i cani,2011,Pop,Italia 077,Mumford & Sons,The Cave,022,03:38,Sigh No More,2009,Neofolk,Inghilterra 078,The Tallest Man on Earth,Thrown Right at Me,022,02:59,Sometimes the Blues Is Just a Passing Bird,2010,Neofolk,Svezia 079,U2,Every Breaking Wave,022,04:12,Songs of Innocence,2014,Rock,Irlanda 080,Rancid,Ruby Soho,022,02:52,...And Out Come the Wolves,1995,Punk,USA 081,Sam Smith,Stay With Me,022,02:55,In the Lonely Hour,2014,Soul,Inghilterra 082,The Killers,Mr. Brightside,022,03:47,Hot Fuss,2004,Alternativa/Indie,USA 083,Bob Marley & The Wailers,I Shot The Sheriff,021,03:54,Burnin',1973,Reggae,Giamaica 084,Chance The Rapper,Cocoa Butter Kisses ,021,05:07,Acid Rap,2013,Rap,USA 085,Coez,Lontana da me,021,03:43,Non erano fiori,2013,Pop,Italia 086,I Cani,Door Selection,021,02:40,Il sorprendente album d'esordio de i cani,2011,Pop,Italia 087,I Cani,Perdona e dimentica,021,03:37,Il sorprendente album d'esordio de i cani,2011,Pop,Italia 088,Mumford & Sons,Sigh No More,021,03:28,Sigh No More,2009,Neofolk,Inghilterra 089,The Black Keys,Lonely Boy,021,03:13,El Camino,2011,Alternativa/Indie,USA 090,The Libertines,What Katie Did,021,03:50,The Libertines,2004,Alternativa/Indie,Inghilterra 091,The Vaccines,I Wish I Was A Girl,021,02:52,Come Of Age,2012,Alternativa/Indie,Inghilterra 092,The Vaccines,Bad Mood,021,03:14,Come Of Age,2012,Alternativa/Indie,Inghilterra 093,Bob Marley & The Wailers,Jamming,020,03:35,Exodus,1977,Reggae,Giamaica 094,Bon Iver ,Beth/Rest,020,06:26,Bon Iver|Bon Iver,2011,Alternativa/Indie,USA 095,Bon Iver,Minnesota|WI,020,03:32,Bon Iver|Bon Iver,2011,Alternativa/Indie,USA 096,Gazebo Penguins,Mio Nonno,020,01:47,Raudo,2013,Alternativa/Indie,Italia 097,I Cani,Come vera nabokov,020,04:03,Glamour,2013,Pop,Italia 098,Mumford & Sons,Roll Away Your Stone,020,04:24,Sigh No More,2009,Neofolk,Inghilterra 099,The Black Keys,Little Black Submarines,020,04:11,El Camino,2011,Alternativa/Indie,USA 100,The Cure,Just Like Heaven,020,3:30,Kiss Me Kiss Me Kiss Me,1987,Alternativa/Inside,Inghilterra

• I've refactored your sketch to use my approach. B-)
• And it's available online here: http://Bl.ocks.org/GoSubRoutine/241b4070e20a13f1c3dd8f852390baa0
• In order to ignite the OCR job over the license plate image, just click on it.
• You're gonna need to hit F12 to open browser's console tab in order to see the entire progress and the final results.
• And below's the file pair "index.html" & "sketch.js", so you can run the program locally as well:

index.html:

<script async src=http://CDN.JSDelivr.net/npm/p5></script>
<script defer src=http://CDN.JSDelivr.net/gh/naptha/tesseract.js/dist/tesseract.min.js></script>
<script defer src=sketch.js></script>

sketch.js:

/**
 * Tesseract License Plate OCR (v1.0.2)
 * MarcoHeleno & GoToLoop (2017-Feb-23)
 *
 * Forum.Processing.org/two/discussion/23878/
 * need-help-with-sending-p5-image-to-tesseract-js#Item_2
 *
 * Bl.ocks.org/GoSubRoutine/241b4070e20a13f1c3dd8f852390baa0
 */

"use strict";

const HTTP = 'http:' + '//',
      PROX = 'CORS-Anywhere.HerokuApp.com/',
      SITE = 'CheesieMack.com/',
      FOLD = 'wp/wp-content/uploads/2012/06/',
      FILE = 'CT-872NED.jpg',
      PATH = HTTP + PROX + SITE + FOLD + FILE,
      LOCAL = false;

let img;

function preload() {
  img = loadImage(LOCAL && FILE || PATH, console.info);
}

function setup() {
  createCanvas(img.width, img.height).mousePressed(() => ocr(img.canvas));
  background(img);
}

function ocr(imageLike) {
  Tesseract.recognize(imageLike).progress(print).then(logFoundWords);
}

function logFoundWords(json) {
  console.table(json.lines);
  print(json);
}

P.S.: I had to use http://CORS-Anywhere.HerokuApp.com in order to load the remote image "CT-872NED.jpg" from http://CheesieMack.com, b/c it wasn't CORS-enabled there! :-O

        import oscP5.*;

        ArrayList<KochLine> lines;
        ArrayList<SierpTri> triangles;

        OscP5 oscP5;

        int cellsize = 2; 
        int cols, rows; 

        int rect;
        int cycle;
        int tri;

        void setup() {
          size(600, 692, P3D);
          background(255);

          cols = width/cellsize;              // Calculate # of columns
          rows = height/cellsize;             // Calculate # of rows


          // inizializza colori
          rect = 65;
          cycle = 261;
          tri = 1046;

          oscP5 = new OscP5(this, 8001); // apre udp sulla porta 12000
          // TEST PER LE VARIABILI IN ENTRATA
          oscP5.plug(this, "testG", "/gain"); // test gain
          oscP5.plug(this, "testF1", "/freq1"); // test frequenza primo oscillatore
          oscP5.plug(this, "testF2", "/freq2"); // test frequenza secondo oscillatore
          oscP5.plug(this, "testF3", "/freq3"); // test frequenza terzo oscillatore

          //funzione di inizializzazione per la figura frattale
          init();

          // display della figura iniziale
          for (KochLine l : lines) { 
            l.display();
          }
          for (SierpTri t : triangles) { 
            t.display();
          }

          //carica l'array pixels
          loadPixels();
        }

        void draw() {

          //background variato via OSC
          background(tri, rect, cycle);

          //3D EXPLOSION (Ripresa dall'esempio)

          for (int i = 0; i < cols; i++ ) {
            // Begin loop for rows
            for (int j = 0; j < rows; j++ ) {
              int x = i*cellsize + cellsize/2; // x position
              int y = j*cellsize + cellsize/2; // y position
              int loc = x + y*width;           // Pixel array location
              color c = pixels[loc];       // Grab the color
              float z = map(int(random(40, 140)), 0, 255, 0, mouseX);
              // Translate to the location, set fill and stroke, and draw the rect
              pushMatrix();
              translate(x, y, z); 
              fill(c);
              noStroke();
              rectMode(CENTER);
              rect(0, 0, cellsize, cellsize);
              popMatrix();
            }
          }
        }

        // GENERAZIONE FRATTALE

        public void init() { // funzione per inizializzare il triangolo base del frattale
          lines = new ArrayList<KochLine>();  // inizializza l'array per il KochSnowflake
          triangles = new ArrayList<SierpTri>(); // inizializza l'array per il SierpinskiTriangle

          // inizializza 3 vettori che rappresentano i 3 punti del triangolo iniziale
          PVector a   = new PVector(0, 173);
          PVector b   = new PVector(width, 173);
          PVector c   = new PVector(width/2, 173+width*cos(radians(30)));

          //vengono aggiunte 3 linee all'Array per Koch
          lines.add(new KochLine(a, b));
          lines.add(new KochLine(b, c));
          lines.add(new KochLine(c, a)); 

          //viene aggiunto un triangolo all'Array per Sierpinski
          triangles.add(new SierpTri(a, b, c));
        }

        public void generate() { // funzione ricorsiva per la generazione del frattale

          //dichiara un secondo Array per entrambi i frattali che funge da elemento di ricorsione

          ArrayList recSierp = new ArrayList<SierpTri>();
          ArrayList recKoch = new ArrayList<KochLine>();

          /** Per ogni Triangolo presente all'interno dell'Array base inizializza 6 vettori
           che rappresentano i 3 vertici del triangolo e i 3 mid-point dei lati. Aggiunge
           al secondo Array tre triangoli secondo la regola dei triangoli di Sierpinski
           */
          for (SierpTri t : triangles) {

            PVector a = t.SierpA();
            PVector b = t.SierpB();
            PVector c = t.SierpC();
            PVector d = t.SierpD();
            PVector e = t.SierpE();
            PVector f = t.SierpF();

            recSierp.add(new SierpTri(a, d, e));
            recSierp.add(new SierpTri(d, b, f));
            recSierp.add(new SierpTri(e, f, c));
          }

          /** Per ogni linea presente all'interno dell'Array base inizializza 5 vettori
           che rappresentano i 5 nodi della linea generata dalla regola di Koch. Aggiunge
           al secondo Array per Koch le 4 linee generate dalla regola stessa e al secondo Array 
           per Sierpinski un triangolo generato tramite i 3 nodi centrali della regola di Koch
           */
          for (KochLine l : lines) { // funzione ricorsiva SnowFlake

            PVector a = l.kochA();                 
            PVector b = l.kochB();
            PVector c = l.kochC();
            PVector d = l.kochD();
            PVector e = l.kochE();

            recKoch.add(new KochLine(a, b));
            recKoch.add(new KochLine(b, c));
            recKoch.add(new KochLine(c, d));
            recKoch.add(new KochLine(d, e));

            recSierp.add(new SierpTri(b, c, d)); // aggiunge ogni nuovo triangolo generato al Sierpinski
          }

          // Ricorsione: sostituisce l'array originale con l'array ricorsivo
          lines = recKoch;
          triangles = recSierp;
        }

        // TEST PER I VALORI OSC

        public void testG(float theF) { // test per il gain, chiede un float

          gain2 = map(theF, -76.6, 17.6, 37, 600); // assegna al secondo valore di testGain un valore riscalato

          int gain = test1(theF); 
          // richiama una funzione di test

          /** funzione di switch che assegna ad ogni caso (generato dalla funzione di test
           in base al range dei valori) un livello di iterazione del frattale. Per ogni caso
           la funzione di generazione viene iterata una volta in più.
           Questa è la parte che genera il crash quando riceve il messaggio OSC. Quello che
           non capisco è come mai se generata con Keypressed la stessa funzione non da problemi
           mentre in questo modo genera un errore.
           */
          switch (gain) {
          case 0 : 
            background(255);
            init();
            for (KochLine l : lines) { 
              l.display();
            }
            for (SierpTri t : triangles) { 
              t.display();
            }
            loadPixels();
            break;
          case 1 :
            background(255);
            init();
            generate();
            for (KochLine l : lines) { 
              l.display();
            }
            for (SierpTri t : triangles) { 
              t.display();
            }
            loadPixels();
            break;
          case 2 :
            background(255);
            init();
            for (int i=0; i<2; i++) { 
              generate();
            }
            for (KochLine l : lines) { 
              l.display();
            }
            for (SierpTri t : triangles) { 
              t.display();
            }
            loadPixels();
            break;
          case 3 :
            background(255);
            init();
            for (int i=0; i<3; i++) { 
              generate();
            }
            for (KochLine l : lines) { 
              l.display();
            }
            for (SierpTri t : triangles) { 
              t.display();
            }
            loadPixels();
            break;
          case 4 :
            background(255);
            init();
            for (int i=0; i<4; i++) { 
              generate();
            }
            for (KochLine l : lines) { 
              l.display();
            }
            for (SierpTri t : triangles) { 
              t.display();
            }
            loadPixels();
            break;
          case 5 :
            background(255);
            init();
            for (int i=0; i<5; i++) { 
              generate();
            }
            for (KochLine l : lines) { 
              l.display();
            }
            for (SierpTri t : triangles) { 
              t.display();
            }
            loadPixels();
            break;
          case 6 :
            background(255);
            init();
            for (int i=0; i<6; i++) { 
              generate();
            }
            for (KochLine l : lines) { 
              l.display();
            }
            for (SierpTri t : triangles) { 
              t.display();
            }
            loadPixels();
            break;
          case 7 :
            background(255);
            init();
            for (int i=0; i<7; i++) { 
              generate();
            }
            for (KochLine l : lines) { 
              l.display();
            }
            for (SierpTri t : triangles) { 
              t.display();
            }
            loadPixels();
            break;
          }
        }

        public void testF1(int theA) { // test primo oscillatore
          cycle = int((theA*255)/726); // riscalamento della frequenza tra 0 e 255
        }

        public void testF2(int theB) { // test secondo oscillatore
          rect = int((theB*255)/181);  // riscalamento della frequenza tra 0 e 255
        }

        public void testF3(int theC) { // test terzo oscillatore
          tri = int((theC*255)/2905);  // riscalamento della frequenza tra 0 e 255
        }

        void oscEvent(OscMessage theOscMessage) { // adress di eventuali messaggi non pluggati

          if (theOscMessage.isPlugged()==false) {
            println("### received an osc message.");
            println("### addrpattern\t"+theOscMessage.addrPattern());
            println("### typetag\t"+theOscMessage.typetag());
          }
        }

        // FUNZIONI

        /** funzione di test che genera 7 casi in base al range del valore ricevuto tramite OSC */

        int test1(float a) { 
          if (a < -37) {
            return 0;
          }
          if (a >= -37 && a < -16) {
            return 1;
          }
          if (a >= -16 && a < -12) {
            return 2;
          }
          if (a >= -12 && a < -8) {
            return 3;
          }
          if (a >= -8 && a < -6) {
            return 4;
          }
          if (a >= -6 && a < -4) {
            return 5;
          }
          if (a >= -4 && a < -2) {
            return 6;
          }
          if (a >= -2 && a < -0) {
            return 7;
          }
          return 7;
        }

        // keyPressed di test
        void keyPressed() {
          background(255);
          init();
          generate();
          for (KochLine l : lines) { 
            l.display();
          }
          for (SierpTri t : triangles) { 
            t.display();
          }
          loadPixels();
        }

THE QUESTION: The problem is that when I send via Max/Msp some test values for the "gain test" the patch instantly crashes, I tried cutting of most of the combinations of code lines trying to find the reason, but I couldn't manage to find any explanation for this so I'm here hoping someone can actually explain me what I'm doing wrong.
Thank you very much for your help!

@Lord_of_the_Galaxy

I'm not sure if it is a shaderbug - right now.

I think, i happens becorse my Geforce is much more powerful.
The NPASS Loop gets much faster unrolled, (the "time" is running faster ) the algorithm is very sensitive to small changes, the result looks totally different.

https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

https://p5js.org/reference/#/p5.XML

http://p5js.ProcessingTogether.com/sp/pad/export/ro.CJr$SpnCkgIPQC/latest

/**
 * loadXML from EkstraBladet (v1.2)
 * Andreas_Ref & GoToLoop (2017-May-19)
 *
 * forum.Processing.org/two/discussion/22668/issue-loading-xml-feed-in-p5js#Item_4
 *
 * p5js.ProcessingTogether.com/sp/pad/export/ro.CJr$SpnCkgIPQC/latest
 *
 * EkstraBladet.dk/rss2/?mode=normal&submode=sport
*/

"use strict";

const HTTP = 'http:' + '//',
      PROX = 'CORS-Anywhere.HerokuApp.com/',
      SITE = 'EkstraBladet.dk/',
      PATH = 'rss2/',
      FILE = 'rss.xml',
      QRY1 = '?mode=' + 'normal',
      QRY2 = '&submode=' + 'sport',
      URI  = HTTP + PROX + HTTP + SITE + PATH + QRY1 + QRY2,
      REMOTE = true,
      titles = [];

let xml;

function preload() {
  console.info(URI);
  xml = loadXML(REMOTE && URI || FILE, print, console.warn);
}

function setup() {
  noCanvas();

  for (const item of xml.getChild('channel').getChildren('item'))
    titles.push(item.getChild('title').getContent());

  const ol = createElement('ol')
            .style('color', 'blue')
            .style('font-weight: bold')
            .style('font-size: 1.2em');

  for (const title of titles)  createElement('li', title).parent(ol);
}