Plot real time values in Viewport

Processing Libraries
3

It only takes a little bit of arithmetic to position and scale data points to position on the drawing canvas. You can move the origin around using translate( x, y ). In theory, you can use scale() to … scale your plot, but if you give different values for x and y, it can create problems with drawing as your geometry (line or point size) gets scaled along with the underlying coordinate system. One last consideration is that Processing uses an upside-down coordinate system with +y going down the screen, so in the example below, I draw lines from a height of 200 to 200 minus the function value to draw them up from the bottom of the graph.

Here’s a simple example drawing a plot of the Processing noise() function.

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

void draw() {
  background( 128 );
  push();
  translate( 100, 100 );   // position the plot
  fill( 64 );       // plot background
  rect( 0, 0, 600, 200 );
  strokeWeight( 3 );
  stroke(255);
  for( float i=0; i<100; i++ ) {
    float x = i+0.1*frameCount;
    float y = noise(x*0.1);
    line( i*6+3, 200, i*6+3, 200-y*200 );
  }
  pop();
}
2 Likes