Rugged graph while plotting output of data

Processing Coding Questions
1

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:

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
Do you know why that is so?

Best
Jufu

1 Like
2

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

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…

1 Like
3

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

4

not much difference, but see this:

replace line with curve

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

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

6

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:

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

:slight_smile:

1 Like
7

Hello Jufu,

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

//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
image.png402Ă—627 22.1 KB

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.

:slight_smile:

References:
https://processing.org/tutorials/arrays/
https://processing.org/reference/Array.html
https://processing.org/reference/ArrayList.html

8

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

1 Like
9

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:

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!

:slight_smile: