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

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();
        }
    }
}

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

Rotate each element around own axis in a loop (Processing)

processing

loops

rotation

translate