Graph 如何在加工过程中制作滚动图形？

我有一个激光雷达传感器连接到Arduino Uno上

我试图复制Youtube视频短片中显示的图表：

我遇到了麻烦：

创建实时x轴

使图形与数据一起移动，而不是每次都必须擦干净板子

有人能指导我如何修改代码吗

我迄今为止的进展情况：

处理代码：

import processing.serial.*;

Serial myPort;        // The serial port
int xPos = 1;         // horizontal position of the graph
float inByte = 0;


void setup () {
  size(800, 700);
  myPort = new Serial(this, Serial.list()[0], 115200);
  myPort.bufferUntil('\n');
  background(0);
  smooth();
  drawStuff();
}

void draw () {
  translate(5, -100);
  stroke(255, 34, 255);
  line(xPos, height, xPos, height - inByte);
  smooth();
  if (xPos >= width){
  xPos = 0;
  translate(5, -100);
  background(0);
  drawStuff();
  }else{
      xPos++;
    }
}

void drawStuff() {
  background(0);
  for (int i = 0; i <= width; i += 25) {
    fill(0, 255, 0);
    text(i/2, i-10, height-15);
    stroke(0);
    line(i, height, i, 0);
  }
  for (int j = 0; j < height; j += 100) {
    fill(0, 255, 0);
    text(85-j/(height/100), 0, j);
    stroke(255);
    line(0, j, width, j);
  }
}

void serialEvent (Serial myPort) {
  String inString = myPort.readStringUntil('\n');

  if (inString != null) {
    inString = trim(inString);
    inByte = float(inString);
    println(inByte);
    inByte = map(inByte, 0, 1023, 0, height);
  }
}

#include "Adafruit_VL53L0X.h"

Adafruit_VL53L0X lox = Adafruit_VL53L0X();

void setup() {
  Serial.begin(115200);

  // wait until serial port opens for native USB devices
  while (! Serial) {
    delay(1);
  }
  
  Serial.println("Adafruit VL53L0X test");
  if (!lox.begin()) {
    Serial.println(F("Failed to boot VL53L0X"));
    while(1);
  }  
}


void loop() {
  VL53L0X_RangingMeasurementData_t measure;
    
  lox.rangingTest(&measure, false); // pass in 'true' to get debug data printout!

  if (measure.RangeStatus != 4) {  // phase failures have incorrect data
    Serial.println(measure.RangeMilliMeter);
  } else {
    Serial.println(" out of range ");
  }
    
  delay(100);
}

---

我建议将传感器的值存储在阵列中。它可能看起来像这样：

float[] data = new float[50];

//... your code

void serialEvent (Serial myPort) {
  //...
  if (inString != null) {
    inString = trim(inString);
    inByte = float(inString);
    inByte = map(inByte, 0, 1023, 0, height);
    for (let i = 1; i < data.length; i++) {
      data[i-1] = data[i];
    }
    data[data.length - 1] = inByte;
  }
}

float[]数据=新浮点[50]；
//... 你的代码
void serialEvent（串行端口）{
//...
如果（指令！=null）{
安装=配平（安装）；
inByte=浮点数（inString）；
inByte=地图（inByte，0，1023，0，高度）；
for（设i=1；i

这里发生的事情是，你有一个由传感器过去50个输出组成的数组，然后你把它们全部移动（去掉最早的一个），然后把新的输出作为数组中的最后一个值。然后，您可以根据需要在图形上显示这些值