旋转单个形状

Question

我目前正致力于在 Processing 中复制一件艺术品。但是我遇到了旋转功能的问题。

因此可以找到图像here。您可以在下面看到我的处理代码。正如我们所看到的，不同的部分是椭圆的旋转。

我试过更改原点，例如：

translate(midpoint - (position*tenth + layer*tenth/2.0), i*tenth + layer*tenth/2.0,)

然后在 (0,0) 处旋转并创建形状，但没有按照我的意愿进行！

如有任何想法，我们将不胜感激

这会将原点更改为我希望绘制椭圆的 x, y 位置。

void setup(){
  size(550,550);
  background(187,182,179);

  midpoint = height/2.0;
  tenth = height/10.0;
  circle_radius = 20.0;
}

float circle_radius = 15.0;
float midpoint;
float tenth;
float base_colour = 0;

float getColour(float x_value){
  float colour_val = ((x_value - 50.0)*255.0)/(450.0-50.0);

  if(floor(colour_val/255.0)%2 == 0){
    return colour_val%255.0;
  }
  return 225.0 - (colour_val%255.0);
}

void draw(){
  noStroke();
  background(187,182,179);
  base_colour += 5.0;
  for(int layer = 0; layer < 2; layer++){
    for(int i = 1; i < 12; i++){
      for (int position = 0; position < 5 - layer; position+=1){
         if(i*tenth > tenth && i*tenth + layer*tenth/2.0 < height - tenth){

           fill(getColour(base_colour + midpoint - position*tenth - layer*tenth/2.0 - (i*tenth - layer*tenth/2.0)));
           //rotate(PI/12.0);
           ellipse(midpoint - (position*tenth + layer*tenth/2.0), i*tenth + layer*tenth/2.0,  2.0*circle_radius/3.0, circle_radius);

           fill(getColour(base_colour + midpoint + position*tenth + layer*tenth/2.0 - (i*tenth - layer*tenth/2.0)));
          // rotate(PI/);
           ellipse(midpoint + position*tenth + layer*tenth/2.0, i*tenth + layer*tenth/2.0, 2.0*circle_radius/3.0, circle_radius);
         }  
      }
    }
 }
}

Answer 1

主要问题似乎是在椭圆的平移或定位之前应用了旋转命令。

避免这种转换顺序问题的方法是先使用 translate()，然后使用 rotate()，然后在 (0, 0) 处绘制形状。

第二个问题是第一个椭圆的旋转应用于第二个椭圆的旋转 - 您需要将它们保持为离散操作。我们可以使用 pushMatrix() 和 popMatrix() 来实现这一点，因为这两种方法之间的每个转换方法都与此 draw() 调用中的其他转换保持分离。

这是代码（所提供代码中的第一行和前几行未更改）。

if(i*tenth > tenth && i*tenth + layer*tenth/2.0 < height - tenth){           
       pushMatrix(); // push and pop matrix will keep the transformations between them separate from other transformations happening in the draw method
         fill(getColour(base_colour + midpoint - position*tenth - layer*tenth/2.0 - (i*tenth - layer*tenth/2.0)));           
         // removing the coordinate calculations from the ellipse command to a translate command (and putting 0, 0, in their place in the ellipse method
         translate(midpoint - (position*tenth + layer*tenth/2.0), i*tenth + layer*tenth/2.0);
         rotate(PI/12.0);           // rotating applied after the translate, so we don't get an order of transformation problem.
         ellipse(0, 0,  2.0*circle_radius/3.0, circle_radius);
       popMatrix();

       pushMatrix(); 
         fill(getColour(base_colour + midpoint + position*tenth + layer*tenth/2.0 - (i*tenth - layer*tenth/2.0)));
         translate(midpoint + position*tenth + layer*tenth/2.0, i*tenth + layer*tenth/2.0);
         rotate(PI/-12.0);          // No divisor supplied in original code so I guessed the opposite number to make the ellipses rotate the opposite way
         ellipse(0, 0, 2.0*circle_radius/3.0, circle_radius);
       popMatrix();
     }

旋转单个形状

Rotate individual shape

processing

rotation