使用Processing进行实时图形绘制

Question

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

所以我的第一个疑问是为什么他们用串行event（）函数而不是void draw（）来编写它？另一件事是当我尝试在void draw（）中编写我的代码时，它有一个像这样的伪代码：

           xpos1=0,ypos1=height;
        void draw():
         line(xpos1,ypos1,xpos,height-ypos);// obviously the data(xpos,ypos) is mapped with the width and height of the processing ide window.
            xpos1=xpos;
            ypos1=height-ypos;
            if(xpos1>=width)
            {
              xpos1=0;
            }
            if(ypos1>=height)
            {
              ypos1=0;
            }

所以我看到只有一个小点遍历处理ide窗口，我看不到我的行已经走过的旧路径，在我所描述的网站的情况下，在串行事件中编写类似的代码片段时（他们在处理窗口上制作了一个完整的图表。

我哪里出错了？还有任何替代方法使用void draw（）绘制图形吗？我想要改变xpos和ypos，因为我从左侧电机和右侧电机得到两个反馈。

我在不同帧中尝试过的图表的屏幕截图！

Image

上面显示的类似代码之一的图表的屏幕截图，但是在互联网上提供的串行事件（）中写的：

Answer 1

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

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

void draw() {

  point(encoder1, encoder2);

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

像这样的简单草图将完成这项工作。

另一个不太清楚的是变量的初始化。通常，如果变量连续增加（如时间），则初始化变量，但根据您的描述，您希望在X轴上绘制一个编码器，在Y轴上绘制另一个编码器。因此，为了不让它们超出画布范围而将值映射到最好不是更好吗？

请根据these指南修改问题，使代码简洁明了，并尝试在每个帖子中提出一个问题。