如何在处理中为平铺网格设置动画

如何解决如何在处理中为平铺网格设置动画

我目前正在尝试在 PROCESSING.... 创建一个瓷砖网格，我希望每个瓷砖出现在另一个之后。 （第一行，从左到右，第二行，从左到右等等）......我让它通过嵌套循环中的 frameCount 和 modulo 的组合使每一行图块一一出现......但是如何让每个瓷砖一个接一个出现？ 我试过在 x 轴循环上使用相同的方法 - 这使得网格从左/上到右/下出现......我尝试通过乘以 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);
    }
  }
}

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

解决方法

我的处理由于某种原因坏了，您可以将以下代码粘贴到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/