让循环在处理中来回运行答案

【问题标题】：Letting a loop run back and forth in Processing让循环在处理中来回运行
【发布时间】：2020-11-20 09:23:45
【问题描述】：

目前我正在尝试在处理草图中“来回运行”循环。例如，我可以使用mouseY 来做到这一点——但我想自动拥有它：rect(); 应该逐行水平显示……比如 1、1+next、1+next+next 和 15 行后反转！ 15、14、13、12、11、10、9…… 有了frameCount;，我可以让他们随心所欲地跑下来……但还没有回来。所以我读到了布尔语句……并试图用语法来理解它……语法似乎还可以……但我无法真正得到正确的逻辑来使它工作。有人知道如何以正确的方式真正编写它吗？到目前为止，这是我的代码：

int a;
int i;
int step = 60;
void setup() {
  size(1080, 1080);
}
void draw() {
  background(0);
for (a = 0; a < 15; a++) {
for (i = 0; i < 5; i++) {
  fill(255, 255, 255);
  rect(216*i,60*a,216,60);
}
 
  }
}

这会创建模式 - 一次完成 - 我知道 for (a = 0; a < mouseY; a++) 或 for (a = 0; a < frameCount; a++) 会让它工作，但我想让它自动出现，这需要出现在某个地方 - 但是如何？

a+=step;
if ( a > 15 || a < 0 ){
step = -step;
}

感谢您的帮助

【问题讨论】：

标签： for-loop boolean processing

【解决方案1】：

这可能会更容易，因为您不尝试更改递增步骤的方式，而是更改为每个步骤生成的矩形数量。为了更清楚，请考虑以下代码：

MAX_RECTANGLES = 15;
let frameCount = 0;

while (frameCount < 100) {
  frameCount++;

  step = frameCount % (MAX_RECTANGLES * 2);
  nbRect = MAX_RECTANGLES - Math.abs(MAX_RECTANGLES - step);

  console.log(step, nbRect);
}

frameCount 变量和while 循环只是重新创建p5js 循环，这里有趣的是step 和nbRect 变量：

MAX_RECTANGLES 是显示所有矩形时要显示的矩形数量。在我们的示例中，我们希望显示 15 个矩形。
在我们的示例中，step 将在 0 和 MAX_RECTANGLES * 2 之间变化，这将在 0 和 30 之间变化。
我们将在0 和15 之间改变nbRect，并遵循以下规则：
- 如果0 <= step <= 15 那么0 <= nbRect <= 15
- 如果16 <= step <= 30 那么15 >= nbRect >= 0

运行代码可能更容易理解。通过这种机制，您可以将不断增加的值 (frameCount) 转换为在 0 和 15 之间变化的值。

你可以看看这个p5js codepen，它用我刚才描述的方法做你想做的事。

【讨论】：

【解决方案2】：

谢谢你！所以我把它写成这样的处理：

int MAX_RECT = 18;
int step = 60;

void setup() {
  size(1080, 1080);
  frameRate(30);
}
void draw() {
  background(0);
  int step = (frameCount/2 % MAX_RECT) *2;
  int nbRectangles = MAX_RECT - Math.abs(MAX_RECT - step);

  for (int a = 0; a < nbRectangles; a++) {
    for (int i = 0; i < 5; i++) {
      fill(255, 255, 255);
      rect(216 * i, 60 * a, 216, 60);
    }
  }
}

有没有办法不重绘第一行矩形？我必须检查 Math.abs();函数——我还不熟悉这个……:-(

【讨论】：