# Rugged graph while plotting output of data

**URL:** https://discourse.processing.org/t/rugged-graph-while-plotting-output-of-data/14426
**Category:** Coding Questions
**Created:** [October 4, 2019, 6:52pm UTC](https://discourse.processing.org/t/rugged-graph-while-plotting-output-of-data/14426 "2019-10-04T18:52:02Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![Jufu](https://avatars.discourse-cdn.com/v4/letter/j/b38774/32.png) [@Jufu](https://discourse.processing.org/u/Jufu)
#### Post date: [October 4, 2019, 6:52pm UTC](https://discourse.processing.org/t/rugged-graph-while-plotting-output-of-data/14426/1 "2019-10-04T18:52:02Z")

</div>

Hi,  
I am currently struggling with a seldom behaviour. I want to plot the mouse position starting from the left side of the window. Ones it arrived on the right side, it should stay there:

```auto
ArrayList<Integer> y = new ArrayList<Integer>();

void setup() {
  size(400, 300);
}

void draw() {
  background(255); 
 
  if (y.size()-1<width)
  {
    y.add(mouseY);
  }
  else
  {
    y.set(y.size()-1,mouseY);
  }
  for (int i=y.size()-1;i>0; i--) {
    line(i, y.get(i), i-1, y.get(i-1));
  }
  for (int i=0; i<y.size()-1; i++) {
    y.set(i,y.get(i+1));
  }
}

```

Somehow, while being in the if statement the plot seems somehow rugged, whereas it is smooth when being in the else statement:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/58a52785e7313439da2ac3843bc934a4076f1e62.png)  
Do you know why that is so?

