在循环中围绕自己的轴旋转每个元素（处理）

Question

我有一个瓷砖图案，我想围绕自己的轴旋转每个元素。 现在我的整个图案在旋转——围绕着左上角第一块瓷砖的轴线…… 如何设置旋转影响循环中的每个图块？ 我用 translate() 等方法尝试过……但逻辑完全让我感到困惑——我的意思是我没有明白……

感谢您的任何帮助或想法！

int horizontal;
int vertical;

void setup() {
  size(730, 1080);
}

void draw() {
  background(0);
  fill(255);


  for (vertical = 0; vertical < 5; vertical++) {

    for (horizontal = 0; horizontal <4; horizontal++) {
      float wave = sin(radians(frameCount));
      pushMatrix();
      rectMode(CENTER);
      rotate(radians(wave*10));
      rect(182*horizontal, 216*vertical, 182, 216);
      popMatrix();
    }
  }
}

Answer 1

rotate 定义一个旋转矩阵并将当前矩阵乘以旋转矩阵。 rotate 因此导致旋转 (0, 0)。
您必须将矩形以 (0, 0) 为中心，旋转它并将旋转的矩形移动到所需的位置 translate:

translate(182*horizontal + 91, 216*vertical + 108);
rotate(radians(wave*10));
rectMode(CENTER);
rect(0, 0, 182, 216);

---

完整代码：

void setup() {
    size(730, 1080);
}

void draw() {
    background(0);
    fill(255);

    for (int vertical = 0; vertical < 5; vertical++) {

        for (int horizontal = 0; horizontal <4; horizontal++) {
            float wave = sin(radians(frameCount));
            pushMatrix();
            translate(182*horizontal + 91, 216*vertical + 108);
            rotate(radians(wave*10));
            rectMode(CENTER);
            rect(0, 0, 182, 216);
            popMatrix();
        }
    }
}