在处理双循环中的每个单独元素时遇到困难

Question

因此，如果运行此草图，您将看到加号的网格。我想旋转每个人，但我似乎无法弄清楚。我尝试翻译，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(); 
} 

Answer 1

旋转轴始终位于原点（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/

Answer 2

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

你需要这样做，因为你不想旋转积累。如果将一个形状旋转30度而另一个旋转45度，则不希望第二个形状旋转（30 + 45）度。

Here是pushMatrix()的参考文献。

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

确保您以该坐标为原点画出形状！现在，当您需要在平移之后使用0,0作为原点时，您将以x，y作为原点绘制这些形状。

Here是translate()的参考。

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

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

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