How to draw real-time data in a specific canvas area？

[glv]

Hello @cola,

Another example with simulated data in a thread:

// Draw data generated in a thread in realtime.
// Data is buffered and drawn with each frame.
//
// Author: GLV
// Date:   2025-01-22

PGraphics d0;
FloatList data0;

int i;

void setup()
  {
  size(600, 500);
  
  d0 = createGraphics(400, 100); 
  data0 = new FloatList();
  
  frameRate(60);           // default

  thread("requestData");   // start thread to generate data
  }

//*****************************************************************  

void draw()
  {
  background(0);
  update();
  image(d0, mouseX, mouseY);
  }

// This could be serialEvent() and only intended to simulate incoming data.
// There are other ways to control timing of a thread. :)

void requestData() 
  {
  while(true)
    {
    delay(3);
        
    float th = i*TAU/d0.width;
    data0.append(40*sin(th*3)*cos(th));
    
    if (data0.size() > d0.width)
    data0.remove(0);

   //update(); // Still thinking about best place for this, Here or draw()?    

    i = (i+1)%d0.width;  // 0 to 399 to avoid drift from floating point math
    println(i);      
    }    
  }  
    
void update()
  {
  d0.beginDraw();
  d0.background(255, 255, 0);
  d0.stroke(0);
  d0.strokeWeight(2);
  for(int i=0; i<data0.size() ; i++)
    {
    d0.point(i, data0.get(i)+d0.height/2);
    }
  d0.endDraw();  
  }

Note:
Data may not be synchronized in my example.

Have fun!

:)