处理方形堆叠循环

Question

这是我第一次在这里写作，所以我会很直接，我一直在尝试重新创建此图像：

到目前为止我得到的所有代码是：

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

void draw() {
rectMode(CENTER);
recta();
}


void recta() {
noFill();
int a = 10;
int y = 250;

for (int x = 0; x<20; x++) {

pushMatrix();
translate(y, y);
rect(0, 0, a, a);
popMatrix();
rotate(radians(2.0*PI));

stroke(0, 0, 0);
a= a - 20;
 }
}

我不知道下一步该做什么，因为这是我从中得到的：

所以我想寻求帮助如何获得与图像相同的结果。

Answer 1

你太接近了！

您使用 pushMatrix()/popMatrix() 来隔离坐标系绝对是正确的，但是您可能不小心将旋转放在了 popMatrix() 之后，这违背了目的。您可能打算让每个正方形彼此独立旋转，而不是将 2 * PI 累积到全局旋转。

另一个问题是你在 for 循环中的每次迭代都旋转相同的角度 (2 * PI)，并且旋转是 360 度，所以即使你像这样固定旋转：

pushMatrix();
translate(y, y);
rotate(radians(2.0*PI));
rect(0, 0, a, a);
popMatrix();

你会得到缩放效果：（小注 2.0 * PI 已作为 TWO_PI 常量存在于 Processing 中）

要获得螺旋形外观效果，需要增加每次迭代的角度（例如 x = 0、旋转 = 0、x = 1、旋转 = 5、x = 2、旋转 = 10 等）。角度增量完全取决于您：根据您如何将 x 增量映射到旋转角度，您将获得更紧或更松的螺旋。

说到映射，Processing 有一个 map() 函数，可以非常容易地从一个数字范围（假设 x 从 0 到 19）映射到另一个数字（假设 0 弧度到 PI 弧度） :

for (int x = 0; x < 20; x++) {
    pushMatrix();
    translate(y, y);
    rotate(map(x, 0, 19, 0, PI));
    rect(0, 0, a, a);
    popMatrix();
    a = a - 20;
  }

这是基于您的代码的基本草图：

int a = 10;
int y = 250;

void setup() {
  size(500, 500);
  rectMode(CENTER);
  noFill();
  background(255);
  recta();
}

void recta() {
  for (int x = 0; x < 20; x++) {
    pushMatrix();
    translate(y, y);
    rotate(map(x, 0, 19, 0, PI));
    rect(0, 0, a, a);
    popMatrix();
    a = a - 20;
  }
}

我删除了 draw()，因为它正在渲染相同的帧而没有任何变化：在 setup() 中绘制一次使用更少的 CPU/power 实现相同的视觉效果。

您可以使用 draw()，但不妨添加一些交互性或动画来探索形状。这是上面的调整版本，带有评论：

int y = 250;

void setup() {
  size(500, 500);
  rectMode(CENTER);
  noFill();
}

void draw(){
  background(255);
  recta();
}

void recta() {
  // map mouse X position to -180 to 180 degrees (as radians)
  float maxAngle = map(mouseX, 0, width, -PI, PI);
  // reset square size
  int a = 10;
  // for each square
  for (int x = 0; x < 20; x++) {
    // isolate coordinate space
    pushMatrix();
    // translate first
    translate(y, y);
    // then rotate: order matters
    // map x value to mouse mapped maximum rotation angle
    rotate(map(x, 0, 19, 0, maxAngle));
    // render the square
    rect(0, 0, a, a);
    popMatrix();
    // decrease square size
    a = a - 20;
  }
}

记住转换顺序很重要（例如 translate() 然后 rotate() 与 rotate() 然后 translate() 相比会产生不同的效果。玩得开心！

处理方形堆叠循环

Processing Square Stacking loop

processing