让数组中的 PShapes 在处理中绕自己的轴旋转答案

【问题标题】：Let PShapes in an array rotate on its own axis in Processing让数组中的 PShapes 在处理中绕自己的轴旋转
【发布时间】：2020-12-09 14:39:43
【问题描述】：

我有这段代码，它基本上读取图像的每个像素并用不同的形状重新绘制它。所有形状都将使用sin() 波浪淡化。现在我想在它们淡入时围绕它自己的轴 (shapeMode(CENTER)) 旋转每个“Pixelshape”，而 translate 函数以这种复杂的方式让我头疼。

这是目前为止的代码：

void setup() {
  size(1080, 1350); 
  shapeMode(CENTER);
  img = loadImage("loremipsum.png");
…
}

void draw() {
    background(123);
    for (int gridX = 0; gridX < img.width; gridX++) {
    for (int gridY = 0; gridY < img.height; gridY++) {

      // grid position + tile size
      float tileWidth = width / (float)img.width;
      float tileHeight = height / (float)img.height;
      float posX = tileWidth*gridX;
      float posY = tileHeight*gridY;

      // get current color
      color c = img.pixels[gridY*img.width+gridX];

      // greyscale conversion
      int greyscale = round(red(c)*0.222+green(c)*0.707+blue(c)*0.071);
      int gradientToIndex = round(map(greyscale, 0, 255, 0, shapeCount-1));
    
      //FADEIN
      float wave = map(sin(radians(frameCount*4)), -1, 1, 0, 2);
      //translate(HEADACHE);
      rotate(radians(wave));
      shape(shapes[gradientToIndex], posX, posY, tileWidth * wave, tileHeight * wave);
    }
  }

我尝试了很多计算，但它只是让我的草图爆炸。在我尝试基本相同但只是循环的另一个草图中工作的一个是（等效写入）：

translate(posX + tileWidth/2, posY + tileHeight/2);

我想我只是没有得到矩阵吗？我怎样才能把它们翻译成它的意思？

【问题讨论】：

标签： rotation processing translate

【解决方案1】：

非常感谢@Rabbid76——起初我只是粘贴了你的想法，然后它变得很疯狂——然后我添加了 pushMatrix();和弹出矩阵（）； - 原来你的翻译（）；代码实际上是正确的！然后我不得不将每个形状绘制为 0,0 的 x 和 y 位置更改，就是这样！现在它起作用了！看这里的代码：

   float wave = map(sin(radians(frameCount*4)), -1, 1, 0, 2);
   pushMatrix();
   translate(posX + tileWidth/2, posY + tileHeight/2);
   rotate(radians(wave*180));
   shape(shapes[gradientToIndex], 0, 0, tileWidth*wave , tileHeight*wave );
   popMatrix();

完美！非常感谢！

【讨论】：

【解决方案2】：

rotate 定义一个旋转矩阵并将当前矩阵乘以旋转矩阵。 rotate 因此导致旋转 (0, 0)。
您必须将矩形以 (0, 0) 为中心，旋转它并将旋转后的矩形移动到所需的位置translate。

由于translate 和rotate 将当前矩阵乘以新矩阵，因此您必须分别通过pushMatrix() 存储和恢复矩阵popMatrix()。

图块的中心是 (posX + tileWidth/2, posY + tileHeight/2)：

pushMatrix();
translate(posX + tileWidth/2, posY + tileHeight/2);
rotate(radians(wave));
shape(shapes[gradientToIndex], 
    -tileWidth*wave/2, -tileHeight*wave/2,
    tileWidth * wave, tileHeight * wave);
popMatrix();

【讨论】：

嗨 Rabbid76 - 感谢您的快速回复！真的很感激！是的，我对每个形状的中心都有相同的代码——但是它们在形状函数中的绘制方式让所有东西都不幸爆炸了……
@Cyrill 为什么将tileWidth 和tileHeight 与wave 相乘？你试过代码吗？你见过shape(..., -tileWidth*wave/2, -tileHeight*wave/2, ...)
嗨 Rabbid，是的，我检查了代码 - 试过了 - 不幸的是它爆炸了......我将“tileWidth”和“tileHeight”乘以波浪，这样每个形状都会增长和缩小......这样我就可以为图案设置动画......就像调整大小的淡入淡出……在您的代码中，X 和 Y 位置也乘以波浪……我想让它们就位……但是：让它们在旋转时增长和收缩……:-)
@Cyrill 你是对的。 pushMatrix();/popMatrix();