如何在 Processing 中为平铺网格制作动画

Question

我目前正尝试在处理中创建一个图块网格....我希望每个图块都依次出现。（第一行，从左到右，第二行，从左到右等等）......我得到它让每一行瓷砖通过嵌套循环中的 frameCount 和模数的组合一个接一个地出现......但是如何让每一块瓷砖接连出现呢？我已经尝试在 x 轴循环上使用相同的方法 - 这使得网格从 LEFT/UP 出现到 RIGHT/DOWN... 我尝试通过乘以 10 来更改 frameCount.... 但是这似乎不是正确的数学......我需要在其中一个循环上使用条件语句吗？就像瓷砖在第二行、第三行等的时间相等？这是我到目前为止想出的：

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

void draw() {
  background(255);
  rectMode(CENTER);
  float tiles = 10;
  float tileSize = width/tiles;
  translate(tileSize/2, tileSize/2);
  for (int x = 0; x < tiles; x++) {
    for (int y = 0; y < frameCount/tiles % tiles; y++) { 
      fill(0, 255, 0);
      rect(x*tileSize, y*tileSize, tileSize, tileSize);
    }
  }
}

感谢您的任何帮助或提示！

Answer 1

我的Processing由于某些原因中断了，您可以将以下代码传递给p5js在线编辑器

这是你想要的吗？

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  let tiles = 10;
  let tileSize = width/tiles;
  for(let y = 0; y < tiles; y++){
    for(let x = 0; x < tiles; x++){
      if(x + 10*y < frameCount)
      rect(x*tileSize, y*tileSize, tileSize, tileSize)
    }
  }
  
}

https://editor.p5js.org/

如何在 Processing 中为平铺网格制作动画

How to animate a tiled grid in Processing

java

processing

grid

nested-loops