# 2d graph of signals of arduino

**URL:** https://discourse.processing.org/t/2d-graph-of-signals-of-arduino/27921
**Category:** Electronics (Arduino, etc.)
**Created:** [February 18, 2021, 8:15pm UTC](https://discourse.processing.org/t/2d-graph-of-signals-of-arduino/27921 "2021-02-18T20:15:04Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![xD\_echicero\_xD](https://avatars.discourse-cdn.com/v4/letter/x/958977/32.png) [@xD\_echicero\_xD](https://discourse.processing.org/u/xD_echicero_xD)
#### Post date: [February 18, 2021, 8:15pm UTC](https://discourse.processing.org/t/2d-graph-of-signals-of-arduino/27921/1 "2021-02-18T20:15:04Z")

</div>

```auto
import processing.serial.Serial;
import grafica.*;
public GPlot plot2 ;
static final int PORT_INDEX = 0, BAUDS = 9600;
int i=0; 
int[] vals = {};
//float[] vals = {};
void setup() {
  vals=new int[5];
  size(850, 660);
  noLoop();
  final String[] ports = Serial.list();
  printArray(ports);
  new Serial(this, ports[PORT_INDEX], BAUDS).bufferUntil(ENTER);

  plot2 = new GPlot(this);
  plot2.setPos(460, 0);
  plot2.setDim(250, 250);
  plot2.getTitle().setText("position");
  plot2.getXAxis().getAxisLabel().setText("X");
  plot2.getYAxis().getAxisLabel().setText("Y");
}

void draw() {
  println(vals);

  // Draw the second plot  
  plot2.beginDraw();
  plot2.drawBackground();
  plot2.drawBox();
  plot2.drawXAxis();
  plot2.drawYAxis();
  plot2.drawTitle();
  plot2.drawGridLines(GPlot.BOTH);
  plot2.drawLines();
 // plot2.drawPoints(star);
  plot2.endDraw();
  plot2.addPoint(i, vals[1]); // Error <---
 
}

void serialEvent(final Serial s) {
  vals = int(splitTokens(s.readString()));
  //vals = float(splitTokens(s.readString()));
  i++;
  redraw = true;
}

```

hi I am a student and i a new in this world of processing. My proyect consists of graph eight signals coming from arduino. I started with only one but in the line " plot2.addPoint(i, vals[1]);" mark [ArrayIndexOutOfBoundsException: 0] so if someone may help me please Ty…

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [February 18, 2021, 11:10pm UTC](https://discourse.processing.org/t/2d-graph-of-signals-of-arduino/27921/2 "2021-02-18T23:10:02Z")

</div>

Hi,

Welcome to the forum! 😉

Your error is :

> [@xD\_echicero\_xD](#):
>
> ArrayIndexOutOfBoundsException: 0

This means that you are trying to access an element from an array at in index that is too high or too low.

Consider this simple example :

```java
int vals[] = {0, 5, 2, 1};

println(vals[0]); // -> 0
println(vals[3]); // -> 1

println(vals[-1]); // -> ArrayIndexOutOfBoundsException: -1
println(vals[5]); // -> ArrayIndexOutOfBoundsException: 5

```

So the first two statements work but the next ones try to access an element that is not in the array therefore it throws an `Exception` of type `ArrayIndexOutOfBoundsException`.

Your error is caused by the fact that you say :

```auto
vals = int(splitTokens(s.readString()));

```

Which gets the string from the Serial buffer, split it by space or delimiter then convert it to an array of ints. But what if the serial buffer is empty?

Then your `vals` array is going to be empty therefore you can’t access the element at index 1.

I think that you changed your code because the error message should be :

```auto
ArrayIndexOutOfBoundsException: 1 // not 0

```

You can check if the array is not empty by saying :

```java
if (!vals.length == 0) {
  plot2.addPoint(i, vals[1]);
}

```

Have fun! 😉

---

<div class="post-metadata">

### Author: ![xD\_echicero\_xD](https://avatars.discourse-cdn.com/v4/letter/x/958977/32.png) [@xD\_echicero\_xD](https://discourse.processing.org/u/xD_echicero_xD)
#### Post date: [February 19, 2021, 2:11am UTC](https://discourse.processing.org/t/2d-graph-of-signals-of-arduino/27921/3 "2021-02-19T02:11:36Z")

</div>

Thanks josephh for the help and the welcome. but i change this one, the other generates me a Error

```auto
if (vals.length != 0) {
  plot2.addPoint(i, vals[1]);
}

```

the code is good  
A last Question you have any idea if can i draw a other graph in the same plot with this library if you have other forums can be help me.

```auto
import grafica.*;

```

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [February 19, 2021, 8:16am UTC](https://discourse.processing.org/t/2d-graph-of-signals-of-arduino/27921/4 "2021-02-19T08:16:03Z")

</div>

> [@xD\_echicero\_xD](#):
>
> if can i draw a other graph in the same plot

Yeah sure, you can check this example on the GitHub repo :

> <https://github.com/jagracar/grafica/blob/master/examples/MultiplePlots/MultiplePlots.pde>

It uses the `GPlot.addLayer(...)` to add a second layer on top of the graph :

```auto
plot1.addLayer("layer 1", points1b);

```

---

<div class="post-metadata">

### Author: ![xD\_echicero\_xD](https://avatars.discourse-cdn.com/v4/letter/x/958977/32.png) [@xD\_echicero\_xD](https://discourse.processing.org/u/xD_echicero_xD)
#### Post date: [February 20, 2021, 3:24am UTC](https://discourse.processing.org/t/2d-graph-of-signals-of-arduino/27921/5 "2021-02-20T03:24:48Z")

</div>

Hello, i don’t know what’s wrong this not mark an error, but the second layer no draw. can you check please.

```auto
import processing.serial.Serial;
import grafica.*;
import java.util.Random;

public GPlot plot2 ;

static final int PORT_INDEX = 0, BAUDS = 9600;
int i=0; 
int[] vals = {};
//float[] vals = {};

GPointsArray points1a = new GPointsArray(500);

void setup() {
  //vals=new int[6];
  size(850, 660);
  noLoop();
  final String[] ports = Serial.list();
  printArray(ports);
  new Serial(this, ports[PORT_INDEX], BAUDS).bufferUntil(ENTER);
  

  plot2 = new GPlot(this);
  plot2.setPos(5, 5);
  plot2.setDim(550, 550);
  plot2.getTitle().setText("Posicion");
  plot2.getXAxis().getAxisLabel().setText("X");
  plot2.getYAxis().getAxisLabel().setText("Y");
  plot2.addLayer("layer 2", points1a);
  plot2.getLayer("layer 2").setLineColor(color(150, 150, 255));
}

void draw() {
  println(vals);

  // Draw the second plot  
  plot2.beginDraw();
  plot2.drawBackground();
  plot2.drawBox();
  plot2.drawXAxis();
  plot2.drawYAxis();
  plot2.drawTitle();
  plot2.drawGridLines(GPlot.BOTH);
  plot2.drawLines();

  // plot2.drawPoints(star);

  if (vals.length == 6) {
    plot2.addPoint(i, vals[0]);
    points1a.add(i, vals[1]*2);
  }
  plot2.endDraw();
}

void serialEvent(final Serial s) {
  vals = int(splitTokens(s.readString()));
  //vals = float(splitTokens(s.readString()));
  i++;

  redraw = true;
}

```

i check the serial and is ok

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [February 20, 2021, 6:38pm UTC](https://discourse.processing.org/t/2d-graph-of-signals-of-arduino/27921/6 "2021-02-20T18:38:32Z")

</div>

> [@xD\_echicero\_xD](#):
>
> but the second layer no draw

> [@xD\_echicero\_xD](#):
>
> `public GPlot plot2 ;`

Here I can only see one instance of `GPlot` is that right?

---

<div class="post-metadata">

### Author: ![xD\_echicero\_xD](https://avatars.discourse-cdn.com/v4/letter/x/958977/32.png) [@xD\_echicero\_xD](https://discourse.processing.org/u/xD_echicero_xD)
#### Post date: [February 20, 2021, 7:39pm UTC](https://discourse.processing.org/t/2d-graph-of-signals-of-arduino/27921/7 "2021-02-20T19:39:27Z")

</div>

> [@josephh](#):
>
> Here I can only see one instance of is that right? `GPlot`

yes it is right, i try use this but it mark a error

```auto
 if (vals.length == 6) {
    plot2.addPoint(i, vals[0]);
    points1a.add(i, vals[1]*2);
    plot2.addPoint(points1a,"layer 2" );
  }

```

Error is

```auto
The method addPoint(GPoint, String) in the type GPlot is not applicable for the arguments (GPointsArray, String)

```

---

<div class="post-metadata">

### Author: ![xD\_echicero\_xD](https://avatars.discourse-cdn.com/v4/letter/x/958977/32.png) [@xD\_echicero\_xD](https://discourse.processing.org/u/xD_echicero_xD)
#### Post date: [February 21, 2021, 12:59am UTC](https://discourse.processing.org/t/2d-graph-of-signals-of-arduino/27921/8 "2021-02-21T00:59:13Z")

</div>

Hello there, i can make a “solution”

```auto
import processing.serial.Serial;
import grafica.*;
import java.util.Random;

public GPlot plot2 ;

static final int PORT_INDEX = 0, BAUDS = 9600;
int i=0; 
int[] vals = {};
//float[] vals = {};

GPointsArray points1a = new GPointsArray(2);

void setup() {
  //vals=new int[6];
  size(850, 660);
  noLoop();
  final String[] ports = Serial.list();
  printArray(ports);
  new Serial(this, ports[PORT_INDEX], BAUDS).bufferUntil(ENTER);

  plot2 = new GPlot(this);
  plot2.setPos(5, 5);
  plot2.setDim(550, 550);
  plot2.getTitle().setText("Posicion");
  plot2.getXAxis().getAxisLabel().setText("X");
  plot2.getYAxis().getAxisLabel().setText("Y");
  plot2.addLayer("layer 2", points1a);
  plot2.getLayer("layer 2").setLineColor(color(150, 150, 255));
}

void draw() {
  println(vals);

  // Draw the second plot  
  plot2.beginDraw();
  plot2.drawBackground();
  plot2.drawBox();
  plot2.drawXAxis();
  plot2.drawYAxis();
  plot2.drawTitle();
  plot2.drawGridLines(GPlot.BOTH);
  plot2.drawLines();

  

  if (vals.length == 6) {
    plot2.addPoint(i, vals[0]);
    points1a.add(i, vals[1]*2);
    plot2.addPoints(points1a,"layer 2");
  }
  plot2.endDraw();
}

void serialEvent(final Serial s) {
  vals = int(splitTokens(s.readString()));
  //vals = float(splitTokens(s.readString()));
  i++;

  redraw = true;
}

```

But it’s not working right. it make a line from the staring point. i don´t know why.

 ![Prueba](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3ef6d9c9c221c00e453c71c1057ec559fcd720fa.png)  
pd; i sholud make a new post?

---

<div class="post-metadata">

### Author: ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [February 21, 2021, 3:36am UTC](https://discourse.processing.org/t/2d-graph-of-signals-of-arduino/27921/9 "2021-02-21T03:36:17Z")

</div>

[xD\_echicero\_xD](https://discourse.processing.org/u/xD_echicero_xD)

where is your arduino code ??

---

<div class="post-metadata">

### Author: ![xD\_echicero\_xD](https://avatars.discourse-cdn.com/v4/letter/x/958977/32.png) [@xD\_echicero\_xD](https://discourse.processing.org/u/xD_echicero_xD)
#### Post date: [February 21, 2021, 3:46am UTC](https://discourse.processing.org/t/2d-graph-of-signals-of-arduino/27921/10 "2021-02-21T03:46:20Z")

</div>

here. i know only red a sensor but it is only for the test.

```auto
int sensorPin = 0; // Select input pin
int val = 0;
void setup() {
  Serial.begin(9600); // Open serial port
}
void loop() {
  val = analogRead(sensorPin) / 4; // Read value from sensor
  Serial.println("");
  for (int i = 0; i <= 5; i++) {
    
    Serial.print(val);
    Serial.write('\t');
  }
  delay(1000); // Wait 100 milliseconds

}

```

---

<div class="post-metadata">

### Author: ![xD\_echicero\_xD](https://avatars.discourse-cdn.com/v4/letter/x/958977/32.png) [@xD\_echicero\_xD](https://discourse.processing.org/u/xD_echicero_xD)
#### Post date: [February 25, 2021, 4:11am UTC](https://discourse.processing.org/t/2d-graph-of-signals-of-arduino/27921/11 "2021-02-25T04:11:32Z")

</div>

The next code ca be 8 graph signals of arduino (voltaje, temperatura etc), Ty for all participates in this forum

```auto
import processing.serial.Serial;
import grafica.*;
import java.util.Random;

public GPlot plot2 ;

static final int PORT_INDEX = 0, BAUDS = 9600;
int i=0; 
int[] vals = {};
//float[] vals = {};

GPointsArray points2 = new GPointsArray();
GPointsArray points3 = new GPointsArray();
GPointsArray points4 = new GPointsArray();
GPointsArray points5 = new GPointsArray();
GPointsArray points6 = new GPointsArray();
GPointsArray points7 = new GPointsArray();
GPointsArray points8 = new GPointsArray();

void setup() {
  //vals=new int[6];
  size(850, 660);
  noLoop();
  final String[] ports = Serial.list();
  printArray(ports);
  new Serial(this, ports[PORT_INDEX], BAUDS).bufferUntil(ENTER);

  plot2 = new GPlot(this);
  plot2.setPos(5, 5);
  plot2.setDim(550, 550);
  plot2.getTitle().setText("Posicion");
  plot2.getXAxis().getAxisLabel().setText("X");
  plot2.getYAxis().getAxisLabel().setText("Y");
  plot2.setLineWidth(1.5);
  //
  plot2.addLayer("layer 2", points2);
  plot2.getLayer("layer 2").setLineColor(color(150, 150, 255));
  plot2.getLayer("layer 2").setLineWidth(1.5);
  //
  plot2.addLayer("layer 3", points3);
  plot2.getLayer("layer 3").setLineColor(color(150, 150, 255));
  plot2.getLayer("layer 3").setLineWidth(1.5);
  //
  plot2.addLayer("layer 4", points4);
  plot2.getLayer("layer 4").setLineColor(color(150, 150, 255));
  plot2.getLayer("layer 4").setLineWidth(1.5);
  //
  plot2.addLayer("layer 5", points5);
  plot2.getLayer("layer 5").setLineColor(color(150, 150, 255));
  plot2.getLayer("layer 5").setLineWidth(1.5);
  //
  plot2.addLayer("layer 6", points6);
  plot2.getLayer("layer 6").setLineColor(color(150, 150, 255));
  plot2.getLayer("layer 6").setLineWidth(1.5);
  //
  plot2.addLayer("layer 7", points7);
  plot2.getLayer("layer 7").setLineColor(color(150, 150, 255));
  plot2.getLayer("layer 7").setLineWidth(1.5);
  //
  plot2.addLayer("layer 8", points8);
  plot2.getLayer("layer 8").setLineColor(color(150, 150, 255));
  plot2.getLayer("layer 8").setLineWidth(1.5);
  
  //
  plot2.activatePanning();
  plot2.activateZooming(1.2, CENTER, CENTER);
  plot2.activateReset();

}

void draw() {
  // println(points1a);

  // Draw the plot  
  plot2.beginDraw();
  plot2.drawBackground();
  plot2.drawBox();
  plot2.drawXAxis();
  plot2.drawYAxis();
  plot2.drawTitle();
  plot2.drawGridLines(GPlot.CTRLMOD );
  plot2.drawLines();

  if (vals.length >= 1) {
    i++;
    plot2.addPoint(i, vals[0]);

    if (vals.length >= 2) {
      plot2.addPoint(Point(i, vals[1]), "layer 2");
      if (vals.length >= 3) { 
        plot2.addPoint(Point(i, vals[2]), "layer 3");
        if (vals.length >= 4) {
          plot2.addPoint(Point(i, vals[3]), "layer 4");
          if (vals.length >= 5) {
            plot2.addPoint(Point(i, vals[4]), "layer 5");
            if (vals.length >= 6) {
              plot2.addPoint(Point(i, vals[5]), "layer 6");
              if (vals.length >= 7) {
                plot2.addPoint(Point(i, vals[6]), "layer 7");
                if (vals.length >= 8) {
                  plot2.addPoint(Point(i, vals[7]), "layer 8");
                }
              }
            }
          }
        }
      }
    }
  }
  plot2.endDraw();
}

void serialEvent(final Serial s) {
  vals = int(splitTokens(s.readString()));
  //vals = float(splitTokens(s.readString()));

  redraw = true;
}

GPoint Point(float i, float n) {
  return new GPoint(i, n);
}

```