在经过处理的绘图中移动云

Question

我正在探索使用处理语言进行编程。 我想做一个可以穿过整个屏幕的云。 它必须具有以下特征：

circle (60, 100, 60);
circle (100, 100, 80);
circle (140, 100, 60);

必须是白色的 所以首先我必须声明颜色变量：

color whiteCloud      = #FFFFFF;

然后我必须通过编写以下内容插入我刚刚在 void draw () 部分提到的圆值：

stroke(whiteCloud);
fill(whiteCloud);

如果你编写圆圈的代码，你会在屏幕的左上角看到一朵云，但是我怎样才能移动云呢？

到目前为止我最好的解决方案是用（不是下面的）制作 3 个椭圆

ellipse(mouseX, mouseY, 20, 50);
ellipse(mouseX, mouseY, 50, 15);
ellipse(mouseX, mouseY, 5, 50);

非常感谢！

Answer 1

一个简单的选择是将圆分组到它们自己的坐标系中。 当你翻译这个时，所有的圈子都会跟着翻译。 您可以通过以下方式实现这一目标：

1. 画圆圈之前先打电话

   pushMatrix()

2. 使用

   translate()

   移动到鼠标位置
3. 画出你的圆圈
4. 调用

   popMatrix()

   退出坐标系（并返回全局坐标系

pushMatrix();
  translate(mouseX, mouseY);
  circle (0, 100, 60);
  circle (40, 100, 80);
  circle (80, 100, 60);
popMatrix();

（缩进不是必需的：它只是为了说明这些变换将应用于该组推送/弹出矩阵调用中。当您有多个嵌套坐标系时，这会很方便）。

有关更多信息，我强烈建议阅读 2D 转换教程。

您还可以顺便将这些指令分组为可重用的函数：

void drawCloud(int x, int y){
  pushMatrix();
    translate(x, y);
    circle (0, 100, 60);
    circle (40, 100, 80);
    circle (80, 100, 60);
  popMatrix();
}

然后你可以简单地调用

drawCloud(mouseX, mouseY);

（并轻松地在不同位置绘制多个云）。玩得开心！