Plot real time values in Viewport

Processing Libraries
1

Hello Processing Community, I’m new here so be patient :slight_smile:
I need to plot a real-time graph of values ​​generated by a mathematical function. The graph should appear in a small central area of ​​the main window. Other programming environments usually refer to this as a “viewport” area.
So, is it possible in Processing (using java code) to plot a real time graph of values ​​(also random as a first example) in a viewport (200 x 600) opened in the center of the main window?
The viewport should have coordinates from 0 to 100 on the x-axis and from 0 to 1 on the y-axis.

Thanks for any help!

Gert

1 Like
2

Welcome to the forum.

Processing is supported by many 3rd party libraries I suspect that the graphica library will do what you want. You can install it from the PDE (Processing Development Environment) using the Contributions manager and the library comes with several examples which will help you get started.

2 Likes
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
4

One more example for your consideration if you’re looking to write your own code:

int LoopTimer = 0;
final int LoopTime1000 = 1000;  //slower
final int LoopTime500 = 500;
final int LoopTime100 = 100;
final int LoopTime50 = 50;
final int LoopTime10 = 10;  //faster

color BLUE = color(64, 124, 188);

final int _graphX = 100;
final int _graphY = 100; // Top margin
final int _graphW = 600;
final int _graphH = 200;

final float _spacing = 10;

float x = _graphX;
float y = _graphY +_graphH;

void viewPortRect() {
  fill(BLUE);
  rect(_graphX, _graphY, _graphW, _graphH);
}

void setup() {
  size(800, 400);
  stroke(255);
  viewPortRect();
}

void draw() {
  if (millis() >= LoopTimer) {
    LoopTimer += LoopTime50;
    x = x += _spacing;
    y = map(random(100), _graphY+_graphH, _graphY, 100, 200);
    if (x > _graphX + _graphW - _spacing) {
      viewPortRect(); // clear old values
      x = _graphX + _spacing;
    }
    fill(0, 255, 0);
    circle(x, y, 4);
  }
}

Output:

grph
grph1604×866 21.8 KB

1 Like
5

Can you please elaborate on what real-time is in the context of your project?

You can certainly use a for() loop to generate this within one frame of the draw() cycle.

I combined these to generate data and plot it:
redraw() / Reference / Processing.org
thread() / Reference / Processing.org

An example that generates data in the background and updates sketch window every 1000ms:

int x, y;

void setup() 
  {
  size(200, 200, P2D);
  thread("requestData");
  noLoop();
  }

void draw()
  {
  fill(random(256));  
  circle(x, y, 20);
  
  // You can write code here to plot data
  
  }

// Runs in background thread and updates x and y every 1000ms
void requestData() 
  {
  while(true)
    {
    x = random(width);
    y = random(height);
    delay(1000);
    redraw();
    }
  }

I often simulate incoming data from other sources with the example above.

:)