Best  
Jufu

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [October 4, 2019, 10:34pm UTC](https://discourse.processing.org/t/rugged-graph-while-plotting-output-of-data/14426/2 "2019-10-04T22:34:28Z")

</div>

actually it worked that way, like a old scope,  
so i choose that look

```auto
ArrayList<Integer> y = new ArrayList<Integer>();

void setup() {
  size(400, 300);
  //frameRate(30); // adjust sample rate
  stroke(0,200,0);
  strokeWeight(2);
}

void draw() {
  background(0,0,80); 
  y.add(mouseY);
  if ( y.size() > width ) y.remove(0); // erase oldest sample
  for (int i=0; i < y.size()-1; i++ ) line(i, y.get(i), i+1, y.get(i+1));
}

```

yes, if move the mouseY fast still see like steps…

---

<div class="post-metadata">

### Author: ![Jufu](https://avatars.discourse-cdn.com/v4/letter/j/b38774/32.png) [@Jufu](https://discourse.processing.org/u/Jufu)
#### Post date: [October 5, 2019, 7:23am UTC](https://discourse.processing.org/t/rugged-graph-while-plotting-output-of-data/14426/3 "2019-10-05T07:23:20Z")

</div>

Thanks for the improvement! As you said, there is still a bit of a delay when fast moving mouse. But it is much better!

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [October 5, 2019, 7:47am UTC](https://discourse.processing.org/t/rugged-graph-while-plotting-output-of-data/14426/4 "2019-10-05T07:47:04Z")

</div>

not much difference, but see this:

> replace line with curve

```auto
ArrayList<Integer> y = new ArrayList<Integer>();

void setup() {
  size(400, 300);
  //frameRate(30); // adjust sample rate
  stroke(0, 200, 0);
  strokeWeight(2);
}

void draw() {
  background(0, 0, 80); 
  y.add(mouseY);
  if ( y.size() > width ) y.remove(0); // erase oldest sample
  noFill();
  beginShape();
  curveVertex( 0, y.get(0) ); // control point
  for (int i=0; i < y.size(); i++ )
    curveVertex( i, y.get(i) );
  curveVertex( y.size()-1, y.get(y.size()-1) ); // control point
  endShape();
}

```

---

<div class="post-metadata">

### Author: ![Jufu](https://avatars.discourse-cdn.com/v4/letter/j/b38774/32.png) [@Jufu](https://discourse.processing.org/u/Jufu)
#### Post date: [October 5, 2019, 8:01am UTC](https://discourse.processing.org/t/rugged-graph-while-plotting-output-of-data/14426/5 "2019-10-05T08:01:15Z")

</div>

Now it looks really smooth, just what I needed!  
Thanks again!

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [October 5, 2019, 3:17pm UTC](https://discourse.processing.org/t/rugged-graph-while-plotting-output-of-data/14426/6 "2019-10-05T15:17:35Z")

</div>

> [@Jufu](#):
>
> Do you know why that is so?

You only had the “rugged graph” in the first sweep (to width) of your code.  
I rearranged your code to remove these and so you can better understand where this was happening:

```auto
ArrayList<Integer> y = new ArrayList<Integer>();

void setup() 
  {
  size(400, 300);
  stroke(255, 255, 0);
  strokeWeight(2);
  }

void draw() 
  {
  background(0); 
 
  if (y.size()-1<width)
    {
    y.add(mouseY);
    for (int i=y.size()-1;i>0; i--) 
      line(i, y.get(i), i-1, y.get(i-1));
    }
  else
    {
    y.set(y.size()-1,mouseY);
    for (int i=y.size()-1;i>0; i--) 
      line(i, y.get(i), i-1, y.get(i-1));
    for (int i=0; i<y.size()-1; i++) 
      y.set(i,y.get(i+1));       
    }
    
  // Moved this code up:
  //for (int i=y.size()-1;i>0; i--) 
  // {
  // line(i, y.get(i), i-1, y.get(i-1));
  // }
  //for (int i=0; i<y.size()-1; i++) 
  // {
  // y.set(i,y.get(i+1));
  // }  
}

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8a5d9aeb280d61e2d7d128d9737387c838c86e04.png)

🙂

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [October 5, 2019, 3:41pm UTC](https://discourse.processing.org/t/rugged-graph-while-plotting-output-of-data/14426/7 "2019-10-05T15:41:38Z")

</div>

Hello Jufu,

This will compare the output of your original code (wait for rugged code to pass) with the solution that was offered:

```auto
//https://discourse.processing.org/t/rugged-graph-while-plotting-output-of-data/14426

ArrayList<Integer> y1 = new ArrayList<Integer>();
ArrayList<Integer> y2 = new ArrayList<Integer>();

void setup() {
  size(400, 600);
  //frameRate(30); // adjust sample rate
  textAlign(CENTER);
  textSize(24);
  }

void draw() {
  background(255);
  
  background(0);
  strokeWeight(2);
  stroke(255, 0, 0);
  
  int mY = mouseY-height/2;
 
// original
  push();
  translate(0, height/4);
  fill(128);
  text("Original", width/2, 0);
  if (y1.size()-1<width)
  {
    y1.add(mY);
  }
  else
  {
    y1.set(y1.size()-1, mY);
  }
  
  for (int i=y1.size()-1;i>0; i--) {
    line(i, y1.get(i), i-1, y1.get(i-1));
  }
  
  for (int i=0; i<y1.size()-1; i++) {
    y1.set(i,y1.get(i+1));
  }
  pop();
  
 
// Suggested 
  push();
  translate(0, 3*height/4);
  fill(128);
  text("Replace line with curve", width/2, 0);
  y2.add(mY);
  if ( y2.size() > width ) y2.remove(0); // erase oldest sample
  
  noFill();
  beginShape();
  curveVertex( 0, y2.get(0) ); // control point
  for (int i=0; i < y2.size(); i++ )
    curveVertex( i, y2.get(i) );
  curveVertex( y2.size()-1, y2.get(y2.size()-1) ); // control point
  endShape(); 
  pop(); 
  }

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/eca3919776ebd1dc721e547b182c7719fe91ad3d.png)

The strokeWeight(2) and contrast in colors played a big part in smoothing the appearance of output in this example.

As a personal exercise I wrote similar code from scratch using arrays (familiar) and then migrating to ArrayLists (new for me) and only used lines to join points.

🙂

References:  
[https://processing.org/tutorials/arrays/](https://processing.org/tutorials/arrays/)  
[https://processing.org/reference/Array.html](https://processing.org/reference/Array.html)  
[https://processing.org/reference/ArrayList.html](https://processing.org/reference/ArrayList.html)

---

<div class="post-metadata">

### Author: ![Jufu](https://avatars.discourse-cdn.com/v4/letter/j/b38774/32.png) [@Jufu](https://discourse.processing.org/u/Jufu)
#### Post date: [October 6, 2019, 7:18pm UTC](https://discourse.processing.org/t/rugged-graph-while-plotting-output-of-data/14426/8 "2019-10-06T19:18:45Z")

</div>

Hi @glv!  
thanks for your additional input. You made some nice plots and also simplified the code!

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [October 7, 2019, 1:18am UTC](https://discourse.processing.org/t/rugged-graph-while-plotting-output-of-data/14426/9 "2019-10-07T01:18:27Z")

</div>

> [@Jufu](#):
>
> You made some nice plots and also simplified the code!

All I did was rearrange your code a bit.  
It can be simplified much further…

I kept the “spirit” of **your original code** intact and working with that:

```auto
ArrayList<Integer> y = new ArrayList<Integer>();

void setup() 
  {
  size(400, 300);
  stroke(255, 255, 0);
  strokeWeight(2);
  }

void draw() 
  {
  background(0); 
 
  //if (y.size()-1<width)
    y.add(mouseY);
  //else                         
  // y.set(y.size()-1,mouseY);
    
  if (y.size() > width)  
    {
    for (int i=0; i<y.size()-1; i++) 
      y.set(i,y.get(i+1));
    
    y.remove(width); //remove last element
    }
    
  for (int i=y.size()-1;i>0; i--)
    line(i, y.get(i), i-1, y.get(i-1));     
  }

```

You can still simplify it further!

🙂