Graph 基于图像处理的实时图形绘制

我必须根据机器人编码器电机的反馈在处理过程中绘制一个图表。所以我有两个变量，基本上是左马达编码器和右马达编码器。我计划在x轴和y轴上分别改变。当我浏览互联网上的一些代码时，我发现，几乎每个人都在串行事件本身中编写了图形部分代码

所以我的第一个疑问是，为什么他们要用serial event（）函数而不是void draw（）来编写它？另一件事是，当我试图在void draw（）中为graph编写代码时，它有一个类似以下内容的伪代码：

xpos1=0，ypos1=height；
void draw（）：
行（xpos1、ypos1、xpos、高度ypos）；//显然，数据（xpos、ypos）与处理ide窗口的宽度和高度对应。
xpos1=xpos；
ypos1=高度ypos；
如果（xpos1>=宽度）
{
xpos1=0；
}
如果（ypos1>=高度）
{
ypos1=0；
}

因此，我只能在processing ide窗口中看到一个小点，我看不到我的线路所经过的较旧路径，在我在serial event（）中编写类似代码时描述的站点中，它们在processing窗口中生成了一个完整的图形

我哪里做错了？还有没有其他方法可以使用void draw（）绘制图形？我想改变XPO和YPO，因为我从左马达和右马达得到两个反馈

我尝试在不同帧中绘制的图形的屏幕截图

---

其中一个图形的屏幕截图由上面显示的类似代码生成，但是在互联网上可用的串行事件（）中编写的：

如评论中所述，这里有太多的子问题

关于与代码相关的问题，有一条主线使得代码比必须的复杂得多。您正试图在两个编码器接收到的每个和每对数字之间画一条线。没有必要这样做。绘制图形时，我个人使用点（x，y）函数。为了原型化的目的，它更容易实现，并且调整草图运行时的帧速率（），您不会注意到差异

void draw() {

  point(encoder1, encoder2);

  if (encoder1 >= width) {
    encoder1 = encoder1 - width;
  }
  if (encoder2 >= height) {
    encoder2 = encoder2 - height;
  }
}

像这样简单的素描就可以了

另一件不太清楚的事情是变量的初始化。通常，如果变量持续增加（如时间），则初始化变量，但根据描述，您希望在X轴上绘制一个编码器，在Y轴上绘制另一个编码器。那么，为了不让它们超出画布范围，映射要开始的值不是更好吗

---

请编辑问题，使代码清晰简洁，遵循指导原则，并尝试在每篇文章中提出一个问题。

您可以发布一个问题吗？暂时忘掉那些连载的东西。你能把

mouseX

变量画出来吗？我想这里有两个问题。请把它缩减到你想要修复的第一件事，添加Kevin请求的MCVE。它感觉相当宽泛，目前“解决了所有问题”。@KevinWorkman好的，让我试着随着时间的推移绘制mouseX变量，我会相应地编辑这个问题。在那之前，请告诉我为什么他们要在serial event（）中编写绘图代码，而不是void draw（）？我给你发了一封推荐信：@SaadAnwar没有一种正确的方法可以做到这一点。两种方法都可以。在更简单的示例程序中，您将面临类似的决定：是将其放入

draw（）

函数中，还是将其放入

mouseMoved（）

函数中？两个都可以。你只需要理解不同之处，并根据你选择的方法做正确的事情。