Processing 1.0 - Processing Discourse - [SOLVED] Creating a continuous graph

We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.

Index › Programming Questions & Help › Syntax Questions › [SOLVED] Creating a continuous graph

‹ Previous Topic | Next Topic ›

Pages: 1

[SOLVED] Creating a continuous graph (Read 2208 times)

Dids

[SOLVED] Creating a continuous graph
Nov 19^th, 2009, 11:29am

Hey everyone,

I'm trying to create a continuous bar graph without much success.
Currently the graph's create with a line() that basically starts from the beginning when it reaches the end of the window.

I'd like it to stay at the end of the window, so basically the "previous graph data" is moving to the left, while the "current graph data" is staying put.

Would I be better off trying to move the entire "canvas" to the right?

Oh and just so you guys know, I'm feeding serial data to the Processing app, which then graphs the data. As I mentioned, that part works just fine, but it's a bit hard to follow when it basically "resets" all the time.

Thank you in advance!

« Last Edit: Nov 20^th, 2009, 5:23am by Dids »

Cedric

Re: Creating a continuous graph
Reply #1 - Nov 19^th, 2009, 12:09pm

Maybe this helps you.
I am creating an array that holds as many points as pixels in width...

the value comes from the mouse Position. and is updated everytime the mouse is moved. So this should be your serialEvent.

So everytime the mouse is moved. All the data in the array is moved i-1 = i and the new data is put at the end.

hope you understand what i did.

Code:

int[] numbers = new int[400];

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

void draw(){
  background(255);
  stroke(0);
  beginShape();
  for(int i = 0; i<numbers.length;i++){
    vertex(i,350-numbers[i]);
  }
  endShape();

}

void mouseMoved(){
  for(int i = 1; i<numbers.length;i++){
   numbers[i-1] = numbers[i];
   }
numbers[numbers.length-1]=mouseY;
}

twitter.com/CedricKiefer

Cedric YaBB Moderator Offline Posts: 1838	Re: Creating a continuous graph Reply #2 - Nov 19^th, 2009, 2:10pm more efficient would be to use http://processing.org/reference/arraycopy_.html though
	twitter.com/CedricKiefer

Dids YaBB Newbies Offline Posts: 2	Re: Creating a continuous graph Reply #3 - Nov 20^th, 2009, 5:24am Thank you very much, that did indeed do the trick.

koogy God Member Offline Posts: 788	Re: Creating a continuous graph Reply #4 - Nov 27^th, 2009, 12:46pm Cedric wrote on Nov 19^th, 2009, 2:10pm: more efficient would be to use http://processing.org/reference/arraycopy_.html though a circular buffer would be even better - there's no need to copy anything then. 8)

Josh B. YaBB Newbies Offline Posts: 1	Re: [SOLVED] Creating a continuous graph Reply #5 - Mar 12^th, 2010, 3:40pm I'm sorry to dig up an old thread but could you perhaps elaborate on how a circular buffer might be implemented? I'm looking to do something similar to what Dids did (npi), only I also want to have a side-scrolling "graph paper" background for scale.

Cedric YaBB Moderator Offline Posts: 1838	Re: [SOLVED] Creating a continuous graph Reply #6 - Mar 12^th, 2010, 4:48pm all you want are some lines in the background ?
	twitter.com/CedricKiefer

Cedric

Re: [SOLVED] Creating a continuous graph
Reply #7 - Mar 12^th, 2010, 4:56pm

something like this ?

Code:

int[] numbers = new int[400];

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

void draw(){
  background(255);
  
  
//GraphPaper
for(int i = 0 ;i<=width/10;i++){
 stroke(200);
 line((-frameCount%10)+i*10,0,(-frameCount%10)+i*10,height);
 
 line(0,i*10,width,i*10);
}
  
  noFill();
  stroke(0);
  beginShape();
  for(int i = 0; i<numbers.length;i++){
    vertex(i,350-numbers[i]);
  }
  endShape();
  for(int i = 1; i<numbers.length;i++){
   numbers[i-1] = numbers[i];
   }
numbers[numbers.length-1]=mouseY;

}

twitter.com/CedricKiefer

Pages: 1

‹ Previous Topic | Next Topic ›