# Plot real time values in Viewport
**URL:** https://discourse.processing.org/t/plot-real-time-values-in-viewport/46536
**Category:** Libraries
**Created:** [June 12, 2025, 3:18pm UTC](https://discourse.processing.org/t/plot-real-time-values-in-viewport/46536 "2025-06-12T15:18:10Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@Gert](https://discourse.processing.org/u/Gert)
#### Post date: [June 12, 2025, 3:18pm UTC](https://discourse.processing.org/t/plot-real-time-values-in-viewport/46536/1 "2025-06-12T15:18:10Z")
Hello Processing Community, I’m new here so be patient 🙂
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
---
### Author:  [@quark](https://discourse.processing.org/u/quark)
#### Post date: [June 12, 2025, 5:10pm UTC](https://discourse.processing.org/t/plot-real-time-values-in-viewport/46536/2 "2025-06-12T17:10:08Z")
Welcome to the forum.
Processing is supported by many 3rd party [libraries](https://processing.org/reference/libraries/#math) 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.
---
### Author:  [@scudly](https://discourse.processing.org/u/scudly)
#### Post date: [June 12, 2025, 7:36pm UTC](https://discourse.processing.org/t/plot-real-time-values-in-viewport/46536/3 "2025-06-12T19:36:31Z")
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.
```auto
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();
}
```
---
### Author:  [@svan](https://discourse.processing.org/u/svan)
#### Post date: [June 12, 2025, 7:46pm UTC](https://discourse.processing.org/t/plot-real-time-values-in-viewport/46536/4 "2025-06-12T19:46:51Z")
One more example for your consideration if you’re looking to write your own code:
```auto
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:**
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [June 13, 2025, 5:41pm UTC](https://discourse.processing.org/t/plot-real-time-values-in-viewport/46536/5 "2025-06-13T17:41:51Z")
> [@Gert](#):
>
> I need to plot a real-time graph of values generated by a mathematical function.
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](https://processing.org/reference/redraw_.html)_
_[thread() / Reference / Processing.org](https://processing.org/reference/thread_.html)_
An example that generates data in the background and updates sketch window every 1000ms:
```auto
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.
`:)`