processing - 处理方形堆叠循环

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

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

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

标签： processing

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

要获得那种螺旋状的效果，需要增加每次迭代的角度（例如 x = 0、rotation = 0、x = 1、rotation = 5、x = 2、rotation = 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/功率实现相同的视觉效果。

您可以使用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()then与thenrotate()相比会产生不同的效果）。玩得开心！rotate()translate()