使用 Processing 在双 for 循环中旋转每个单独的元素时遇到问题

Posted 2023-03-12

【中文标题】使用 Processing 在双 for 循环中旋转每个单独的元素时遇到问题

【英文标题】：Having trouble rotating each individual element in a double for loop with Processing

【发布时间】：2015-12-29 09:33:10

【问题描述】：

因此，如果您运行此草图，您会看到一个加号网格。我想轮换每个人，但我似乎无法弄清楚。我试过翻译，pushMatrix/popMatrix。但也许它不在正确的地方。我现在删除了它，也许有人可以指出如何围绕自己的轴旋转每个加号。

int rib;
void setup() 
  size(1200, 800);
  rib = 7;



void draw() 
  background(0);
  for (int i = -100; i < width+100; i = i + rib * 10) 
    for (int j = -100; j < height+100; j = j + rib * 10) 
      noStroke();
      fill(255);

      plus(i, j);
      plus(3*rib+i, 1*rib+j);
      plus(6*rib+i, 2*rib+j);
      plus(9*rib+i, 3*rib+j);
      plus(2*rib+i, 4*rib+j);
      plus(5*rib+i, 5*rib+j);
      plus(8*rib+i, 6*rib+j);
      plus(1*rib+i, 7*rib+j);
      plus(4*rib+i, 8*rib+j);
      plus(7*rib+i, 9*rib+j);
    
  


void plus(int x, int y) 
  pushMatrix();
  beginShape();
  vertex(x+0, y+0);
  vertex(x+0, y+-rib);
  vertex(x+rib, y+-rib);
  vertex(x+rib, y+0);
  vertex(x+2*rib, y+0);
  vertex(x+2*rib, y+rib);
  vertex(x+rib, y+rib);
  vertex(x+rib, y+2*rib);
  vertex(x+0, y+2*rib);
  vertex(x+0, y+rib);
  vertex(x+-rib, y+rib);
  vertex(x+-rib, y+0);
  endShape(CLOSE);
  popMatrix();

【问题讨论】：

不清楚你要什么。这段代码应该绘制一个 100x100 的网格，其中某个元素是符号 '+' ？你说的旋转是什么意思？ “+”号的旋转轴是什么？所有“+”符号的轴都相同吗？

【参考方案1】：

第一步：使用pushMatrix()保存当前矩阵的状态。

您需要这样做，因为您不希望旋转累积。如果您将一个形状旋转 30 度，另一个旋转 45 度，则您不希望第二个形状旋转 (30+45) 度。

Here 是pushMatrix() 的引用。

第 2 步：使用 translate() 将形状移动到需要的位置。

确保随后以该坐标为原点绘制形状！现在，当您需要在平移后使用 0,0 作为原点时，您正在绘制以 x,y 作为原点的形状。

Here 是translate() 的引用。

第 3 步：使用rotate() 围绕原点旋转形状。

请记住，您现在已将 0,0 “移动”到您传递给 translate() 函数的 x,y！

第 4 步：画出你的形状。

再次，记住使用 0,0 作为原点，而不是 x,y。

Here 是rotate() 的引用。

第 5 步：调用 popMatrix() 以恢复调用 `pushMatrix()' 时的矩阵。

这会将旋转和平移恢复正常，因此下一次平移和旋转不会累积。

Here 是popMatrix() 的引用。

第 6 步：重复。

将上述所有内容放入一个函数中，然后从 for 循环中调用它以绘制多个形状。

这是一个绘制矩形的简化示例：

void setup() 
  size(500, 500);


void draw() 
  background(0);

  noStroke();
  fill(255);

  plus(100, 100);
  plus(200, 200);


void plus(float x, float y) 
  pushMatrix();
  translate(x, y);
  rotate(mouseX);
  rect(-20, -40, 40, 80);
  popMatrix();

【参考方案2】：

旋转轴始终位于原点 (0,0)。所以我们必须将原点平移到我们希望旋转轴所在的位置。在您的情况下，以 (0,0) 为中心绘制加号，然后使用 translate 将其移动到所需位置。我用一个更简单的正方形做了这个例子，但想法是一样的。 （我这里没时间了：） 看看这对你有没有帮助。

void setup() 
  size(1200, 800);
  noStroke();
  fill(255);



void draw() 
  background(0);
  float a  = map(mouseY, 0, height, 30, 270);
  for (int i = -100; i < width+100; i+=40) 
    for (int j = -100; j < height+100; j+=40) 

      plus(i, j, a);
    
  


void plus(int x, int y, float a) 

  pushMatrix();
  translate(x, y);
  rotate(radians(a));
  beginShape();
  vertex(-10, -10);
  vertex(10, -10);
  vertex(10, 10);
  vertex(-10, 10);
  endShape(CLOSE);
  popMatrix();

您可能会喜欢这些教程：

http://processing.org/tutorials/transform2d/

https://processing.org/tutorials/pshape/