# Moving line graph

**URL:** https://discourse.processing.org/t/moving-line-graph/4463
**Category:** Electronics (Arduino, etc.)
**Created:** [October 14, 2018, 4:42pm UTC](https://discourse.processing.org/t/moving-line-graph/4463 "2018-10-14T16:42:49Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Myselium](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@Myselium](https://discourse.processing.org/u/Myselium)
#### Post date: [October 14, 2018, 4:42pm UTC](https://discourse.processing.org/t/moving-line-graph/4463/1 "2018-10-14T16:42:49Z")

</div>

Hello,

Currently im working on a project to control an arduino with processing.  
The serial communication is going fine but i cant seem to find any good way to put waveforms into a moving line graph. I have looked at some libraries but cant wrap my head around on how to move them…  
Any help would be appreciated 🙂

Thanks

---

<div class="post-metadata">

### Author: ![PascalAudet](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pascalaudet/32/1903_2.png) [@PascalAudet](https://discourse.processing.org/u/PascalAudet)
#### Post date: [October 15, 2018, 6:50pm UTC](https://discourse.processing.org/t/moving-line-graph/4463/2 "2018-10-15T18:50:41Z")

</div>

Did you look this Minim exemple ?  
[[http://code.compartmental.net/minim/audioplayer\_class\_audioplayer.html](http://code.compartmental.net/minim/audioplayer_class_audioplayer.html)]([http://Minim](http://Minim) AudioPlayer)

---

<div class="post-metadata">

### Author: ![Myselium](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@Myselium](https://discourse.processing.org/u/Myselium)
#### Post date: [October 16, 2018, 10:27am UTC](https://discourse.processing.org/t/moving-line-graph/4463/3 "2018-10-16T10:27:26Z")

</div>

Thanks for the reply,  
the minim library is for processing audio and the only thing i get from the arduino are separate values…  
So how would that be useful? can you maybe give me some example code?

---

<div class="post-metadata">

### Author: ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)
#### Post date: [October 16, 2018, 10:40am UTC](https://discourse.processing.org/t/moving-line-graph/4463/4 "2018-10-16T10:40:44Z")

</div>

> [@Myselium](#):
>
> So how would that be useful? can you maybe give me some example code?

I think he just did! 😉 You’ll want to store the discrete values you get into your own form of buffer though - perhaps using [IntList / Reference / Processing.org](https://processing.org/reference/IntList.html)

---

<div class="post-metadata">

### Author: ![Myselium](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@Myselium](https://discourse.processing.org/u/Myselium)
#### Post date: [October 16, 2018, 12:13pm UTC](https://discourse.processing.org/t/moving-line-graph/4463/5 "2018-10-16T12:13:24Z")

</div>

I’s sorry if im just being stupid here but when i try to use an IntList it gives me a nullPointerExeption.  
I changed the minim functions to the IntList functions because if i didnt do that it would also give me an error “The function “bufferSize()” does not exist”.

Here is my code:

```auto
import processing.serial.*;
import ddf.minim.*;

Minim minim;
Serial myPort;
boolean firstContact = false;  
int serialCount = 0;  
int[] serialInArray = new int[2];
int inByte;
IntList sineValue;

void setup()
{
  size(512, 200, P3D);
  myPort = new Serial(this, Serial.list()[1], 9600);
  // we pass this to Minim so that it can load files from the data directory
  minim = new Minim(this);
}

void draw()
{
  background(0);
  stroke(255);

  // draw the waveforms
  // the values returned by left.get() and right.get() will be between -1 and 1,
  // so we need to scale them up to see the waveform
  // note that if the file is MONO, left.get() and right.get() will return the same value
  for (int i = 0; i < sineValue.size() - 1; i++)
  {
    float x1 = map( i, 0, sineValue.size(), 0, width );
    float x2 = map( i+1, 0, sineValue.size(), 0, width );
    line( x1, 50 + sineValue.get(i)*50, x2, 50 + sineValue.get(i+1)*50 );
    line( x1, 150 + sineValue.get(i)*50, x2, 150 + sineValue.get(i+1)*50 );
  }
}

void serialEvent(Serial myPort) {

  inByte = myPort.read();

  if (firstContact == false) {
    if (inByte == 'A') {
      myPort.clear(); // clear the serial port buffer
      firstContact = true; // you've had first contact from the microcontroller
      myPort.write('A'); // ask for more
    }
  } else {
    serialInArray[serialCount] = inByte;
    serialCount++;

    if (serialCount > 0 ) {

      sineValue.append(serialInArray[1]);

      // Send a capital A to request new sensor readings:
      myPort.write('A');
      // Reset serialCount:
      serialCount = 0;
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![Myselium](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@Myselium](https://discourse.processing.org/u/Myselium)
#### Post date: [November 5, 2018, 10:55am UTC](https://discourse.processing.org/t/moving-line-graph/4463/6 "2018-11-05T10:55:39Z")

</div>

Does anyone have an idea?

---

<div class="post-metadata">

### Author: ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [November 5, 2018, 11:10am UTC](https://discourse.processing.org/t/moving-line-graph/4463/7 "2018-11-05T11:10:24Z")

</div>

You have to initialize your sineWave/IntList. Either you just declare it as IntList sineWave = new IntList(); or you initialize it in setup() with sineWave = new IntList();

When something gives a nullpointer, always check if you initialized it correctly, before going through millions of lines of code 😉
