使用 Processing 绘制实时图形答案

【问题标题】：Real time graph plotting using Processing使用 Processing 绘制实时图形
【发布时间】：2017-07-08 05:20:54
【问题描述】：

我必须根据机器人编码器电机的反馈在处理过程中绘制图表。所以我有两个变量，基本上是左电机编码器和右电机编码器。我计划在 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

由与上面显示的代码有些相似但编写在 Internet 上可用的串行 event() 中的图形之一的屏幕截图：

【问题讨论】：

你能发一个minimal reproducible example吗？现在忘记连续的东西。你能画出mouseX 随时间变化的变量吗？
我认为这里有两个很多子问题。请将其缩减为您要修复的第一件事，添加 Kevin 请求的 MCVE。它现在感觉相当广泛并且“解决所有问题”。
@KevinWorkman 好的，让我尝试随着时间的推移绘制 mouseX 变量，我将相应地编辑问题。在那之前，请告诉我为什么他们在串行事件（）而不是 void draw（）中编写绘图代码？我正在向您发送一份参考资料：arduining.com/2013/08/05/arduino-and-processing-graph-example
@SaadAnwar 没有一种正确的方法可以做到这一点。任何一种方法都很好。在您的更简单的示例程序中，您将面临类似的决定：您是将它放在draw() 函数中还是将它放在mouseMoved() 函数中？任何一个都可以。您只需要了解差异并为您选择的方法做正确的事情。

标签： graph arduino processing

【解决方案1】：

如cmets中所说，这里的子问题太多了。

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

void draw() {

  point(encoder1, encoder2);

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

这样一个简单的草图就可以完成这项工作。

另一件不太清楚的是变量的初始化。通常你初始化一个变量，如果它不断增加，比如时间，但根据你的描述，你想在 X 轴上绘制一个编码器，在 Y 轴上绘制另一个编码器。那么，为了不让它们超出画布范围，映射开始的值不是更好吗？

请按照these 指南编辑问题，使代码清晰简洁，并尝试在每个帖子中提出一个问题。

【讨论】：