rotation - 让数组中的 PShapes 在 Processing 中绕自己的轴旋转

Question

我有这段代码基本上可以读取图像的每个像素并用不同的形状重新绘制它。使用 sin() wave 时所有形状都会变淡。 现在我想在它们淡入时围绕其自己的轴 (shapeMode(CENTER)) 旋转每个“Pixelshape”，翻译功能以这种复杂的方式让我头疼。

这是目前的代码:

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

我想我只是没有正确理解矩阵？我怎样才能将它们翻译到它的意思？

Answer 1

非常感谢@Rabbid76——起初我只是粘贴了你的想法，然后它变得疯狂了——然后我添加了 pushMatrix();和弹出矩阵()； – 结果是你的 translate();代码实际上是正确的! 然后我不得不将绘制每个形状的 x 和 y 位置更改为 0,0， 就是这样!现在可以了! 请参阅此处的代码:

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

完美!非常感谢!