Ok I rewrote my button program. It shows 4 buttons each having a starting color red, then I change one in the setup to start it as the chosen button green, when you hover over the others they highlight  to green and then when pressed change all to red except for the one pressed. The problem is that when I click out side the buttons they all go red. I know where the problem is in the mousepressed loop, but cant figure out another way to do the same thing, any Ideas
Thanks Ken

int bNumber = 4;
RectButton [] buttons = new RectButton[bNumber];
color[] colors = {#FF0000,#00FF00};
boolean locked = false;

void setup(){
//frameRate(1);
  size(200,200);
  for(int i=0; i<bNumber; i++){
    buttons[i] = new RectButton( "t",20,20+i*25,25,25,colors[0],colors[1]);
  }
  buttons[0].setName("/.5");
  buttons[1].setName("/1");
  buttons[2].setName("/2");
  buttons[3].setName("/4");
  buttons[0].regColor = colors[1];
}

void draw(){
  background(120);
  update(mouseX, mouseY);
  for(int i=0; i<bNumber; i++){
    buttons[i].display();
  }
}

void update(int x, int y){
  if(locked == false) {
    for(int i=0; i<bNumber; i++){
       buttons[i].update();
    }
  }
  else {
    locked = false;
  }
  if(mousePressed) {
    for(int i=0; i<bNumber; i++){
      if(buttons[i].pressed()) {
        buttons[i].regColor = colors[1];
      }else {
        buttons[i].regColor = colors[0];
      }
    }
  }
}
  

class Button
{
  String Name;
  int posX, posY;
  int sizeX;
  int sizeY;
  color buttonColor,regColor,highlightColor;
  boolean over = false;
  boolean pressed = true;
  boolean toggle = false;
 
  void setName(String Name){this.Name = Name;}
  //void setbuttonColor(color change){this.buttonColor = change;locked=true;}

 void update()
  {
    if(over()) { buttonColor = highlightColor;
    }
    else { buttonColor = regColor;
    }
  }

  boolean pressed()
  {
    if(over) {
     locked = true;
     regColor = highlightColor;
      return true;
    }
    else {
      locked = false;
      regColor = regColor;
      return false;
    }

  }

  boolean over()
  {
    return true;
  }


}

class RectButton extends Button
{
  RectButton(String Name,int posX, int posY, int sizeX, int sizeY, color regColor, color highlightColor)
  {
    this.Name = Name;
    this.posX = posX;
    this.posY = posY;
    this.sizeX = sizeX;
    this.sizeY = sizeY;
    this.regColor = regColor;
    this.highlightColor = highlightColor;
    this.buttonColor = regColor;
  }
  boolean overRect(int x, int y, int width, int height)
  {
    if (mouseX >= x && mouseX <= x+width &&
      mouseY >= y && mouseY <= y+height) {
        return true;
    }
    else {
      return false;
    }
  }
  boolean over()
  {
    if( overRect(posX, posY, sizeX, sizeY) ) {
      over = true;
      return true;
    }
    else {
      over = false;
      return false;
    }
  }

  void display()
  {
    stroke(0);
    fill(buttonColor);
    rect(posX, posY, sizeX, sizeY);
    fill(0);
    textAlign(CENTER);
    text(Name,posX+sizeX/2,posY+sizeY/2+5);
  }
}

I have created 4 buttons, when you mouse over 1 button it changes color to highlight and when its not over it returns to a background color. If mouse is pressed it change and stays highlighted. If you chose another it highlights and returns the previous button to the background color. The problem Im having is I would like to have 1 button start as highlighted but the first time it hits update in my code it changes back to the background. Im having trouble on the logic part that would keep the button highlighted untill another is pressed

The code is below Thanks for the help Ken

1. int wWidth = 600;
   int wHeight = 800;
   int graphWidth = wWidth-90;
   int graphHeight = wHeight/3-35;
   color c1 = color(255,0,0);
   color c2 = color(0,255,0);
   color c3 = color(0,0,255);
   RectButton rect1,rect2,rect3,rect4;
   
   //Button stuff
   boolean locked = false;
   
   void setup(){
     size(wWidth,wHeight);
     rect1 = new RectButton("/.5",10,10+0, 25, 25, c1, c2);
       rect2 = new RectButton("/1",10,10+25, 25, 25, c1, c2);
       rect3 = new RectButton("/2",10,10+50, 25, 25, c1, c2);
       rect4 = new RectButton("/4",10,10+75, 25, 25, c1, c2);
   }
   
   void draw(){
     background(120);
     rect1.displayButton();
     rect2.displayButton();
     rect3.displayButton();
     rect4.displayButton();
     update(mouseX, mouseY);
   }
   
   void update(int x, int y){
       if(locked == false) {
         rect1.update();
         rect2.update();
         rect3.update();
         rect4.update();
       }
       else {
         locked = false;
       }
      if(mousePressed) {
        if(rect1.pressed()) {
          println("HERE1");
        rect1.basecolor = c2;
        rect2.basecolor = c1;
        rect3.basecolor = c1;
        rect4.basecolor = c1;
      } else if(rect2.pressed()) {
        println("HERE2");
        rect1.basecolor = c1;
        rect2.basecolor = c2;
        rect3.basecolor = c1;
        rect4.basecolor = c1;
      } else if(rect3.pressed()) {
        rect1.basecolor = c1;
        rect2.basecolor = c1;
        rect3.basecolor = c2;
        rect4.basecolor = c1;
      } else if(rect4.pressed()) {
        rect1.basecolor = c1;
        rect2.basecolor = c1;
        rect3.basecolor = c1;
        rect4.basecolor = c2;
      }
     }
   }
   
   
   
   class Button
   {
     String Name;
     int x, y;
     int sizeX;
     int sizeY;
     color basecolor, highlightcolor;
     color currentcolor;
     boolean over = false;
     boolean pressed = false;
     boolean start = true;
   
     void update()
     {
       if(over()) { currentcolor = highlightcolor;
       println("HERE3");
       }
       else { currentcolor = basecolor;
       }
       locked=false;
     }
   
    
     boolean pressed()
     {
       if(over) {
         locked = true;
         currentcolor = highlightcolor;
         return true;
       }
       else {
         locked = false;
         currentcolor = basecolor;
         return false;
       }   
     }
   
     boolean over()
     {
       return true;
     }
   
     boolean overRect(int x, int y, int width, int height)
     {
       if (mouseX >= x && mouseX <= x+width &&
         mouseY >= y && mouseY <= y+height) {
         return true;
       }
       else {
         return false;
       }
      
     }
   }
   
   
   class RectButton extends Button
   {
     RectButton(String A,int ix, int iy, int xsize,int ysize, color icolor, color ihighlight)
     {
       Name = A;
       x = ix;
       y = iy;
       sizeX = xsize;
       sizeY = ysize;
       basecolor = icolor;
       highlightcolor = ihighlight;
       if(A == "/1"){
         //locked = false;
         currentcolor = highlightcolor;
       }else{
         currentcolor = basecolor;
       }
       println(currentcolor);
     }
   
     boolean over()
     {
       if( overRect(x, y, sizeX, sizeY) ) {
         over = true;
         return true;
       }
       else {
         over = false;
         return false;
       }
     }
     void displayButton()
     {
       stroke(0);
       fill(currentcolor);
       rect(x, y, sizeX, sizeY);
       fill(0);
       textAlign(CENTER);
       text(Name,x+sizeX/2,y+sizeY/2+5);
     }
   }
   

I created a graphing program for serial data and have 3 different graphs. I shifted them with translate and have buttons with each graph, but when I try to find the mouse position over each of the graphs. it only picks up the whole window mouse positions. Is there a way to have the mouse know where it is when the translation occurs.

code is below;

int wWidth = 600;
int wHeight = 800;
int graphWidth = wWidth-60;
int graphHeight = wHeight/3-35;
color c1 = color(255,0,0);
color c2 = color(0,255,0);
color c3 = color(0,0,255);

Graph xGraph,yGraph,zGraph;


//Serial parameters
import processing.serial.*;
//Serial and line graph data
Serial myPort;
//X,Y,Z accelerometer values
int valueX=0;
int valueY=0;
int valueZ=0;
//String data from serial
int lf = 10;
String stringToChange="";
//Save data points to graph each redraw
int[] valueXs = new int[graphWidth];
int[] valueYs = new int[graphWidth];
int[] valueZs = new int[graphWidth];

//Button stuff
boolean locked = false;


void setup(){
  //String portName = Serial.list()[0];
  //myPort = new Serial(this, portName, 9600);
  //myPort.bufferUntil('\n');
  size(wWidth,wHeight);
  xGraph = new Graph("X-Graph",c1,0,0,graphWidth,graphHeight,valueXs,1);
  yGraph = new Graph("Y-Graph",c2,0,0,graphWidth,graphHeight,valueYs,1);
  zGraph = new Graph("Z-Graph",c3,0,0,graphWidth,graphHeight,valueZs,4);
 
 
}

void draw(){
 
  background(127);
  translate(25,25);
 
  xGraph.display();
  translate(0,graphHeight+25);
 
  yGraph.display();
  translate(0,graphHeight+25);
  zGraph.display();
}


void serialEvent(Serial myPort) {
 
  //Serial data until new line
  stringToChange = myPort.readStringUntil('\n');
  if (stringToChange != null) {//split X,Y,Z data that has a tab betweein
    String [] data = split(stringToChange, '\t');
    //trim string data and convert to ints
    valueX = int(data[0].trim());
    valueY = int(data[1].trim());
    valueZ = int(data[2].trim());
    // shift all values in array by 1 to free up the new data
    for (int i = 1; i<valueXs.length;i++) {
      valueXs[i-1] = valueXs[i];
      valueYs[i-1] = valueYs[i];
      valueZs[i-1] = valueZs[i];
    }
    //replace new data at last array point and scale if needed
    valueXs[valueXs.length-1]=valueX;
    valueYs[valueYs.length-1]=valueY;
    valueZs[valueZs.length-1]=valueZ;
  }
}

class Graph{
  String gN;
  int gX,gY,gW,gH,yS;
  int [] gV;
  color cV;
  RectButton rect1,rect2,rect3,rect4;
 
  Graph(String gName,color cValue,int graphX,int graphY,int gWidth,int gHeight ,int[] graphYValues,int ySens){
    gN = gName;
    gX = graphX;
    gY = graphY;
    gW = gWidth;
    gH = gHeight;
    gV = graphYValues;
    cV = cValue;
    yS = ySens;
    rect1 = new RectButton("/1",gX,gY+0, 25, 25, c1, c2);
    rect2 = new RectButton("/2",gX,gY+25, 25, 25, c1, c2);
    rect3 = new RectButton("/4",gX,gY+50, 25, 25, c1, c2);
    rect4 = new RectButton("/8",gX,gY+75, 25, 25, c1, c2);
  }
 
  int gHashes = 30;//Grid Spacing
 
  void createGrid(){
    int b = gW/gHashes;//Used for center of X width
    fill(0);
    int gCenterH = gH/2;//Used to find Y height Center
    for(int i=gCenterH/gHashes;i>-gCenterH/gHashes-1;i--){
      stroke(225);
      line(gX+1,gCenterH-gHashes*i,gW-1,gCenterH-gHashes*i);//Print Y line
      textAlign(LEFT);
      fill(255);
      text(i*gHashes,gW+2,gCenterH-gHashes*i+5);//Print text for Y lines
      //X hashes Lines
      for(int j=0;j<b-1;j++){
        if(j!=0){
          line(gX+gW-j*gHashes,gCenterH-gHashes*i+5,gX+gW-j*gHashes,gCenterH-gHashes*i-5);
        }
      }
    }
    for(int k=0;k<b-1;k++){//Print Values of seconds on bottom of graph
      textAlign(CENTER);
      if(k%2==0){
        text(k*gHashes/10,gX+gW-k*gHashes,gH+15);
      }
    }
    rotate(radians(-90));
    textAlign(CENTER);
    fill(cV);
    text(gN,-gH+gH/2,gY-5);
    rotate(radians(90));
    textAlign(LEFT);
    fill(255);
    text("Sec's",gX,gH+15);   
  }
  void displayData(){
    strokeWeight(1);
    beginShape();//show line graph
    stroke(cV);
    noFill();
    for(int i=0;i<gV.length;i++){
      vertex(i+gX,gV[i]/yS+gH/2);
    }
    endShape();
  }
  void update(int x, int y){
    if(locked == false) {
      rect1.update();
      rect2.update();
      rect3.update();
      rect4.update();
    }
    else {
      locked = false;
    }
  }
 
  void display(){
    stroke(0);
    fill(255);
    rect(gX,gY,gW,gH);
    createGrid();
    displayData();
    update(mouseX, mouseY);
   
    rect1.displayButton();
    rect2.displayButton();
    rect3.displayButton();
    rect4.displayButton();
   
 }
}


class Button
{
  String Name;
  int x, y;
  int sizeX;
  int sizeY;
  color basecolor, highlightcolor;
  color currentcolor;
  boolean over = false;
  boolean pressed = false;  

  void update()
  {
    if(over()) { currentcolor = highlightcolor;
    }
    else { currentcolor = basecolor;
    }
  }

  boolean pressed()
  {
    if(over) {
      locked = true;
      currentcolor = highlightcolor;
      return true;
    }
    else {
      locked = false;
      currentcolor = basecolor;
      return false;
    }   
  }

  boolean over()
  {
    return true;
  }

  boolean overRect(int x, int y, int width, int height)
  {
    if (mouseX >= x && mouseX <= x+width &&
      mouseY >= y && mouseY <= y+height) {
      return true;
    }
    else {
      return false;
    }
   
  }
}


class RectButton extends Button
{
  RectButton(String A,int ix, int iy, int xsize,int ysize, color icolor, color ihighlight)
  {
    Name = A;
    x = ix;
    y = iy;
    sizeX = xsize;
    sizeY = ysize;
    basecolor = icolor;
    highlightcolor = ihighlight;
    currentcolor = basecolor;
  }

  boolean over()
  {
    if( overRect(x, y, sizeX, sizeY) ) {
      over = true;
      return true;
    }
    else {
      over = false;
      return false;
    }
  }
  void displayButton()
  {
    stroke(0);
    fill(currentcolor);
    rect(x, y, sizeX, sizeY);
    fill(0);
    textAlign(CENTER);
    text(Name,x+sizeX/2,y+sizeY/2+5);
  }
}

The program creates 4 buttons, and 2 squares with titles above them. Clicking on the buttons change the titles of the squares, the problem is that when the title change it just writes above the original title.

1 Im trying to use the image as a background that sometimes needs to be changed. So i redraw it at the beginning of draw().
2 in imageSquares I re display then get the graphbackground, but I think its taking the image that is still displayed.
3 is there a way that will just update the image and the text without it over writing it.


code used is just a sample Im using for a graphing program and sometimes I just want the background to change when it is graphing but this overwriting is messing it up;

Thanks ken

RectButton rect1, rect2, rect3, rect4;
squares sq1,sq2;
boolean locked = false;
color offColor = color(255,0,0);
color onColor = color(0,255,0);
int sensitivity=1;
PImage graphBGround;
void setup()
{
  size(400, 200);
  smooth();
  // Define and create circle button\
  // Define and create rectangle button
  sq1 = new squares("",50,100,25);
  sq2 = new squares("",100,100,25);
  imageSquares();
  rect1 = new RectButton("Sen X1",20, 20, 50, 30, offColor, onColor);
  rect2 = new RectButton("Sen X2",70, 20, 50, 30, offColor, onColor);
  rect3 = new RectButton("Sen X4",120, 20, 50, 30, offColor, onColor);
  rect4 = new RectButton("Sen X8",170, 20, 50, 30, offColor, onColor);
}

void imageSquares(){
 
  sq1.display();
  sq2.display();
  graphBGround = get();
}


void draw()
{
  image(graphBGround, 0, 0);
 // stroke(0);
  update(mouseX, mouseY);
  rect1.display();
  rect2.display();
  rect3.display();
  rect4.display();
 
}

void update(int x, int y)
{
  if(locked == false) {
    rect1.update();
    rect2.update();
    rect3.update();
    rect4.update();
  }
  else {
    locked = false;
  }

  if(mousePressed) {
    if(rect1.pressed()) {
      rect1.basecolor = onColor;
      rect2.basecolor = offColor;
      rect3.basecolor = offColor;
      rect4.basecolor = offColor;
      sensitivity = 1;
      sq1.setName("1");
      imageSquares();
    } else if(rect2.pressed()) {
      rect1.basecolor = offColor;
      rect2.basecolor = onColor;
      rect3.basecolor = offColor;
      rect4.basecolor = offColor;
       sensitivity = 2;
       sq1.setName("2");
      imageSquares();
    } else if(rect3.pressed()) {
      rect1.basecolor = offColor;
      rect2.basecolor = offColor;
      rect3.basecolor = onColor;
      rect4.basecolor = offColor;
       sensitivity = 4;
        sq2.setName("4");
      imageSquares();
    } else if(rect4.pressed()) {
      rect1.basecolor = offColor;
      rect2.basecolor = offColor;
      rect3.basecolor = offColor;
      rect4.basecolor = onColor;
       sensitivity = 8;
        sq2.setName("8");
      imageSquares();
    }
  }
}


class squares
{
 String Name;
 int x, y;
 int sizeX;
 
 squares(String name1,int x1, int y1, int size1)
 {
   Name=name1;
   x=x1;
   y=y1;
   sizeX=size1;
 }
 void setName(String nameChange){this.Name=nameChange;}
 
 void display(){
    fill(0);
    rect(x, y, sizeX, sizeX);
    textAlign(LEFT);
    text(Name,x,y-5);
 }
 
}

class Button
{
  String Name;
  int x, y;
  int sizeX;
  int sizeY;
  color basecolor, highlightcolor;
  color currentcolor;
  boolean over = false;
  boolean pressed = false;  

  void update()
  {
    if(over()) { currentcolor = highlightcolor;
    }
    else { currentcolor = basecolor;
    }
  }

  boolean pressed()
  {
    if(over) {
      locked = true;
      currentcolor = highlightcolor;
      return true;
    }
    else {
      locked = false;
      currentcolor = basecolor;
      return false;
    }   
  }

  boolean over()
  {
    return true;
  }

  boolean overRect(int x, int y, int width, int height)
  {
    if (mouseX >= x && mouseX <= x+width &&
      mouseY >= y && mouseY <= y+height) {
      return true;
    }
    else {
      return false;
    }
  }
}


class RectButton extends Button
{
  RectButton(String A,int ix, int iy, int xsize,int ysize, color icolor, color ihighlight)
  {
    Name = A;
    x = ix;
    y = iy;
    sizeX = xsize;
    sizeY = ysize;
    basecolor = icolor;
    highlightcolor = ihighlight;
    currentcolor = basecolor;
  }

  boolean over()
  {
    if( overRect(x, y, sizeX, sizeY) ) {
      over = true;
     
      return true;
    }
    else {
      over = false;
      return false;
    }
  }

  void display()
  {
    stroke(0);
    fill(currentcolor);
    rect(x, y, sizeX, sizeY);
    fill(0);
    textAlign(CENTER);
    text(Name,x+sizeX/2,y+sizeY/2+5);
  }
}

Im trying to create a accelerometer graph. I have created a graph below.

1. // screen size
   float wWidth = 600;
   float wHeight = 600;
   
   int edgeIndent = 20;
   int dBetweenGraph = 20;
   int gHeight = int((wHeight-4*dBetweenGraph-2*edgeIndent)/3);
   int gWidth = int((wWidth-2*dBetweenGraph-2*edgeIndent));
   
   void setup(){
     size(int(wWidth),int(wHeight));
     fill(128);
     rect(edgeIndent,edgeIndent,int(wWidth-edgeIndent*2),int(wHeight-edgeIndent*2));
     fill(0);
     textAlign(CENTER);
     text("Accelerometer Data",wWidth/2,edgeIndent-5);
     pushMatrix();
     translate(edgeIndent-5, wHeight/2);
     rotate(radians(-90));
     text("X-axis Data",gHeight,0);
     text("Y-axis Data",0,0);
     text("Z-axis Data",-gHeight,0);
     popMatrix();
    
     drawRect(wWidth/2,(wHeight/2-gHeight-dBetweenGraph),gWidth,gHeight);
     drawRect(wWidth/2,wHeight/2,gWidth,gHeight);
     drawRect(wWidth/2,(wHeight/2+gHeight+dBetweenGraph),gWidth,gHeight);
   }
   
   void drawRect(float x, float y, int xWidth, int yHeight){
     print(xWidth);
     int wHashTag = 10;
     int yHashTag = 30;
     stroke(0);
     fill(255);
     rect (x-xWidth/2,y-yHeight/2,xWidth,yHeight);
    
     int nOfHashes = (yHashTag*(yHeight/2/yHashTag));
     for (int j = -nOfHashes; j < nOfHashes+1; j = j+yHashTag) {
       stroke(225);
       line(1+x-xWidth/2, y+j, -1+x+xWidth/2, y+j);
       stroke(0);
       textAlign(RIGHT);
       PFont font;
       font = loadFont("ArialNarrow-14.vlw");
       textFont(font, 14);
       text(j*-1, edgeIndent+dBetweenGraph-2, y+j);
     }
    
     for (int i=xWidth+dBetweenGraph+edgeIndent-30; i>31; i=i-30){
      
       stroke(225);
       line (i,+1+y-yHeight/2,i,y-yHeight/2+wHashTag);
       line (i,y-wHashTag,i,y+wHashTag);
       line (i,-1+y+yHeight/2,i,y+yHeight/2-wHashTag);
       textAlign(CENTER);
       int toPrint = (i*-1)+xWidth+wHashTag;
       if((toPrint%60)==0){
         text(toPrint,i+30,+15+y+yHeight/2);
         //println(i);
       }
     }
   }
   Which looks good.

Then I have this code

1. import processing.serial.*;
   
   Serial myPort;
   int graphLength=300;
   int valueX=0;
   int valueY=0;
   int valueZ=0;
   int lf = 10;
   String stringToChange="";
   int[] valueXs = new int[graphLength];
   int[] valueYs = new int[graphLength];
   int[] valueZs = new int[graphLength];
   
   void setup(){
     size(graphLength,700);
     String portName = Serial.list()[0];
     myPort = new Serial(this, portName, 9600);
     myPort.bufferUntil('\n');
   }
   
   
   
   void draw(){
   }
   
   void serialEvent(Serial myPort){
     stringToChange = myPort.readStringUntil('\n');
     if (stringToChange != null) {
       //println(stringToChange);
      
       String [] data = split(stringToChange,'\t');
       delay(000);
       valueX = int(data[0].trim());
       valueY = int(data[1].trim());
       valueZ = int(data[2].trim());
         //println(valueX);
       }
     background(255);
     strokeWeight(1);
    
     beginShape();
     stroke(255,0,0);
     for(int i = 0; i<valueXs.length;i++){
       vertex(i,valueXs[i]+200);
     }
     endShape();
     beginShape();
     stroke(0,255,0);
     for(int i = 0; i<valueYs.length;i++){
       vertex(i,valueYs[i]+400);
     }
     endShape();
     beginShape();
     stroke(0,0,255);
     for(int i = 0; i<valueZs.length;i++){
       vertex(i,valueZs[i]+600);
     }
     endShape();
    
     for(int i = 1; i<valueXs.length;i++){
         valueXs[i-1] = valueXs[i];
         valueYs[i-1] = valueYs[i];
         valueZs[i-1] = valueZs[i];
       }
       valueXs[valueXs.length-1]=valueX;
       valueYs[valueYs.length-1]=valueY;
       valueZs[valueZs.length-1]=valueZ;
   }

which creates the graphing.


My question really is every time I add the graphing code to the first it doesnt show any graphing. I tried a few different ways and it seems that possibly that it blanks out the graph that I create and then tries to graph.
I know when I created the graph I had to worry about the order of when the rects and the line were drawn. I thought if I create the graph then add the code and the correct positioning I could just draw it on top.

Any Ideas appreciated. I will post later if I get any better information
also if this is not in the correct forum area please move.
Thanks Ken

Im trying to send with Arduino the code below integers between 0-300 and creates a line graph in processing. It works fine when I use the serial terminal and I see 0-300, but when it is being received in processing it only sees up to 255 and then starts over 0-44. and then restarts.

//Arduino code

int a=0; 

void setup() {
  Serial.begin(9600);
}
 
void loop() {
  toSerial();
}

void toSerial() {
  Serial.write(a);
  if (a>300){
    a=0;
  }
  a++;
}

//processing code

import processing.serial.*;

Serial myPort;
int value;
int[] values = new int[400];

void setup(){
  size(400,400);
  String portName = Serial.list()[0];
  myPort = new Serial(this, portName, 9600);
  for(int i = 0; i<values.length;i++){
    values[i]=0;
  }
}

void draw(){
  getData();
  background(255);
  stroke(0);
  beginShape();
  for(int i = 0; i<values.length;i++){
    //println(values[i]);
    vertex(i,values[i]);
  }
  endShape();
}

void getData(){
  if ( myPort.available() > 0) {
    value = myPort.read();
    for(int i = 1; i<values.length;i++){
      values[i-1] = values[i];
    }
    values[values.length-1]=value;
  }
}
 
Thanks for the help Ken