时间戳

首页 > 解决方案 > 如何在处理中为平铺网格设置动画

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

问题描述

我目前正在尝试在 PROCESSING.... 中创建一个瓷砖网格，我希望每个瓷砖一个接一个地出现。（第一行，从左到右，第二行，从左到右等等）....我让它通过嵌套循环中的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);
    }
  }
}

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

标签： javagridprocessingnested-loops

解决方案

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

推荐阅读