使用 Processing 逐行绘制嵌套的 For-Loop

Question

我有一个关于使用 Processing 的嵌套 For-Loop 动画的问题。假设我有一个形状网格……我想在一段时间内使用 frameCount 逐行绘制它们。换句话说：第一行 X 轴，第二行 X 轴……等等……我想我可以通过使用正弦波并让它运行通过具有 waveOffset 的网格来实现。但是数学让我头疼……这是我到目前为止想出的：

void setup() {
size(600, 600);
}

void draw () {
  background(255);
  float tiles = 30;
  float tileSize = width/tiles;
  for (int x = 0; x < tiles; x++) {
    for (int y = 0; y < tiles; y++) {
      float waveOffset = map(y, 0, 600, 60, 0);      
      float sin = sin((frameCount*0.05 + waveOffset));
      float wave = map(sin, -1, 1, 0, tileSize);
      fill(0);
      noStroke();
      pushMatrix();
      translate(tileSize/2, tileSize/2);
      ellipse(x*tileSize, y*tileSize, wave, wave);
      popMatrix();
    }
  }
}

如何将偏移量写为 thightt 以便它运行s 通过第一行 X 轴，然后跳到第二行，运行s 通过 X 轴等等…整个网格绘制完成后开始新的…

有没有比使用波函数更好的方法？感谢您提供任何帮助！

祝一切顺利！

Answer 1

我真的不知道你所说的“运行 through nth row x-axis”是什么意思，但是一个想法是像这样制作外部 for 循环：

for (int x = 0; x < frameCount % tiles; x++) {

所以每一帧都会绘制一列额外的形状。

Answer 2

完美！谢谢JSTL！我做了一些细微的改变——但这是我想要实现的目标！

    void draw () {
  background(255);
  float tiles = 100;
  float tileSize = width/tiles;
for (int x = 0; x < tiles; x++) {
    for (int y = 0; y < frameCount*100/tiles % tiles; y++) {
      fill(0);
      noStroke();
      pushMatrix();
      translate(tileSize/2, tileSize/2);
      ellipse(x*tileSize, y*tileSize, tileSize, tileSize);
      popMatrix();
    }
  }
}

使用 Processing 逐行绘制嵌套的 For-Loop

Drawing nested For-Loop line by line with Processing

processing

loops

nested

nested-loops