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

**URL:** <https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631>\
**Category:** Electronics (Arduino, etc.)\
**Created:** [January 22, 2025, 1:11pm UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631 "2025-01-22T13:11:28Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 22, 2025, 11:33pm UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/5 "2025-01-22T23:33:49Z")

</div>

Hello @cola,

Another example with simulated data in a thread:

```auto
// 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();  
  }

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/c/5/c5526ffc7fb9e6ce2c195135b147f00e9ff55105.png)

Note:  
Data may not be synchronized in my example.

Have fun!

`:)`

---

_[View the full topic](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631)._